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

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

import React, { useEffect, useRef, useState } from 'react';
import { ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';

const FloorController = ({
  style,
  reduxState: {
    floors,
    selectedFloor,
    loadingFloor,
    tooltipMessage,
    mainColor
  },
  disabled,
  onFloorSelected
}) => {
  const [contentHeight, setContentHeight] = useState(250);
  const [scrollheight, setScrollheight] = useState(250);
  const scrollView = useRef();
  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.createElement(React.Fragment, null);
  }

  const reversedFloors = [...floors].reverse();
  return /*#__PURE__*/React.createElement(ScrollView, {
    ref: scrollView,
    style: [style, {}],
    contentContainerStyle: styles.container,
    showsVerticalScrollIndicator: false,
    onLayout: evt => {
      const {
        height
      } = evt.nativeEvent.layout;
      setScrollheight(height);
    }
  }, /*#__PURE__*/React.createElement(View, {
    onLayout: evt => {
      const {
        height
      } = evt.nativeEvent.layout;
      setContentHeight(height);
    }
  }, reversedFloors && reversedFloors.map(floor => /*#__PURE__*/React.createElement(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.createElement(Text, {
    style: [styles.floorText, floor.number === selectedFloor && styles.floorTextSelected]
  }, floor.title)))));
};

const styles = 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'
  }
});
export default FloorController;
//# sourceMappingURL=floorcontroller.js.map