@faasjs/ant-design 0.0.2-beta.353 → 0.0.2-beta.357

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 = {
@@ -65,20 +66,6 @@ declare function transferOptions(options: BaseOption[]): {
     value?: string | number;
 }[];
 
-declare type FaasDataWrapperProps<T = any> = {
-    dataSource?: T;
-    faasData?: {
-        action: string;
-        params?: Record<string, any>;
-        data?: T;
-        setData?: Dispatch<SetStateAction<T>>;
-    };
-    render?: (args: {
-        data: T;
-    }) => JSX.Element;
-    fallback?: JSX.Element;
-};
-
 declare type ExtendDescriptionTypeProps = {
     children?: JSX.Element | null;
     render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
@@ -93,7 +80,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 & {
@@ -187,7 +176,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 = {

package/dist/index.js

@@ -116,39 +116,11 @@ 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)(() => {
+  const [computedProps, setComputedProps] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     var _a2, _b2;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
@@ -173,7 +145,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
       });
@@ -182,7 +154,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)
@@ -211,7 +183,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)
@@ -221,14 +203,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
@@ -245,16 +227,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);
@@ -394,10 +376,10 @@ 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)();
+  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) => {
@@ -429,7 +411,7 @@ 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() {
   return /* @__PURE__ */ import_react.default.createElement(import_antd6.Result, {
@@ -442,7 +424,7 @@ 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, {
+    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react8.Suspense, {
       fallback: /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
         active: true
       })
@@ -455,10 +437,11 @@ function Routes(props) {
 }
 
 // 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;
   if (item.options && typeof value !== "undefined" && value !== null) {
@@ -473,9 +456,9 @@ function processValue(item, 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)(() => {
+  (0, import_react9.useEffect)(() => {
     var _a2;
     for (const item of props.items) {
       if (!item.key)
@@ -499,7 +482,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
           });
@@ -594,13 +577,45 @@ 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: data.pagination,
+        onChange: (pagination, filters, sorter) => {
+          reload(__spreadProps(__spreadValues({}, params), {
+            pagination,
+            filters,
+            sorter
+          }));
+        }
+      }));
+    }
+  }, props.faasData));
 }
 
 // src/Title.tsx

package/dist/index.mjs

@@ -76,44 +76,13 @@ 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(() => {
+  const [computedProps, setComputedProps] = useState();
+  useEffect2(() => {
     var _a2, _b2;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
@@ -176,7 +145,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 +165,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 +192,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 +206,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);
@@ -371,10 +350,10 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a2, _b2;
-  const [loading, setLoading] = useState5(false);
-  const [computedProps, setComputedProps] = useState5();
+  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) => {
@@ -438,8 +417,8 @@ function Routes(props) {
 
 // src/Table.tsx
 import {
-  useState as useState6,
-  useEffect as useEffect6,
+  useState as useState5,
+  useEffect as useEffect5,
   cloneElement as cloneElement2
 } from "react";
 import {
@@ -448,6 +427,7 @@ 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;
   if (item.options && typeof value !== "undefined" && value !== null) {
@@ -462,9 +442,9 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = useState6();
+  const [columns, setColumns] = useState5();
   const [config] = useFaasState();
-  useEffect6(() => {
+  useEffect5(() => {
     var _a2;
     for (const item of props.items) {
       if (!item.key)
@@ -583,20 +563,52 @@ 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: data.pagination,
+        onChange: (pagination, filters, sorter) => {
+          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);
   }, []);

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.353",
+  "version": "0.0.2-beta.357",
   "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.353",
+    "@faasjs/react": "^0.0.2-beta.357",
     "react-use": "*",
     "react-router-dom": "*"
   },