mapwize-ui-react-native/lib/module/components/bottomview/placeDetails/smallView.js

Fully featured and ready to use UI to add Mapwize Indoor Maps and Navigation in your React Native app.

import React from 'react';
import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const SmallPlaceDetailsUI = ({
  style,
  reduxState: {
    placeDetails,
    // : any;
    buttonsContent,
    openingStatus,
    calendarStatus,
    language,
    // : string;
    mainColor // : string;

  },
  onExpandClick,
  callbackInterceptor // : DevCallbackInterceptor;

}) => {
  var _placeDetails$photos, _placeDetails$photos2, _placeDetails$opening;

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SafeAreaView, {
    style: [style, styles.placeDetails],
    edges: ['right', 'bottom', 'left']
  }, (placeDetails === null || placeDetails === void 0 ? void 0 : (_placeDetails$photos = placeDetails.photos) === null || _placeDetails$photos === void 0 ? void 0 : _placeDetails$photos.length) > 0 && /*#__PURE__*/React.createElement(ScrollView, {
    horizontal: true
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.scrollInnerView
  }, placeDetails === null || placeDetails === void 0 ? void 0 : (_placeDetails$photos2 = placeDetails.photos) === null || _placeDetails$photos2 === void 0 ? void 0 : _placeDetails$photos2.map((photo, index) => /*#__PURE__*/React.createElement(View, {
    key: index,
    style: styles.imageContainer
  }, /*#__PURE__*/React.createElement(Image, {
    style: styles.image,
    source: {
      uri: photo
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.imageSeparator
  }))))), /*#__PURE__*/React.createElement(View, {
    style: styles.drag
  }), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: () => onExpandClick()
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.titleLabel]
  }, placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.titleLabel)), placeDetails.subtitleLabel !== undefined && placeDetails.subtitleLabel !== '' && /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitleLabel]
  }, placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.subtitleLabel), placeDetails.openingHours && ((_placeDetails$opening = placeDetails.openingHours) === null || _placeDetails$opening === void 0 ? void 0 : _placeDetails$opening.length) > 0 && /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitleLabel]
  }, openingStatus), calendarStatus !== undefined && /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitleLabel]
  }, calendarStatus), /*#__PURE__*/React.createElement(ScrollView, {
    horizontal: true,
    style: styles.buttonScrollView
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.buttonsScrollInnerView
  }, buttonsContent === null || buttonsContent === void 0 ? void 0 : buttonsContent.map((button, index) => {
    return /*#__PURE__*/React.createElement(TouchableHighlight, {
      key: index,
      style: [styles.buttonContainer, {
        borderColor: mainColor
      }, button.highlighted && {
        backgroundColor: mainColor
      }, !button.highlighted && styles.highlighted],
      activeOpacity: 0.6,
      underlayColor: button.highlighted && mainColor + 'aa' || '#DDDDDD',
      onPress: () => button.callback()
    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
      style: [styles.icon, !button.highlighted && {
        tintColor: mainColor
      }],
      source: button.imageSrc
    }), /*#__PURE__*/React.createElement(Text, {
      style: [styles.buttonText, !button.highlighted && {
        color: 'black'
      }]
    }, button.title)));
  })))));
};

const styles = StyleSheet.create({
  placeDetails: {
    elevation: 8,
    paddingTop: 0,
    zIndex: 8,
    paddingBottom: 8,
    overflow: 'hidden',
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  drag: {
    display: 'none',
    width: 50,
    height: 8,
    backgroundColor: 'lightgray',
    alignSelf: 'center',
    margin: 4,
    borderRadius: 16
  },
  titleLabel: {
    fontSize: 22,
    paddingTop: 16,
    paddingHorizontal: 16
  },
  subtitleLabel: {
    fontSize: 16,
    paddingHorizontal: 16,
    marginTop: 4,
    color: 'gray'
  },
  buttonContainer: {
    elevation: 2,
    height: 36,
    marginEnd: 8,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    alignItems: 'center',
    borderRadius: 20,
    borderWidth: 2
  },
  highlighted: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'lightgray'
  },
  icon: {
    width: 20,
    height: 20,
    tintColor: 'white'
  },
  buttonScrollView: {
    marginTop: 16
  },
  buttonText: {
    color: 'white',
    paddingHorizontal: 8
  },
  buttonsScrollInnerView: {
    paddingHorizontal: 16,
    flexDirection: 'row'
  },
  scrollInnerView: {
    flexDirection: 'row'
  },
  imageContainer: {
    flexDirection: 'row'
  },
  image: {
    height: 100,
    width: Dimensions.get('window').width
  },
  imageSeparator: {
    width: 2,
    backgroundColor: 'white'
  }
});
export default SmallPlaceDetailsUI;
//# sourceMappingURL=smallView.js.map