mapwize-ui-react-native/lib/module/components/search/searchDirectionBar.js

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

import React, { useEffect, useRef } from 'react';
import { Image, Keyboard, StyleSheet, TextInput, TouchableHighlight, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import icons from '../../icons';

const SearchDirectionBar = ({
  style,
  reduxState: {
    fromPlaceholder,
    //: string;
    toPlaceholder,
    //: string;
    fromQuery,
    //: string;
    toQuery,
    //: string;
    modes,
    //: DirectionMode[];
    selectedMode,
    //: DirectionMode;
    isHidden,
    //: boolean;
    isInSearch,
    //: boolean;
    isFromFocus,
    //: boolean;
    isToFocus,
    //: boolean;
    mainColor //?: string;

  },
  onSelectedModeChange,
  //: (mode: DirectionMode) => void;
  onFromQueryChange,
  //: (query: string) => void;
  onToQueryChange,
  //: (query: string) => void;
  onSwapButtonClick,
  //: () => void;
  onBackButtonClick,
  //: () => void;
  onFromFocus,
  //: () => void;
  onFromBlur,
  //: () => void;
  onToFocus,
  //: () => void;
  onToBlur //: () => void;

}) => {
  const from_input = useRef();
  const to_input = useRef();
  useEffect(() => {
    var _from_input$current, _to_input$current;

    isFromFocus && (from_input === null || from_input === void 0 ? void 0 : (_from_input$current = from_input.current) === null || _from_input$current === void 0 ? void 0 : _from_input$current.focus());
    isToFocus && (to_input === null || to_input === void 0 ? void 0 : (_to_input$current = to_input.current) === null || _to_input$current === void 0 ? void 0 : _to_input$current.focus());
  }, [isFromFocus, isToFocus]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SafeAreaView, {
    style: [style, styles.searchDirectionBar, isInSearch && styles.isInSearch, isHidden && styles.isHidden],
    edges: ['top']
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.innerSearchDirectionBar]
  }, /*#__PURE__*/React.createElement(TouchableHighlight, {
    underlayColor: mainColor + '22',
    style: [styles.backButton] //TODO add accessibility label// accessibilityLabel={backTooltipMessage}
    ,
    onPress: () => {
      Keyboard.dismiss();
      onBackButtonClick();
    }
  }, /*#__PURE__*/React.createElement(Image, {
    source: icons.LEFT_CHEVRON
  })), /*#__PURE__*/React.createElement(View, {
    style: [styles.textInputRowsContainer]
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.textInputContainer, {
      marginBottom: 8
    }]
  }, /*#__PURE__*/React.createElement(Image, {
    style: styles.icon,
    source: icons.DIRECTION_START
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.textInputPadding, isFromFocus && {
      borderColor: mainColor
    }]
  }, /*#__PURE__*/React.createElement(TextInput, {
    style: [styles.textInput],
    ref: from_input,
    placeholder: fromPlaceholder,
    showSoftInputOnFocus: true,
    onFocus: () => !isFromFocus && onFromFocus(),
    onBlur: () => onFromBlur(),
    onChangeText: text => onFromQueryChange(text),
    value: fromQuery // focus={isFromFocus}

  }))), /*#__PURE__*/React.createElement(View, {
    style: [styles.textInputContainer]
  }, /*#__PURE__*/React.createElement(Image, {
    style: styles.icon,
    source: icons.DIRECTION_END
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.textInputPadding, isToFocus && {
      borderColor: mainColor
    }]
  }, /*#__PURE__*/React.createElement(TextInput, {
    style: [styles.textInput],
    ref: to_input,
    placeholder: toPlaceholder,
    showSoftInputOnFocus: true,
    onFocus: () => !isToFocus && onToFocus(),
    onBlur: () => onToBlur(),
    onChangeText: text => onToQueryChange(text),
    value: toQuery
  })))), /*#__PURE__*/React.createElement(TouchableHighlight, {
    style: [styles.swapButton],
    underlayColor: mainColor + '22' //TODO add accessibility label accessibilityLabel={backTooltipMessage}
    ,
    onPress: () => onSwapButtonClick()
  }, /*#__PURE__*/React.createElement(Image, {
    source: icons.SWAP
  }))), /*#__PURE__*/React.createElement(View, {
    style: [styles.modesContainer]
  }, modes.map((mode, index) => /*#__PURE__*/React.createElement(TouchableHighlight, {
    underlayColor: mainColor + '50',
    style: [styles.icon, styles.modeItem, (selectedMode === null || selectedMode === void 0 ? void 0 : selectedMode._id) === mode._id && styles.selectedMode, (selectedMode === null || selectedMode === void 0 ? void 0 : selectedMode._id) === mode._id && {
      borderColor: mainColor,
      backgroundColor: mainColor + '22'
    }],
    key: index,
    onPress: () => onSelectedModeChange(mode)
  }, /*#__PURE__*/React.createElement(Image, {
    style: [styles.modeIcon, {
      tintColor: mainColor
    }],
    source: icons[mode.type]
  }))))));
};

const styles = StyleSheet.create({
  searchDirectionBar: {
    backgroundColor: 'white',
    flexDirection: 'column',
    paddingTop: 8,
    borderBottomEndRadius: 8,
    borderBottomStartRadius: 8,
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 8
  },
  innerSearchDirectionBar: {
    flexDirection: 'row'
  },
  textInputRowsContainer: {
    flexDirection: 'column',
    flexGrow: 1
  },
  textInputContainer: {
    flexDirection: 'row'
  },
  textInputPadding: {
    flex: 1,
    paddingHorizontal: 4,
    height: 40,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: 'lightgray'
  },
  textInput: {
    flex: 1,
    padding: 0,
    margin: 0
  },
  buttonIcon: {
    width: 40,
    height: 40,
    alignSelf: 'flex-start',
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon: {
    marginRight: 8,
    width: 16,
    height: 16,
    alignSelf: 'center'
  },
  backButton: {
    width: 48,
    height: 40,
    padding: 8,
    marginHorizontal: 8,
    borderRadius: 8,
    alignSelf: 'flex-start',
    alignItems: 'center',
    justifyContent: 'center'
  },
  swapButton: {
    width: 48,
    height: 56,
    padding: 8,
    borderRadius: 8,
    marginHorizontal: 8,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  fromIcon: {
    backgroundColor: 'green'
  },
  toIcon: {
    backgroundColor: 'orange'
  },
  isHidden: {
    display: 'none'
  },
  isInSearch: {},
  modesContainer: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    padding: 8
  },
  modeItem: {
    height: 40,
    borderRadius: 20,
    padding: 16,
    flexGrow: 1,
    minWidth: 60,
    alignItems: 'center',
    justifyContent: 'center',
    marginStart: 8
  },
  selectedMode: {
    borderWidth: 1
  },
  modeIcon: {}
});
export default SearchDirectionBar;
//# sourceMappingURL=searchDirectionBar.js.map