@wordpress/components
Version:
UI components for WordPress.
175 lines (173 loc) • 6.94 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/date-time/time/time-input/index.tsx
var time_input_exports = {};
__export(time_input_exports, {
TimeInput: () => TimeInput,
default: () => time_input_default
});
module.exports = __toCommonJS(time_input_exports);
var import_clsx = __toESM(require("clsx"));
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_styles = require("../styles");
var import_h_stack = require("../../../h-stack");
var import_utils = require("../../utils");
var import_utils2 = require("../../../utils");
var import_base_control = __toESM(require("../../../base-control"));
var import_toggle_group_control = require("../../../toggle-group-control");
var import_jsx_runtime = require("react/jsx-runtime");
function TimeInput({
value: valueProp,
defaultValue,
is12Hour,
label,
minutesProps,
onChange
}) {
const [value = {
hours: (/* @__PURE__ */ new Date()).getHours(),
minutes: (/* @__PURE__ */ new Date()).getMinutes()
}, setValue] = (0, import_utils2.useControlledValue)({
value: valueProp,
onChange,
defaultValue
});
const dayPeriod = parseDayPeriod(value.hours);
const hours12Format = (0, import_utils.from24hTo12h)(value.hours);
const buildNumberControlChangeCallback = (method) => {
return (_value, {
event
}) => {
if (!(0, import_utils.validateInputElementTarget)(event)) {
return;
}
const numberValue = Number(_value);
setValue({
...value,
[method]: method === "hours" && is12Hour ? (0, import_utils.from12hTo24h)(numberValue, dayPeriod === "PM") : numberValue
});
};
};
const buildAmPmChangeCallback = (_value) => {
return () => {
if (dayPeriod === _value) {
return;
}
setValue({
...value,
hours: (0, import_utils.from12hTo24h)(hours12Format, _value === "PM")
});
};
};
function parseDayPeriod(_hours) {
return _hours < 12 ? "AM" : "PM";
}
const Wrapper = label ? import_styles.Fieldset : import_element.Fragment;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
children: [label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default.VisualLabel, {
as: "legend",
children: label
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
alignment: "left",
expanded: false,
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.TimeWrapper, {
className: "components-datetime__time-field components-datetime__time-field-time",
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.HoursInput, {
className: "components-datetime__time-field-hours-input",
label: (0, import_i18n.__)("Hours"),
hideLabelFromVision: true,
__next40pxDefaultSize: true,
value: String(is12Hour ? hours12Format : value.hours).padStart(2, "0"),
step: 1,
min: is12Hour ? 1 : 0,
max: is12Hour ? 12 : 23,
required: true,
spinControls: "none",
isPressEnterToChange: true,
isDragEnabled: false,
isShiftStepEnabled: false,
onChange: buildNumberControlChangeCallback("hours"),
__unstableStateReducer: (0, import_utils.buildPadInputStateReducer)(2)
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TimeSeparator, {
className: "components-datetime__time-separator",
"aria-hidden": "true",
children: ":"
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.MinutesInput, {
className: (0, import_clsx.default)(
"components-datetime__time-field-minutes-input",
// Unused, for backwards compatibility.
minutesProps?.className
),
label: (0, import_i18n.__)("Minutes"),
hideLabelFromVision: true,
__next40pxDefaultSize: true,
value: String(value.minutes).padStart(2, "0"),
step: 1,
min: 0,
max: 59,
required: true,
spinControls: "none",
isPressEnterToChange: true,
isDragEnabled: false,
isShiftStepEnabled: false,
onChange: (...args) => {
buildNumberControlChangeCallback("minutes")(...args);
minutesProps?.onChange?.(...args);
},
__unstableStateReducer: (0, import_utils.buildPadInputStateReducer)(2),
...minutesProps
})]
}), is12Hour && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_toggle_group_control.ToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
isBlock: true,
label: (0, import_i18n.__)("Select AM or PM"),
hideLabelFromVision: true,
value: dayPeriod,
onChange: (newValue) => {
buildAmPmChangeCallback(newValue)();
},
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_group_control.ToggleGroupControlOption, {
value: "AM",
label: (0, import_i18n.__)("AM")
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_group_control.ToggleGroupControlOption, {
value: "PM",
label: (0, import_i18n.__)("PM")
})]
})]
})]
});
}
var time_input_default = TimeInput;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
TimeInput
});
//# sourceMappingURL=index.js.map