@intable/react 0.0.17 → 0.0.19

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

@@ -99,7 +99,7 @@ export interface TableProps {
 export type THProps = {
     x: number;
     col: TableColumn;
-    children: JSX.Element;
+    children?: JSX.Element;
     rowspan?: number;
     colspan?: number;
     style?: any;
@@ -109,7 +109,7 @@ export type TDProps = {
     y: number;
     data: any;
     col: TableColumn;
-    children: JSX.Element;
+    children?: JSX.Element;
     rowspan?: number;
     colspan?: number;
 };

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

@@ -1,8 +1,11 @@
 import { type JSX } from 'solid-js';
 import { type Plugin, type TableColumn } from '..';
 declare module '../index' {
+    interface TableProps {
+        editable?: boolean | ((props: TDProps) => boolean);
+    }
     interface TableColumn {
-        editable?: boolean;
+        editable?: boolean | ((props: TDProps) => boolean);
         editor?: string | Editor;
         editorProps?: any;
         editorPopup?: boolean;
@@ -33,6 +36,7 @@ export interface EditorOpt {
 export declare const EditablePlugin: Plugin;
 export declare const editors: {
     text: Editor;
+    textarea: Editor;
     number: Editor;
     range: Editor;
     date: Editor;

package/dist/plugins/antd.js

@@ -1,64 +1,86 @@
 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 { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker, version as version$1 } from "antd";
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+dayjs.extend(weekday), dayjs.extend(localeData);
 const AntdPlugin = {
 	name: "antd",
 	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.editors.text = editor(Input), e.editors.textarea = editor(Input.TextArea, (e) => ({ ...e })), 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)
+			onChange: (a) => e.onChange(a.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) => ({
+			onChangeComplete: (a) => e.onChange(a?.toHexString?.() || a)
+		})), e.editors.select = selector(Select, (e) => ({
+			style: { width: "100%" },
+			...e
+		})), e.editors.date = selector(DatePicker, (e) => ({
 			...e,
 			value: e.value && dayjs(e.value),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		})), e.editors.time = selector(TimePicker, (e) => ({
 			...e,
 			value: e.value && dayjs(e.value, "HH:mm:ss"),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		})), e.editors.datetime = selector(DatePicker, (e) => ({
 			...e,
 			showTime: !0,
 			value: e.value && dayjs(e.value),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		}));
 	},
 	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);
+}, createEditor = (s, c = (e) => e, l) => (f) => {
+	let { eventKey: p, value: m, col: h, ok: g, cancel: _, props: v } = f, y = document.createElement("div");
+	y.style.display = "contents";
+	let b = createRoot(y), x = [
+		Input,
+		InputNumber,
+		Input.TextArea
+	].includes(s) && p || m, S, C = () => {
+		let [e, u] = useState(x), [d, f] = useState(p), m = useRef(null);
 		return useEffect(() => {
-			y = u.current, u.current?.focus?.();
-		}, []), createElement(o, s({
-			ref: u,
+			S = m.current, m.current?.focus?.();
+		}, []), createElement(s, c({
+			ref: m,
 			value: e,
 			onChange: (e) => {
-				v = e.target instanceof Node ? e.target.value : e, l(v), c && !Array.isArray(v) && setTimeout(p, 100);
+				x = e.target instanceof Node ? e.target.value : e, u(x), l && !Array.isArray(x) && setTimeout(g, 100);
 			},
 			onPointerDown: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.stopPropagation(), e.key === "Enter" && p(), e.key === "Escape" && m();
+				e.stopPropagation(), e.key === "Enter" && !e.shiftKey && g(), e.key === "Escape" && _();
 			},
 			open: !0,
-			...f?.enum && { options: resolveOptions(f.enum) },
-			...h
+			...+version$1.split(".")[0] <= 5 ? {
+				showSearch: !0,
+				optionFilterProp: "label",
+				searchValue: d,
+				onSearch: f
+			} : { showSearch: {
+				optionFilterProp: "label",
+				searchValue: d,
+				onSearch: f
+			} },
+			...h?.enum && { options: resolveOptions(h.enum) },
+			...v
 		}));
-	})), {
-		el: g,
-		getValue: () => v,
-		destroy: () => _.unmount(),
-		focus: () => y?.focus?.(),
-		blur: () => y?.blur?.()
+	};
+	return setTimeout(() => {
+		b.render(createElement(C));
+	}, 0), {
+		el: y,
+		getValue: () => x,
+		destroy: () => b.unmount(),
+		focus: () => S?.focus?.(),
+		blur: () => S?.blur?.()
 	};
 };
-var editor = (e, i) => createEditor(e, i, !1), selector = (e, i) => createEditor(e, i, !0);
+var editor = (e, a) => createEditor(e, a, !1), selector = (e, a) => createEditor(e, a, !0);
 export { AntdPlugin, createEditor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intable/react",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "dayjs": "^1.11.20",
     "solid-js": "^1.9.9",
-    "intable": "^0.0.17"
+    "intable": "^0.0.19"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",