@faasjs/ant-design 0.0.3-beta.1 → 0.0.3-beta.10

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

@@ -52,12 +52,12 @@ var import_react = __toESM(require("react"));
 
 // src/Blank.tsx
 var import_antd2 = require("antd");
-var import_lodash2 = require("lodash");
+var import_lodash_es2 = require("lodash-es");
 
 // src/Config.tsx
 var import_react2 = require("react");
 var import_antd = require("antd");
-var import_lodash = require("lodash");
+var import_lodash_es = require("lodash-es");
 var import_jsx_runtime = require("react/jsx-runtime");
 var isZH = /^zh/i.test(navigator.language);
 var zh = {
@@ -105,7 +105,7 @@ function ConfigProvider({
   const [values, setValues] = (0, import_react2.useState)(baseConfig);
   (0, import_react2.useEffect)(() => {
     if (config.lang === "zh") {
-      setValues((0, import_lodash.defaultsDeep)(config, {
+      setValues((0, import_lodash_es.defaultsDeep)(config, {
         lang: "zh",
         common: zh,
         Blank: { text: zh.blank },
@@ -130,20 +130,20 @@ function useConfigContext() {
 var import_jsx_runtime = require("react/jsx-runtime");
 function Blank(options) {
   const { Blank: Blank2 } = useConfigContext();
-  return !options || (0, import_lodash2.isNil)(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Typography.Text, {
+  return !options || (0, import_lodash_es2.isNil)(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Typography.Text, {
     disabled: true,
     children: (options == null ? void 0 : options.text) || Blank2.text
   }) : options.value;
 }
 
 // src/data.ts
-var import_lodash3 = require("lodash");
+var import_lodash_es3 = require("lodash-es");
 var import_dayjs = __toESM(require("dayjs"));
 function transferOptions(options) {
   if (!options)
     return [];
   return options.map((item) => typeof item === "object" ? item : {
-    label: (0, import_lodash3.upperFirst)(item.toString()),
+    label: (0, import_lodash_es3.upperFirst)(item.toString()),
     value: item
   });
 }
@@ -166,7 +166,7 @@ function transferValue(type, value) {
 // src/Description.tsx
 var import_icons = require("@ant-design/icons");
 var import_antd3 = require("antd");
-var import_lodash4 = require("lodash");
+var import_lodash_es4 = require("lodash-es");
 var import_react3 = require("react");
 var import_react4 = require("@faasjs/react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -177,7 +177,7 @@ function DescriptionItemContent(props) {
     var _a2, _b;
     const propsCopy = { ...props };
     if (!propsCopy.item.title)
-      propsCopy.item.title = (0, import_lodash4.upperFirst)(propsCopy.item.id);
+      propsCopy.item.title = (0, import_lodash_es4.upperFirst)(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
     if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
@@ -282,10 +282,10 @@ function Description(props) {
   if (!props.faasData)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions, {
       ...props,
-      title: (0, import_lodash4.isFunction)(props.renderTitle) ? props.renderTitle(props.dataSource) : props.title,
+      title: (0, import_lodash_es4.isFunction)(props.renderTitle) ? props.renderTitle(props.dataSource) : props.title,
       children: props.items.map((item) => {
         return !item.if || item.if(props.dataSource) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions.Item, {
-          label: item.title || (0, import_lodash4.upperFirst)(item.id),
+          label: item.title || (0, import_lodash_es4.upperFirst)(item.id),
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionItemContent, {
             item,
             value: props.dataSource[item.id],
@@ -302,10 +302,10 @@ function Description(props) {
     render: ({ data }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions, {
         ...props,
-        title: (0, import_lodash4.isFunction)(props.renderTitle) ? props.renderTitle(data) : props.title,
+        title: (0, import_lodash_es4.isFunction)(props.renderTitle) ? props.renderTitle(data) : props.title,
         children: props.items.map((item) => {
           return !item.if || item.if(data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions.Item, {
-            label: item.title || (0, import_lodash4.upperFirst)(item.id),
+            label: item.title || (0, import_lodash_es4.upperFirst)(item.id),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionItemContent, {
               item,
               value: data[item.id],
@@ -356,11 +356,11 @@ var import_react8 = require("react");
 var import_antd5 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var import_react6 = require("react");
-var import_lodash5 = require("lodash");
+var import_lodash_es5 = require("lodash-es");
 var import_jsx_runtime = require("react/jsx-runtime");
 function processProps(propsCopy, config) {
   if (!propsCopy.title)
-    propsCopy.title = (0, import_lodash5.upperFirst)(propsCopy.id);
+    propsCopy.title = (0, import_lodash_es5.upperFirst)(propsCopy.id);
   if (!propsCopy.label && propsCopy.label !== false)
     propsCopy.label = propsCopy.title;
   if (!propsCopy.name)
@@ -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) {
@@ -418,14 +418,18 @@ function FormItem(props) {
     }
     if (propsCopy.if) {
       const condition = propsCopy.if;
-      propsCopy.shouldUpdate = (_, cur) => {
+      const originShouldUpdate = propsCopy.shouldUpdate;
+      propsCopy.shouldUpdate = (prev, cur) => {
         const show = condition(cur);
+        const shouldUpdate = hidden !== show;
         setHidden(!show);
-        return show;
+        const origin = originShouldUpdate ? typeof originShouldUpdate === "boolean" ? originShouldUpdate : originShouldUpdate(prev, cur, {}) : true;
+        return shouldUpdate || origin;
       };
       delete propsCopy.if;
+      delete propsCopy.hidden;
     }
-    setComputedProps(processProps(propsCopy, config));
+    setComputedProps(processProps(propsCopy, common2));
   }, [props]);
   if (!computedProps)
     return null;
@@ -672,7 +676,7 @@ function FormItem(props) {
                         danger: true,
                         type: "link",
                         onClick: () => remove(field.name),
-                        children: config.common.delete
+                        children: common2.delete
                       })
                     ]
                   })
@@ -697,7 +701,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 +736,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 +785,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 +800,7 @@ function Form(props) {
   (0, import_react8.useEffect)(() => {
     if (!initialValues)
       return;
+    console.debug("Form:initialValues", initialValues);
     form.setFieldsValue(initialValues);
     setInitialValues(null);
   }, [computedProps]);
@@ -797,7 +811,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)),
@@ -943,7 +957,7 @@ var import_react11 = require("react");
 var import_antd10 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_icons3 = require("@ant-design/icons");
-var import_lodash6 = require("lodash");
+var import_lodash_es6 = require("lodash-es");
 var import_react12 = require("@faasjs/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function processValue(item, value) {
@@ -972,7 +986,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) {
@@ -981,7 +995,7 @@ function Table(props) {
       if (!item.dataIndex)
         item.dataIndex = item.id;
       if (!item.title)
-        item.title = (0, import_lodash6.upperFirst)(item.id);
+        item.title = (0, import_lodash_es6.upperFirst)(item.id);
       if (!item.type)
         item.type = "string";
       if ((_a = item.options) == null ? void 0 : _a.length) {
@@ -1014,6 +1028,8 @@ function Table(props) {
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
+              if (value === null && (0, import_lodash_es6.isNil)(row[item.id]))
+                return true;
               if (!row[item.id])
                 return false;
               return row[item.id].toLowerCase().includes(value.toLowerCase());
@@ -1042,6 +1058,8 @@ function Table(props) {
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
+              if (value === null && (!row[item.id] || !row[item.id].length))
+                return true;
               if (!row[item.id] || !row[item.id].length)
                 return false;
               return row[item.id].some((v) => v.toLowerCase().includes(value.toLowerCase()));
@@ -1071,7 +1089,11 @@ function Table(props) {
           if (!item.sorter)
             item.sorter = (a, b) => a[item.id] - b[item.id];
           if (!item.onFilter)
-            item.onFilter = (value, row) => value === row[item.id];
+            item.onFilter = (value, row) => {
+              if (value === null && (0, import_lodash_es6.isNil)(row[item.id]))
+                return true;
+              return value === row[item.id];
+            };
           if (!item.filters && item.filterDropdown !== false)
             item.filterDropdown = ({
               setSelectedKeys,
@@ -1095,7 +1117,13 @@ function Table(props) {
           if (!item.render)
             item.render = (value) => processValue(item, value).join(", ");
           if (!item.onFilter)
-            item.onFilter = (value, row) => row[item.id].includes(value);
+            item.onFilter = (value, row) => {
+              if (value === null && (!row[item.id] || !row[item.id].length))
+                return true;
+              if (!row[item.id] || !row[item.id].length)
+                return false;
+              return row[item.id].includes(value);
+            };
           if (!item.filters && item.filterDropdown !== false)
             item.filterDropdown = ({
               setSelectedKeys,
@@ -1173,11 +1201,11 @@ function Table(props) {
             item.onFilter = (value, row) => {
               switch (value) {
                 case "true":
-                  return !(0, import_lodash6.isNil)(row[item.id]) && !!row[item.id];
+                  return !(0, import_lodash_es6.isNil)(row[item.id]) && !!row[item.id];
                 case "false":
-                  return !(0, import_lodash6.isNil)(row[item.id]) && !row[item.id];
+                  return !(0, import_lodash_es6.isNil)(row[item.id]) && !row[item.id];
                 case "empty":
-                  return (0, import_lodash6.isNil)(row[item.id]);
+                  return (0, import_lodash_es6.isNil)(row[item.id]);
                 default:
                   return true;
               }
@@ -1219,7 +1247,11 @@ function Table(props) {
           if (!item.render)
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
-            item.onFilter = (value, row) => value === row[item.id];
+            item.onFilter = (value, row) => {
+              if (value === null && (0, import_lodash_es6.isNil)(row[item.id]))
+                return true;
+              return value === row[item.id];
+            };
           break;
       }
     }
@@ -1233,10 +1265,13 @@ function Table(props) {
         setColumns((prev) => {
           const newColumns = [...prev];
           const index = newColumns.findIndex((item) => item.id === column.id);
-          newColumns[index].filters = (0, import_lodash6.uniqBy)(props.dataSource, column.id).map((v) => ({
+          newColumns[index].filters = (0, import_lodash_es6.uniqBy)(props.dataSource, column.id).map((v) => ({
             text: v[column.id],
             value: v[column.id]
-          }));
+          })).concat({
+            text: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Blank, {}),
+            value: null
+          });
           return newColumns;
         });
       }
@@ -1245,11 +1280,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, {
@@ -1261,46 +1299,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

@@ -3,7 +3,7 @@ import React from "react";
 
 // src/Blank.tsx
 import { Typography } from "antd";
-import { isNil } from "lodash";
+import { isNil } from "lodash-es";
 
 // src/Config.tsx
 import {
@@ -13,7 +13,7 @@ import {
   useState
 } from "react";
 import { ConfigProvider as AntdConfigProvider } from "antd";
-import { defaultsDeep } from "lodash";
+import { defaultsDeep } from "lodash-es";
 import { jsx } from "react/jsx-runtime";
 var isZH = /^zh/i.test(navigator.language);
 var zh = {
@@ -93,7 +93,7 @@ function Blank(options) {
 }
 
 // src/data.ts
-import { upperFirst } from "lodash";
+import { upperFirst } from "lodash-es";
 import dayjs from "dayjs";
 function transferOptions(options) {
   if (!options)
@@ -126,7 +126,7 @@ import {
   Skeleton,
   Space
 } from "antd";
-import { isFunction, upperFirst as upperFirst2 } from "lodash";
+import { isFunction, upperFirst as upperFirst2 } from "lodash-es";
 import {
   cloneElement,
   useEffect as useEffect2,
@@ -320,7 +320,8 @@ import {
 import {
   useEffect as useEffect4,
   useState as useState5,
-  useCallback
+  useCallback,
+  isValidElement
 } from "react";
 
 // src/FormItem.tsx
@@ -341,7 +342,7 @@ import {
   useEffect as useEffect3,
   useState as useState4
 } from "react";
-import { upperFirst as upperFirst3 } from "lodash";
+import { upperFirst as upperFirst3 } from "lodash-es";
 import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
 function processProps(propsCopy, config) {
   if (!propsCopy.title)
@@ -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) {
@@ -403,14 +404,18 @@ function FormItem(props) {
     }
     if (propsCopy.if) {
       const condition = propsCopy.if;
-      propsCopy.shouldUpdate = (_, cur) => {
+      const originShouldUpdate = propsCopy.shouldUpdate;
+      propsCopy.shouldUpdate = (prev, cur) => {
         const show = condition(cur);
+        const shouldUpdate = hidden !== show;
         setHidden(!show);
-        return show;
+        const origin = originShouldUpdate ? typeof originShouldUpdate === "boolean" ? originShouldUpdate : originShouldUpdate(prev, cur, {}) : true;
+        return shouldUpdate || origin;
       };
       delete propsCopy.if;
+      delete propsCopy.hidden;
     }
-    setComputedProps(processProps(propsCopy, config));
+    setComputedProps(processProps(propsCopy, common2));
   }, [props]);
   if (!computedProps)
     return null;
@@ -657,7 +662,7 @@ function FormItem(props) {
                         danger: true,
                         type: "link",
                         onClick: () => remove(field.name),
-                        children: config.common.delete
+                        children: common2.delete
                       })
                     ]
                   })
@@ -682,7 +687,7 @@ function FormItem(props) {
                   onClick: () => add(),
                   icon: /* @__PURE__ */ jsx5(PlusOutlined, {}),
                   children: [
-                    config.common.add,
+                    common2.add,
                     " ",
                     computedProps.label
                   ]
@@ -717,11 +722,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 +771,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 +786,7 @@ function Form(props) {
   useEffect4(() => {
     if (!initialValues)
       return;
+    console.debug("Form:initialValues", initialValues);
     form.setFieldsValue(initialValues);
     setInitialValues(null);
   }, [computedProps]);
@@ -782,7 +797,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 +953,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";
@@ -946,7 +962,7 @@ import {
   isNil as isNil2,
   uniqBy,
   upperFirst as upperFirst4
-} from "lodash";
+} from "lodash-es";
 import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function processValue(item, value) {
@@ -975,7 +991,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) {
@@ -1017,6 +1033,8 @@ function Table(props) {
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
+              if (value === null && isNil2(row[item.id]))
+                return true;
               if (!row[item.id])
                 return false;
               return row[item.id].toLowerCase().includes(value.toLowerCase());
@@ -1045,6 +1063,8 @@ function Table(props) {
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
+              if (value === null && (!row[item.id] || !row[item.id].length))
+                return true;
               if (!row[item.id] || !row[item.id].length)
                 return false;
               return row[item.id].some((v) => v.toLowerCase().includes(value.toLowerCase()));
@@ -1074,7 +1094,11 @@ function Table(props) {
           if (!item.sorter)
             item.sorter = (a, b) => a[item.id] - b[item.id];
           if (!item.onFilter)
-            item.onFilter = (value, row) => value === row[item.id];
+            item.onFilter = (value, row) => {
+              if (value === null && isNil2(row[item.id]))
+                return true;
+              return value === row[item.id];
+            };
           if (!item.filters && item.filterDropdown !== false)
             item.filterDropdown = ({
               setSelectedKeys,
@@ -1098,7 +1122,13 @@ function Table(props) {
           if (!item.render)
             item.render = (value) => processValue(item, value).join(", ");
           if (!item.onFilter)
-            item.onFilter = (value, row) => row[item.id].includes(value);
+            item.onFilter = (value, row) => {
+              if (value === null && (!row[item.id] || !row[item.id].length))
+                return true;
+              if (!row[item.id] || !row[item.id].length)
+                return false;
+              return row[item.id].includes(value);
+            };
           if (!item.filters && item.filterDropdown !== false)
             item.filterDropdown = ({
               setSelectedKeys,
@@ -1222,7 +1252,11 @@ function Table(props) {
           if (!item.render)
             item.render = (value) => processValue(item, value);
           if (!item.onFilter)
-            item.onFilter = (value, row) => value === row[item.id];
+            item.onFilter = (value, row) => {
+              if (value === null && isNil2(row[item.id]))
+                return true;
+              return value === row[item.id];
+            };
           break;
       }
     }
@@ -1239,7 +1273,10 @@ function Table(props) {
           newColumns[index].filters = uniqBy(props.dataSource, column.id).map((v) => ({
             text: v[column.id],
             value: v[column.id]
-          }));
+          })).concat({
+            text: /* @__PURE__ */ jsx10(Blank, {}),
+            value: null
+          });
           return newColumns;
         });
       }
@@ -1248,11 +1285,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, {
@@ -1264,46 +1304,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.1",
+  "version": "0.0.3-beta.10",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -25,15 +25,15 @@
   "dependencies": {
     "@ant-design/icons": "*",
     "antd": "*",
-    "lodash": "*",
+    "lodash-es": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.3-beta.1",
+    "@faasjs/react": "^0.0.3-beta.10",
     "react-router-dom": "*",
     "dayjs": "*"
   },
   "devDependencies": {
-    "@types/lodash": "*",
+    "@types/lodash-es": "*",
     "@testing-library/jest-dom": "*",
     "@testing-library/react": "*",
     "@testing-library/user-event": "*"