API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 11th, 2019
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
ECMAScript 12.55 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from 'react';
  2. import { View, Image, StyleSheet, ImageBackground, Dimensions, ScrollView, Linking, TouchableWithoutFeedback } from 'react-native';
  3. import { H3, Text, Card, CardItem, Button, Container, Content, Toast } from 'native-base';
  4. import Carousel, { Pagination } 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.             content: null,
  26.             tab_id: null
  27.         }
  28.         this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
  29.             this.componentDidMount();
  30.         });
  31.     }
  32.  
  33.     componentDidMount() {
  34.         this.getItems(this.props.url);
  35.     }
  36.  
  37.     showErrorToast = () => {
  38.         this.setState({ isLoading: false });
  39.         Toast.show({
  40.             text: I18n.t('internetErrorText'),
  41.             type: "danger",
  42.             x: 0,
  43.             y: 0,
  44.             duration: 3000,
  45.             position: "top"
  46.         });
  47.     }
  48.  
  49.     getItems = (url_path) => {
  50.         this.setState({ isLoading: true });
  51.         axios.create({ headers: { 'from-app': '1' } }).get(url_path)
  52.             .then(result =>
  53.                 this.setState({
  54.                     items: result.data.page,
  55.                     isLoading: false
  56.                 })
  57.             )
  58.             .catch(error => this.showErrorToast());
  59.     }
  60.  
  61.     switchView = (type) => {
  62.         this.setState({ type: type, tab_id: type });
  63.     }
  64.  
  65.     changeContent = (anchor, id) => {
  66.         this.state.items.blocks.filter(i => "#" + i.anchor === anchor).map(i =>
  67.             i.blocks.map(i1 => {
  68.                 (i.anchor === 'overview') ? (this.setState({
  69.                     content: <View><H3 style={styles.titleStyle}>{this.state.items.title}</H3>
  70.                         <View style={styles.textStyle}>
  71.                             <HTML html={i1.body} />
  72.                         </View></View>, type: 'carousel', tab_id: id
  73.                 })) : (this.setState({
  74.                     content: <View style={styles.textStyle}>
  75.                         <HTML html={i1.body} />
  76.                     </View>, type: 'carousel', tab_id: id
  77.                 }))
  78.             }
  79.             )
  80.         )
  81.     }
  82.  
  83.     _renderItem = ({ item }) => {
  84.         return (
  85.             <Image source={{ uri: item.image }} style={styles.imageBackground} />
  86.         );
  87.     }
  88.  
  89.     get pagination() {
  90.         const { items, activeSlide } = this.state;
  91.         return (
  92.             <Pagination
  93.                 dotsLength={items.banner_images.length}
  94.                 activeDotIndex={activeSlide}
  95.                 dotStyle={{
  96.                     width: 10,
  97.                     height: 10,
  98.                     padding: 1,
  99.                     borderRadius: 5,
  100.                     marginHorizontal: 8,
  101.                     backgroundColor: 'red'
  102.                 }}
  103.                 inactiveDotStyle={{
  104.                     // Define styles for inactive dots here
  105.                 }}
  106.                 inactiveDotOpacity={0.4}
  107.                 inactiveDotScale={0.6}
  108.             />
  109.         );
  110.     }
  111.  
  112.     render() {
  113.  
  114.         const { isLoading, items, content, tab_id } = this.state;
  115.         if (isLoading || items.length === 0) {
  116.             return <Loading />
  117.         }
  118.         let main_type;
  119.         if (this.state.type === 'map') {
  120.             main_type = <View>
  121.                 <MapView
  122.                     provider={PROVIDER_GOOGLE}
  123.                     ref={c => this.mapView = c}
  124.                     style={styles.mapStyle}
  125.                     region={{
  126.                         latitude: 40.404917,
  127.                         longitude: 49.838502,
  128.                         latitudeDelta: 0.0922,
  129.                         longitudeDelta: 0.0421
  130.                     }}
  131.                 >
  132.                     <MapView.Marker
  133.                         coordinate={{
  134.                             latitude: parseFloat(this.props.ltd),
  135.                             longitude: parseFloat(this.props.lng)
  136.                         }}
  137.                     >
  138.                         <Image source={require('../assets/location.png')} />
  139.                         <Callout style={styles.calloutStyle}>
  140.                             <Card>
  141.                                 <CardItem cardBody>
  142.                                     <ImageBackground source={{ uri: items.banner_image }}
  143.                                         style={styles.imageStyle}
  144.                                         resizeMode='cover'></ImageBackground>
  145.                                 </CardItem>
  146.                                 <CardItem>
  147.                                     <Text>{items.title}</Text>
  148.                                 </CardItem>
  149.                             </Card>
  150.                         </Callout>
  151.                     </MapView.Marker>
  152.                 </MapView>
  153.             </View>;
  154.         } else {
  155.             if (typeof items.banner_images === "undefined" || items.banner_images.length === 0) {
  156.                 main_type = <View style={{ flex: 1 }}>
  157.                     <Image resizeMode='cover' style={styles.itemImage} source={{ uri: items.banner_image }} />
  158.                 </View>
  159.             } else {
  160.                 main_type = <View style={styles.carouselViewStyle}><Carousel
  161.                     ref={(c) => { this._carousel = c; }}
  162.                     onPress={() => { this._carousel.snapToNext(); }}
  163.                     onSnapToItem={(index) => this.setState({ activeSlide: index })}
  164.                     data={items.banner_images}
  165.                     renderItem={this._renderItem}
  166.                     sliderWidth={410}
  167.                     itemWidth={310}
  168.                 />
  169.                     {this.pagination}
  170.                 </View>;
  171.             }
  172.         }
  173.         return (
  174.             <Container>
  175.                 <AppHeader title={this.props.title} type={'detail'} />
  176.                 {main_type}
  177.                 {(typeof items.tabs !== "undefined") ?
  178.                     (<ScrollView style={styles.scrollViewStyle} horizontal={true} showsHorizontalScrollIndicator={false}>
  179.                         <View style={styles.listTypeViewStyle}>
  180.                             {(typeof items.tabs === "undefined") ? (<View></View>) :
  181.                                 (items.tabs.map(i =>
  182.                                     <TouchableWithoutFeedback style={{ height: 10 }} onPress={() => this.changeContent(i.anchor, i.id)}>
  183.                                         {(tab_id === i.id) ?
  184.                                             (
  185.                                                 <View style={[styles.listItemStyle, { backgroundColor: '#FF0014', borderColor: '#FF0014' }]}>
  186.                                                     <Text style={[styles.tabTextStyle, { color: '#fff' }]}>{i.title}</Text>
  187.                                                 </View>
  188.                                             ) :
  189.                                             (
  190.                                                 <View style={styles.listItemStyle}>
  191.                                                     <Text style={styles.tabTextStyle}>{i.title}</Text>
  192.                                                 </View>
  193.                                             )}
  194.                                     </TouchableWithoutFeedback>
  195.                                 ))
  196.                             }
  197.                             {(isNaN(parseFloat(this.props.ltd))) ? (<View></View>) : (
  198.                                 <TouchableWithoutFeedback onPress={() => this.switchView('map')}>
  199.  
  200.                                     {(tab_id === 'map') ?
  201.                                         (
  202.                                             <View style={[styles.listItemStyle, { backgroundColor: '#FF0014', borderColor: '#FF0014' }]}>
  203.                                                 <Text style={[styles.tabTextStyle, { color: '#fff' }]}>Map</Text>
  204.                                             </View>
  205.                                         ) :
  206.                                         (
  207.                                             <View style={styles.listItemStyle}>
  208.                                                 <Text style={styles.tabTextStyle}>Map</Text>
  209.                                             </View>
  210.                                         )}
  211.                                 </TouchableWithoutFeedback>
  212.                             )}
  213.                         </View>
  214.                     </ScrollView>) : (<View></View>)
  215.                 }
  216.                 <Content style={styles.infoCardStyle}>
  217.                     {(content !== null) ? (content) :
  218.                         (items.blocks.filter(i => i.anchor === 'overview' || i.anchor === 'free-entry').map(i =>
  219.                             i.blocks.map(i1 =>
  220.                                 <View><H3 style={styles.titleStyle}>{items.title}</H3>
  221.                                     <View style={styles.textStyle}>
  222.                                         <HTML html={i1.body} />
  223.                                     </View></View>
  224.                             )
  225.                         ))}
  226.                     {(typeof items.enquire_now !== "undefined") ?
  227.                         (<Button onPress={() => { Linking.openURL(items.enquire_now) }} style={styles.btnStyle} small><Text> Enquire now </Text></Button>) :
  228.                         (<View></View>)}
  229.                 </Content>
  230.             </Container>
  231.         );
  232.     }
  233.  
  234. }
  235.  
  236. const styles = StyleSheet.create({
  237.     viewStyle: {
  238.         paddingTop: 20,
  239.         paddingBottom: 20,
  240.         borderRadius: 15
  241.     },
  242.     carouselViewStyle: {
  243.         flex: 1,
  244.         backgroundColor: '#F5F7F6',
  245.         alignItems: 'center',
  246.         justifyContent: 'center'
  247.     },
  248.     scrollViewStyle: {
  249.         flexGrow: 0.07,
  250.         borderBottomWidth: 1,
  251.         borderBottomColor: '#c4c5c4'
  252.     },
  253.     listTypeViewStyle: {
  254.         alignItems: 'center',
  255.         justifyContent: 'center',
  256.         flexDirection: 'row',
  257.         elevation: 3,
  258.         paddingLeft: 20,
  259.         paddingRight: 20
  260.     },
  261.     listItemStyle: {
  262.         borderWidth: 1,
  263.         backgroundColor: '#F5F7F6',
  264.         borderColor: '#c4c5c4',
  265.         alignItems: 'center',
  266.         justifyContent: 'center',
  267.         marginRight: 10,
  268.         borderRadius: 30
  269.     },
  270.     tabTextStyle: {
  271.         paddingTop: 5,
  272.         paddingBottom: 5,
  273.         paddingLeft: 10,
  274.         paddingRight: 10,
  275.         fontSize: RF('1.6'),
  276.         color: '#333'
  277.     },
  278.     infoCardStyle: {
  279.         flex: 1,
  280.         shadowOpacity: 0
  281.     },
  282.     scrollMenuStyle: {
  283.         backgroundColor: '#fff',
  284.         paddingLeft: 5,
  285.         paddingRight: 20,
  286.         paddingTop: 20,
  287.         paddingBottom: 10,
  288.         marginLeft: 20,
  289.         height: hp('2%')
  290.     },
  291.     menuTextStyle: {
  292.         flex: 1,
  293.         color: '#333',
  294.         fontSize: hp("1.5%")
  295.     },
  296.     titleStyle: {
  297.         fontWeight: 'bold',
  298.         paddingLeft: 20,
  299.         paddingRight: 20,
  300.         paddingBottom: 20,
  301.         paddingTop: 10
  302.     },
  303.     textStyle: {
  304.         paddingLeft: 20,
  305.         paddingRight: 20,
  306.         paddingBottom: 20
  307.     },
  308.     cardStyle: {
  309.         borderRadius: 15
  310.     },
  311.     btnStyle: {
  312.         backgroundColor: 'red',
  313.         marginLeft: 20,
  314.         marginBottom: 20
  315.     },
  316.     imageBackground: {
  317.         height: hp('55%'),
  318.         width: null,
  319.         margin: 20,
  320.         flex: 1,
  321.         borderRadius: 15
  322.     },
  323.     line: {
  324.         borderBottomColor: 'black',
  325.         borderBottomWidth: 1,
  326.         marginLeft: 20,
  327.         marginRight: 20
  328.     },
  329.     mapStyle: {
  330.         width: Dimensions.get('window').width,
  331.         height: 248
  332.     },
  333.     calloutStyle: {
  334.         position: 'absolute',
  335.         minWidth: 200,
  336.         minHeight: 60
  337.     },
  338.     imageStyle: {
  339.         height: 120,
  340.         width: null
  341.     },
  342.     itemImage: {
  343.         flex: 1,
  344.         width: Dimensions.get('window').width,
  345.         height: hp('50%')
  346.     },
  347.     sectionViewStyle: {
  348.         paddingLeft: 10,
  349.         paddingRight: 10
  350.     }
  351. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!