seti-ramesesv1/dist/components/common/CompassEditor/CompassEditorRowItem.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useLayoutEffect } from 'react';
import styles from '../../../styles/CompassEditor.module.css.js';
import Trash from '../../../node_modules/lucide-react/dist/esm/icons/trash.js';
import Plus from '../../../node_modules/lucide-react/dist/esm/icons/plus.js';
import ChevronDown from '../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';

function useAutoWidth(value, font = "14px Arial") {
    const [width, setWidth] = useState(50);
    useLayoutEffect(() => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        ctx.font = font;
        setWidth(Math.ceil(ctx.measureText(value || " ").width) + 15);
    }, [value, font]);
    return width;
}
const RowItem = ({ row, depth, number, editMode, expanded, onToggleExpand, onUpdateRow, onAddRow, onDeleteRow, isInvalid, renderChildren, }) => {
    const keyWidth = useAutoWidth(row.keyName);
    const valueWidth = useAutoWidth(row.value);
    const isParentObject = row.dataType === "object" && row.children?.length > 0;
    const isExpanded = isParentObject ? expanded.get(row.id) ?? true : false;
    return (jsxs("div", { children: [jsxs("div", { className: styles.row, children: [editMode ? (jsxs("div", { className: styles.editIconWrapper, children: [jsx("div", { className: styles.number, children: number }), jsxs("div", { className: styles.iconGroup, children: [jsx(Trash, { size: 15, onClick: () => onDeleteRow(row.id), className: styles.trashIcon }), jsx(Plus, { size: 15, onClick: () => onAddRow(row.id, depth === 0), className: styles.plusIcon })] })] })) : (jsx("div", { className: "w-10" })), jsx("div", { className: "flex-1", style: { marginLeft: depth * 15 }, children: jsxs("div", { className: styles.keyContainer, children: [jsxs("div", { className: "relative flex items-center", children: [jsx("div", { className: "w-5", children: isParentObject && (jsx(ChevronDown, { size: 15, className: `${styles.chevron} ${isExpanded ? styles.rotate0 : styles.rotate90}`, onClick: () => onToggleExpand(row.id) })) }), jsx("input", { type: "text", value: row.keyName, onChange: (e) => onUpdateRow(row.id, "keyName", e.target.value), placeholder: "key", disabled: !editMode || row.keyName === "_id", className: styles.keyInput, style: { width: `${keyWidth}px` } })] }), jsx("p", { children: ":" }), jsxs("div", { className: styles.valueContainer, children: [row.dataType === "string" && jsx("span", { className: "text-gray-500", children: "\"" }), jsx("input", { type: "text", value: isParentObject ? "Object" : row.value, onChange: (e) => onUpdateRow(row.id, "value", e.target.value), disabled: !editMode || isParentObject, className: `${styles.valueInput} ${isInvalid(row.value, row.dataType) ? styles.invalid : ""}`, style: { width: `${valueWidth}px` } }), row.dataType === "string" && jsx("span", { className: "text-gray-500", children: "\"" })] })] }) }), editMode && (jsxs("select", { value: row.dataType, onChange: (e) => onUpdateRow(row.id, "dataType", e.target.value), className: styles.dataTypeSelect, children: [jsx("option", { value: "string", children: "String" }), jsx("option", { value: "number", children: "Number" }), jsx("option", { value: "boolean", children: "Boolean" }), jsx("option", { value: "object", children: "Object" })] }))] }), isParentObject && isExpanded && (jsx("div", { className: "mt-2 flex flex-col space-y-2", children: renderChildren(row.children, depth + 1) }))] }));
};

export { RowItem as default };
//# sourceMappingURL=CompassEditorRowItem.js.map