antd-crud-table 0.4.0 → 0.7.0

package/dist/CrudTable.d.ts

@@ -1,34 +1,101 @@
 import { ProColumns } from '@ant-design/pro-components';
-import { UseCrudTableConfig, CrudTableActions } from './hooks/useCrudTable';
-type DataType = Record<string, any>;
-type FieldType = 'string' | 'number' | 'date' | 'boolean' | 'enum' | 'custom';
-interface CrudColumn<T extends DataType> extends ProColumns<T> {
+import { FormRule } from 'antd';
+import { CrudTableActions, UseCrudTableOptions } from './hooks/useCrudTable';
+import { FieldType } from './fields/registry';
+import { EnumOption } from './fields/types';
+import { PartialCrudTableLocale } from './locale/types';
+/**
+ * A column bound to one property of `T`.
+ *
+ * `K` ties `dataIndex` to a real key, so `customRender` and `transform`
+ * receive that property's type rather than a widened one.
+ */
+export interface CrudColumnFor<T, K extends keyof T> extends Omit<ProColumns<T>, 'dataIndex' | 'title' | 'render'> {
+    /** The record property this column reads. */
+    dataIndex: K;
+    /** Also used as the form label, so a plain string rather than a ReactNode. */
+    title: string;
+    /** Which registry entry renders and edits this column. Defaults to `string`. */
     fieldType?: FieldType;
-    enumOptions?: Record<string, {
-        text: string;
-        [key: string]: any;
-    }>;
-    customRender?: (value: any, record: T) => React.ReactNode;
+    /** Selectable values, for `enum` columns. */
+    enumOptions?: Record<string, EnumOption>;
+    /** Cell renderer for `custom` columns, receiving this property's type. */
+    customRender?: (value: T[K], record: T) => React.ReactNode;
+    /** How this column behaves in the create/edit form. */
     formConfig?: {
+        /** Adds a required rule, unless `rules` is given instead. */
         required?: boolean;
+        /** Replaces the registry's control entirely. */
         component?: React.ReactNode;
-        transform?: (value: any) => any;
-        rules?: any[];
+        /** Applied to the submitted value before it reaches the data source. */
+        transform?: (value: T[K]) => T[K];
+        /** antd validation rules. Replaces `required` when both are present. */
+        rules?: FormRule[];
     };
+    /** Editable in the create/edit form. Defaults to true. */
     fieldEditable?: boolean;
+    /** Exposed in the search form. Defaults to true. */
     searchable?: boolean;
 }
-interface CrudTableConfig<T extends DataType> {
-    columns: CrudColumn<T>[];
-    rowKey: keyof T;
+/**
+ * A column for any one key of `T` - the type an array of columns holds.
+ *
+ * Distributing over `keyof T` is what keeps each column's callbacks bound to
+ * its own property type. A single `CrudColumnFor<T, keyof T>` would widen
+ * `customRender` and `transform` to accept a union of every property type,
+ * losing exactly the precision this exists for.
+ */
+export type CrudColumn<T> = {
+    [K in keyof T]-?: CrudColumnFor<T, K>;
+}[keyof T];
+/** Everything needed to render a {@link CrudTable}. */
+export interface CrudTableConfig<T extends object, K extends keyof T> {
+    /** Column definitions, each bound to a property of `T`. */
+    columns: readonly CrudColumn<T>[];
+    /** The property holding each record's identity. */
+    rowKey: K;
+    /** Table header, also used to name exported files. */
     title: string;
+    /** Rows per page. Defaults to 10. */
     defaultPageSize?: number;
-    hookConfig: UseCrudTableConfig<T>;
+    /** Selects and configures the data strategy. */
+    hookConfig: UseCrudTableOptions<T, K>;
+    /** Show row selection and the bulk delete control. Defaults to false. */
     enableBulkOperations?: boolean;
+    /** Show ProTable's column visibility and density controls. Defaults to true. */
     enableColumnSettings?: boolean;
+    /** Show the export entries in the toolbar menu. Defaults to true. */
     enableExport?: boolean;
-    customActions?: (record: T, actions: CrudTableActions<T>) => React.ReactNode[];
+    /**
+     * Whether export covers the whole filtered result set or just the rows on
+     * screen. Defaults to `'all'`, falling back to `'page'` when the data source
+     * cannot list without pagination.
+     */
+    exportScope?: 'all' | 'page';
+    /** Extra per-row controls, appended after Edit and Delete. */
+    customActions?: (record: T, actions: CrudTableActions<T, K>) => React.ReactNode[];
+    /**
+     * Overrides for the library's own wording.
+     *
+     * antd and ProTable chrome follow the surrounding `ConfigProvider`; this is
+     * for the strings the library itself produces. Anything omitted falls back
+     * to English.
+     */
+    locale?: PartialCrudTableLocale;
 }
-declare const CrudTable: <T extends DataType>(config: CrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A paginated, searchable table with a create/edit form and CRUD wired through
+ * a {@link CrudDataSource}.
+ *
+ * @example
+ * ```tsx
+ * <CrudTable<User, 'id'>
+ *   title="Users"
+ *   rowKey="id"
+ *   columns={[{ dataIndex: 'name', title: 'Name', fieldType: 'string' }]}
+ *   hookConfig={{ staticData: users }}
+ * />
+ * ```
+ */
+declare const CrudTable: <T extends object, K extends keyof T>(config: CrudTableConfig<T, K>) => import("react").JSX.Element;
 export default CrudTable;
-export type { CrudTableConfig, CrudColumn, DataType };

package/dist/CrudTable.js

@@ -1,306 +1,3 @@
-import { useCrudTable as e } from "./useCrudTable.js";
-import { EllipsisOutlined as t, PlusOutlined as n } from "@ant-design/icons";
-import { ProConfigProvider as r, ProTable as i, enUSIntl as a } from "@ant-design/pro-components";
-import { Button as o, DatePicker as s, Dropdown as c, Form as l, Input as u, InputNumber as d, Modal as f, Select as p, Switch as m, Tag as h, message as g } from "antd";
-import { useEffect as _, useState as v } from "react";
-import { format as y, formatISO as b, parseISO as x } from "date-fns";
-import S from "dayjs";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-//#region lib/CrudTable.tsx
-var T = (T) => {
-	let { columns: E, rowKey: D, title: O, defaultPageSize: k = 10, hookConfig: A, enableBulkOperations: j = !1, customActions: M } = T, N = e(D, {
-		defaultPageSize: k,
-		...A
-	}), [P, F] = v(!1), [I, L] = v(null), [R, z] = v([]), [B] = l.useForm();
-	_(() => {
-		N.refresh();
-	}, []);
-	let V = E.map((e) => {
-		let t = {
-			...e,
-			dataIndex: e.dataIndex,
-			title: e.title,
-			search: e.searchable !== !1
-		};
-		switch (e.fieldType) {
-			case "date": return {
-				...t,
-				valueType: "dateTime",
-				render: (t, n) => {
-					let r = n[e.dataIndex];
-					if (!r) return "-";
-					try {
-						return /* @__PURE__ */ C("span", { children: y(x(r), "yyyy-MM-dd HH:mm") });
-					} catch {
-						return /* @__PURE__ */ C("span", { children: r });
-					}
-				}
-			};
-			case "enum": return {
-				...t,
-				valueType: "select",
-				valueEnum: e.enumOptions,
-				render: (t, n) => {
-					let r = n[e.dataIndex], i = e.enumOptions?.[r];
-					return i ? /* @__PURE__ */ C(h, {
-						color: i.color,
-						children: i.text
-					}) : r;
-				}
-			};
-			case "number": return {
-				...t,
-				valueType: "digit",
-				render: (t, n) => {
-					let r = n[e.dataIndex];
-					return typeof r == "number" ? r.toLocaleString() : r;
-				}
-			};
-			case "boolean": return {
-				...t,
-				valueType: "switch",
-				render: (t, n) => /* @__PURE__ */ C(h, {
-					color: n[e.dataIndex] ? "green" : "red",
-					children: n[e.dataIndex] ? "Yes" : "No"
-				})
-			};
-			case "custom": return {
-				...t,
-				render: (t, n) => e.customRender?.(n[e.dataIndex], n)
-			};
-			default: return t;
-		}
-	});
-	V.push({
-		title: "Actions",
-		valueType: "option",
-		width: 200,
-		render: (e, t) => {
-			let n = [/* @__PURE__ */ C(o, {
-				type: "link",
-				size: "small",
-				onClick: () => U(t),
-				children: "Edit"
-			}, "edit"), /* @__PURE__ */ C(o, {
-				type: "link",
-				size: "small",
-				danger: !0,
-				onClick: () => G(t[D]),
-				children: "Delete"
-			}, "delete")], r = M?.(t, N) || [];
-			return [...n, ...r];
-		}
-	});
-	let H = async (e, t, n) => {
-		try {
-			let r = {
-				current: e.current,
-				pageSize: e.pageSize,
-				sortBy: Object.keys(t)[0],
-				sortOrder: Object.values(t)[0],
-				...n,
-				...e
-			}, i = N.operations;
-			if (i?.getList) {
-				let e = await i.getList(r);
-				return {
-					data: e.data,
-					success: !0,
-					total: e.total
-				};
-			}
-			return {
-				data: N.state.data,
-				success: !0,
-				total: N.state.total
-			};
-		} catch {
-			return g.error("Failed to fetch data"), {
-				data: [],
-				success: !1,
-				total: 0
-			};
-		}
-	}, U = (e) => {
-		if (L(e || null), e) {
-			let t = { ...e };
-			E.forEach((e) => {
-				let n = e.dataIndex;
-				if (e.fieldType === "date" && t[n]) try {
-					t[n] = S(t[n]);
-				} catch {}
-			}), B.setFieldsValue(t);
-		} else B.resetFields();
-		F(!0);
-	}, W = async () => {
-		try {
-			let e = await B.validateFields(), t = { ...e };
-			E.forEach((n) => {
-				let r = n.dataIndex;
-				if (n.fieldType === "date" && e[r]) try {
-					t[r] = b(e[r]);
-				} catch {}
-				n.formConfig?.transform && (t[r] = n.formConfig.transform(e[r]));
-			}), I && I[D] ? await N.update(I[D], t) : await N.create(t), F(!1), N.actionRef.current?.reload();
-		} catch (e) {
-			console.error("Form validation failed:", e);
-		}
-	}, G = async (e) => {
-		f.confirm({
-			title: "Are you sure?",
-			content: "This action cannot be undone.",
-			okText: "Yes, Delete",
-			okType: "danger",
-			cancelText: "Cancel",
-			onOk: async () => {
-				await N.delete(e) && N.actionRef.current?.reload();
-			}
-		});
-	}, K = async () => {
-		if (R.length === 0) {
-			g.warning("Please select items to delete");
-			return;
-		}
-		f.confirm({
-			title: `Delete ${R.length} items?`,
-			content: "This action cannot be undone.",
-			okText: "Yes, Delete All",
-			okType: "danger",
-			cancelText: "Cancel",
-			onOk: async () => {
-				let e = R.map((e) => N.delete(e));
-				await Promise.allSettled(e), z([]), N.actionRef.current?.reload();
-			}
-		});
-	}, q = j ? {
-		selectedRowKeys: R,
-		onChange: z
-	} : void 0;
-	return /* @__PURE__ */ w(r, {
-		needDeps: !0,
-		intl: a,
-		children: [/* @__PURE__ */ C(i, {
-			headerTitle: O,
-			rowKey: D,
-			rowClassName: (e, t) => t % 2 == 0 ? "row-differentiator" : "",
-			actionRef: N.actionRef,
-			columns: V,
-			request: H,
-			search: { labelWidth: "auto" },
-			pagination: {
-				pageSize: k,
-				showSizeChanger: !0,
-				showQuickJumper: !0
-			},
-			loading: N.state.loading,
-			rowSelection: q,
-			toolBarRender: () => [
-				/* @__PURE__ */ C(o, {
-					type: "primary",
-					icon: /* @__PURE__ */ C(n, {}),
-					onClick: () => U(),
-					children: "New"
-				}, "add"),
-				...j && R.length > 0 ? [/* @__PURE__ */ w(o, {
-					danger: !0,
-					onClick: K,
-					children: [
-						"Delete Selected (",
-						R.length,
-						")"
-					]
-				}, "bulk-delete")] : [],
-				/* @__PURE__ */ C(c, {
-					menu: { items: [{
-						key: "export",
-						label: "Export",
-						disabled: !0
-					}, {
-						key: "refresh",
-						label: "Refresh",
-						onClick: () => N.refresh()
-					}] },
-					children: /* @__PURE__ */ C(o, { children: /* @__PURE__ */ C(t, {}) })
-				}, "menu")
-			],
-			options: {
-				setting: { listsHeight: 400 },
-				reload: () => N.refresh()
-			},
-			dateFormatter: "string"
-		}), /* @__PURE__ */ C(f, {
-			title: I ? "Edit Item" : "Create Item",
-			open: P,
-			onOk: W,
-			onCancel: () => F(!1),
-			destroyOnClose: !0,
-			width: 600,
-			children: /* @__PURE__ */ C(l, {
-				form: B,
-				layout: "vertical",
-				children: E.map((e) => {
-					if (!e.dataIndex) return null;
-					let t = e.dataIndex, n = e.title, r = !(e.fieldEditable ?? !0), i = e.formConfig?.rules || (e.formConfig?.required ? [{
-						required: !0,
-						message: `${n} is required`
-					}] : []);
-					if (e.formConfig?.component) return /* @__PURE__ */ C(l.Item, {
-						name: t,
-						label: n,
-						rules: i,
-						children: e.formConfig.component
-					}, t);
-					switch (e.fieldType) {
-						case "string": return /* @__PURE__ */ C(l.Item, {
-							name: t,
-							label: n,
-							rules: i,
-							children: /* @__PURE__ */ C(u, { disabled: r })
-						}, t);
-						case "number": return /* @__PURE__ */ C(l.Item, {
-							name: t,
-							label: n,
-							rules: i,
-							children: /* @__PURE__ */ C(d, {
-								style: { width: "100%" },
-								disabled: r
-							})
-						}, t);
-						case "date": return /* @__PURE__ */ C(l.Item, {
-							name: t,
-							label: n,
-							rules: i,
-							children: /* @__PURE__ */ C(s, {
-								style: { width: "100%" },
-								showTime: !0,
-								disabled: r
-							})
-						}, t);
-						case "boolean": return /* @__PURE__ */ C(l.Item, {
-							name: t,
-							label: n,
-							valuePropName: "checked",
-							children: /* @__PURE__ */ C(m, { disabled: r })
-						}, t);
-						case "enum": return /* @__PURE__ */ C(l.Item, {
-							name: t,
-							label: n,
-							rules: i,
-							children: /* @__PURE__ */ C(p, {
-								disabled: r,
-								placeholder: `Select ${n.toLowerCase()}`,
-								options: Object.entries(e.enumOptions || {}).map(([e, t]) => ({
-									label: t.text,
-									value: e
-								}))
-							})
-						}, t);
-						default: return null;
-					}
-				})
-			})
-		})]
-	});
-};
-//#endregion
-export { T as default };
+import { t as e } from "./CrudTable-Btf58zof.js";
+import "./exportData.js";
+export { e as default };

package/dist/CrudTableLazy.cjs

@@ -1 +1 @@
-require(`./CrudTable.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);var n=(0,e.lazy)(()=>Promise.resolve().then(()=>require(`./CrudTable.cjs`))),r=r=>(0,t.jsx)(e.Suspense,{fallback:(0,t.jsx)(`div`,{style:{textAlign:`center`,padding:`2rem`},children:`Loading curd table w antd`}),children:(0,t.jsx)(n,{...r})});module.exports=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./en_US-D3Kl6g3n.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.lazy)(()=>Promise.resolve().then(()=>require("./CrudTable.cjs"))),i=i=>(0,n.jsx)(t.Suspense,{fallback:(0,n.jsx)(`div`,{style:{textAlign:`center`,padding:`2rem`},children:i.locale?.loading??e.t.loading}),children:(0,n.jsx)(r,{...i})});exports.default=i;

package/dist/CrudTableLazy.d.ts

@@ -1,4 +1,5 @@
-import { CrudTableConfig, DataType } from './CrudTable';
-declare const CrudTableLazy: <T extends DataType>(props: CrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
+import { CrudTableConfig } from './CrudTable';
+/** Code-split `CrudTable`, keeping the same typed configuration. */
+declare const CrudTableLazy: <T extends object, K extends keyof T>(props: CrudTableConfig<T, K>) => import("react").JSX.Element;
 export default CrudTableLazy;
-export type { CrudTableConfig, DataType };
+export type { CrudTableConfig };

package/dist/CrudTableLazy.js

@@ -1,15 +1,16 @@
-import { Suspense as e, lazy as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { t as e } from "./en_US-DGCMDOdX.js";
+import { Suspense as t, lazy as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region lib/CrudTableLazy.tsx
-var r = t(() => import("./CrudTable.js")), i = (t) => /* @__PURE__ */ n(e, {
-	fallback: /* @__PURE__ */ n("div", {
+var i = n(() => import("./CrudTable.js")), a = (n) => /* @__PURE__ */ r(t, {
+	fallback: /* @__PURE__ */ r("div", {
 		style: {
 			textAlign: "center",
 			padding: "2rem"
 		},
-		children: "Loading curd table w antd"
+		children: n.locale?.loading ?? e.loading
 	}),
-	children: /* @__PURE__ */ n(r, { ...t })
+	children: /* @__PURE__ */ r(i, { ...n })
 });
 //#endregion
-export { i as default };
+export { a as default };

package/dist/core/CustomDataSource.d.ts

@@ -0,0 +1,35 @@
+import { CrudDataSource, CrudDraft, CrudPage, CrudQuery } from './types';
+/**
+ * The operations a consumer may supply. Every entry is optional so a
+ * read-only table need not invent write handlers it will never call.
+ */
+export type CrudOperations<T, K extends keyof T> = Partial<CrudDataSource<T, K>>;
+/**
+ * Raised when the table attempts an operation the consumer did not supply.
+ *
+ * Names the missing operation so the message points at the fix rather than
+ * surfacing as `undefined is not a function`.
+ */
+export declare class UnsupportedOperationError extends Error {
+    /** The operation that was attempted but not supplied. */
+    readonly operation: string;
+    constructor(operation: string);
+}
+/**
+ * Adapts a bag of consumer-supplied functions to the full interface.
+ *
+ * Exists so the rest of the library can depend on `CrudDataSource` without
+ * null-checking each method at every call site; absent operations fail here
+ * with a message naming what is missing.
+ */
+export declare class CustomDataSource<T extends object, K extends keyof T> implements CrudDataSource<T, K> {
+    private readonly operations;
+    constructor(operations: CrudOperations<T, K>);
+    /** Whether an operation was supplied, so callers can hide unavailable UI. */
+    supports(operation: keyof CrudDataSource<T, K>): boolean;
+    list(query: CrudQuery<T>): Promise<CrudPage<T>>;
+    listAll(query: Omit<CrudQuery<T>, 'page' | 'pageSize'>): Promise<readonly T[]>;
+    create(draft: CrudDraft<T>): Promise<T>;
+    update(id: T[K], draft: CrudDraft<T>): Promise<T>;
+    remove(id: T[K]): Promise<void>;
+}

package/dist/core/InMemoryDataSource.d.ts

@@ -0,0 +1,30 @@
+import { CrudDataSource, CrudDraft, CrudPage, CrudQuery, IdGenerator } from './types';
+/**
+ * Shared behaviour for every source backed by a local collection.
+ *
+ * Subclasses supply only where the records live, via `read`/`write`. All
+ * querying, identity assignment and mutation semantics are defined once here
+ * so the static and localStorage strategies cannot drift apart.
+ */
+export declare abstract class InMemoryDataSource<T extends object, K extends keyof T> implements CrudDataSource<T, K> {
+    /** The property holding each record's identity. */
+    protected readonly key: K;
+    /** Assigns the identity for newly created records. */
+    protected readonly generateId: IdGenerator<T, K>;
+    protected constructor(key: K, generateId?: IdGenerator<T, K>);
+    /** Current contents of the backing collection. */
+    protected abstract read(): readonly T[];
+    /** Replace the backing collection. */
+    protected abstract write(records: readonly T[]): void;
+    /**
+     * Hook for values a subclass stamps onto every write, such as timestamps.
+     * Returns nothing extra by default.
+     */
+    protected decorate(_record: CrudDraft<T>, _operation: 'create' | 'update'): CrudDraft<T>;
+    private indexOf;
+    list(query: CrudQuery<T>): Promise<CrudPage<T>>;
+    listAll(query: Omit<CrudQuery<T>, 'page' | 'pageSize'>): Promise<readonly T[]>;
+    create(draft: CrudDraft<T>): Promise<T>;
+    update(id: T[K], draft: CrudDraft<T>): Promise<T>;
+    remove(id: T[K]): Promise<void>;
+}

package/dist/core/LocalStorageDataSource.d.ts

@@ -0,0 +1,30 @@
+import { InMemoryDataSource } from './InMemoryDataSource';
+import { CrudDraft, IdGenerator } from './types';
+/** Fields stamped onto records by the localStorage strategy. */
+export interface Timestamped {
+    /** ISO timestamp set once, when the record is created. */
+    createdAt?: string;
+    /** ISO timestamp refreshed on every write. */
+    updatedAt?: string;
+}
+/**
+ * A source persisting to `localStorage` under a fixed key.
+ *
+ * Reads go through storage on every call rather than through a cache, so a
+ * second tab writing the same key is picked up on the next query instead of
+ * being shadowed by stale in-memory state.
+ *
+ * Storage is best-effort: a read that fails or returns malformed JSON falls
+ * back to the seed rather than throwing, since an unreadable cache should not
+ * take the table down. Writes that fail (quota, private mode) *do* throw -
+ * silently dropping a write the user believes succeeded is worse than an error.
+ */
+export declare class LocalStorageDataSource<T extends object, K extends keyof T> extends InMemoryDataSource<T, K> {
+    private readonly storageKey;
+    private readonly seed;
+    constructor(storageKey: string, key: K, seed?: readonly T[], generateId?: IdGenerator<T, K>);
+    protected read(): readonly T[];
+    protected write(records: readonly T[]): void;
+    /** Stamps creation and modification times onto every write. */
+    protected decorate(_draft: CrudDraft<T>, operation: 'create' | 'update'): CrudDraft<T>;
+}