@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 _element = require("@wordpress/element");

var _i18n = require("@wordpress/i18n");

var _date = require("@wordpress/date");

var _components = require("@wordpress/components");

/**
 * WordPress dependencies
 */
// So that we can illustrate the different formats in the dropdown properly,
// show a date that has a day greater than 12 and a month with more than three
// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
// released.
const EXAMPLE_DATE = new Date(2022, 0, 25);
/**
 * 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 {( format: string|null ) => void} props.onChange      Called when a
 *                                                              selection is
 *                                                              made. If `null`,
 *                                                              _Default_ is
 *                                                              selected.
 */

function DateFormatPicker({
  format,
  defaultFormat,
  onChange
}) {
  return (0, _element.createElement)("fieldset", {
    className: "block-editor-date-format-picker"
  }, (0, _element.createElement)(_components.VisuallyHidden, {
    as: "legend"
  }, (0, _i18n.__)('Date format')), (0, _element.createElement)(_components.ToggleControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Default format'),
    help: `${(0, _i18n.__)('Example:')}  ${(0, _date.dateI18n)(defaultFormat, EXAMPLE_DATE)}`,
    checked: !format,
    onChange: checked => onChange(checked ? null : defaultFormat)
  }), format && (0, _element.createElement)(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(['Y-m-d', (0, _i18n._x)('n/j/Y', 'short date format'), (0, _i18n._x)('n/j/Y g:i A', 'short date format with time'), (0, _i18n._x)('M j, Y', 'medium date format'), (0, _i18n._x)('M j, Y g:i A', 'medium date format with time'), (0, _i18n._x)('F j, Y', 'long date format'), (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, EXAMPLE_DATE),
    format: suggestedFormat
  }));
  const customOption = {
    key: 'custom',
    name: (0, _i18n.__)('Custom'),
    className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
    __experimentalHint: (0, _i18n.__)('Enter your own date format')
  };
  const [isCustom, setIsCustom] = (0, _element.useState)(() => !!format && !suggestedFormats.includes(format));
  return (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)(_components.CustomSelectControl, {
    __nextUnconstrainedWidth: 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 && (0, _element.createElement)(_components.TextControl, {
    __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: (0, _element.createElement)(_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