@wordpress/block-editor/build/components/date-format-picker/index.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DateFormatPicker;
var _i18n = require("@wordpress/i18n");
var _date = require("@wordpress/date");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

// So that we illustrate the different formats in the dropdown properly, show a date that is
// somewhat recent, has a day greater than 12, and a month with more than three letters.
const exampleDate = new Date();
exampleDate.setDate(20);
exampleDate.setMonth(exampleDate.getMonth() - 3);
if (exampleDate.getMonth() === 4) {
  // May has three letters, so use March.
  exampleDate.setMonth(3);
}

/**
 * The `DateFormatPicker` component renders controls that let the user choose a
 * _date format_. That is, how they want their dates to be formatted.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md
 *
 * @param {Object}      props
 * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.
 * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.
 * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.
 */
function DateFormatPicker({
  format,
  defaultFormat,
  onChange
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    as: "fieldset",
    spacing: 4,
    className: "block-editor-date-format-picker",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
      as: "legend",
      children: (0, _i18n.__)('Date format')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
      __nextHasNoMarginBottom: true,
      label: (0, _i18n.__)('Default format'),
      help: `${(0, _i18n.__)('Example:')}  ${(0, _date.dateI18n)(defaultFormat, exampleDate)}`,
      checked: !format,
      onChange: checked => onChange(checked ? null : defaultFormat)
    }), format && /*#__PURE__*/(0, _jsxRuntime.jsx)(NonDefaultControls, {
      format: format,
      onChange: onChange
    })]
  });
}
function NonDefaultControls({
  format,
  onChange
}) {
  var _suggestedOptions$fin;
  // Suggest a short format, medium format, long format, and a standardised
  // (YYYY-MM-DD) format. The short, medium, and long formats are localised as
  // different languages have different ways of writing these. For example, 'F
  // j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April
  // 2022) in German (de). The resultant array is de-duplicated as some
  // languages will use the same format string for short, medium, and long
  // formats.
  const suggestedFormats = [...new Set([/* translators: See https://www.php.net/manual/datetime.format.php */
  'Y-m-d', /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('n/j/Y', 'short date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('n/j/Y g:i A', 'short date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('M j, Y', 'medium date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('M j, Y g:i A', 'medium date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('F j, Y', 'long date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
  (0, _i18n._x)('M j', 'short date format without the year')])];
  const suggestedOptions = [...suggestedFormats.map((suggestedFormat, index) => ({
    key: `suggested-${index}`,
    name: (0, _date.dateI18n)(suggestedFormat, exampleDate),
    format: suggestedFormat
  })), {
    key: 'human-diff',
    name: (0, _date.humanTimeDiff)(exampleDate),
    format: 'human-diff'
  }];
  const customOption = {
    key: 'custom',
    name: (0, _i18n.__)('Custom'),
    className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
    hint: (0, _i18n.__)('Enter your own date format')
  };
  const [isCustom, setIsCustom] = (0, _element.useState)(() => !!format && !suggestedOptions.some(option => option.format === format));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
      __next40pxDefaultSize: true,
      label: (0, _i18n.__)('Choose a format'),
      options: [...suggestedOptions, customOption],
      value: isCustom ? customOption : (_suggestedOptions$fin = suggestedOptions.find(option => option.format === format)) !== null && _suggestedOptions$fin !== void 0 ? _suggestedOptions$fin : customOption,
      onChange: ({
        selectedItem
      }) => {
        if (selectedItem === customOption) {
          setIsCustom(true);
        } else {
          setIsCustom(false);
          onChange(selectedItem.format);
        }
      }
    }), isCustom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
      label: (0, _i18n.__)('Custom format'),
      hideLabelFromVision: true,
      help: (0, _element.createInterpolateElement)((0, _i18n.__)('Enter a date or time <Link>format string</Link>.'), {
        Link: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
          href: (0, _i18n.__)('https://wordpress.org/documentation/article/customize-date-and-time-format/')
        })
      }),
      value: format,
      onChange: value => onChange(value)
    })]
  });
}
//# sourceMappingURL=index.js.map