react-native-dates-picker
Version:
Customizable date picker for React Native
92 lines (91 loc) • 2.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _CalendarContext = require("../CalendarContext");
var _Wheel = _interopRequireDefault(require("./WheelPicker/Wheel"));
var _enums = require("../enums");
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
} = (0, _CalendarContext.useCalendarContext)();
const {
hour,
minute,
second
} = (0, _utils.getParsedDate)(date);
const handleChange = (0, _react.useCallback)((value, type) => {
const newDate = (0, _utils.getDate)(date)[type](value);
onSelectDate((0, _utils.getFormatted)(newDate));
}, [date, onSelectDate]);
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.container
}, /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.timePickerContainer
}, /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.wheelContainer
}, /*#__PURE__*/React.createElement(_Wheel.default, {
value: hour,
items: hours,
setValue: value => handleChange(value, 'hour')
})), /*#__PURE__*/React.createElement(_reactNative.Text, {
style: {
...styles.timePickerText,
...(theme === null || theme === void 0 ? void 0 : theme.wheelPickerTextStyle)
}
}, ":"), /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.wheelContainer
}, /*#__PURE__*/React.createElement(_Wheel.default, {
value: minute,
items: minutes,
setValue: value => handleChange(value, 'minute')
})), /*#__PURE__*/React.createElement(_reactNative.Text, {
style: {
...styles.timePickerText,
...(theme === null || theme === void 0 ? void 0 : theme.wheelPickerTextStyle)
}
}, ":"), /*#__PURE__*/React.createElement(_reactNative.View, {
style: styles.wheelContainer
}, /*#__PURE__*/React.createElement(_Wheel.default, {
value: second,
items: seconds,
setValue: value => handleChange(value, 'second')
}))));
};
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
wheelContainer: {
flex: 1
},
timePickerContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '80%',
height: _enums.CALENDAR_HEIGHT / 2
},
timePickerText: {
fontSize: 24,
fontWeight: 'bold',
marginHorizontal: 5
}
});
var _default = exports.default = TimeSelector;
//# sourceMappingURL=TimeSelector.js.map