pouncejs/dist/esm/components/DateInput/TimePicker.js

A collection of UI components from Panther labs

import React from 'react';
import Box from '../Box';
import Combobox from '../Combobox';
import { now, slugify } from '../../utils/helpers';
import Flex from '../Flex';

var getHourItems = function getHourItems(mode) {
  var limit = mode === '12h' ? 12 : 24;
  var gap = mode === '12h' ? 1 : 0;
  return Array.from(Array(limit), function (_, i) {
    return ("0" + (i + gap)).slice(-2);
  });
};

var minsItems = Array.from(Array(60), function (_, i) {
  return ("0" + i).slice(-2);
});
var periodItems = ['AM', 'PM'];
var inputStyles = {
  input: {
    maxWidth: 75
  }
};

var TimePicker = function TimePicker(_ref) {
  var date = _ref.date,
      onTimeUpdate = _ref.onTimeUpdate,
      _ref$mode = _ref.mode,
      mode = _ref$mode === void 0 ? '24h' : _ref$mode,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? '' : _ref$label,
      _ref$timezone = _ref.timezone,
      timezone = _ref$timezone === void 0 ? 'local' : _ref$timezone;
  var is12Hours = mode === '12h';
  var day = date || now(timezone);
  var hour = is12Hours ? day.format('hh') : day.format('HH');
  var min = day.format('mm');
  var period = day.format('A');
  var hoursLabel = React.useMemo(function () {
    return (label + " Hours").trim();
  }, [label]);
  var minutesLabel = React.useMemo(function () {
    return (label + " Minutes").trim();
  }, [label]);
  var periodLabel = React.useMemo(function () {
    return (label + " Period").trim();
  }, [label]);
  var hourItems = getHourItems(mode);
  var onChangeHours = React.useCallback(function (hour) {
    var hourOfDay = parseInt(hour);

    if (mode === '12h') {
      if (period === 'AM') {
        hourOfDay = hourOfDay === 12 ? 0 : hourOfDay;
      } else {
        hourOfDay = hourOfDay === 12 ? 12 : hourOfDay + 12;
      }
    }

    onTimeUpdate(day.hour(hourOfDay));
  }, [date, onTimeUpdate]);
  var onChangeMinutes = React.useCallback(function (minutes) {
    return onTimeUpdate(day.minute(minutes));
  }, [date, onTimeUpdate]);
  var onChangePeriod = React.useCallback(function (period) {
    var diff = period === 'AM' ? -12 : 12;
    onTimeUpdate(day.hour(day.hour() + diff));
  }, [date, onTimeUpdate]);
  return /*#__PURE__*/React.createElement(Flex, {
    align: "center",
    justify: "center",
    spacing: 3,
    sx: inputStyles
  }, label && !is12Hours && /*#__PURE__*/React.createElement(Box, {
    as: "label",
    flexShrink: 0,
    fontWeight: "bold",
    role: "status",
    pr: 2,
    htmlFor: slugify(hoursLabel)
  }, label), /*#__PURE__*/React.createElement(Combobox, {
    id: slugify(hoursLabel),
    searchable: true,
    onChange: onChangeHours,
    label: hoursLabel,
    hideLabel: true,
    items: hourItems,
    value: hour,
    showClearSelectionControl: false
  }), /*#__PURE__*/React.createElement(Combobox, {
    id: slugify(minutesLabel),
    searchable: true,
    onChange: onChangeMinutes,
    label: minutesLabel,
    hideLabel: true,
    items: minsItems,
    value: min,
    showClearSelectionControl: false
  }), is12Hours && /*#__PURE__*/React.createElement(Combobox, {
    id: slugify(periodLabel),
    onChange: onChangePeriod,
    label: periodLabel,
    hideLabel: true,
    items: periodItems,
    value: period,
    showClearSelectionControl: false
  }));
};

export default /*#__PURE__*/React.memo(TimePicker);