@optilogic/core 1.0.0-beta.0

package/src/components/data-grid/components/CellEditor.tsx

@@ -0,0 +1,346 @@
+/**
+ * CellEditor Component
+ *
+ * Renders an inline cell editor based on column editor type:
+ * - Text: Input field
+ * - Number: Number input
+ * - Date: DatePicker with calendar
+ * - Select: Dropdown select
+ * - Boolean: Checkbox
+ *
+ * Supports validation with visual feedback.
+ */
+
+import * as React from "react";
+import { format, parseISO, isValid } from "date-fns";
+import { cn } from "../../../utils/cn";
+import { Input } from "../../input";
+import { Checkbox } from "../../checkbox";
+import { DatePicker } from "../../date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../select";
+import type { ColumnDef, EditorType, CellValue } from "../types";
+
+export interface CellEditorProps<T = Record<string, CellValue>> {
+  /** Column definition */
+  column: ColumnDef<T>;
+  /** Current value being edited */
+  value: CellValue;
+  /** The row data */
+  row: T;
+  /** Row index */
+  rowIndex: number;
+  /** Callback to commit the edit */
+  onCommit: (value: CellValue) => void;
+  /** Callback to cancel the edit */
+  onCancel: () => void;
+  /** Callback when value changes (for controlled updates) */
+  onChange?: (value: CellValue) => void;
+  /** Additional class name */
+  className?: string;
+}
+
+export function CellEditor<T = Record<string, CellValue>>({
+  column,
+  value,
+  row,
+  rowIndex,
+  onCommit,
+  onCancel,
+  onChange,
+  className,
+}: CellEditorProps<T>) {
+  const editorType = column.editorType || "text";
+  const [internalValue, setInternalValue] = React.useState(value);
+  const [validationError, setValidationError] = React.useState<string | null>(
+    null
+  );
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const selectRef = React.useRef<HTMLButtonElement>(null);
+
+  const currentValue = onChange ? value : internalValue;
+  const setValue = onChange || setInternalValue;
+
+  const validate = React.useCallback(
+    (val: CellValue): boolean => {
+      if (!column.validator) return true;
+
+      const result = column.validator(val, row);
+      if (result === true) {
+        setValidationError(null);
+        return true;
+      }
+
+      setValidationError(typeof result === "string" ? result : "Invalid value");
+      return false;
+    },
+    [column, row]
+  );
+
+  const handleChange = (newValue: CellValue) => {
+    setValue(newValue);
+    setValidationError(null);
+  };
+
+  const handleCommit = () => {
+    if (validate(currentValue)) {
+      onCommit(currentValue);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      handleCommit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      onCancel();
+    } else if (e.key === "Tab") {
+      handleCommit();
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent) => {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    
+    if (relatedTarget?.closest("[data-radix-select-viewport]")) {
+      return;
+    }
+    
+    if (relatedTarget?.closest("[data-cell-editor]")) {
+      return;
+    }
+    
+    if (relatedTarget?.closest("[data-radix-popper-content-wrapper]")) {
+      return;
+    }
+    
+    handleCommit();
+  };
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (editorType === "select") {
+        selectRef.current?.focus();
+      } else {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [editorType]);
+
+  const renderTextEditor = () => (
+    <Input
+      ref={inputRef}
+      type="text"
+      value={currentValue != null ? String(currentValue) : ""}
+      onChange={(e) => handleChange(e.target.value)}
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      className={cn(
+        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        validationError && "ring-2 ring-destructive focus:ring-destructive",
+        className
+      )}
+      aria-invalid={!!validationError}
+      aria-describedby={validationError ? "cell-editor-error" : undefined}
+    />
+  );
+
+  const renderNumberEditor = () => (
+    <Input
+      ref={inputRef}
+      type="number"
+      value={typeof currentValue === "number" ? currentValue : (currentValue != null ? String(currentValue) : "")}
+      onChange={(e) => handleChange(e.target.valueAsNumber || e.target.value)}
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      className={cn(
+        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        validationError && "ring-2 ring-destructive focus:ring-destructive",
+        className
+      )}
+      aria-invalid={!!validationError}
+    />
+  );
+
+  const renderDateEditor = () => {
+    const dateValue = React.useMemo(() => {
+      if (!currentValue) return undefined;
+      if (currentValue instanceof Date) return currentValue;
+      if (typeof currentValue === "string") {
+        const parsed = parseISO(currentValue);
+        return isValid(parsed) ? parsed : undefined;
+      }
+      return undefined;
+    }, [currentValue]);
+
+    const handleDateChange = (date: Date | undefined) => {
+      const stringValue = date ? format(date, "yyyy-MM-dd") : "";
+      if (validate(stringValue)) {
+        onCommit(stringValue);
+      }
+    };
+
+    return (
+      <div 
+        className="h-full w-full"
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onCancel();
+          }
+        }}
+      >
+        <DatePicker
+          value={dateValue}
+          onChange={handleDateChange}
+          placeholder="Select date..."
+          className={cn(
+            "h-full w-full border-0 rounded-none [&>button]:h-full [&>button]:rounded-none [&>button]:border-0",
+            validationError && "ring-2 ring-destructive",
+            className
+          )}
+        />
+      </div>
+    );
+  };
+
+  const renderSelectEditor = () => {
+    const options = column.editorOptions || [];
+
+    return (
+      <Select
+        value={String(currentValue ?? "")}
+        onValueChange={(val) => {
+          handleChange(val);
+          setTimeout(() => {
+            if (validate(val)) {
+              onCommit(val);
+            }
+          }, 0);
+        }}
+      >
+        <SelectTrigger
+          ref={selectRef}
+          className={cn(
+            "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm",
+            validationError && "ring-2 ring-destructive focus:ring-destructive",
+            className
+          )}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              onCancel();
+            }
+          }}
+        >
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  const renderBooleanEditor = () => {
+    const handleToggle = (checked: boolean | "indeterminate") => {
+      const boolValue = checked === true;
+      if (validate(boolValue)) {
+        onCommit(boolValue);
+      }
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center h-full w-full cursor-pointer",
+          className
+        )}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleToggle(!currentValue);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onCancel();
+          }
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleToggle(!currentValue);
+        }}
+        tabIndex={0}
+        ref={(el) => el?.focus()}
+        role="checkbox"
+        aria-checked={!!currentValue}
+      >
+        <Checkbox
+          checked={!!currentValue}
+          onCheckedChange={handleToggle}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+    );
+  };
+
+  const renderEditor = () => {
+    switch (editorType) {
+      case "text":
+        return renderTextEditor();
+      case "number":
+        return renderNumberEditor();
+      case "date":
+        return renderDateEditor();
+      case "select":
+        return renderSelectEditor();
+      case "boolean":
+        return renderBooleanEditor();
+      default:
+        return renderTextEditor();
+    }
+  };
+
+  return (
+    <div 
+      className="relative w-full h-full"
+      data-cell-editor
+      onMouseDown={(e) => {
+        if (e.target !== e.currentTarget) {
+          e.stopPropagation();
+        }
+      }}
+    >
+      {renderEditor()}
+
+      {validationError && (
+        <div
+          id="cell-editor-error"
+          className="absolute top-full left-0 mt-1 z-50 px-2 py-1 text-xs text-destructive-foreground bg-destructive rounded shadow-lg whitespace-nowrap"
+          role="alert"
+        >
+          {validationError}
+        </div>
+      )}
+    </div>
+  );
+}