SHARE
TWEET

Untitled

a guest Jun 27th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { View, Image, StyleSheet, ImageBackground, Dimensions, ScrollView, Linking } from 'react-native';
  3. import { H3, Text, Card, CardItem, Button, Container, Content, Toast } from 'native-base';
  4. import Carousel from 'react-native-snap-carousel';
  5. import HTML from 'react-native-render-html';
  6. import axios from 'axios';
  7. import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
  8. import { Callout } from 'react-native-maps';
  9. import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
  10. import RF from 'react-native-responsive-fontsize';
  11. import Loading from '../components/Loading';
  12. import AppHeader from '../components/AppHeader';
  13.  
  14. export default class PageDetailCarousel extends Component {
  15.  
  16.     constructor(props) {
  17.         super(props);
  18.         this.state = {
  19.             currentIndex: 0,
  20.             activeSlide: 0,
  21.             type: 'carousel',
  22.             isLoading: false,
  23.             error: '',
  24.             items: []
  25.         }
  26.         this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
  27.             this.componentDidMount();
  28.         });
  29.     }
  30.  
  31.     componentDidMount() {
  32.         this.getItems(this.props.url);
  33.     }
  34.  
  35.     showErrorToast = () => {
  36.         this.setState({ isLoading: false });
  37.         Toast.show({
  38.             text: I18n.t('internetErrorText'),
  39.             type: "danger",
  40.             x: 0,
  41.             y: 0,
  42.             duration: 3000,
  43.             position: "top"
  44.         });
  45.     }
  46.  
  47.     getItems = (url_path) => {
  48.         this.setState({ isLoading: true });
  49.         axios.create({ headers: { 'from-app': '1' } }).get(url_path)
  50.             .then(result =>
  51.                 this.setState({
  52.                     items: result.data.page,
  53.                     isLoading: false
  54.                 })
  55.             )
  56.             .catch(error => this.showErrorToast());
  57.     }
  58.  
  59.     switchView = (type) => {
  60.         this.setState({ type: type });
  61.     }
  62.  
  63.     _renderItem = ({ item }) => {
  64.         return (
  65.             <Image source={{ uri: item.banner_image }} style={styles.imageBackground} />
  66.         );
  67.     }
  68.  
  69.     render() {
  70.  
  71.         const { isLoading, items } = this.state;
  72.         if (isLoading || items.length === 0) {
  73.             return <Loading />
  74.         }
  75.         let main_type;
  76.         if (this.state.type === 'map') {
  77.             main_type = <View>
  78.                 <MapView
  79.                     provider={PROVIDER_GOOGLE}
  80.                     ref={c => this.mapView = c}
  81.                     style={styles.mapStyle}
  82.                     region={{
  83.                         latitude: 40.404917,
  84.                         longitude: 49.838502,
  85.                         latitudeDelta: 0.0922,
  86.                         longitudeDelta: 0.0421
  87.                     }}
  88.                 >
  89.                     <MapView.Marker
  90.                         coordinate={{
  91.                             latitude: parseFloat(this.props.ltd),
  92.                             longitude: parseFloat(this.props.lng)
  93.                         }}
  94.                     >
  95.                         <Image source={require('../assets/location.png')} />
  96.                         <Callout style={styles.calloutStyle}>
  97.                             <Card>
  98.                                 <CardItem cardBody>
  99.                                     <ImageBackground source={{ uri: items.banner_image }}
  100.                                         style={styles.imageStyle}
  101.                                         resizeMode='cover'></ImageBackground>
  102.                                 </CardItem>
  103.                                 <CardItem>
  104.                                     {items.blocks.filter(i => i.anchor === 'overview').map(i =>
  105.                                         <Text>{i.title}</Text>
  106.                                     )}
  107.                                 </CardItem>
  108.                             </Card>
  109.                         </Callout>
  110.                     </MapView.Marker>
  111.                 </MapView>
  112.             </View>
  113.         } else {
  114.             main_type = <View style={styles.carouselViewStyle}><Carousel
  115.                 ref={(c) => { this._carousel = c; }}
  116.                 onPress={() => { this._carousel.snapToNext(); }}
  117.                 onSnapToItem={(index) => this.setState({ activeSlide: index })}
  118.                 data={[{ banner_image: items.banner_image }]}
  119.                 renderItem={this._renderItem}
  120.                 sliderWidth={410}
  121.                 itemWidth={310}
  122.             /></View>
  123.         }
  124.         return (
  125.             <Container>
  126.                 <AppHeader title={this.props.title} type={'detail'} />
  127.                 {main_type}
  128.                 <View style={styles.scrollMenuStyle}>
  129.                     <View style={{ flex: 1 }}>
  130.                         <Button small transparent onPress={() => this.switchView('carousel')}>
  131.                             <Text style={styles.menuTextStyle}>About</Text>
  132.                         </Button>
  133.                     </View>
  134.                     <View style={{ flex: 1 }}>
  135.                         <Button small transparent onPress={() => this.switchView('carousel')}>
  136.                             <Text style={styles.menuTextStyle}>Offer</Text>
  137.                         </Button>
  138.                     </View>
  139.                     <View style={{ flex: 1 }}>
  140.                         <Button small transparent onPress={() => this.switchView('carousel')}>
  141.                             <Text style={styles.menuTextStyle}>Contact</Text>
  142.                         </Button>
  143.                     </View>
  144.                     {(isNaN(parseFloat(this.props.ltd))) ? (<View></View>) : (<View style={{ flex: 1 }}>
  145.                         <Button small transparent onPress={() => this.switchView('map')}>
  146.                             <Text style={styles.menuTextStyle}>Map</Text>
  147.                         </Button>
  148.                     </View>)}
  149.                 </View>
  150.                 <Content ref={(ref) => {
  151.                     this.ListView_Ref = ref;
  152.                 }} style={styles.infoCardStyle}>
  153.                     <ScrollView>
  154.                         <View>
  155.                             <H3 style={styles.titleStyle}>{items.title}</H3>
  156.                             {items.blocks.filter(i => i.anchor === 'overview').map(i =>
  157.                                 i.blocks.map(i1 =>
  158.                                     <View>
  159.                                         <View style={styles.textStyle}>
  160.                                             <HTML html={i1.body} />
  161.                                         </View>
  162.                                     </View>
  163.                                 )
  164.                             )}
  165.                         </View>
  166.                         <View style={styles.line} />
  167.                         <View style={styles.textStyle}>
  168.                             {items.blocks.filter(i => i.anchor === 'what-you-get').map(i =>
  169.                                 i.blocks.map(i1 =>
  170.                                     <HTML html={i1.body} />
  171.                                 )
  172.                             )}
  173.                         </View>
  174.                         <View style={styles.line} />
  175.                         <View style={styles.textStyle}>
  176.                             {items.blocks.filter(i => i.anchor === 'hours').map(i =>
  177.                                 i.blocks.map(i1 =>
  178.                                     <HTML html={i1.body} />
  179.                                 )
  180.                             )}
  181.                         </View>
  182.                         {(typeof items.enquire_now !== "undefined") ?
  183.                             (<Button onPress={() => { Linking.openURL(items.enquire_now) }} style={styles.btnStyle} small><Text> Enquire now </Text></Button>) :
  184.                             (<View></View>)}
  185.                     </ScrollView>
  186.                 </Content>
  187.             </Container>
  188.         );
  189.     }
  190.  
  191. }
  192.  
  193. const styles = StyleSheet.create({
  194.     viewStyle: {
  195.         paddingTop: 20,
  196.         paddingBottom: 20,
  197.         borderRadius: 15
  198.     },
  199.     carouselViewStyle: {
  200.         height: hp('30%'),
  201.         backgroundColor: '#F5F7F6',
  202.         alignItems: 'center',
  203.         justifyContent: 'center'
  204.     },
  205.     infoCardStyle: {
  206.         marginTop: 10,
  207.         shadowOpacity: 0
  208.     },
  209.     scrollMenuStyle: {
  210.         flexDirection: 'row',
  211.         backgroundColor: '#fff',
  212.         paddingLeft: 5,
  213.         paddingRight: 20,
  214.         paddingTop: 20,
  215.         paddingBottom: 10,
  216.         marginLeft: 20
  217.     },
  218.     menuTextStyle: {
  219.         flex: 1,
  220.         color: '#333',
  221.         fontSize: RF(1.5)
  222.     },
  223.     titleStyle: {
  224.         fontWeight: 'bold',
  225.         paddingLeft: 20,
  226.         paddingRight: 20,
  227.         paddingBottom: 20,
  228.         paddingTop: 10
  229.     },
  230.     textStyle: {
  231.         paddingLeft: 20,
  232.         paddingRight: 20,
  233.         paddingBottom: 20
  234.     },
  235.     cardStyle: {
  236.         borderRadius: 15
  237.     },
  238.     btnStyle: {
  239.         backgroundColor: 'red',
  240.         marginLeft: 20,
  241.         marginBottom: 20
  242.     },
  243.     imageBackground: {
  244.         height: hp('50%'),
  245.         width: null,
  246.         margin: 20,
  247.         flex: 1,
  248.         borderRadius: 15
  249.     },
  250.     line: {
  251.         borderBottomColor: 'black',
  252.         borderBottomWidth: 1,
  253.         marginLeft: 20,
  254.         marginRight: 20
  255.     },
  256.     mapStyle: {
  257.         width: Dimensions.get('window').width,
  258.         height: 248
  259.     },
  260.     calloutStyle: {
  261.         position: 'absolute',
  262.         minWidth: 200,
  263.         minHeight: 60
  264.     },
  265.     imageStyle: {
  266.         height: 120,
  267.         width: null
  268.     },
  269.     sectionViewStyle: {
  270.         paddingLeft: 10,
  271.         paddingRight: 10
  272.     }
  273. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top