@zenithui/time-picker
Version:
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
68 lines (67 loc) • 3.31 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
const ToggleGroupContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext(void 0);
const ToggleGroupRoot = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ type = "single", value, onValueChange, className, children, ...props }, ref)=>{
if ("single" === type && Array.isArray(value)) throw new Error("ToggleGroup: value must be a string when type is single");
if ("multiple" === type && !Array.isArray(value)) throw new Error("ToggleGroup: value must be an array when type is multiple");
const [selectedValues, setSelectedValues] = __WEBPACK_EXTERNAL_MODULE_react__.useState(value ?? ("single" === type ? "" : []));
__WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
setSelectedValues(value ?? ("single" === type ? "" : []));
}, [
value
]);
const toggleValue = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((toggle)=>{
if ("single" === type) {
setSelectedValues(toggle);
onValueChange?.(toggle);
} else setSelectedValues((prev)=>{
const prevArray = Array.isArray(prev) ? prev : [];
const newValues = prevArray.includes(toggle) ? prevArray.filter((v)=>v !== toggle) : [
...prevArray,
toggle
];
onValueChange?.(newValues);
return newValues;
});
}, [
onValueChange,
type,
setSelectedValues
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToggleGroupContext.Provider, {
value: {
selectedValues,
toggleValue,
type
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
...props,
ref: ref,
role: "group",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(className, "toggle-group"),
children: children
})
});
});
const ToggleGroupItem = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ value, disabled, className, children, ...props }, ref)=>{
const context = __WEBPACK_EXTERNAL_MODULE_react__.useContext(ToggleGroupContext);
if (!context) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
const { selectedValues, toggleValue, type } = context;
const isSelected = "single" === type ? selectedValues === value : selectedValues.includes(value);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
...props,
ref: ref,
type: "button",
role: "switch",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(className, "toggle-group-item"),
"aria-label": value,
"aria-checked": isSelected,
"aria-pressed": isSelected,
"data-disabled": disabled ?? false,
disabled: disabled,
onClick: ()=>toggleValue(value),
children: children
});
});
export { ToggleGroupItem, ToggleGroupRoot };