@wordpress/components/build-module/date-time/time/index.mjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../../src/date-time/time/index.tsx"],
  "sourcesContent": ["import { startOfMinute } from 'date-fns';\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { date as formatDate } from '@wordpress/date';\nimport BaseControl from '../../base-control';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone, getDaysInMonth } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from './time-input';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker({\n  is12Hour,\n  currentTime,\n  onChange,\n  dateOrder: dateOrderProp,\n  hideLabelFromVision = false\n}) {\n  const [date, setDate] = useState(() =>\n  // Truncate the date at the minutes, see: #15495.\n  startOfMinute(inputToDate(currentTime ?? new Date())));\n\n  // Reset the state when currentTime changed.\n  // TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n  useEffect(() => {\n    setDate(startOfMinute(inputToDate(currentTime ?? new Date())));\n  }, [currentTime]);\n  const monthOptions = [{\n    value: '01',\n    label: __('January')\n  }, {\n    value: '02',\n    label: __('February')\n  }, {\n    value: '03',\n    label: __('March')\n  }, {\n    value: '04',\n    label: __('April')\n  }, {\n    value: '05',\n    label: __('May')\n  }, {\n    value: '06',\n    label: __('June')\n  }, {\n    value: '07',\n    label: __('July')\n  }, {\n    value: '08',\n    label: __('August')\n  }, {\n    value: '09',\n    label: __('September')\n  }, {\n    value: '10',\n    label: __('October')\n  }, {\n    value: '11',\n    label: __('November')\n  }, {\n    value: '12',\n    label: __('December')\n  }];\n  const {\n    day,\n    month,\n    year,\n    minutes,\n    hours\n  } = useMemo(() => ({\n    day: formatDate('d', date),\n    month: formatDate('m', date),\n    year: formatDate('Y', date),\n    minutes: formatDate('i', date),\n    hours: formatDate('H', date)\n  }), [date]);\n  const buildNumberControlChangeCallback = method => {\n    const callback = (value, {\n      event\n    }) => {\n      if (!validateInputElementTarget(event)) {\n        return;\n      }\n\n      // We can safely assume value is a number if target is valid.\n      const numberValue = Number(value);\n\n      // Internal date is UTC-normalized, but the field should be updated\n      // as if in the configured timezone.\n      const newDate = setInConfiguredTimezone(date, {\n        [method]: numberValue\n      });\n      setDate(newDate);\n      onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n    };\n    return callback;\n  };\n  const onTimeInputChangeCallback = ({\n    hours: newHours,\n    minutes: newMinutes\n  }) => {\n    // Internal date is UTC-normalized, but the field should be updated\n    // as if in the configured timezone.\n    const newDate = setInConfiguredTimezone(date, {\n      hours: newHours,\n      minutes: newMinutes\n    });\n    setDate(newDate);\n    onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n  };\n  const dayField = /*#__PURE__*/_jsx(DayInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n    ,\n    label: __('Day'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: day,\n    step: 1,\n    min: 1,\n    max: getDaysInMonth(Number(year), Number(month) - 1),\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('date')\n  }, \"day\");\n  const monthField = /*#__PURE__*/_jsx(MonthSelectWrapper, {\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      className: \"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n      ,\n      label: __('Month'),\n      hideLabelFromVision: true,\n      __next40pxDefaultSize: true,\n      value: month,\n      options: monthOptions,\n      onChange: value => {\n        // Internal date is UTC-normalized, but the field should be updated\n        // as if in the configured timezone.\n        const newDate = setInConfiguredTimezone(date, {\n          month: Number(value) - 1\n        });\n        setDate(newDate);\n        onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n      }\n    })\n  }, \"month\");\n  const yearField = /*#__PURE__*/_jsx(YearInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n    ,\n    label: __('Year'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: year,\n    step: 1,\n    min: 1,\n    max: 9999,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('year'),\n    __unstableStateReducer: buildPadInputStateReducer(4)\n  }, \"year\");\n  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;\n  const fields = dateOrder.split('').map(field => {\n    switch (field) {\n      case 'd':\n        return dayField;\n      case 'm':\n        return monthField;\n      case 'y':\n        return yearField;\n      default:\n        return null;\n    }\n  });\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__time\" // Unused, for backwards compatibility.\n    ,\n    children: [/*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Time')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Time')\n      }), /*#__PURE__*/_jsxs(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: [/*#__PURE__*/_jsx(TimeInput, {\n          value: {\n            hours: Number(hours),\n            minutes: Number(minutes)\n          },\n          is12Hour: is12Hour,\n          onChange: onTimeInputChangeCallback\n        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(TimeZone, {})]\n      })]\n    }), /*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Date')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Date')\n      }), /*#__PURE__*/_jsx(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: fields\n      })]\n    })]\n  });\n}\n\n/**\n * A component to input a time.\n *\n * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimeInput = () => {\n * \tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n *\n * \treturn (\n * \t\t<TimePicker.TimeInput\n * \t\t\tvalue={ time }\n * \t\t\tonChange={ setTime }\n * \t\t\tlabel=\"Time\"\n * \t\t/>\n * \t);\n * };\n * ```\n */\nTimePicker.TimeInput = TimeInput;\nObject.assign(TimePicker.TimeInput, {\n  displayName: 'TimePicker.TimeInput'\n});\nexport default TimePicker;"],
  "mappings": "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",
  "names": []
}