@multiplatform.one/table 6.0.0

package/src/components/DataTableCell/index.tsx

@@ -0,0 +1,720 @@
+/**
+ * DataTableCell - renders the appropriate field component based on column fieldType.
+ *
+ * Every cell in DataTable is a field. The fieldType determines which input renders.
+ * When readOnly is true, the field component is rendered in read-only mode.
+ *
+ * All field types render their actual form component from @multiplatform.one/forms
+ * in standalone mode using value/onValueChange (no form.Field binding).
+ */
+
+import {
+  // Basic inputs
+  Checkbox,
+  Switch,
+  Select,
+  Combobox,
+  Input,
+  TextArea,
+  Slider,
+  Progress,
+  // Selection components
+  RadioGroup,
+  ToggleGroup,
+  // Date/Time components
+  DatePicker,
+  DatetimePicker,
+  TimePicker,
+  DateRangePicker,
+  MultiDatePicker,
+  // Numeric/special inputs
+  Stepper,
+  Duration,
+  PhoneInput,
+  Barcode,
+  MentionInput,
+  OTPInput,
+  // Visual/feedback
+  Rating,
+  // File/media
+  FileUpload,
+  ImageField,
+  Signature,
+  Geolocation,
+  // Special
+  ColorPicker,
+  // Read-only display variants
+  FieldDisplay,
+} from "@multiplatform.one/forms";
+import { CellModalEditor } from "./CellModalEditor";
+import { Star } from "@phosphor-icons/react";
+import { RichTextEditor } from "@multiplatform.one/rich-text";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useCallback } from "react";
+import { View } from "tamagui";
+import type { DataTableFieldProps, DataTableField } from "../../types";
+
+export interface DataTableCellProps {
+  /** Current cell value */
+  value: any;
+  /** Field type - determines which input renders. Defaults to "input" */
+  field?: DataTableField;
+  /** Props to pass to the field component */
+  fieldProps?: DataTableFieldProps;
+  /** Callback when value changes */
+  onChange: (value: any) => void;
+  /** Read-only mode - field is visible but not editable */
+  readOnly?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Column ID for accessibility */
+  columnId: string;
+  /** Row index for accessibility */
+  rowIndex: number;
+  /** Row data for custom render */
+  rowData?: any;
+  /** Size token for field sizing */
+  size?: string;
+  /** Use compact sizing */
+  compact?: boolean;
+  /**
+   * For linked daterange columns: the value of the linked (end date) column.
+   * When set, renders a DateRangePicker with this cell as "from" and linkedValue as "to".
+   */
+  linkedValue?: any;
+  /**
+   * For linked daterange columns: callback to update the linked (end date) column.
+   */
+  onLinkedChange?: (value: any) => void;
+}
+
+export function DataTableCell({
+  value,
+  field = "input",
+  fieldProps = {},
+  onChange,
+  readOnly = false,
+  disabled = false,
+  columnId: _columnId,
+  rowIndex: _rowIndex,
+  rowData,
+  size,
+  compact,
+  linkedValue: _linkedValue,
+  onLinkedChange: _onLinkedChange,
+}: DataTableCellProps) {
+  // Cells are always compact unless caller explicitly opts out — table rows
+  // are 40-44px tall, so default-sized fields overflow the row.
+  const { knobProps } = useResolvedKnobs({ size, compact: compact ?? true });
+  const {
+    options,
+    placeholder,
+    min,
+    max,
+    step,
+    precision,
+    currency: _currency,
+    defaultCountry,
+    otpLength,
+    mentions,
+    maxRating,
+    dateFormat: _dateFormat,
+    timeFormat,
+    minDate,
+    maxDate,
+    allowMultiple,
+    dateRangeLinkedColumn: _dateRangeLinkedColumn,
+    dateRangeIsEndColumn: _dateRangeIsEndColumn,
+    render,
+    ...restProps
+  } = fieldProps;
+
+  const handleChange = useCallback(
+    (newValue: any) => {
+      if (readOnly || disabled) return;
+      onChange(newValue);
+    },
+    [onChange, readOnly, disabled],
+  );
+
+  // Custom render function
+  if (field === "custom" && render) {
+    return <CellWrapper>{render(value, rowData, handleChange)}</CellWrapper>;
+  }
+
+  // Read-only cells route through FieldDisplay (lightweight, view-only) rather
+  // than mounting the full Edit component with disabled={true}. This keeps
+  // large tables performant and gives heavy fields a purpose-built compact
+  // representation. Edit-mode (below) still mounts the full field component.
+  if (readOnly) {
+    return (
+      <CellWrapper justify={field === "stepper" || field === "slider" ? "flex-end" : "flex-start"}>
+        <FieldDisplay
+          field={field}
+          value={value}
+          fieldProps={fieldProps}
+          linkedValue={_linkedValue}
+        />
+      </CellWrapper>
+    );
+  }
+
+  // Render appropriate field based on type
+  switch (field) {
+    // ─── Boolean inputs ───────────────────────────────────────
+    case "checkbox":
+      return (
+        <CellWrapper justify="center">
+          <Checkbox
+            checked={Boolean(value)}
+            onCheckedChange={handleChange}
+            disabled={disabled || readOnly}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "switch":
+      return (
+        <CellWrapper justify="center">
+          <Switch
+            checked={Boolean(value)}
+            onCheckedChange={handleChange}
+            disabled={disabled || readOnly}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    // ─── Selection inputs ─────────────────────────────────────
+    case "select":
+      return (
+        <CellWrapper>
+          <Select
+            value={value != null ? String(value) : ""}
+            onValueChange={handleChange}
+            options={options ?? []}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "combobox":
+      return (
+        <CellWrapper>
+          <Combobox
+            value={value != null ? String(value) : ""}
+            onValueChange={handleChange}
+            options={options ?? []}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "radiogroup":
+      return (
+        <CellWrapper>
+          <RadioGroup
+            value={value != null ? String(value) : ""}
+            onValueChange={handleChange}
+            options={options ?? []}
+            disabled={disabled || readOnly}
+            size={knobProps.sizeToken}
+            orientation="horizontal"
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "togglegroup":
+      return (
+        <CellWrapper>
+          <ToggleGroup
+            value={allowMultiple ? (Array.isArray(value) ? value : []) : value}
+            onValueChange={handleChange}
+            options={options ?? []}
+            disabled={disabled || readOnly}
+            type={allowMultiple ? "multiple" : "single"}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    // ─── Numeric inputs ───────────────────────────────────────
+    case "stepper":
+      return (
+        <CellWrapper>
+          <Stepper
+            defaultValue={value != null ? Number(value) : undefined}
+            onChange={(v: any) => handleChange(v)}
+            min={min}
+            max={max}
+            step={step ?? 1}
+            precision={precision ?? 0}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "0"}
+            size={knobProps.sizeToken}
+            // In-cell stepper renders as plain numeric input — full +/- buttons
+            // overflow narrow columns. Wheel and keyboard arrows still work.
+            showButtons={false}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "slider":
+      return (
+        <CellWrapper minWidth={120}>
+          <Slider
+            value={[value != null ? Number(value) : (min ?? 0)]}
+            onValueChange={readOnly ? undefined : (values) => handleChange(values[0])}
+            min={min ?? 0}
+            max={max ?? 100}
+            step={step ?? 1}
+            disabled={disabled}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "progress":
+      return (
+        <CellWrapper minWidth={120}>
+          <Progress
+            value={value != null ? Number(value) : 0}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "rating": {
+      // Rating's value contract is a 0–1 fraction of maxStars. Cells store the
+      // raw star count (e.g. 4 of 5), so we translate in both directions.
+      const stars = maxRating ?? 5;
+      const fraction = value != null ? Number(value) / stars : 0;
+      return (
+        <CellWrapper justify="center">
+          <Rating
+            value={Number.isFinite(fraction) ? Math.max(0, Math.min(1, fraction)) : 0}
+            onChange={(v: number) => handleChange(Math.round(v * stars))}
+            disabled={disabled || readOnly}
+            maxStars={stars}
+            starIcon={restProps.starIcon ?? Star}
+            size={knobProps.sizeToken}
+          />
+        </CellWrapper>
+      );
+    }
+
+    // ─── Date/Time inputs ─────────────────────────────────────
+    case "datepicker":
+      return (
+        <CellWrapper>
+          <DatePicker
+            value={value}
+            onValueChange={handleChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Select date"}
+            minDate={minDate}
+            maxDate={maxDate}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "datetimepicker":
+      return (
+        <CellWrapper>
+          <DatetimePicker
+            value={value}
+            onValueChange={handleChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Select date & time"}
+            minDate={minDate}
+            maxDate={maxDate}
+            timeFormat={timeFormat}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "timepicker":
+      return (
+        <CellWrapper>
+          <TimePicker
+            value={value ?? ""}
+            onChange={handleChange}
+            disabled={disabled}
+            placeholder={placeholder || "Select time"}
+            timeFormat={timeFormat}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "daterangepicker":
+      return (
+        <CellWrapper>
+          <DateRangePicker
+            defaultValue={value}
+            disabled={disabled}
+            placeholder={placeholder || "Select range"}
+            minDate={minDate}
+            maxDate={maxDate}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "multidatepicker":
+      return (
+        <CellWrapper>
+          <MultiDatePicker
+            defaultValue={value}
+            disabled={disabled}
+            placeholder={placeholder || "Select dates"}
+            minDate={minDate}
+            maxDate={maxDate}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "duration":
+      return (
+        <CellWrapper>
+          <Duration
+            value={value != null ? Number(value) : 0}
+            onChange={handleChange}
+            disabled={disabled}
+            placeholder={placeholder || "Select duration"}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    // ─── Special inputs ───────────────────────────────────────
+    case "colorpicker":
+      return (
+        <CellWrapper>
+          <ColorPicker
+            value={value ?? ""}
+            onValueChange={handleChange}
+            placeholder={placeholder || "#000000"}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "phoneinput":
+      return (
+        <CellWrapper>
+          <PhoneInput
+            defaultValue={value ?? ""}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Phone number"}
+            defaultCountry={defaultCountry}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "otp":
+      return (
+        <CellWrapper justify="center">
+          <OTPInput
+            value={value ?? ""}
+            onChange={handleChange}
+            disabled={disabled || readOnly}
+            length={otpLength ?? 6}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "mentioninput":
+      return (
+        <CellModalEditor
+          field="mentioninput"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Edit text"
+        >
+          <MentionInput
+            defaultValue={value ?? ""}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Enter text..."}
+            mentions={mentions ? [{ trigger: "@", data: mentions }] : [{ trigger: "@", data: [] }]}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "barcode":
+      return (
+        <CellWrapper>
+          <Barcode
+            value={value ?? ""}
+            onChange={handleChange}
+            disabled={disabled}
+            size={knobProps.sizeToken}
+            barcodeIcon={restProps.barcodeIcon}
+            scanIcon={restProps.scanIcon}
+            stopIcon={restProps.stopIcon}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    // ─── File/media inputs ────────────────────────────────────
+    case "fileupload":
+      return (
+        <CellModalEditor
+          field="fileupload"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Upload file"
+        >
+          <FileUpload
+            defaultValue={value}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Upload file"}
+            accept={restProps.accept}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "image":
+      return (
+        <CellModalEditor
+          field="image"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Image"
+        >
+          <ImageField
+            value={value}
+            onValueChange={handleChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            imageWidth={200}
+            imageHeight={200}
+            showRemove={!readOnly}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "signature":
+      return (
+        <CellModalEditor
+          field="signature"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Signature"
+        >
+          <Signature
+            value={value ?? ""}
+            onChange={handleChange}
+            disabled={disabled}
+            size={knobProps.sizeToken}
+            width={restProps.width ?? 600}
+            height={restProps.height ?? 240}
+            clearIcon={restProps.clearIcon}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "geolocation":
+      return (
+        <CellModalEditor
+          field="geolocation"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Location"
+        >
+          <Geolocation
+            value={typeof value === "string" ? value : value ? JSON.stringify(value) : ""}
+            onChange={handleChange}
+            disabled={disabled}
+            size={knobProps.sizeToken}
+            locationIcon={restProps.locationIcon}
+            expandIcon={restProps.expandIcon}
+            renderMap={restProps.renderMap}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    // ─── Rich text / code editors ─────────────────────────────
+    case "richtexteditor":
+      return (
+        <CellModalEditor
+          field="richtexteditor"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Edit"
+        >
+          <RichTextEditor
+            value={value ?? ""}
+            onChange={handleChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder || "Write something..."}
+            minHeight={restProps.minHeight ?? 240}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "markdowneditor":
+      return (
+        <CellModalEditor
+          field="markdowneditor"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Edit markdown"
+        >
+          <TextArea
+            value={value != null ? String(value) : ""}
+            onChangeText={handleChange}
+            placeholder={placeholder || "Markdown..."}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    case "codeeditor":
+      return (
+        <CellModalEditor
+          field="codeeditor"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          title="Edit code"
+        >
+          <TextArea
+            value={value != null ? String(value) : ""}
+            onChangeText={handleChange}
+            placeholder={placeholder || "Code..."}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellModalEditor>
+      );
+
+    // ─── Text inputs ──────────────────────────────────────────
+    case "textarea":
+      return (
+        <CellWrapper>
+          <TextArea
+            value={value != null ? String(value) : ""}
+            onChangeText={handleChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+
+    case "input":
+    default:
+      return (
+        <CellWrapper>
+          <Input
+            value={value != null ? String(value) : ""}
+            onChangeText={handleChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            size={knobProps.sizeToken}
+            {...restProps}
+          />
+        </CellWrapper>
+      );
+  }
+}
+
+// ─── Internal helper ──────────────────────────────────────────
+
+function CellWrapper({
+  children,
+  justify = "flex-start",
+  gap,
+  minWidth,
+}: {
+  children: React.ReactNode;
+  justify?: "flex-start" | "flex-end" | "center";
+  gap?: string;
+  minWidth?: number;
+}) {
+  return (
+    <View
+      flexDirection="row"
+      alignItems="center"
+      justifyContent={justify}
+      width="100%"
+      gap={gap as any}
+      minWidth={minWidth}
+    >
+      {children}
+    </View>
+  );
+}
+
+export default DataTableCell;