@faasjs/ant-design 0.0.2-beta.355 → 0.0.2-beta.359

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_use_lib_misc_hookState from 'react-use/lib/misc/hookState';
 import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, TableColumnProps, TableProps as TableProps$1 } from 'antd';
 export { Drawer } from 'antd';
-import { Dispatch, SetStateAction, LazyExoticComponent, ComponentType } from 'react';
+import { FaasDataWrapperProps } from '@faasjs/react';
 import * as antd_lib_form_Form from 'antd/lib/form/Form';
 import { RuleObject } from 'rc-field-form/lib/interface';
+import { LazyExoticComponent, ComponentType } from 'react';
 import { RouteProps } from 'react-router-dom';
 
 declare type BlankProps = {
@@ -17,6 +18,7 @@ declare type FaasState = {
         blank: string;
         all: string;
         submit: string;
+        pageNotFound: string;
     };
     Blank: {
         text: string;
@@ -65,23 +67,6 @@ declare function transferOptions(options: BaseOption[]): {
     value?: string | number;
 }[];
 
-declare type FaasDataProps<T = any> = {
-    action: string;
-    params?: Record<string, any>;
-    data?: T;
-    setData?: Dispatch<SetStateAction<T>>;
-};
-declare type FaasDataRender<T = any> = (args: {
-    data: T;
-}) => JSX.Element;
-declare type FaasDataWrapperProps<T = any> = {
-    dataSource?: T;
-    faasData?: FaasDataProps<T>;
-    render?: FaasDataRender<T>;
-    fallback?: JSX.Element;
-};
-declare function FaasDataWrapper<T = any>({ dataSource, faasData, render, fallback, }: FaasDataWrapperProps<T>): JSX.Element;
-
 declare type ExtendDescriptionTypeProps = {
     children?: JSX.Element | null;
     render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
@@ -96,7 +81,9 @@ declare type DescriptionProps<T = any, ExtendItemProps = any> = {
     extendTypes?: {
         [key: string]: ExtendDescriptionTypeProps;
     };
-} & FaasDataWrapperProps<T> & DescriptionsProps;
+    dataSource?: T;
+    faasData?: FaasDataWrapperProps<T>;
+} & DescriptionsProps;
 declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
 
 declare type DrawerProps = DrawerProps$1 & {
@@ -172,6 +159,7 @@ declare type RoutesProps = {
     routes: (RouteProps & {
         page?: LazyExoticComponent<ComponentType<any>>;
     })[];
+    fallback?: JSX.Element;
     notFound?: JSX.Element;
 };
 declare function Routes(props: RoutesProps): JSX.Element;
@@ -190,7 +178,8 @@ declare type TableProps<T = any, ExtendTypes = any> = {
     extendTypes?: {
         [key: string]: ExtendTableTypeProps;
     };
-} & FaasDataWrapperProps<T> & TableProps$1<T>;
+    faasData?: FaasDataWrapperProps<T>;
+} & TableProps$1<T>;
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
 declare type TitleProps = {
@@ -201,4 +190,4 @@ declare type TitleProps = {
 };
 declare function Title(props: TitleProps): JSX.Element;
 
-export { BaseItemProps, BaseOption, Blank, BlankProps, Config, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasDataProps, FaasDataRender, FaasDataWrapper, FaasDataWrapperProps, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasState, Form, FormItem, FormItemProps, FormProps, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, transferOptions, useDrawer, useFaasState };
+export { BaseItemProps, BaseOption, Blank, BlankProps, Config, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasState, Form, FormItem, FormItemProps, FormProps, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, transferOptions, useDrawer, useFaasState };

package/dist/index.js

@@ -50,7 +50,6 @@ __export(src_exports, {
   Config: () => Config,
   Description: () => Description,
   Drawer: () => import_antd3.Drawer,
-  FaasDataWrapper: () => FaasDataWrapper,
   Form: () => Form,
   FormItem: () => FormItem,
   Routes: () => Routes,
@@ -71,11 +70,17 @@ var import_lodash = require("lodash");
 // src/Config.tsx
 var import_react2 = require("react");
 var import_react_use = require("react-use");
-var _a, _b, _c;
-var common = {
-  blank: ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty",
-  all: ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u5168\u90E8" : "All",
-  submit: ((_c = navigator.language) == null ? void 0 : _c.includes("CN")) ? "\u63D0\u4EA4" : "Submit"
+var isCN = /^zh/i.test(navigator.language);
+var common = isCN ? {
+  blank: "\u7A7A",
+  all: "\u5168\u90E8",
+  submit: "\u63D0\u4EA4",
+  pageNotFound: "\u9875\u9762\u672A\u627E\u5230"
+} : {
+  blank: "Empty",
+  all: "All",
+  submit: "Submit",
+  pageNotFound: "Page Not Found"
 };
 var useFaasState = (0, import_react_use.createGlobalState)({
   common,
@@ -117,56 +122,28 @@ function transferOptions(options) {
 var import_icons = require("@ant-design/icons");
 var import_antd2 = require("antd");
 var import_lodash3 = require("lodash");
-var import_react5 = require("react");
-
-// src/FaasDataWrapper.tsx
 var import_react3 = require("react");
 var import_react4 = require("@faasjs/react");
-function FaasDataWrapper({
-  dataSource,
-  faasData,
-  render,
-  fallback
-}) {
-  const [data, setData] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
-    if (!faasData)
-      return;
-    (0, import_react4.getClient)().faas(faasData.action, faasData.params).then((res) => {
-      if (faasData.setData)
-        faasData.setData(res.data);
-      else
-        setData(res.data);
-    });
-  }, [JSON.stringify([faasData == null ? void 0 : faasData.action, faasData == null ? void 0 : faasData.params])]);
-  if (dataSource)
-    return render({ data: dataSource });
-  if (!data && !faasData.data)
-    return fallback || null;
-  return render({ data: faasData.data || data });
-}
-
-// src/Description.tsx
 function DescriptionItemContent(props) {
-  const [computedProps, setComputedProps] = (0, import_react5.useState)();
-  (0, import_react5.useEffect)(() => {
-    var _a2, _b2;
+  const [computedProps, setComputedProps] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
+    var _a, _b;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = (0, import_lodash3.upperFirst)(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
-    if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
+    if ((_a = propsCopy.item.options) == null ? void 0 : _a.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
-          var _a3;
-          return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+          var _a2;
+          return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
       else
-        propsCopy.value = ((_b2 = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b2.label) || props.value;
+        propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
   }, [props]);
@@ -174,7 +151,7 @@ function DescriptionItemContent(props) {
     return null;
   if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
     if (computedProps.extendTypes[computedProps.item.type].children)
-      return (0, import_react5.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
+      return (0, import_react3.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
         value: computedProps.value,
         values: computedProps.values
       });
@@ -183,7 +160,7 @@ function DescriptionItemContent(props) {
     else
       throw Error(computedProps.item.type + " requires children or render");
   if (computedProps.item.children)
-    return (0, import_react5.cloneElement)(computedProps.item.children, { value: computedProps.value });
+    return (0, import_react3.cloneElement)(computedProps.item.children, { value: computedProps.value });
   if (computedProps.item.render)
     return computedProps.item.render(computedProps.value, computedProps.values);
   if (typeof computedProps.value === "undefined" || computedProps.value === null)
@@ -212,7 +189,17 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, __spreadProps(__spreadValues({}, props), {
+  if (!props.faasData)
+    return /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions.Item, {
+      key: item.id,
+      label: item.title || (0, import_lodash3.upperFirst)(item.id)
+    }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
+      item,
+      value: props.dataSource[item.id],
+      values: props.dataSource,
+      extendTypes: props.extendTypes
+    }))));
+  return /* @__PURE__ */ import_react.default.createElement(import_react4.FaasDataWrapper, __spreadValues({
     render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions.Item, {
       key: item.id,
       label: item.title || (0, import_lodash3.upperFirst)(item.id)
@@ -222,14 +209,14 @@ function Description(props) {
       values: data,
       extendTypes: props.extendTypes
     }))))
-  }));
+  }, props.faasData));
 }
 
 // src/Drawer.tsx
 var import_antd3 = require("antd");
-var import_react6 = require("react");
+var import_react5 = require("react");
 function useDrawer(init) {
-  const [props, setProps] = (0, import_react6.useState)(__spreadValues({
+  const [props, setProps] = (0, import_react5.useState)(__spreadValues({
     visible: false,
     onClose: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
       visible: false
@@ -246,16 +233,16 @@ function useDrawer(init) {
 
 // src/Form.tsx
 var import_antd5 = require("antd");
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/FormItem.tsx
 var import_antd4 = require("antd");
 var import_icons2 = require("@ant-design/icons");
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_lodash4 = require("lodash");
 function FormItem(props) {
-  const [computedProps, setComputedProps] = (0, import_react7.useState)();
-  (0, import_react7.useEffect)(() => {
+  const [computedProps, setComputedProps] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.title)
       propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
@@ -353,11 +340,11 @@ function FormItem(props) {
         name: computedProps.name,
         rules: computedProps.rules
       }, (fields, { add, remove }, { errors }) => {
-        var _a2;
+        var _a;
         return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
           className: "ant-form-item-label"
         }, /* @__PURE__ */ import_react.default.createElement("label", {
-          className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
+          className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
         }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, {
           key: field.key
         }, /* @__PURE__ */ import_react.default.createElement(import_antd4.Row, {
@@ -394,11 +381,11 @@ function FormItem(props) {
 
 // src/Form.tsx
 function Form(props) {
-  var _a2, _b2;
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const [computedProps, setComputedProps] = (0, import_react8.useState)();
+  var _a, _b;
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [computedProps, setComputedProps] = (0, import_react7.useState)();
   const [config] = useFaasState();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
@@ -415,7 +402,7 @@ function Form(props) {
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
@@ -423,61 +410,64 @@ function Form(props) {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b2 = props.submit) == null ? void 0 : _b2.text) || config.Form.submit.text));
+  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = import_antd5.Form.useForm;
 Form.Item = FormItem;
 
 // src/Routers.tsx
 var import_antd6 = require("antd");
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_react_router_dom = require("react-router-dom");
-function NoMatch() {
+function NotFound() {
+  const [config] = useFaasState();
   return /* @__PURE__ */ import_react.default.createElement(import_antd6.Result, {
     status: "404",
-    title: "404",
-    subTitle: "Page not found"
+    title: config.common.pageNotFound
   });
 }
 function Routes(props) {
   return /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Routes, null, props.routes.map((r) => /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Route, __spreadProps(__spreadValues({
     key: r.path
   }, r), {
-    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react9.Suspense, {
-      fallback: /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
+    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react8.Suspense, {
+      fallback: props.fallback || /* @__PURE__ */ import_react.default.createElement("div", {
+        style: { padding: "24px" }
+      }, /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
         active: true
-      })
+      }))
     }, /* @__PURE__ */ import_react.default.createElement(r.page, null))
   }))), /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Route, {
     key: "*",
     path: "*",
-    element: props.notFound || /* @__PURE__ */ import_react.default.createElement(NoMatch, null)
+    element: props.notFound || /* @__PURE__ */ import_react.default.createElement(NotFound, null)
   }));
 }
 
 // src/Table.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_antd7 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
+var import_react10 = require("@faasjs/react");
 function processValue(item, value) {
-  var _a2;
+  var _a;
   if (item.options && typeof value !== "undefined" && value !== null) {
     if (item.type.endsWith("[]"))
       return value.map((v) => {
-        var _a3;
-        return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+        var _a2;
+        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       });
     else
-      return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
+      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
   }
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = (0, import_react10.useState)();
+  const [columns, setColumns] = (0, import_react9.useState)();
   const [config] = useFaasState();
-  (0, import_react10.useEffect)(() => {
-    var _a2;
+  (0, import_react9.useEffect)(() => {
+    var _a;
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -487,7 +477,7 @@ function Table(props) {
         item.title = (0, import_lodash5.upperFirst)(item.id);
       if (!item.type)
         item.type = "string";
-      if ((_a2 = item.options) == null ? void 0 : _a2.length) {
+      if ((_a = item.options) == null ? void 0 : _a.length) {
         item.options = transferOptions(item.options);
         item.filters = item.options.map((o) => ({
           text: o.label,
@@ -500,7 +490,7 @@ function Table(props) {
         delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
-          item.render = (value, values) => (0, import_react10.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react9.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -595,13 +585,47 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, __spreadValues({
-    render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+  if (!props.faasData)
+    return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
       rowKey: props.rowKey || "id",
       columns,
-      dataSource: data
-    }))
-  }, props));
+      dataSource: props.dataSource
+    }));
+  return /* @__PURE__ */ import_react.default.createElement(import_react10.FaasDataWrapper, __spreadValues({
+    render: ({
+      data,
+      params,
+      reload
+    }) => {
+      if (!data)
+        return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+          rowKey: props.rowKey || "id",
+          columns,
+          dataSource: []
+        }));
+      if (Array.isArray(data))
+        return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+          rowKey: props.rowKey || "id",
+          columns,
+          dataSource: data
+        }));
+      return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+        rowKey: props.rowKey || "id",
+        columns,
+        dataSource: data.rows,
+        pagination: __spreadValues(__spreadValues({}, props.pagination), data.pagination),
+        onChange: (pagination, filters, sorter, extra) => {
+          if (props.onChange)
+            props.onChange(pagination, filters, sorter, extra);
+          reload(__spreadProps(__spreadValues({}, params), {
+            pagination,
+            filters,
+            sorter
+          }));
+        }
+      }));
+    }
+  }, props.faasData));
 }
 
 // src/Title.tsx
@@ -621,7 +645,6 @@ module.exports = __toCommonJS(src_exports);
   Config,
   Description,
   Drawer,
-  FaasDataWrapper,
   Form,
   FormItem,
   Routes,

package/dist/index.mjs

@@ -28,11 +28,17 @@ import { isNil } from "lodash";
 // src/Config.tsx
 import { useEffect } from "react";
 import { createGlobalState } from "react-use";
-var _a, _b, _c;
-var common = {
-  blank: ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty",
-  all: ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u5168\u90E8" : "All",
-  submit: ((_c = navigator.language) == null ? void 0 : _c.includes("CN")) ? "\u63D0\u4EA4" : "Submit"
+var isCN = /^zh/i.test(navigator.language);
+var common = isCN ? {
+  blank: "\u7A7A",
+  all: "\u5168\u90E8",
+  submit: "\u63D0\u4EA4",
+  pageNotFound: "\u9875\u9762\u672A\u627E\u5230"
+} : {
+  blank: "Empty",
+  all: "All",
+  submit: "Submit",
+  pageNotFound: "Page Not Found"
 };
 var useFaasState = createGlobalState({
   common,
@@ -76,61 +82,30 @@ import { Descriptions } from "antd";
 import { upperFirst as upperFirst2 } from "lodash";
 import {
   cloneElement,
-  useEffect as useEffect3,
-  useState as useState2
-} from "react";
-
-// src/FaasDataWrapper.tsx
-import {
   useEffect as useEffect2,
   useState
 } from "react";
-import { getClient } from "@faasjs/react";
-function FaasDataWrapper({
-  dataSource,
-  faasData,
-  render,
-  fallback
-}) {
-  const [data, setData] = useState();
-  useEffect2(() => {
-    if (!faasData)
-      return;
-    getClient().faas(faasData.action, faasData.params).then((res) => {
-      if (faasData.setData)
-        faasData.setData(res.data);
-      else
-        setData(res.data);
-    });
-  }, [JSON.stringify([faasData == null ? void 0 : faasData.action, faasData == null ? void 0 : faasData.params])]);
-  if (dataSource)
-    return render({ data: dataSource });
-  if (!data && !faasData.data)
-    return fallback || null;
-  return render({ data: faasData.data || data });
-}
-
-// src/Description.tsx
+import { FaasDataWrapper } from "@faasjs/react";
 function DescriptionItemContent(props) {
-  const [computedProps, setComputedProps] = useState2();
-  useEffect3(() => {
-    var _a2, _b2;
+  const [computedProps, setComputedProps] = useState();
+  useEffect2(() => {
+    var _a, _b;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = upperFirst2(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
-    if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
+    if ((_a = propsCopy.item.options) == null ? void 0 : _a.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
-          var _a3;
-          return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+          var _a2;
+          return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
       else
-        propsCopy.value = ((_b2 = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b2.label) || props.value;
+        propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
   }, [props]);
@@ -176,7 +151,17 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadProps(__spreadValues({}, props), {
+  if (!props.faasData)
+    return /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
+      key: item.id,
+      label: item.title || upperFirst2(item.id)
+    }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
+      item,
+      value: props.dataSource[item.id],
+      values: props.dataSource,
+      extendTypes: props.extendTypes
+    }))));
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadValues({
     render: ({ data }) => /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
       key: item.id,
       label: item.title || upperFirst2(item.id)
@@ -186,14 +171,14 @@ function Description(props) {
       values: data,
       extendTypes: props.extendTypes
     }))))
-  }));
+  }, props.faasData));
 }
 
 // src/Drawer.tsx
 import { Drawer } from "antd";
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 function useDrawer(init) {
-  const [props, setProps] = useState3(__spreadValues({
+  const [props, setProps] = useState2(__spreadValues({
     visible: false,
     onClose: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
       visible: false
@@ -213,7 +198,7 @@ import {
   Button as Button2,
   Form as AntdForm2
 } from "antd";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/FormItem.tsx
 import {
@@ -227,11 +212,11 @@ import {
   Select
 } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { upperFirst as upperFirst3 } from "lodash";
 function FormItem(props) {
-  const [computedProps, setComputedProps] = useState4();
-  useEffect4(() => {
+  const [computedProps, setComputedProps] = useState3();
+  useEffect3(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.title)
       propsCopy.title = upperFirst3(propsCopy.id);
@@ -329,11 +314,11 @@ function FormItem(props) {
         name: computedProps.name,
         rules: computedProps.rules
       }, (fields, { add, remove }, { errors }) => {
-        var _a2;
+        var _a;
         return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
           className: "ant-form-item-label"
         }, /* @__PURE__ */ React.createElement("label", {
-          className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
+          className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
         }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
           key: field.key
         }, /* @__PURE__ */ React.createElement(Row, {
@@ -370,11 +355,11 @@ function FormItem(props) {
 
 // src/Form.tsx
 function Form(props) {
-  var _a2, _b2;
-  const [loading, setLoading] = useState5(false);
-  const [computedProps, setComputedProps] = useState5();
+  var _a, _b;
+  const [loading, setLoading] = useState4(false);
+  const [computedProps, setComputedProps] = useState4();
   const [config] = useFaasState();
-  useEffect5(() => {
+  useEffect4(() => {
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
@@ -391,7 +376,7 @@ function Form(props) {
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
@@ -399,7 +384,7 @@ function Form(props) {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b2 = props.submit) == null ? void 0 : _b2.text) || config.Form.submit.text));
+  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = AntdForm2.useForm;
 Form.Item = FormItem;
@@ -413,11 +398,11 @@ import {
   Routes as OriginRoutes,
   Route
 } from "react-router-dom";
-function NoMatch() {
+function NotFound() {
+  const [config] = useFaasState();
   return /* @__PURE__ */ React.createElement(Result, {
     status: "404",
-    title: "404",
-    subTitle: "Page not found"
+    title: config.common.pageNotFound
   });
 }
 function Routes(props) {
@@ -425,21 +410,23 @@ function Routes(props) {
     key: r.path
   }, r), {
     element: r.element || /* @__PURE__ */ React.createElement(Suspense, {
-      fallback: /* @__PURE__ */ React.createElement(Skeleton, {
+      fallback: props.fallback || /* @__PURE__ */ React.createElement("div", {
+        style: { padding: "24px" }
+      }, /* @__PURE__ */ React.createElement(Skeleton, {
         active: true
-      })
+      }))
     }, /* @__PURE__ */ React.createElement(r.page, null))
   }))), /* @__PURE__ */ React.createElement(Route, {
     key: "*",
     path: "*",
-    element: props.notFound || /* @__PURE__ */ React.createElement(NoMatch, null)
+    element: props.notFound || /* @__PURE__ */ React.createElement(NotFound, null)
   }));
 }
 
 // src/Table.tsx
 import {
-  useState as useState6,
-  useEffect as useEffect6,
+  useState as useState5,
+  useEffect as useEffect5,
   cloneElement as cloneElement2
 } from "react";
 import {
@@ -448,24 +435,25 @@ import {
 } from "antd";
 import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
 import { isNil as isNil2, upperFirst as upperFirst4 } from "lodash";
+import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
 function processValue(item, value) {
-  var _a2;
+  var _a;
   if (item.options && typeof value !== "undefined" && value !== null) {
     if (item.type.endsWith("[]"))
       return value.map((v) => {
-        var _a3;
-        return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+        var _a2;
+        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       });
     else
-      return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
+      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
   }
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = useState6();
+  const [columns, setColumns] = useState5();
   const [config] = useFaasState();
-  useEffect6(() => {
-    var _a2;
+  useEffect5(() => {
+    var _a;
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -475,7 +463,7 @@ function Table(props) {
         item.title = upperFirst4(item.id);
       if (!item.type)
         item.type = "string";
-      if ((_a2 = item.options) == null ? void 0 : _a2.length) {
+      if ((_a = item.options) == null ? void 0 : _a.length) {
         item.options = transferOptions(item.options);
         item.filters = item.options.map((o) => ({
           text: o.label,
@@ -583,20 +571,54 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadValues({
-    render: ({ data }) => /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
+  if (!props.faasData)
+    return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
       rowKey: props.rowKey || "id",
       columns,
-      dataSource: data
-    }))
-  }, props));
+      dataSource: props.dataSource
+    }));
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper2, __spreadValues({
+    render: ({
+      data,
+      params,
+      reload
+    }) => {
+      if (!data)
+        return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
+          rowKey: props.rowKey || "id",
+          columns,
+          dataSource: []
+        }));
+      if (Array.isArray(data))
+        return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
+          rowKey: props.rowKey || "id",
+          columns,
+          dataSource: data
+        }));
+      return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
+        rowKey: props.rowKey || "id",
+        columns,
+        dataSource: data.rows,
+        pagination: __spreadValues(__spreadValues({}, props.pagination), data.pagination),
+        onChange: (pagination, filters, sorter, extra) => {
+          if (props.onChange)
+            props.onChange(pagination, filters, sorter, extra);
+          reload(__spreadProps(__spreadValues({}, params), {
+            pagination,
+            filters,
+            sorter
+          }));
+        }
+      }));
+    }
+  }, props.faasData));
 }
 
 // src/Title.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 function Title(props) {
   const [config] = useFaasState();
-  useEffect7(() => {
+  useEffect6(() => {
     const title = Array.isArray(props.title) ? props.title : [props.title];
     document.title = title.concat(props.suffix || config.Title.suffix).filter((t) => !!t).join(props.separator || config.Title.separator);
   }, []);
@@ -607,7 +629,6 @@ export {
   Config,
   Description,
   Drawer,
-  FaasDataWrapper,
   Form,
   FormItem,
   Routes,

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.355",
+  "version": "0.0.2-beta.359",
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "homepage": "https://faasjs.com/doc/ant-design.html",
   "repository": {
@@ -27,7 +28,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.355",
+    "@faasjs/react": "^0.0.2-beta.359",
     "react-use": "*",
     "react-router-dom": "*"
   },