react-native-dates-picker/lib/module/components/TimeSelector.js

Customizable date picker for React Native

import React, { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { useCalendarContext } from '../CalendarContext';
import { CONTAINER_HEIGHT } from '../enums';
import { getParsedDate, getDate, getFormatted } from '../utils';
import Wheel from './WheelPicker/Wheel';
function createNumberList(num) {
  return new Array(num).fill(0).map((_, index) => ({
    text: index.toString().padStart(2, '0'),
    value: index
  }));
}
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,
    onChange: 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,
    onChange: 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,
    onChange: 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: CONTAINER_HEIGHT / 2,
    height: CONTAINER_HEIGHT / 2
  },
  timePickerText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginHorizontal: 5
  }
});
export default TimeSelector;
//# sourceMappingURL=TimeSelector.js.map