mapwize-ui-react-native/lib/module/components/selector.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 { Image, Modal, StyleSheet, Text, TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';

const Selector = ({
  style,
  isExpanded,
  isHidden,
  data,
  icon,
  tooltipMessage,
  renderText,
  isSelected,
  onSelected,
  onClick
}) => {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
    animationType: "fade",
    transparent: true,
    visible: isExpanded,
    onRequestClose: () => onClick()
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: onClick
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.gray
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.universeList, isExpanded && styles.isExpanded, isHidden && styles.isHidden]
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.headerText
  }, tooltipMessage), /*#__PURE__*/React.createElement(View, {
    style: styles.headerSepartor
  }), isExpanded && (data === null || data === void 0 ? void 0 : data.map((object, index) => /*#__PURE__*/React.createElement(Text, {
    style: [styles.item, (isSelected === null || isSelected === void 0 ? void 0 : isSelected(object)) && styles.selected, isHidden && styles.isHidden],
    key: index,
    onPress: () => onSelected === null || onSelected === void 0 ? void 0 : onSelected(object)
  }, renderText === null || renderText === void 0 ? void 0 : renderText(object)))))))), /*#__PURE__*/React.createElement(View, {
    style: [style, styles.universeSelector, isHidden && styles.isHidden, isExpanded && styles.buttonExpanded],
    accessibilityLabel: tooltipMessage
  }, /*#__PURE__*/React.createElement(TouchableHighlight, {
    style: [styles.icon, isHidden && styles.isHidden],
    activeOpacity: 0.6,
    underlayColor: "#DDDDDD",
    onPress: onClick
  }, /*#__PURE__*/React.createElement(Image, {
    style: [styles.image],
    source: icon
  }))));
};

const styles = StyleSheet.create({
  universeSelector: {
    flexDirection: 'column-reverse',
    backgroundColor: 'white',
    borderRadius: 28,
    height: 56,
    width: 56,
    justifyContent: 'center',
    alignItems: 'center',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 2
  },
  gray: {
    flex: 1,
    backgroundColor: '#5559',
    justifyContent: 'center'
  },
  icon: {
    borderRadius: 32,
    padding: 8
  },
  image: {
    height: 24,
    width: 24
  },
  selected: {
    fontWeight: 'bold'
  },
  isHidden: {
    display: 'none'
  },
  universeList: {
    alignSelf: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 16,
    opacity: 1,
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 8
  },
  isExpanded: {
    display: 'flex'
  },
  buttonExpanded: {
    backgroundColor: 'lightgray'
  },
  item: {
    padding: 16
  },
  headerText: {
    paddingVertical: 16,
    paddingHorizontal: 32,
    fontWeight: 'bold'
  },
  headerSepartor: {
    backgroundColor: 'lightgray',
    height: 1,
    alignSelf: 'stretch'
  }
});
export default Selector;
//# sourceMappingURL=selector.js.map