@ariakit/react-core
Version:
Ariakit React core
176 lines (146 loc) • 5.73 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _DHAXJ5PAcjs = require('./DHAXJ5PA.cjs');
var _IRJEBRAWcjs = require('./IRJEBRAW.cjs');
var _OUGM36S4cjs = require('./OUGM36S4.cjs');
var _25BPIGZHcjs = require('./25BPIGZH.cjs');
var _WULEED4Qcjs = require('./WULEED4Q.cjs');
var _OZM4QA2Vcjs = require('./OZM4QA2V.cjs');
var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');
// src/checkbox/checkbox.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "input";
function setMixed(element, mixed) {
if (mixed) {
element.indeterminate = true;
} else if (element.indeterminate) {
element.indeterminate = false;
}
}
function isNativeCheckbox(tagName, type) {
return tagName === "input" && (!type || type === "checkbox");
}
function getPrimitiveValue(value) {
if (Array.isArray(value)) {
return value.toString();
}
return value;
}
var useCheckbox = _WULEED4Qcjs.createHook.call(void 0,
function useCheckbox2(_a) {
var _b = _a, {
store,
name,
value: valueProp,
checked: checkedProp,
defaultChecked
} = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
"store",
"name",
"value",
"checked",
"defaultChecked"
]);
const context = _OUGM36S4cjs.useCheckboxContext.call(void 0, );
store = store || context;
const [_checked, setChecked] = _react.useState.call(void 0, defaultChecked != null ? defaultChecked : false);
const checked = _25BPIGZHcjs.useStoreState.call(void 0, store, (state) => {
if (checkedProp !== void 0) return checkedProp;
if ((state == null ? void 0 : state.value) === void 0) return _checked;
if (valueProp != null) {
if (Array.isArray(state.value)) {
const primitiveValue = getPrimitiveValue(valueProp);
return state.value.includes(primitiveValue);
}
return state.value === valueProp;
}
if (Array.isArray(state.value)) return false;
if (typeof state.value === "boolean") return state.value;
return false;
});
const ref = _react.useRef.call(void 0, null);
const tagName = _OZM4QA2Vcjs.useTagName.call(void 0, ref, TagName);
const nativeCheckbox = isNativeCheckbox(tagName, props.type);
const mixed = checked ? checked === "mixed" : void 0;
const isChecked = checked === "mixed" ? false : checked;
const disabled = _misc.disabledFromProps.call(void 0, props);
const [propertyUpdated, schedulePropertyUpdate] = _OZM4QA2Vcjs.useForceUpdate.call(void 0, );
_react.useEffect.call(void 0, () => {
const element = ref.current;
if (!element) return;
setMixed(element, mixed);
if (nativeCheckbox) return;
element.checked = isChecked;
if (name !== void 0) {
element.name = name;
}
if (valueProp !== void 0) {
element.value = `${valueProp}`;
}
}, [propertyUpdated, mixed, nativeCheckbox, isChecked, name, valueProp]);
const onChangeProp = props.onChange;
const onChange = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
if (disabled) {
event.stopPropagation();
event.preventDefault();
return;
}
setMixed(event.currentTarget, mixed);
if (!nativeCheckbox) {
event.currentTarget.checked = !event.currentTarget.checked;
schedulePropertyUpdate();
}
onChangeProp == null ? void 0 : onChangeProp(event);
if (event.defaultPrevented) return;
const elementChecked = event.currentTarget.checked;
setChecked(elementChecked);
store == null ? void 0 : store.setValue((prevValue) => {
if (valueProp == null) return elementChecked;
const primitiveValue = getPrimitiveValue(valueProp);
if (!Array.isArray(prevValue)) {
return prevValue === primitiveValue ? false : primitiveValue;
}
if (elementChecked) {
if (prevValue.includes(primitiveValue)) {
return prevValue;
}
return [...prevValue, primitiveValue];
}
return prevValue.filter((v) => v !== primitiveValue);
});
});
const onClickProp = props.onClick;
const onClick = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented) return;
if (nativeCheckbox) return;
onChange(event);
});
props = _OZM4QA2Vcjs.useWrapElement.call(void 0,
props,
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IRJEBRAWcjs.CheckboxCheckedContext.Provider, { value: isChecked, children: element }),
[isChecked]
);
props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
role: !nativeCheckbox ? "checkbox" : void 0,
type: nativeCheckbox ? "checkbox" : void 0,
"aria-checked": checked
}, props), {
ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, ref, props.ref),
onChange,
onClick
});
props = _DHAXJ5PAcjs.useCommand.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { clickOnEnter: !nativeCheckbox }, props));
return _misc.removeUndefinedValues.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
name: nativeCheckbox ? name : void 0,
value: nativeCheckbox ? valueProp : void 0,
checked: isChecked
}, props));
}
);
var Checkbox = _WULEED4Qcjs.forwardRef.call(void 0, function Checkbox2(props) {
const htmlProps = useCheckbox(props);
return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});
exports.useCheckbox = useCheckbox; exports.Checkbox = Checkbox;