UNPKG

react-native-dates-picker

Version:
85 lines 2.58 kB
import { useCallback } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import { useCalendarContext } from '../CalendarContext'; import Wheel from './WheelPicker/Wheel'; import { CALENDAR_HEIGHT } from '../enums'; import { getParsedDate, getDate, getFormatted } from '../utils'; function createNumberList(num) { return new Array(num).fill(0).map((_, index) => index < 10 ? `0${index.toString()}` : index.toString()); } const hours = createNumberList(24); const minutes = createNumberList(60); const seconds = createNumberList(60); const TimeSelector = () => { const { date, onSelectDate, theme } = useCalendarContext(); const { hour, minute, second } = getParsedDate(date); const handleChange = useCallback((value, type) => { const newDate = getDate(date)[type](value); onSelectDate(getFormatted(newDate)); }, [date, onSelectDate]); return /*#__PURE__*/React.createElement(View, { style: styles.container }, /*#__PURE__*/React.createElement(View, { style: styles.timePickerContainer }, /*#__PURE__*/React.createElement(View, { style: styles.wheelContainer }, /*#__PURE__*/React.createElement(Wheel, { value: hour, items: hours, setValue: value => handleChange(value, 'hour') })), /*#__PURE__*/React.createElement(Text, { style: { ...styles.timePickerText, ...(theme === null || theme === void 0 ? void 0 : theme.wheelPickerTextStyle) } }, ":"), /*#__PURE__*/React.createElement(View, { style: styles.wheelContainer }, /*#__PURE__*/React.createElement(Wheel, { value: minute, items: minutes, setValue: value => handleChange(value, 'minute') })), /*#__PURE__*/React.createElement(Text, { style: { ...styles.timePickerText, ...(theme === null || theme === void 0 ? void 0 : theme.wheelPickerTextStyle) } }, ":"), /*#__PURE__*/React.createElement(View, { style: styles.wheelContainer }, /*#__PURE__*/React.createElement(Wheel, { value: second, items: seconds, setValue: value => handleChange(value, 'second') })))); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, wheelContainer: { flex: 1 }, timePickerContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: '80%', height: CALENDAR_HEIGHT / 2 }, timePickerText: { fontSize: 24, fontWeight: 'bold', marginHorizontal: 5 } }); export default TimeSelector; //# sourceMappingURL=TimeSelector.js.map