antd-crud-table 0.0.11 → 0.0.13

package/dist/CrudTableExperimental.cjs

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

package/dist/CrudTableExperimental.d.ts

@@ -0,0 +1,34 @@
+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> {
+    fieldType?: FieldType;
+    enumOptions?: Record<string, {
+        text: string;
+        [key: string]: any;
+    }>;
+    customRender?: (value: any, record: T) => React.ReactNode;
+    formConfig?: {
+        required?: boolean;
+        component?: React.ReactNode;
+        transform?: (value: any) => any;
+        rules?: any[];
+    };
+    fieldEditable?: boolean;
+    searchable?: boolean;
+}
+interface EnhancedCrudTableConfig<T extends DataType> {
+    columns: CrudColumn<T>[];
+    rowKey: keyof T;
+    title: string;
+    defaultPageSize?: number;
+    hookConfig: UseCrudTableConfig<T>;
+    enableBulkOperations?: boolean;
+    enableColumnSettings?: boolean;
+    enableExport?: boolean;
+    customActions?: (record: T, actions: CrudTableActions<T>) => React.ReactNode[];
+}
+declare const CrudTableExperimental: <T extends DataType>(config: EnhancedCrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
+export default CrudTableExperimental;
+export type { EnhancedCrudTableConfig, CrudColumn, DataType };

package/dist/CrudTableExperimental.js

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

package/dist/CrudTableExperimentalLazy.d.ts

@@ -0,0 +1,4 @@
+import { EnhancedCrudTableConfig, DataType } from './CrudTableExperimental';
+declare const CrudTableExperimentalLazy: <T extends DataType>(props: EnhancedCrudTableConfig<T>) => import("react/jsx-runtime").JSX.Element;
+export default CrudTableExperimentalLazy;
+export type { EnhancedCrudTableConfig, DataType };

package/dist/hooks/useCrudTable.d.ts

@@ -0,0 +1,69 @@
+import { ActionType } from '@ant-design/pro-components';
+export type CrudOperation<T> = {
+    getList: (params: CrudParams) => Promise<CrudResponse<T>>;
+    create: (data: Partial<T>) => Promise<T>;
+    update: (id: any, data: Partial<T>) => Promise<T>;
+    delete: (id: any) => Promise<void>;
+};
+export type CrudParams = {
+    current?: number;
+    pageSize?: number;
+    sortBy?: string;
+    sortOrder?: 'ascend' | 'descend';
+    [key: string]: any;
+};
+export type CrudResponse<T> = {
+    data: T[];
+    total: number;
+    success?: boolean;
+};
+export type CrudState<T> = {
+    loading: boolean;
+    error: string | null;
+    data: T[];
+    total: number;
+    current: number;
+    pageSize: number;
+};
+type UseCrudTableConfigBase = {
+    defaultPageSize?: number;
+    enableCache?: boolean;
+    optimisticUpdates?: boolean;
+    onSuccess?: (operation: 'create' | 'update' | 'delete' | 'fetch', data: any) => void;
+    onError?: (operation: 'create' | 'update' | 'delete' | 'fetch', error: any) => void;
+};
+interface UseCrudTableConfigStatic<T> extends UseCrudTableConfigBase {
+    staticData: T[];
+}
+interface UseCrudTableConfigApi<T> extends UseCrudTableConfigBase {
+    api: {
+        baseUrl?: string;
+        endpoints?: {
+            list?: string;
+            create?: string;
+            update?: string;
+            delete?: string;
+        };
+        headers?: Record<string, string>;
+        transform?: {
+            request?: (data: any) => any;
+            response?: (data: any) => CrudResponse<T>;
+        };
+    };
+}
+interface UseCrudTableConfigCustom<T> extends UseCrudTableConfigBase {
+    operations: Partial<CrudOperation<T>>;
+}
+export type UseCrudTableConfig<T> = UseCrudTableConfigStatic<T> | UseCrudTableConfigApi<T> | UseCrudTableConfigCustom<T>;
+export type CrudTableActions<T> = {
+    refresh: () => Promise<void>;
+    create: (data: Partial<T>) => Promise<T | null>;
+    update: (id: any, data: Partial<T>) => Promise<T | null>;
+    delete: (id: any) => Promise<boolean>;
+    setPageSize: (size: number) => void;
+    setCurrentPage: (page: number) => void;
+    state: CrudState<T>;
+    actionRef: React.RefObject<ActionType | null>;
+};
+export declare const useCrudTable: <T extends Record<string, any>>(rowKey: keyof T, config: UseCrudTableConfig<T>) => CrudTableActions<T>;
+export {};