@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
79 lines (75 loc) • 2.64 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/toggle/use-toggle-group.ts
const [ToggleGroupContext, useToggleGroupContext] = require_context.createContext({
name: "ToggleGroupContext",
strict: false
});
const useToggleGroup = ({ defaultValue, disabled, readOnly, value: valueProp, onChange: onChangeProp,...rest }) => {
const onChangeMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
defaultValue,
value: valueProp,
onChange: onChangeProp
});
const onReset = (0, react.useCallback)((targetValue) => {
onChangeMapRef.current.forEach((onChange$1, value$1) => {
if (targetValue?.includes(value$1)) onChange$1(true);
else onChange$1(false);
});
}, []);
const onChange = (0, react.useCallback)((value$1) => {
if ((0, require_utils_index.utils_exports.isUndefined)(value$1)) return;
setValue((prev) => {
if ((0, require_utils_index.utils_exports.isArray)(prev)) if (prev.includes(value$1)) {
const nextValue = prev.filter((prevValue) => prevValue !== value$1);
onReset(nextValue);
return nextValue;
} else {
const nextValue = [...prev, value$1];
onReset(nextValue);
return nextValue;
}
else if (value$1 === prev) {
onReset();
return;
} else {
onReset([value$1]);
return value$1;
}
});
}, [setValue, onReset]);
require_effect.useUpdateEffect(() => {
onReset(!(0, require_utils_index.utils_exports.isUndefined)(valueProp) ? (0, require_utils_index.utils_exports.toArray)(valueProp) : void 0);
setValue(valueProp);
}, [valueProp]);
return {
disabled,
readOnly,
value,
getGroupProps: (0, react.useCallback)((props) => ({
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
role: "group",
...rest,
...props
}), [
disabled,
readOnly,
rest
]),
onChange,
onChangeMapRef
};
};
//#endregion
exports.ToggleGroupContext = ToggleGroupContext;
exports.useToggleGroup = useToggleGroup;
exports.useToggleGroupContext = useToggleGroupContext;
//# sourceMappingURL=use-toggle-group.cjs.map