@faasjs/ant-design 0.0.3-beta.3 → 0.0.3-beta.5

package/dist/index.d.ts

@@ -240,10 +240,10 @@ type FormItemProps<T = any> = {
  *
  * ```ts
  * // use inline type
- * <FormItem item={{ type: 'string', id: 'name' }} />
+ * <FormItem type='string' id='name' />
  *
  * // use custom type
- * <FormItem item={{ id: 'password' }}>
+ * <FormItem id='password'>
  *   <Input.Password />
  * </>
  * ```
@@ -251,7 +251,7 @@ type FormItemProps<T = any> = {
 declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
 
 type FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> = {
-    items?: (FormItemProps | ExtendItemProps)[];
+    items?: (FormItemProps | ExtendItemProps | JSX.Element)[];
     /** Default: { text: 'Submit' }, set false to disable it */
     submit?: false | {
         /** Default: Submit */

package/dist/index.js

@@ -375,13 +375,13 @@ function processProps(propsCopy, config) {
         required: true,
         validator: async (_, values) => {
           if (!values || values.length < 1)
-            return Promise.reject(Error(`${propsCopy.label || propsCopy.title} ${config.common.required}`));
+            return Promise.reject(Error(`${propsCopy.label || propsCopy.title} ${config.required}`));
         }
       });
     else
       propsCopy.rules.push({
         required: true,
-        message: `${propsCopy.label || propsCopy.title} ${config.common.required}`
+        message: `${propsCopy.label || propsCopy.title} ${config.required}`
       });
   }
   if (!propsCopy.input)
@@ -408,8 +408,8 @@ function FormItem(props) {
   var _a;
   const [computedProps, setComputedProps] = (0, import_react6.useState)();
   const [extendTypes, setExtendTypes] = (0, import_react6.useState)();
-  const config = useConfigContext();
-  const [hidden, setHidden] = (0, import_react6.useState)(false);
+  const { common: common2 } = useConfigContext();
+  const [hidden, setHidden] = (0, import_react6.useState)(props.hidden || false);
   (0, import_react6.useEffect)(() => {
     const propsCopy = { ...props };
     if (propsCopy.extendTypes) {
@@ -425,7 +425,7 @@ function FormItem(props) {
       };
       delete propsCopy.if;
     }
-    setComputedProps(processProps(propsCopy, config));
+    setComputedProps(processProps(propsCopy, common2));
   }, [props]);
   if (!computedProps)
     return null;
@@ -672,7 +672,7 @@ function FormItem(props) {
                         danger: true,
                         type: "link",
                         onClick: () => remove(field.name),
-                        children: config.common.delete
+                        children: common2.delete
                       })
                     ]
                   })
@@ -697,7 +697,7 @@ function FormItem(props) {
                   onClick: () => add(),
                   icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.PlusOutlined, {}),
                   children: [
-                    config.common.add,
+                    common2.add,
                     " ",
                     computedProps.label
                   ]
@@ -732,11 +732,19 @@ function Form(props) {
       form
     };
     if (propsCopy.initialValues) {
-      for (const key in propsCopy.initialValues)
+      for (const key in propsCopy.initialValues) {
         propsCopy.initialValues[key] = transferValue(
-          (_a2 = propsCopy.items.find((item) => item.id === key)) == null ? void 0 : _a2.type,
+          (_a2 = propsCopy.items.find((item2) => item2.id === key)) == null ? void 0 : _a2.type,
           propsCopy.initialValues[key]
         );
+        const item = propsCopy.items.find((item2) => item2.id === key);
+        if (item == null ? void 0 : item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
+      }
+      for (const item of propsCopy.items) {
+        if (item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
+      }
       setInitialValues(propsCopy.initialValues);
       delete propsCopy.initialValues;
     }
@@ -773,6 +781,7 @@ function Form(props) {
     setComputedProps(propsCopy);
   }, [props]);
   const onValuesChange = (0, import_react8.useCallback)((changedValues, allValues) => {
+    console.debug("Form:onValuesChange", changedValues, allValues);
     if (props.onValuesChange) {
       props.onValuesChange(changedValues, allValues);
     }
@@ -787,6 +796,7 @@ function Form(props) {
   (0, import_react8.useEffect)(() => {
     if (!initialValues)
       return;
+    console.debug("Form:initialValues", initialValues);
     form.setFieldsValue(initialValues);
     setInitialValues(null);
   }, [computedProps]);
@@ -797,7 +807,7 @@ function Form(props) {
     onValuesChange,
     children: [
       computedProps.beforeItems,
-      (_a = computedProps.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, {
+      (_a = computedProps.items) == null ? void 0 : _a.map((item) => (0, import_react8.isValidElement)(item) ? item : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, {
         ...item,
         extendTypes
       }, item.id)),
@@ -972,7 +982,7 @@ function processValue(item, value) {
 }
 function Table(props) {
   const [columns, setColumns] = (0, import_react11.useState)();
-  const { common: common2 } = useConfigContext();
+  const { common: common2, antd } = useConfigContext();
   (0, import_react11.useEffect)(() => {
     var _a;
     for (const item of props.items) {
@@ -1266,11 +1276,14 @@ function Table(props) {
   if (!columns)
     return null;
   if (!props.faasData)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
-      ...props,
-      rowKey: props.rowKey || "id",
-      columns,
-      dataSource: props.dataSource
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.ConfigProvider, {
+      ...antd,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
+        ...props,
+        rowKey: props.rowKey || "id",
+        columns,
+        dataSource: props.dataSource
+      })
     });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react12.FaasDataWrapper, {
     fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Skeleton, {
@@ -1282,46 +1295,55 @@ function Table(props) {
       reload
     }) => {
       if (!data)
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
-          ...props,
-          rowKey: props.rowKey || "id",
-          columns,
-          dataSource: []
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.ConfigProvider, {
+          ...antd,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
+            ...props,
+            rowKey: props.rowKey || "id",
+            columns,
+            dataSource: []
+          })
         });
       if (Array.isArray(data))
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.ConfigProvider, {
+          ...antd,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
+            ...props,
+            rowKey: props.rowKey || "id",
+            columns,
+            dataSource: data
+          })
+        });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.ConfigProvider, {
+        ...antd,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
           ...props,
           rowKey: props.rowKey || "id",
           columns,
-          dataSource: data
-        });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd10.Table, {
-        ...props,
-        rowKey: props.rowKey || "id",
-        columns,
-        dataSource: data.rows,
-        pagination: {
-          ...props.pagination,
-          ...data.pagination
-        },
-        onChange: (pagination, filters, sorter, extra) => {
-          if (props.onChange) {
-            const processed = props.onChange(pagination, filters, sorter, extra);
+          dataSource: data.rows,
+          pagination: {
+            ...props.pagination,
+            ...data.pagination
+          },
+          onChange: (pagination, filters, sorter, extra) => {
+            if (props.onChange) {
+              const processed = props.onChange(pagination, filters, sorter, extra);
+              reload({
+                ...params,
+                pagination: processed.pagination,
+                filters: processed.filters,
+                sorter: processed.sorter
+              });
+              return;
+            }
             reload({
               ...params,
-              pagination: processed.pagination,
-              filters: processed.filters,
-              sorter: processed.sorter
+              pagination,
+              filters,
+              sorter
             });
-            return;
           }
-          reload({
-            ...params,
-            pagination,
-            filters,
-            sorter
-          });
-        }
+        })
       });
     },
     ...props.faasData

package/dist/index.mjs

@@ -320,7 +320,8 @@ import {
 import {
   useEffect as useEffect4,
   useState as useState5,
-  useCallback
+  useCallback,
+  isValidElement
 } from "react";
 
 // src/FormItem.tsx
@@ -360,13 +361,13 @@ function processProps(propsCopy, config) {
         required: true,
         validator: async (_, values) => {
           if (!values || values.length < 1)
-            return Promise.reject(Error(`${propsCopy.label || propsCopy.title} ${config.common.required}`));
+            return Promise.reject(Error(`${propsCopy.label || propsCopy.title} ${config.required}`));
         }
       });
     else
       propsCopy.rules.push({
         required: true,
-        message: `${propsCopy.label || propsCopy.title} ${config.common.required}`
+        message: `${propsCopy.label || propsCopy.title} ${config.required}`
       });
   }
   if (!propsCopy.input)
@@ -393,8 +394,8 @@ function FormItem(props) {
   var _a;
   const [computedProps, setComputedProps] = useState4();
   const [extendTypes, setExtendTypes] = useState4();
-  const config = useConfigContext();
-  const [hidden, setHidden] = useState4(false);
+  const { common: common2 } = useConfigContext();
+  const [hidden, setHidden] = useState4(props.hidden || false);
   useEffect3(() => {
     const propsCopy = { ...props };
     if (propsCopy.extendTypes) {
@@ -410,7 +411,7 @@ function FormItem(props) {
       };
       delete propsCopy.if;
     }
-    setComputedProps(processProps(propsCopy, config));
+    setComputedProps(processProps(propsCopy, common2));
   }, [props]);
   if (!computedProps)
     return null;
@@ -657,7 +658,7 @@ function FormItem(props) {
                         danger: true,
                         type: "link",
                         onClick: () => remove(field.name),
-                        children: config.common.delete
+                        children: common2.delete
                       })
                     ]
                   })
@@ -682,7 +683,7 @@ function FormItem(props) {
                   onClick: () => add(),
                   icon: /* @__PURE__ */ jsx5(PlusOutlined, {}),
                   children: [
-                    config.common.add,
+                    common2.add,
                     " ",
                     computedProps.label
                   ]
@@ -717,11 +718,19 @@ function Form(props) {
       form
     };
     if (propsCopy.initialValues) {
-      for (const key in propsCopy.initialValues)
+      for (const key in propsCopy.initialValues) {
         propsCopy.initialValues[key] = transferValue(
-          (_a2 = propsCopy.items.find((item) => item.id === key)) == null ? void 0 : _a2.type,
+          (_a2 = propsCopy.items.find((item2) => item2.id === key)) == null ? void 0 : _a2.type,
           propsCopy.initialValues[key]
         );
+        const item = propsCopy.items.find((item2) => item2.id === key);
+        if (item == null ? void 0 : item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
+      }
+      for (const item of propsCopy.items) {
+        if (item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
+      }
       setInitialValues(propsCopy.initialValues);
       delete propsCopy.initialValues;
     }
@@ -758,6 +767,7 @@ function Form(props) {
     setComputedProps(propsCopy);
   }, [props]);
   const onValuesChange = useCallback((changedValues, allValues) => {
+    console.debug("Form:onValuesChange", changedValues, allValues);
     if (props.onValuesChange) {
       props.onValuesChange(changedValues, allValues);
     }
@@ -772,6 +782,7 @@ function Form(props) {
   useEffect4(() => {
     if (!initialValues)
       return;
+    console.debug("Form:initialValues", initialValues);
     form.setFieldsValue(initialValues);
     setInitialValues(null);
   }, [computedProps]);
@@ -782,7 +793,7 @@ function Form(props) {
     onValuesChange,
     children: [
       computedProps.beforeItems,
-      (_a = computedProps.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx6(FormItem, {
+      (_a = computedProps.items) == null ? void 0 : _a.map((item) => isValidElement(item) ? item : /* @__PURE__ */ jsx6(FormItem, {
         ...item,
         extendTypes
       }, item.id)),
@@ -938,7 +949,8 @@ import {
   Table as AntdTable,
   Radio,
   Skeleton as Skeleton3,
-  Input as Input2
+  Input as Input2,
+  ConfigProvider as ConfigProvider2
 } from "antd";
 import dayjs2 from "dayjs";
 import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
@@ -975,7 +987,7 @@ function processValue(item, value) {
 }
 function Table(props) {
   const [columns, setColumns] = useState7();
-  const { common: common2 } = useConfigContext();
+  const { common: common2, antd } = useConfigContext();
   useEffect5(() => {
     var _a;
     for (const item of props.items) {
@@ -1269,11 +1281,14 @@ function Table(props) {
   if (!columns)
     return null;
   if (!props.faasData)
-    return /* @__PURE__ */ jsx10(AntdTable, {
-      ...props,
-      rowKey: props.rowKey || "id",
-      columns,
-      dataSource: props.dataSource
+    return /* @__PURE__ */ jsx10(ConfigProvider2, {
+      ...antd,
+      children: /* @__PURE__ */ jsx10(AntdTable, {
+        ...props,
+        rowKey: props.rowKey || "id",
+        columns,
+        dataSource: props.dataSource
+      })
     });
   return /* @__PURE__ */ jsx10(FaasDataWrapper2, {
     fallback: props.faasData.fallback || /* @__PURE__ */ jsx10(Skeleton3, {
@@ -1285,46 +1300,55 @@ function Table(props) {
       reload
     }) => {
       if (!data)
-        return /* @__PURE__ */ jsx10(AntdTable, {
-          ...props,
-          rowKey: props.rowKey || "id",
-          columns,
-          dataSource: []
+        return /* @__PURE__ */ jsx10(ConfigProvider2, {
+          ...antd,
+          children: /* @__PURE__ */ jsx10(AntdTable, {
+            ...props,
+            rowKey: props.rowKey || "id",
+            columns,
+            dataSource: []
+          })
         });
       if (Array.isArray(data))
-        return /* @__PURE__ */ jsx10(AntdTable, {
+        return /* @__PURE__ */ jsx10(ConfigProvider2, {
+          ...antd,
+          children: /* @__PURE__ */ jsx10(AntdTable, {
+            ...props,
+            rowKey: props.rowKey || "id",
+            columns,
+            dataSource: data
+          })
+        });
+      return /* @__PURE__ */ jsx10(ConfigProvider2, {
+        ...antd,
+        children: /* @__PURE__ */ jsx10(AntdTable, {
           ...props,
           rowKey: props.rowKey || "id",
           columns,
-          dataSource: data
-        });
-      return /* @__PURE__ */ jsx10(AntdTable, {
-        ...props,
-        rowKey: props.rowKey || "id",
-        columns,
-        dataSource: data.rows,
-        pagination: {
-          ...props.pagination,
-          ...data.pagination
-        },
-        onChange: (pagination, filters, sorter, extra) => {
-          if (props.onChange) {
-            const processed = props.onChange(pagination, filters, sorter, extra);
+          dataSource: data.rows,
+          pagination: {
+            ...props.pagination,
+            ...data.pagination
+          },
+          onChange: (pagination, filters, sorter, extra) => {
+            if (props.onChange) {
+              const processed = props.onChange(pagination, filters, sorter, extra);
+              reload({
+                ...params,
+                pagination: processed.pagination,
+                filters: processed.filters,
+                sorter: processed.sorter
+              });
+              return;
+            }
             reload({
               ...params,
-              pagination: processed.pagination,
-              filters: processed.filters,
-              sorter: processed.sorter
+              pagination,
+              filters,
+              sorter
             });
-            return;
           }
-          reload({
-            ...params,
-            pagination,
-            filters,
-            sorter
-          });
-        }
+        })
       });
     },
     ...props.faasData

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.3-beta.3",
+  "version": "0.0.3-beta.5",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash-es": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.3-beta.3",
+    "@faasjs/react": "^0.0.3-beta.5",
     "react-router-dom": "*",
     "dayjs": "*"
   },