mapwize-ui-react-native
Version:
Fully featured and ready to use UI to add Mapwize Indoor Maps and Navigation in your React Native app.
261 lines (245 loc) • 8.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _icons = _interopRequireDefault(require("../../icons"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 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 = (0, _react.useRef)();
const to_input = (0, _react.useRef)();
(0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
style: [style, styles.searchDirectionBar, isInSearch && styles.isInSearch, isHidden && styles.isHidden],
edges: ['top']
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.innerSearchDirectionBar]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
underlayColor: mainColor + '22',
style: [styles.backButton] //TODO add accessibility label// accessibilityLabel={backTooltipMessage}
,
onPress: () => {
_reactNative.Keyboard.dismiss();
onBackButtonClick();
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: _icons.default.LEFT_CHEVRON
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.textInputRowsContainer]
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.textInputContainer, {
marginBottom: 8
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
style: styles.icon,
source: _icons.default.DIRECTION_START
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.textInputPadding, isFromFocus && {
borderColor: mainColor
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.View, {
style: [styles.textInputContainer]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
style: styles.icon,
source: _icons.default.DIRECTION_END
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.textInputPadding, isToFocus && {
borderColor: mainColor
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
style: [styles.textInput],
ref: to_input,
placeholder: toPlaceholder,
showSoftInputOnFocus: true,
onFocus: () => !isToFocus && onToFocus(),
onBlur: () => onToBlur(),
onChangeText: text => onToQueryChange(text),
value: toQuery
})))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
style: [styles.swapButton],
underlayColor: mainColor + '22' //TODO add accessibility label accessibilityLabel={backTooltipMessage}
,
onPress: () => onSwapButtonClick()
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: _icons.default.SWAP
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.modesContainer]
}, modes.map((mode, index) => /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.Image, {
style: [styles.modeIcon, {
tintColor: mainColor
}],
source: _icons.default[mode.type]
}))))));
};
const styles = _reactNative.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: {}
});
var _default = SearchDirectionBar;
exports.default = _default;
//# sourceMappingURL=searchDirectionBar.js.map