@wordpress/components/build/date-time/time/time-input/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TimeInput = TimeInput;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _styles = require("../styles");
var _hStack = require("../../../h-stack");
var _utils = require("../../utils");
var _utils2 = require("../../../utils");
var _baseControl = _interopRequireDefault(require("../../../base-control"));
var _toggleGroupControl = require("../../../toggle-group-control");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function TimeInput({
  value: valueProp,
  defaultValue,
  is12Hour,
  label,
  minutesProps,
  onChange
}) {
  const [value = {
    hours: new Date().getHours(),
    minutes: new Date().getMinutes()
  }, setValue] = (0, _utils2.useControlledValue)({
    value: valueProp,
    onChange,
    defaultValue
  });
  const dayPeriod = parseDayPeriod(value.hours);
  const hours12Format = (0, _utils.from24hTo12h)(value.hours);
  const buildNumberControlChangeCallback = method => {
    return (_value, {
      event
    }) => {
      if (!(0, _utils.validateInputElementTarget)(event)) {
        return;
      }

      // We can safely assume value is a number if target is valid.
      const numberValue = Number(_value);
      setValue({
        ...value,
        [method]: method === 'hours' && is12Hour ? (0, _utils.from12hTo24h)(numberValue, dayPeriod === 'PM') : numberValue
      });
    };
  };
  const buildAmPmChangeCallback = _value => {
    return () => {
      if (dayPeriod === _value) {
        return;
      }
      setValue({
        ...value,
        hours: (0, _utils.from12hTo24h)(hours12Format, _value === 'PM')
      });
    };
  };
  function parseDayPeriod(_hours) {
    return _hours < 12 ? 'AM' : 'PM';
  }
  const Wrapper = label ? _styles.Fieldset : _element.Fragment;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default.VisualLabel, {
      as: "legend",
      children: label
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
      alignment: "left",
      expanded: false,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TimeWrapper, {
        className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
        ,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HoursInput, {
          className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
          ,
          label: (0, _i18n.__)('Hours'),
          hideLabelFromVision: true,
          __next40pxDefaultSize: true,
          value: String(is12Hour ? hours12Format : value.hours).padStart(2, '0'),
          step: 1,
          min: is12Hour ? 1 : 0,
          max: is12Hour ? 12 : 23,
          required: true,
          spinControls: "none",
          isPressEnterToChange: true,
          isDragEnabled: false,
          isShiftStepEnabled: false,
          onChange: buildNumberControlChangeCallback('hours'),
          __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(2)
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TimeSeparator, {
          className: "components-datetime__time-separator" // Unused, for backwards compatibility.
          ,
          "aria-hidden": "true",
          children: ":"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MinutesInput, {
          className: (0, _clsx.default)('components-datetime__time-field-minutes-input',
          // Unused, for backwards compatibility.
          minutesProps?.className),
          label: (0, _i18n.__)('Minutes'),
          hideLabelFromVision: true,
          __next40pxDefaultSize: true,
          value: String(value.minutes).padStart(2, '0'),
          step: 1,
          min: 0,
          max: 59,
          required: true,
          spinControls: "none",
          isPressEnterToChange: true,
          isDragEnabled: false,
          isShiftStepEnabled: false,
          onChange: (...args) => {
            buildNumberControlChangeCallback('minutes')(...args);
            minutesProps?.onChange?.(...args);
          },
          __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(2),
          ...minutesProps
        })]
      }), is12Hour && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_toggleGroupControl.ToggleGroupControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        isBlock: true,
        label: (0, _i18n.__)('Select AM or PM'),
        hideLabelFromVision: true,
        value: dayPeriod,
        onChange: newValue => {
          buildAmPmChangeCallback(newValue)();
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControlOption, {
          value: "AM",
          label: (0, _i18n.__)('AM')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControlOption, {
          value: "PM",
          label: (0, _i18n.__)('PM')
        })]
      })]
    })]
  });
}
var _default = exports.default = TimeInput;
//# sourceMappingURL=index.js.map