@trail-ui/react
Version:
53 lines (52 loc) • 1.83 kB
JavaScript
// src/editable-table/components-for-stories/checkbox.tsx
import { forwardRef, useEffect, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var CellCheckbox = forwardRef(
({ isIndeterminate, isSelected, ...props }, ref) => {
const checkboxRef = useRef(null);
useEffect(() => {
if (typeof ref === "function") {
ref(checkboxRef.current);
} else if (ref) {
ref.current = checkboxRef.current;
}
}, [ref]);
useEffect(() => {
if (checkboxRef.current) {
checkboxRef.current.indeterminate = isIndeterminate != null ? isIndeterminate : false;
}
}, [isIndeterminate]);
return /* @__PURE__ */ jsxs("div", { className: "custom-checkbox text-center", children: [
/* @__PURE__ */ jsx("input", { ...props, ref: checkboxRef, type: "checkbox" }),
/* @__PURE__ */ jsxs("div", { className: "box bg-neutral-50", children: [
/* @__PURE__ */ jsx(
"svg",
{
className: `checkmark ${isSelected ? "visible" : "hidden"}`,
"aria-hidden": "true",
role: "presentation",
viewBox: "0 0 17 18",
children: /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" })
}
),
/* @__PURE__ */ jsx(
"svg",
{
className: `indeterminate-mark ${isIndeterminate ? "visible" : "hidden"}`,
"aria-hidden": "true",
role: "presentation",
stroke: "currentColor",
strokeWidth: "3",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "12", y2: "12" })
}
)
] })
] });
}
);
CellCheckbox.displayName = "CellCheckbox";
var checkbox_default = CellCheckbox;
export {
checkbox_default as default
};