@ntragas/pouncejstest/dist/cjs/components/DateInput/TimePicker.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _Combobox = _interopRequireDefault(require("../Combobox"));

var _helpers = require("../../utils/helpers");

var _Flex = _interopRequireDefault(require("../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 || (0, _helpers.now)(timezone);
  var hour = is12Hours ? day.format('hh') : day.format('HH');
  var min = day.format('mm');
  var period = day.format('A');

  var hoursLabel = _react.default.useMemo(function () {
    return (label + " Hours").trim();
  }, [label]);

  var minutesLabel = _react.default.useMemo(function () {
    return (label + " Minutes").trim();
  }, [label]);

  var periodLabel = _react.default.useMemo(function () {
    return (label + " Period").trim();
  }, [label]);

  var hourItems = getHourItems(mode);

  var onChangeHours = _react.default.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.default.useCallback(function (minutes) {
    return onTimeUpdate(day.minute(minutes));
  }, [date, onTimeUpdate]);

  var onChangePeriod = _react.default.useCallback(function (period) {
    var diff = period === 'AM' ? -12 : 12;
    onTimeUpdate(day.hour(day.hour() + diff));
  }, [date, onTimeUpdate]);

  return /*#__PURE__*/_react.default.createElement(_Flex.default, {
    align: "center",
    justify: "center",
    spacing: 3,
    sx: inputStyles
  }, label && !is12Hours && /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "label",
    flexShrink: 0,
    fontWeight: "bold",
    role: "status",
    pr: 2,
    htmlFor: (0, _helpers.slugify)(hoursLabel)
  }, label), /*#__PURE__*/_react.default.createElement(_Combobox.default, {
    id: (0, _helpers.slugify)(hoursLabel),
    searchable: true,
    onChange: onChangeHours,
    label: hoursLabel,
    hideLabel: true,
    items: hourItems,
    value: hour
  }), /*#__PURE__*/_react.default.createElement(_Combobox.default, {
    id: (0, _helpers.slugify)(minutesLabel),
    searchable: true,
    onChange: onChangeMinutes,
    label: minutesLabel,
    hideLabel: true,
    items: minsItems,
    value: min
  }), is12Hours && /*#__PURE__*/_react.default.createElement(_Combobox.default, {
    id: (0, _helpers.slugify)(periodLabel),
    onChange: onChangePeriod,
    label: periodLabel,
    hideLabel: true,
    items: periodItems,
    value: period
  }));
};

var _default = /*#__PURE__*/_react.default.memo(TimePicker);

exports.default = _default;