react-native-dates-picker
Version:
Customizable date picker for React Native
85 lines • 2.58 kB
JavaScript
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