@wordpress/block-editor
Version:
157 lines (155 loc) • 6.01 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/date-format-picker/index.js
var date_format_picker_exports = {};
__export(date_format_picker_exports, {
default: () => DateFormatPicker
});
module.exports = __toCommonJS(date_format_picker_exports);
var import_i18n = require("@wordpress/i18n");
var import_date = require("@wordpress/date");
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalVStack,
{
as: "fieldset",
spacing: 4,
className: "block-editor-date-format-picker",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "legend", children: (0, import_i18n.__)("Date format") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToggleControl,
{
__nextHasNoMarginBottom: true,
label: (0, import_i18n.__)("Default format"),
help: `${(0, import_i18n.__)("Example:")} ${(0, import_date.dateI18n)(
defaultFormat,
exampleDate
)}`,
checked: !format,
onChange: (checked) => onChange(checked ? null : defaultFormat)
}
),
format && /* @__PURE__ */ (0, import_jsx_runtime.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 */
(0, import_i18n._x)("n/j/Y", "short date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
(0, import_i18n._x)("n/j/Y g:i A", "short date format with time"),
/* translators: See https://www.php.net/manual/datetime.format.php */
(0, import_i18n._x)("M j, Y", "medium date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
(0, import_i18n._x)("M j, Y g:i A", "medium date format with time"),
/* translators: See https://www.php.net/manual/datetime.format.php */
(0, import_i18n._x)("F j, Y", "long date format"),
/* translators: See https://www.php.net/manual/datetime.format.php */
(0, import_i18n._x)("M j", "short date format without the year")
])
];
const suggestedOptions = [
...suggestedFormats.map((suggestedFormat, index) => ({
key: `suggested-${index}`,
name: (0, import_date.dateI18n)(suggestedFormat, exampleDate),
format: suggestedFormat
})),
{
key: "human-diff",
name: (0, import_date.humanTimeDiff)(exampleDate),
format: "human-diff"
}
];
const customOption = {
key: "custom",
name: (0, import_i18n.__)("Custom"),
className: "block-editor-date-format-picker__custom-format-select-control__custom-option",
hint: (0, import_i18n.__)("Enter your own date format")
};
const [isCustom, setIsCustom] = (0, import_element.useState)(
() => !!format && !suggestedOptions.some((option) => option.format === format)
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.CustomSelectControl,
{
__next40pxDefaultSize: true,
label: (0, import_i18n.__)("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__ */ (0, import_jsx_runtime.jsx)(
import_components.TextControl,
{
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, import_i18n.__)("Custom format"),
hideLabelFromVision: true,
help: (0, import_element.createInterpolateElement)(
(0, import_i18n.__)(
"Enter a date or time <Link>format string</Link>."
),
{
Link: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ExternalLink,
{
href: (0, import_i18n.__)(
"https://wordpress.org/documentation/article/customize-date-and-time-format/"
)
}
)
}
),
value: format,
onChange: (value) => onChange(value)
}
)
] });
}
//# sourceMappingURL=index.js.map