@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
43 lines (42 loc) • 2.39 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useSlot } from "../../hooks/use-slot/index.js";
import { useControlled, useEvent } from "@1771technologies/lytenyte-core/internal";
function CheckboxBase({ indeterminate, renderMarker, onCheckChange: onCheck, ...props }, ref) {
const [checked, setChecked] = useControlled({
controlled: props.checked,
default: props.initialChecked ?? false,
});
const onCheckChanged = useEvent((b) => {
setChecked(b);
onCheck?.(b);
});
const marker = useSlot({
slot: renderMarker ?? (checked ? _jsx(CheckIcon, {}) : indeterminate ? _jsx(DashIcon, {}) : _jsx(_Fragment, {})),
state: {
indeterminate: indeterminate ?? false,
checked,
},
});
return (_jsxs("div", { "data-ln-checkbox": true, "data-ln-checked": checked, "data-ln-indeterminate": indeterminate, "data-ln-disabled": props.disabled, style: { position: "relative" }, children: [marker, _jsx("input", { "data-ln-checkbox-input": true, onChange: (e) => {
props.onChange?.(e);
if (e.defaultPrevented || e.isPropagationStopped())
return;
onCheckChanged(e.target.checked);
}, type: "checkbox", ref: ref, ...props, style: {
width: "100%",
height: "100%",
opacity: 0,
margin: 0,
position: "absolute",
top: 0,
left: 0,
} })] }));
}
function CheckIcon(props) {
return (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M1.00024 4.34783C2.53871 5.26087 3.76948 7.08696 4.07717 8C5.61563 4.34783 7.76948 1.91304 9.00024 1", stroke: "currentcolor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
}
function DashIcon(props) {
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" }) }));
}
export const Checkbox = forwardRef(CheckboxBase);