@intable/react 0.0.14 → 0.0.16

package/dist/index.js

@@ -1,24 +1,25 @@
+import { createRoot, flushSync } from "./utils.js";
 import './style.css';/* empty css      */
 import { createElement, useEffect, useRef } from "react";
-import { createRoot } from "react-dom/client";
-import { flushSync } from "react-dom";
 import "intable/wc";
 import { createComputed, onCleanup } from "solid-js";
-const Intable = (o) => {
-	let s = useRef(null);
+const Intable = (e) => {
+	let a = useRef(null);
 	return useEffect(() => {
-		s.current && (s.current.options = {
-			class: o.className,
-			...o,
+		a.current && (a.current.options = {
+			class: e.className,
+			...e,
 			renderer: component
 		});
-	}, [o]), createElement("wc-table", {
-		ref: s,
+	}, [e]), createElement("wc-table", {
+		ref: a,
 		style: { display: "contents" }
 	});
-}, component = (i) => (a) => {
-	let c = document.createElement("div"), l = createRoot(c);
-	return createComputed(() => flushSync(() => l.render(createElement(i, a)))), onCleanup(() => l.unmount()), c;
+}, component = (o) => (s) => {
+	let c = document.createElement("div");
+	c.style.display = "contents";
+	let l = createRoot(c);
+	return createComputed(() => flushSync(() => l.render(typeof o == "function" ? createElement(o, s) : o))), onCleanup(() => l.unmount()), c;
 };
 var src_default = Intable;
 export { Intable, component, src_default as default };

package/dist/intable/src/components/utils.d.ts

@@ -1,3 +1,4 @@
 import type { JSX } from 'solid-js';
+import type { TableStore } from '..';
 export declare function solidComponent<T extends (...arg: any[]) => JSX.Element>(comp: T): T;
-export declare function renderComponent(Comp: any, props: any, renderer: any): JSX.Element;
+export declare function renderComponent(Comp: any, props: any, store: TableStore): any;

package/dist/intable/src/index.d.ts

@@ -15,6 +15,7 @@ import './plugins/ExpandPlugin';
 import './plugins/CellMergePlugin';
 import './plugins/TreePlugin';
 import './plugins/HeaderGroup';
+import './plugins/ValidatorPlugin';
 export declare const Ctx: import("solid-js").Context<{
     props: TableProps2;
     store: TableStore;
@@ -26,7 +27,7 @@ type Pri<T> = {
 type TableProps2 = Requireds<TableProps, ('Table' | 'Thead' | 'Tbody' | 'Tr' | 'Th' | 'Td' | 'EachRows' | 'EachCells' | 'rowKey' | 'data' | 'columns' | 'newRow')>;
 type Each<T = any> = (props: {
     each: T[];
-    children: (e: () => any, i: () => number) => JSX.Element;
+    children: (e: () => T, i: () => number) => JSX.Element;
 }) => JSX.Element;
 type ProcessProps = {
     [K in keyof TableProps]?: (prev: TableProps2, ctx: {

package/dist/intable/src/plugins/EditablePlugin.d.ts

@@ -1,15 +1,11 @@
 import { type JSX } from 'solid-js';
 import { type Plugin, type TableColumn } from '..';
 declare module '../index' {
-    interface TableProps {
-        validator?: (value: any, data: any, col: TableColumn) => string | boolean | Promise<string | boolean>;
-    }
     interface TableColumn {
         editable?: boolean;
         editor?: string | Editor;
         editorProps?: any;
         editorPopup?: boolean;
-        validator?: (value: any, rowData: any, col: TableColumn) => boolean | string | Promise<boolean | string>;
     }
     interface TableStore {
         editors: {

package/dist/intable/src/plugins/ValidatorPlugin.d.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from '..';
+type Key = string | symbol;
+declare module '../index' {
+    interface TableProps {
+        validator?: (value: any, data: any, col: TableColumn) => void | Promise<void>;
+    }
+    interface TableColumn {
+        validator?: (value: any, rowData: any, col: TableColumn) => void | Promise<void>;
+    }
+    interface TableStore {
+        validateCell: (value: any, data: any, col: TableColumn) => Promise<void>;
+        clearCellValidation: (data: any, col: TableColumn) => void;
+        cellValidationErrors: {
+            [row: Key]: {
+                [col: Key]: string | null;
+            } | null;
+        };
+    }
+}
+export declare const ValidatorPlugin: Plugin;
+export {};

package/dist/plugins/antd.js

@@ -1,10 +1,64 @@
+import { createRoot } from "../utils.js";
+import { createElement, useEffect, useRef, useState } from "react";
+import { resolveOptions } from "intable/utils";
 import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from "antd";
+import dayjs from "dayjs";
 const AntdPlugin = {
 	name: "antd",
-	store(d) {
-		d.editors.text = editor(Input), d.editors.number = editor(InputNumber), d.editors.rate = editor(Rate), d.editors.switch = editor(Switch), d.editors.checkbox = editor(Checkbox), d.editors.color = selector(ColorPicker, { transform: (e) => e?.toHexString?.() || e }), d.editors.select = selector(Select), d.editors.date = selector(DatePicker), d.editors.time = selector(TimePicker), d.editors.datetime = selector(DatePicker, { showTime: !0 });
+	store(e) {
+		e.editors.text = editor(Input), e.editors.number = editor(InputNumber), e.editors.rate = editor(Rate), e.editors.switch = editor(Switch), e.editors.checkbox = editor(Checkbox, (e) => ({
+			...e,
+			checked: e.value,
+			onChange: (i) => e.onChange(i.target.checked)
+		})), e.editors.color = selector(ColorPicker, (e) => ({
+			...e,
+			onChange: void 0,
+			onChangeComplete: (i) => e.onChange(i?.toHexString?.() || i)
+		})), e.editors.select = selector(Select), e.editors.date = selector(DatePicker, (e) => ({
+			...e,
+			value: e.value && dayjs(e.value),
+			onChange: (i, a) => e.onChange(a)
+		})), e.editors.time = selector(TimePicker, (e) => ({
+			...e,
+			value: e.value && dayjs(e.value, "HH:mm:ss"),
+			onChange: (i, a) => e.onChange(a)
+		})), e.editors.datetime = selector(DatePicker, (e) => ({
+			...e,
+			showTime: !0,
+			value: e.value && dayjs(e.value),
+			onChange: (i, a) => e.onChange(a)
+		}));
 	},
 	rewriteProps: { class: ({ class: e }) => `antd ${e}` }
+}, createEditor = (o, s = (e) => e, c) => (l) => {
+	let { eventKey: u, value: d, col: f, ok: p, cancel: m, props: h } = l, g = document.createElement("div");
+	g.style.display = "contents";
+	let _ = createRoot(g), v = u || d, y;
+	return _.render(createElement(() => {
+		let [e, l] = useState(v), u = useRef(null);
+		return useEffect(() => {
+			y = u.current, u.current?.focus?.();
+		}, []), createElement(o, s({
+			ref: u,
+			value: e,
+			onChange: (e) => {
+				v = e.target instanceof Node ? e.target.value : e, l(v), c && !Array.isArray(v) && setTimeout(p, 100);
+			},
+			onPointerDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.stopPropagation(), e.key === "Enter" && p(), e.key === "Escape" && m();
+			},
+			open: !0,
+			...f?.enum && { options: resolveOptions(f.enum) },
+			...h
+		}));
+	})), {
+		el: g,
+		getValue: () => v,
+		destroy: () => _.unmount(),
+		focus: () => y?.focus?.(),
+		blur: () => y?.blur?.()
+	};
 };
-var editor = (e, u = {}) => createEditor(e, u, !1), selector = (e, u = {}) => createEditor(e, u, !0);
-export { AntdPlugin };
+var editor = (e, i) => createEditor(e, i, !1), selector = (e, i) => createEditor(e, i, !0);
+export { AntdPlugin, createEditor };

package/dist/react/src/plugins/antd.d.ts

@@ -1,2 +1,5 @@
 import type { Plugin } from 'intable';
+import type { Editor } from 'intable/plugins/EditablePlugin';
+import { type FC } from 'react';
 export declare const AntdPlugin: Plugin;
+export declare const createEditor: (Comp: FC<any>, opts?: (v: any) => any, isSelector?: boolean) => Editor;

package/dist/react/src/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function createRoot(container: HTMLElement): {
+    render: (element: any) => any;
+    unmount: () => any;
+};
+export declare function flushSync(fn: any): any;

package/dist/utils.js

@@ -0,0 +1,13 @@
+import { version } from "react";
+import * as Client from "react-dom/client";
+import ReactDom from "react-dom";
+function createRoot(i) {
+	return version.startsWith("16.") || version.startsWith("17.") ? {
+		render: (e) => ReactDom.render(e, i),
+		unmount: () => ReactDom.unmountComponentAtNode(i)
+	} : Client.createRoot(i);
+}
+function flushSync(r) {
+	return version.startsWith("16.") || version.startsWith("17.") ? r() : ReactDom.flushSync(r);
+}
+export { createRoot, flushSync };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intable/react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,12 +17,13 @@
     "dist"
   ],
   "dependencies": {
+    "dayjs": "^1.11.20",
     "solid-js": "^1.9.9",
-    "intable": "^0.0.14"
+    "intable": "^0.0.16"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0 || ^20.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "devDependencies": {
     "@types/react": "^18",