@trail-ui/react
Version:
57 lines (54 loc) • 1.9 kB
JavaScript
import {
switch_default
} from "./chunk-FZC7ACY4.mjs";
import {
useFocusHandler
} from "./chunk-SSX6C2M6.mjs";
import {
useTableContext
} from "./chunk-LRSSE262.mjs";
// src/editable-table/editable-components/switch.tsx
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
function EditableSwitch(props) {
var _a, _b, _c;
const [value, setValue] = useState(false);
const cellRef = useRef(null);
const switchRef = useRef(null);
const { updateData } = useTableContext(props.cell);
const { isCurrentCellFocused, focusCurrentCell, tableRef } = useFocusHandler(
props.cell,
false
);
const metaData = props.cell.column.columnDef.meta;
useEffect(() => {
setValue(props.cell.getValue());
}, []);
useEffect(() => {
var _a2, _b2;
if (isCurrentCellFocused && ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement))) {
(_b2 = switchRef.current) == null ? void 0 : _b2.focus();
}
}, [isCurrentCellFocused]);
return /* @__PURE__ */ jsx("div", { ref: cellRef, className: "td-content relative rounded px-2 py-0.5", children: /* @__PURE__ */ jsx(
switch_default,
{
ref: switchRef,
isToggled: value,
onChange: (newValue) => {
setValue(newValue);
updateData(newValue);
},
tabIndex: isCurrentCellFocused ? 0 : -1,
isDisabled: ((_a = props.isCellDisabled) == null ? void 0 : _a.call(props, props.cell.row.original, props.cell.column.columnDef.id)) || false,
...metaData.label ? { label: metaData.label(props.cell.row.original) } : { labelId: props.headerId },
activeText: (_b = metaData.activeText) != null ? _b : "Enabled",
inactiveText: (_c = metaData.inactiveText) != null ? _c : "Disabled",
onFocus: focusCurrentCell,
classNames: { label: "sr-only" }
}
) });
}
export {
EditableSwitch
};