@faasjs/ant-design 0.0.2-beta.348 → 0.0.2-beta.352

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 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 } from 'react';
 import * as antd_lib_form_Form from 'antd/lib/form/Form';
 import { RuleObject } from 'rc-field-form/lib/interface';
 
@@ -37,6 +38,20 @@ 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;
@@ -48,16 +63,11 @@ declare type DescriptionItemProps<T = any> = {
 } & FaasItemProps;
 declare type DescriptionProps<T = any, ExtendItemProps = any> = {
     items: (DescriptionItemProps | ExtendItemProps)[];
-    dataSource?: T;
-    faasData?: {
-        action: string;
-        params?: Record<string, any>;
-    };
     extendTypes?: {
         [key: string]: ExtendDescriptionTypeProps;
     };
-} & DescriptionsProps;
-declare function Description(props: DescriptionProps): JSX.Element;
+} & FaasDataWrapperProps<T> & DescriptionsProps;
+declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
 
 declare type DrawerProps = DrawerProps$1 & {
     children?: JSX.Element | JSX.Element[];
@@ -101,7 +111,8 @@ declare type ExtendFormTypeProps = {
 };
 declare type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
 declare type FormItemProps<T = any> = {
-    children?: JSX.Element;
+    children?: JSX.Element | null;
+    render?: () => JSX.Element | null;
     rules?: RuleObject[];
     label?: string | false;
     extendTypes?: {
@@ -127,22 +138,21 @@ declare namespace Form {
     var Item: typeof FormItem;
 }
 
-declare type TableItemProps<T = any> = FaasItemProps & TableColumnProps<T>;
+declare type TableItemProps<T = any> = {
+    /** @deprecated use render */
+    children?: JSX.Element | null;
+} & FaasItemProps & Omit<TableColumnProps<T>, 'children'>;
 declare type ExtendTableTypeProps = {
     children?: JSX.Element | null;
-    render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
+    render?: (value: any, values: any, index: number) => JSX.Element | string | number | boolean | null;
 };
-declare type ExtendTableItemProps<T = any> = BaseItemProps & TableColumnProps<T>;
+declare type ExtendTableItemProps<T = any> = BaseItemProps & Omit<TableColumnProps<T>, 'children'>;
 declare type TableProps<T = any, ExtendTypes = any> = {
     items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
     extendTypes?: {
         [key: string]: ExtendTableTypeProps;
     };
-    faasData?: {
-        action: string;
-        params?: Record<string, any>;
-    };
-} & TableProps$1<T>;
+} & FaasDataWrapperProps<T> & TableProps$1<T>;
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
 export { BaseItemProps, BaseOption, Blank, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps, transferOptions, useDrawer };

package/dist/index.js

@@ -87,7 +87,7 @@ var import_antd2 = require("antd");
 var import_lodash3 = require("lodash");
 var import_react4 = require("react");
 
-// src/FaasWrapper.tsx
+// src/FaasDataWrapper.tsx
 var import_react2 = require("react");
 var import_react3 = require("@faasjs/react");
 function FaasDataWrapper({
@@ -100,13 +100,18 @@ function FaasDataWrapper({
   (0, import_react2.useEffect)(() => {
     if (!faasData)
       return;
-    (0, import_react3.getClient)().faas(faasData.action, faasData.params).then((res) => setData(res.data));
-  }, [JSON.stringify(faasData)]);
+    (0, import_react3.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)
+  if (!data && !faasData.data)
     return fallback || null;
-  return render({ data });
+  return render({ data: faasData.data || data });
 }
 
 // src/Description.tsx
@@ -175,9 +180,7 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
-    dataSource: props.dataSource,
-    faasData: props.faasData,
+  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, __spreadProps(__spreadValues({}, props), {
     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)
@@ -187,7 +190,7 @@ function Description(props) {
       values: data,
       extendTypes: props.extendTypes
     }))))
-  });
+  }));
 }
 
 // src/Drawer.tsx
@@ -211,6 +214,7 @@ function useDrawer(init) {
 
 // src/Form.tsx
 var import_antd5 = require("antd");
+var import_react7 = require("react");
 
 // src/FormItem.tsx
 var import_antd4 = require("antd");
@@ -263,6 +267,8 @@ function FormItem(props) {
     return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
   if (computedProps.children)
     return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), computedProps.children);
+  if (computedProps.render)
+    return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), computedProps.render());
   switch (computedProps.type) {
     case "string":
       return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd4.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd4.Input, __spreadValues({}, computedProps.input)));
@@ -357,20 +363,40 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a2, _b;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, props), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [computedProps, setComputedProps] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    const propsCopy = __spreadValues({}, props);
+    if (propsCopy.onFinish) {
+      propsCopy.onFinish = async (values) => {
+        setLoading(true);
+        try {
+          await propsCopy.onFinish(values);
+        } catch (error) {
+          console.error(error);
+        }
+        setLoading(false);
+      };
+    }
+    setComputedProps(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({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
   }))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd5.Button, {
     htmlType: "submit",
-    type: "primary"
+    type: "primary",
+    loading
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
 }
 Form.useForm = import_antd5.Form.useForm;
 Form.Item = FormItem;
 
 // src/Table.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_antd6 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
@@ -388,8 +414,8 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = (0, import_react7.useState)();
-  (0, import_react7.useEffect)(() => {
+  const [columns, setColumns] = (0, import_react8.useState)();
+  (0, import_react8.useEffect)(() => {
     var _a2;
     for (const item of props.items) {
       if (!item.key)
@@ -409,9 +435,11 @@ function Table(props) {
       }
       if (item.render)
         continue;
+      if (item.children)
+        delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
-          item.render = (value, values) => (0, import_react7.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react8.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -424,14 +452,20 @@ function Table(props) {
       switch (item.type) {
         case "string[]":
           item.render = (value) => processValue(item, value).join(", ");
+          if (!item.onFilter)
+            item.onFilter = (value, row) => row[item.id].includes(value);
           break;
         case "number":
           item.render = (value) => processValue(item, value);
           if (!item.sorter)
             item.sorter = (a, b) => a[item.id] - b[item.id];
+          if (!item.onFilter)
+            item.onFilter = (value, row) => value === row[item.id];
           break;
         case "number[]":
           item.render = (value) => processValue(item, value).join(", ");
+          if (!item.onFilter)
+            item.onFilter = (value, row) => row[item.id].includes(value);
           break;
         case "boolean":
           item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ import_react.default.createElement(Blank, null) : value ? /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
@@ -494,6 +528,8 @@ function Table(props) {
           break;
         default:
           item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => value === row[item.id];
           break;
       }
     }
@@ -501,15 +537,13 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
-    dataSource: props.dataSource,
-    faasData: props.faasData,
+  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, __spreadValues({
     render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd6.Table, __spreadProps(__spreadValues({}, props), {
       rowKey: props.rowKey || "id",
       columns,
       dataSource: data
     }))
-  });
+  }, props));
 }
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -53,8 +53,11 @@ import {
   useState as useState2
 } from "react";
 
-// src/FaasWrapper.tsx
-import { useEffect, useState } from "react";
+// src/FaasDataWrapper.tsx
+import {
+  useEffect,
+  useState
+} from "react";
 import { getClient } from "@faasjs/react";
 function FaasDataWrapper({
   dataSource,
@@ -66,13 +69,18 @@ function FaasDataWrapper({
   useEffect(() => {
     if (!faasData)
       return;
-    getClient().faas(faasData.action, faasData.params).then((res) => setData(res.data));
-  }, [JSON.stringify(faasData)]);
+    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)
+  if (!data && !faasData.data)
     return fallback || null;
-  return render({ data });
+  return render({ data: faasData.data || data });
 }
 
 // src/Description.tsx
@@ -141,9 +149,7 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
-    dataSource: props.dataSource,
-    faasData: props.faasData,
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadProps(__spreadValues({}, props), {
     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)
@@ -153,7 +159,7 @@ function Description(props) {
       values: data,
       extendTypes: props.extendTypes
     }))))
-  });
+  }));
 }
 
 // src/Drawer.tsx
@@ -180,6 +186,7 @@ import {
   Button as Button2,
   Form as AntdForm2
 } from "antd";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/FormItem.tsx
 import {
@@ -193,10 +200,7 @@ import {
   Select
 } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import {
-  useEffect as useEffect3,
-  useState as useState4
-} from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { upperFirst as upperFirst3 } from "lodash";
 function FormItem(props) {
   const [computedProps, setComputedProps] = useState4();
@@ -244,6 +248,8 @@ function FormItem(props) {
     return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
   if (computedProps.children)
     return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.children);
+  if (computedProps.render)
+    return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.render());
   switch (computedProps.type) {
     case "string":
       return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ React.createElement(Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)));
@@ -338,13 +344,33 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a2, _b;
-  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
+  const [loading, setLoading] = useState5(false);
+  const [computedProps, setComputedProps] = useState5();
+  useEffect4(() => {
+    const propsCopy = __spreadValues({}, props);
+    if (propsCopy.onFinish) {
+      propsCopy.onFinish = async (values) => {
+        setLoading(true);
+        try {
+          await propsCopy.onFinish(values);
+        } catch (error) {
+          console.error(error);
+        }
+        setLoading(false);
+      };
+    }
+    setComputedProps(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({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
   }))), props.children, props.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
     htmlType: "submit",
-    type: "primary"
+    type: "primary",
+    loading
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
 }
 Form.useForm = AntdForm2.useForm;
@@ -352,8 +378,8 @@ Form.Item = FormItem;
 
 // src/Table.tsx
 import {
-  useState as useState5,
-  useEffect as useEffect4,
+  useState as useState6,
+  useEffect as useEffect5,
   cloneElement as cloneElement2
 } from "react";
 import {
@@ -376,8 +402,8 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = useState5();
-  useEffect4(() => {
+  const [columns, setColumns] = useState6();
+  useEffect5(() => {
     var _a2;
     for (const item of props.items) {
       if (!item.key)
@@ -397,6 +423,8 @@ function Table(props) {
       }
       if (item.render)
         continue;
+      if (item.children)
+        delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
           item.render = (value, values) => cloneElement2(props.extendTypes[item.type].children, {
@@ -412,14 +440,20 @@ function Table(props) {
       switch (item.type) {
         case "string[]":
           item.render = (value) => processValue(item, value).join(", ");
+          if (!item.onFilter)
+            item.onFilter = (value, row) => row[item.id].includes(value);
           break;
         case "number":
           item.render = (value) => processValue(item, value);
           if (!item.sorter)
             item.sorter = (a, b) => a[item.id] - b[item.id];
+          if (!item.onFilter)
+            item.onFilter = (value, row) => value === row[item.id];
           break;
         case "number[]":
           item.render = (value) => processValue(item, value).join(", ");
+          if (!item.onFilter)
+            item.onFilter = (value, row) => row[item.id].includes(value);
           break;
         case "boolean":
           item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ React.createElement(Blank, null) : value ? /* @__PURE__ */ React.createElement(CheckOutlined2, {
@@ -482,6 +516,8 @@ function Table(props) {
           break;
         default:
           item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => value === row[item.id];
           break;
       }
     }
@@ -489,15 +525,13 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
-    dataSource: props.dataSource,
-    faasData: props.faasData,
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadValues({
     render: ({ data }) => /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
       rowKey: props.rowKey || "id",
       columns,
       dataSource: data
     }))
-  });
+  }, props));
 }
 export {
   Blank,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.348",
+  "version": "0.0.2-beta.352",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.348"
+    "@faasjs/react": "^0.0.2-beta.352"
   },
   "devDependencies": {
     "@types/lodash": "*",