@wordpress/block-editor
Version:
143 lines (142 loc) • 4.52 kB
JavaScript
// packages/block-editor/src/components/date-format-picker/index.js
import { _x, __ } from "@wordpress/i18n";
import { dateI18n, humanTimeDiff } from "@wordpress/date";
import { useState, createInterpolateElement } from "@wordpress/element";
import {
TextControl,
ExternalLink,
VisuallyHidden,
ToggleControl,
__experimentalVStack as VStack,
CustomSelectControl
} from "@wordpress/components";
import { jsx, jsxs } from "react/jsx-runtime";
var exampleDate = /* @__PURE__ */ new Date();
exampleDate.setDate(20);
exampleDate.setMonth(exampleDate.getMonth() - 3);
if (exampleDate.getMonth() === 4) {
exampleDate.setMonth(3);
}
function DateFormatPicker({
format,
defaultFormat,
onChange
}) {
return /* @__PURE__ */ jsxs(
VStack,
{
as: "fieldset",
spacing: 4,
className: "block-editor-date-format-picker",
children: [
/* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: __("Date format") }),
/* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Default format"),
help: `${__("Example:")} ${dateI18n(
defaultFormat,
exampleDate
)}`,
checked: !format,
onChange: (checked) => onChange(checked ? null : defaultFormat)
}
),
format && /* @__PURE__ */ jsx(NonDefaultControls, { format, onChange })
]
}
);
}
function NonDefaultControls({ format, onChange }) {
const suggestedFormats = [
.../* @__PURE__ */ 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 */
_x("n/j/Y", "short date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
_x("n/j/Y g:i A", "short date format with time"),
/* translators: See https://www.php.net/manual/datetime.format.php */
_x("M j, Y", "medium date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
_x("M j, Y g:i A", "medium date format with time"),
/* translators: See https://www.php.net/manual/datetime.format.php */
_x("F j, Y", "long date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
_x("M j", "short date format without the year")
])
];
const suggestedOptions = [
...suggestedFormats.map((suggestedFormat, index) => ({
key: `suggested-${index}`,
name: dateI18n(suggestedFormat, exampleDate),
format: suggestedFormat
})),
{
key: "human-diff",
name: humanTimeDiff(exampleDate),
format: "human-diff"
}
];
const customOption = {
key: "custom",
name: __("Custom"),
className: "block-editor-date-format-picker__custom-format-select-control__custom-option",
hint: __("Enter your own date format")
};
const [isCustom, setIsCustom] = useState(
() => !!format && !suggestedOptions.some((option) => option.format === format)
);
return /* @__PURE__ */ jsxs(VStack, { children: [
/* @__PURE__ */ jsx(
CustomSelectControl,
{
__next40pxDefaultSize: true,
label: __("Choose a format"),
options: [...suggestedOptions, customOption],
value: isCustom ? customOption : suggestedOptions.find(
(option) => option.format === format
) ?? customOption,
onChange: ({ selectedItem }) => {
if (selectedItem === customOption) {
setIsCustom(true);
} else {
setIsCustom(false);
onChange(selectedItem.format);
}
}
}
),
isCustom && /* @__PURE__ */ jsx(
TextControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: __("Custom format"),
hideLabelFromVision: true,
help: createInterpolateElement(
__(
"Enter a date or time <Link>format string</Link>."
),
{
Link: /* @__PURE__ */ jsx(
ExternalLink,
{
href: __(
"https://wordpress.org/documentation/article/customize-date-and-time-format/"
)
}
)
}
),
value: format,
onChange: (value) => onChange(value)
}
)
] });
}
export {
DateFormatPicker as default
};
//# sourceMappingURL=index.js.map