@blocktion/json-to-table/dist/utils/fieldEditors.js

A powerful, modular React component for converting JSON data to navigable tables with advanced features like automatic column detection, theming, and sub-table navigation. Part of the Blocktion SaaS project ecosystem.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
export const TextEditor = forwardRef(({ value, onChange, onKeyDown, onBlur, className, ...props }, ref) => {
    return (_jsx("input", { ref: ref, type: "text", value: value === null || value === undefined ? "" : String(value), onChange: (e) => onChange(e.target.value), onKeyDown: onKeyDown, onBlur: onBlur, className: className, ...props }));
});
export const NumberEditor = forwardRef(({ value, onChange, onKeyDown, onBlur, className, ...props }, ref) => {
    return (_jsx("input", { ref: ref, type: "number", value: value === null || value === undefined ? "" : Number(value), onChange: (e) => onChange(e.target.value === "" ? null : Number(e.target.value)), onKeyDown: onKeyDown, onBlur: onBlur, className: `${className || ""} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`, ...props }));
});
export const BooleanEditor = forwardRef(({ value, onChange, onKeyDown, onBlur, className, ...props }, ref) => {
    return (_jsxs("select", { ref: ref, value: String(value), onChange: (e) => onChange(e.target.value === "true"), onKeyDown: onKeyDown, onBlur: onBlur, className: className, ...props, children: [_jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] }));
});
export const DateEditor = forwardRef(({ value, onChange, onKeyDown, onBlur, className, ...props }, ref) => {
    return (_jsx("input", { ref: ref, type: "datetime-local", value: value instanceof Date
            ? value.toISOString().slice(0, 16)
            : typeof value === "string"
                ? value.slice(0, 16)
                : "", onChange: (e) => onChange(new Date(e.target.value)), onKeyDown: onKeyDown, onBlur: onBlur, className: className, ...props }));
});
export const SelectEditor = forwardRef(({ value, onChange, onKeyDown, onBlur, className, options = [], ...props }, ref) => {
    return (_jsx("select", { ref: ref, value: String(value), onChange: (e) => onChange(e.target.value), onKeyDown: onKeyDown, onBlur: onBlur, className: className, ...props, children: options.map((option) => (_jsx("option", { value: String(option.value), children: option.label }, String(option.value)))) }));
});
export const createFieldEditor = (column) => {
    switch (column.editorType) {
        case "text":
            return TextEditor;
        case "number":
            return NumberEditor;
        case "boolean":
            return BooleanEditor;
        case "date":
            return DateEditor;
        case "select":
            return SelectEditor;
        case "custom":
            return (column.editorProps
                ?.component || TextEditor);
        default:
            return TextEditor;
    }
};