mapwize-ui-react-native/lib/commonjs/components/floorcontroller.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const FloorController = ({
  style,
  reduxState: {
    floors,
    selectedFloor,
    loadingFloor,
    tooltipMessage,
    mainColor
  },
  disabled,
  onFloorSelected
}) => {
  const [contentHeight, setContentHeight] = (0, _react.useState)(250);
  const [scrollheight, setScrollheight] = (0, _react.useState)(250);
  const scrollView = (0, _react.useRef)();
  (0, _react.useEffect)(() => {
    if (contentHeight > scrollheight) {
      var _scrollView$current, _scrollView$current$s;

      const ratio = (selectedFloor + 1) / floors.length;
      const scrollTo = contentHeight - contentHeight * ratio;
      scrollView === null || scrollView === void 0 ? void 0 : (_scrollView$current = scrollView.current) === null || _scrollView$current === void 0 ? void 0 : (_scrollView$current$s = _scrollView$current.scrollTo) === null || _scrollView$current$s === void 0 ? void 0 : _scrollView$current$s.call(_scrollView$current, {
        y: scrollTo
      });
    }
  }, [scrollheight, contentHeight, selectedFloor, floors]);

  if (disabled) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
  }

  const reversedFloors = [...floors].reverse();
  return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
    ref: scrollView,
    style: [style, {}],
    contentContainerStyle: styles.container,
    showsVerticalScrollIndicator: false,
    onLayout: evt => {
      const {
        height
      } = evt.nativeEvent.layout;
      setScrollheight(height);
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    onLayout: evt => {
      const {
        height
      } = evt.nativeEvent.layout;
      setContentHeight(height);
    }
  }, reversedFloors && reversedFloors.map(floor => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
    style: [styles.floorItem, floor.number === selectedFloor && {
      backgroundColor: mainColor
    }],
    underlayColor: mainColor,
    activeOpacity: 0.3,
    key: floor.number,
    onPress: () => floor.number !== undefined && onFloorSelected(floor.number)
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [styles.floorText, floor.number === selectedFloor && styles.floorTextSelected]
  }, floor.title)))));
};

const styles = _reactNative.StyleSheet.create({
  floorController: {},
  floorItem: {
    marginTop: 4,
    borderRadius: 20,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    width: 40,
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 0,
    elevation: 2
  },
  container: {
    padding: 8,
    flexGrow: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end'
  },
  floorItemSelected: {
    backgroundColor: '#c51596'
  },
  floorText: {
    padding: 0,
    margin: 0,
    fontSize: 16,
    color: 'black',
    textAlign: 'center'
  },
  floorTextSelected: {
    color: 'white'
  }
});

var _default = FloorController;
exports.default = _default;
//# sourceMappingURL=floorcontroller.js.map