mapwize-ui-react-native
Version:
Fully featured and ready to use UI to add Mapwize Indoor Maps and Navigation in your React Native app.
386 lines (374 loc) • 12.3 kB
JavaScript
import React, { useState } from 'react';
import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableHighlight, TouchableWithoutFeedback, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';
import icons from '../../../icons';
import { lang_details, lang_overview } from '../../../localizor';
import CalendarEvents from './calendarEvents';
const getCalendarEventsView = (row, index, mainColor) => {
return /*#__PURE__*/React.createElement(View, {
key: index
}, getRowView(row, mainColor, true), /*#__PURE__*/React.createElement(ScrollView, {
horizontal: true
}, /*#__PURE__*/React.createElement(CalendarEvents, {
data: row === null || row === void 0 ? void 0 : row.data,
mainColor: mainColor
})), /*#__PURE__*/React.createElement(View, {
style: styles.separator
}));
};
const getOpeningHoursView = (row, index, mainColor) => {
var _row$data;
const [expanded, setExpanded] = useState(false);
return /*#__PURE__*/React.createElement(View, {
key: index
}, getRowView(row, mainColor, true, expanded, () => setExpanded(!expanded)), expanded && (row === null || row === void 0 ? void 0 : (_row$data = row.data) === null || _row$data === void 0 ? void 0 : _row$data.map((dayRow, dayIndex) => {
return /*#__PURE__*/React.createElement(View, {
key: dayIndex,
style: styles.openingHoursRow
}, /*#__PURE__*/React.createElement(Text, {
style: styles.openingHoursRowDay
}, dayRow.day), /*#__PURE__*/React.createElement(Text, {
style: styles.openingHoursRowInterval
}, dayRow.intervals));
})), /*#__PURE__*/React.createElement(View, {
style: styles.separator
}));
};
const getSimpleRowView = (row, index, mainColor) => {
return /*#__PURE__*/React.createElement(View, {
key: index
}, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
onPress: row === null || row === void 0 ? void 0 : row.callback
}, getRowView(row, mainColor)), /*#__PURE__*/React.createElement(View, {
style: styles.separator
}));
};
const getRowView = (row, mainColor, withArrow, expanded, onExpand) => {
return /*#__PURE__*/React.createElement(View, {
style: [styles.row]
}, /*#__PURE__*/React.createElement(Image, {
style: [styles.rowIcon, (row === null || row === void 0 ? void 0 : row.available) && {
tintColor: mainColor
}],
source: row === null || row === void 0 ? void 0 : row.imageSrc
}), /*#__PURE__*/React.createElement(Text, {
style: [styles.rowText, !(row !== null && row !== void 0 && row.available) && styles.rowTextNotAvailable]
}, row === null || row === void 0 ? void 0 : row.title), withArrow && /*#__PURE__*/React.createElement(TouchableHighlight, {
activeOpacity: 0.6,
underlayColor: "#DDDDDD",
onPress: onExpand
}, /*#__PURE__*/React.createElement(Image, {
style: [styles.rowIcon, styles.arrowIcon, (row === null || row === void 0 ? void 0 : row.available) && {
tintColor: mainColor
}],
source: expanded ? icons.ARROW_UP : icons.ARROW_DOWN
})));
};
const ExpandedPlaceDetailsUI = ({
style,
reduxState: {
placeDetails,
// : any;
buttonsContent,
rowsContent,
openingStatus,
language,
// : string;
mainColor // : string;
},
onExpandClick,
onCloseClick,
callbackInterceptor // : DevCallbackInterceptor;
}) => {
var _placeDetails$photos, _placeDetails$photos2;
const [overview, setOverview] = useState(true);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SafeAreaView, {
style: [styles.placeDetails],
edges: ['right', 'bottom', 'left']
}, /*#__PURE__*/React.createElement(TouchableHighlight, {
style: [styles.backButton],
activeOpacity: 0.6,
underlayColor: "#DDDDDD",
onPress: onCloseClick
}, /*#__PURE__*/React.createElement(Image, {
style: [styles.backButtonImage],
source: icons.LEFT_CHEVRON
})), /*#__PURE__*/React.createElement(ScrollView, {
horizontal: true,
style: {
maxHeight: 200,
minHeight: 200
}
}, /*#__PURE__*/React.createElement(View, {
style: styles.scrollInnerView
}, placeDetails === null || placeDetails === void 0 ? void 0 : (_placeDetails$photos = placeDetails.photos) === null || _placeDetails$photos === void 0 ? void 0 : _placeDetails$photos.map((photo, index) => /*#__PURE__*/React.createElement(View, {
key: index,
style: styles.imageContainer
}, /*#__PURE__*/React.createElement(Image, {
style: styles.image,
source: {
uri: photo
}
}), /*#__PURE__*/React.createElement(View, {
style: styles.imageSeparator
}))), (!(placeDetails !== null && placeDetails !== void 0 && placeDetails.photos) || (placeDetails === null || placeDetails === void 0 ? void 0 : (_placeDetails$photos2 = placeDetails.photos) === null || _placeDetails$photos2 === void 0 ? void 0 : _placeDetails$photos2.length) == 0) && /*#__PURE__*/React.createElement(View, {
style: styles.imageContainer
}, /*#__PURE__*/React.createElement(Image, {
style: styles.image,
source: icons.PLACE_HOLDER
}), /*#__PURE__*/React.createElement(View, {
style: styles.imageSeparator
})))), /*#__PURE__*/React.createElement(View, {
style: styles.drag
}), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
onPress: () => onExpandClick()
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.titleLabel]
}, placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.titleLabel)), (placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.subtitleLabel) != null && (placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.subtitleLabel) !== '' && /*#__PURE__*/React.createElement(Text, {
style: [styles.subtitleLabel]
}, placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.subtitleLabel), placeDetails.detailsLabel !== undefined && placeDetails.detailsLabel !== '' && /*#__PURE__*/React.createElement(View, {
style: styles.pagerHeader
}, /*#__PURE__*/React.createElement(TouchableHighlight, {
style: styles.pagerTouchable,
activeOpacity: 0.6,
underlayColor: "#DDDDDD",
onPress: () => setOverview(true)
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
style: [styles.pagerText, overview && {
color: mainColor
}]
}, lang_overview(language)), /*#__PURE__*/React.createElement(View, {
style: [styles.pagerSeparator, overview && {
backgroundColor: mainColor
}]
}))), /*#__PURE__*/React.createElement(TouchableHighlight, {
style: [styles.pagerColumn],
activeOpacity: 0.6,
underlayColor: "#DDDDDD",
onPress: () => setOverview(false)
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
style: [styles.pagerText, !overview && {
color: mainColor
}]
}, lang_details(language)), /*#__PURE__*/React.createElement(View, {
style: [styles.pagerSeparator, !overview && {
backgroundColor: mainColor
}]
})))), /*#__PURE__*/React.createElement(View, {
style: [styles.separator, placeDetails.detailsLabel !== undefined && placeDetails.detailsLabel !== '' && {
marginTop: 0
}]
}), placeDetails.detailsLabel !== undefined && !overview && /*#__PURE__*/React.createElement(View, {
style: [styles.webviewContainer]
}, /*#__PURE__*/React.createElement(WebView, {
originWhitelist: ['*'],
source: {
html: placeDetails.detailsLabel
}
})), overview && /*#__PURE__*/React.createElement(ScrollView, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ScrollView, {
style: styles.buttonsScrollView,
horizontal: true,
nestedScrollEnabled: true,
contentContainerStyle: styles.buttonsScrollInnerView
}, buttonsContent === null || buttonsContent === void 0 ? void 0 : buttonsContent.map((button, index) => {
return /*#__PURE__*/React.createElement(TouchableHighlight, {
key: index,
style: [styles.buttonContainer],
activeOpacity: 0.6,
underlayColor: "#DDDDDD",
onPress: () => button.callback()
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
style: [styles.buttonIcon, {
borderColor: mainColor
}, button.highlighted && {
backgroundColor: mainColor
}]
}, /*#__PURE__*/React.createElement(Image, {
style: [styles.icon, !button.highlighted && {
tintColor: mainColor
}],
source: button.imageSrc
})), /*#__PURE__*/React.createElement(Text, {
style: [styles.buttonText, {
color: mainColor
}]
}, button.title)));
})), /*#__PURE__*/React.createElement(View, {
style: styles.separator
}), rowsContent === null || rowsContent === void 0 ? void 0 : rowsContent.map((row, index) => {
if (row.id === 'mwz-openingHours-row' && row.available && row.data) {
return getOpeningHoursView(row, index, mainColor);
}
if (row.id === 'mwz-calendarEvents-row' && row.available && row.data) {
return getCalendarEventsView(row, index, mainColor);
}
return getSimpleRowView(row, index, mainColor);
})))));
};
const styles = StyleSheet.create({
placeDetails: {
height: '100%',
width: '100%',
elevation: 16,
zIndex: 16,
paddingBottom: 16,
overflow: 'hidden',
flexDirection: 'column',
backgroundColor: 'white'
},
separator: {
backgroundColor: 'lightgray',
width: '100%',
height: 1,
marginVertical: 16
},
drag: {
display: 'none',
width: 50,
height: 8,
backgroundColor: 'lightgray',
alignSelf: 'center',
margin: 4,
borderRadius: 16
},
titleLabel: {
fontSize: 22,
marginTop: 16,
paddingHorizontal: 16
},
subtitleLabel: {
fontSize: 16,
paddingHorizontal: 16,
marginTop: 4,
color: 'gray'
},
buttonContainer: {
minWidth: 70,
flexDirection: 'column',
alignSelf: 'flex-start',
alignItems: 'center'
},
highlighted: {
backgroundColor: 'white',
borderWidth: 2
},
buttonText: {
color: 'white',
paddingHorizontal: 8
},
buttonsScrollView: {},
buttonsScrollInnerView: {
flexGrow: 1,
alignItems: 'stretch',
justifyContent: 'space-around'
},
scrollInnerView: {
flexDirection: 'row'
},
imageContainer: {
flexDirection: 'row'
},
image: {
height: 200,
width: Dimensions.get('window').width
},
imageSeparator: {
width: 2,
backgroundColor: 'white'
},
icon: {
width: 16,
height: 16,
tintColor: 'white'
},
buttonIcon: {
borderColor: 'black',
borderWidth: 1,
borderRadius: 32,
height: 40,
width: 40,
marginBottom: 8,
justifyContent: 'center',
alignItems: 'center'
},
row: {
flexDirection: 'row',
alignItems: 'center'
},
rowIcon: {
marginHorizontal: 16,
width: 20,
height: 20,
tintColor: 'lightgray'
},
arrowIcon: {},
rowText: {
flexWrap: 'wrap',
overflow: 'hidden',
flex: 1,
paddingHorizontal: 8
},
rowTextNotAvailable: {
fontStyle: 'italic',
color: 'gray'
},
openingHoursRow: {
flexDirection: 'row',
paddingStart: 60,
paddingEnd: 32,
justifyContent: 'space-between'
},
openingHoursRowDay: {
marginEnd: 16,
marginTop: 8
},
openingHoursRowInterval: {
marginEnd: 16,
marginTop: 8
},
safeAreaView: {
flex: 1
},
backButton: {
position: 'absolute',
top: 40,
left: 20,
zIndex: 2,
elevation: 2,
padding: 8,
backgroundColor: 'lightgray',
borderRadius: 32,
opacity: 0.7,
justifyContent: 'center'
},
backButtonImage: {},
pagerText: {
fontSize: 18,
paddingVertical: 12,
height: 48,
textAlign: 'center',
color: 'gray'
},
pagerSeparator: {
height: 4
},
pagerColumn: {
flexDirection: 'column',
flexGrow: 1
},
webviewContainer: {
flexGrow: 1
},
pagerHeader: {
flexDirection: 'row',
alignContent: 'space-between',
marginTop: 16
},
pagerTouchable: {
flexDirection: 'column',
flexGrow: 1
}
});
export default ExpandedPlaceDetailsUI;
//# sourceMappingURL=expandedView.js.map