@sio-group/ui-datatable 0.1.0

package/src/utils/render-value.tsx

@@ -0,0 +1,89 @@
+import {Column, FormField} from "../types";
+import {EmptyCell} from "../components/cell-types/EmptyCell";
+import {BooleanCell} from "../components/cell-types/BooleanCell";
+import {Link, Pill} from "@sio-group/ui-core";
+import {renderObject} from "./render-object";
+import {DateCell} from "../components/cell-types/DateCell";
+import {isPillValue} from "./is-pill-value";
+import {InlineInputCell} from "../components/cell-types/InlineInputCell";
+
+interface RenderValueProps <T extends { id: string | number }> {
+    value: T[keyof T];
+    column: Column<T>;
+    item: T;
+    formFields?: FormField[];
+    updateData?: (id: (string | number), values: Partial<T>) => void;
+}
+
+export const renderValue = <T extends { id: string | number }> ({value, column, item, formFields, updateData}: RenderValueProps<T>) => {
+    const formatKey: string | undefined = typeof column.format === 'object' ? column.format.key : undefined;
+
+    const formField: FormField | undefined = formFields?.find((f: FormField): boolean => f.name === column.name);
+    if (formField) {
+        return (
+            <InlineInputCell
+                column={column}
+                value={value}
+                item={item}
+                formField={formField}
+                updateData={updateData}
+            />
+        );
+    }
+
+    if (value === null || value === undefined) return <EmptyCell />;
+    if (Array.isArray(value) && !value.length) return <EmptyCell />;
+
+    if (column.format === "boolean" || column.format === "button") {
+        return (
+            <BooleanCell
+                column={column}
+                value={value}
+                item={item}
+                updateData={updateData}
+            />
+        );
+    }
+
+    if (column.format === "datetime" || column.format === "date") {
+        return (
+            <DateCell
+                column={column}
+                value={value}
+            />
+        );
+    }
+
+    if (column.format === "pill" && isPillValue(value)) {
+        return <Pill status={value.status} label={value.label} />;
+    }
+
+    if (column.format === "email") {
+        return <Link to={`mailto:${value}`}>{String(value)}</Link>
+    }
+
+    if (Array.isArray(value)) {
+        return (
+            <>
+                {(value as Array<Record<string, unknown> | string>).map((x, i) => (
+                    <div key={i}>
+                        {typeof x === 'object' && x !== null
+                            ? formatKey
+                                ? String((x as Record<string, unknown>)[formatKey] ?? '')
+                                : renderObject(x)
+                            : String(x)
+                        }
+                    </div>
+                ))}
+            </>
+        )
+    }
+
+    if (typeof value === 'object') {
+        return formatKey
+            ? String((value as Record<string, unknown>)[formatKey] ?? '')
+            : renderObject(value as Record<string, unknown>);
+    }
+
+    return String(value)
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"],
+  "references": [
+    { "path": "../ui-core" },
+    { "path": "../ui-pagination" },
+    { "path": "../ui-modal" },
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true
+});

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        globals: true,
+        //setupFiles: "./test/setup.ts"
+    }
+});