59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
'use client'
|
|
|
|
// src/use-checkbox-group.ts
|
|
import { useCallbackRef } from "@chakra-ui/react-use-callback-ref";
|
|
import { useControllableState } from "@chakra-ui/react-use-controllable-state";
|
|
import { isObject } from "@chakra-ui/shared-utils";
|
|
import { useCallback } from "react";
|
|
function isInputEvent(value) {
|
|
return value && isObject(value) && isObject(value.target);
|
|
}
|
|
function useCheckboxGroup(props = {}) {
|
|
const {
|
|
defaultValue,
|
|
value: valueProp,
|
|
onChange,
|
|
isDisabled,
|
|
isNative
|
|
} = props;
|
|
const onChangeProp = useCallbackRef(onChange);
|
|
const [value, setValue] = useControllableState({
|
|
value: valueProp,
|
|
defaultValue: defaultValue || [],
|
|
onChange: onChangeProp
|
|
});
|
|
const handleChange = useCallback(
|
|
(eventOrValue) => {
|
|
if (!value)
|
|
return;
|
|
const isChecked = isInputEvent(eventOrValue) ? eventOrValue.target.checked : !value.includes(eventOrValue);
|
|
const selectedValue = isInputEvent(eventOrValue) ? eventOrValue.target.value : eventOrValue;
|
|
const nextValue = isChecked ? [...value, selectedValue] : value.filter((v) => String(v) !== String(selectedValue));
|
|
setValue(nextValue);
|
|
},
|
|
[setValue, value]
|
|
);
|
|
const getCheckboxProps = useCallback(
|
|
(props2 = {}) => {
|
|
const checkedKey = isNative ? "checked" : "isChecked";
|
|
return {
|
|
...props2,
|
|
[checkedKey]: value.some((val) => String(props2.value) === String(val)),
|
|
onChange: handleChange
|
|
};
|
|
},
|
|
[handleChange, isNative, value]
|
|
);
|
|
return {
|
|
value,
|
|
isDisabled,
|
|
onChange: handleChange,
|
|
setValue,
|
|
getCheckboxProps
|
|
};
|
|
}
|
|
|
|
export {
|
|
useCheckboxGroup
|
|
};
|
|
//# sourceMappingURL=chunk-TOQK4WO2.mjs.map
|