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

package/README.md

@@ -48,9 +48,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [BaseItemProps](#baseitemprops)
 - [BaseOption](#baseoption)
 - [BlankProps](#blankprops)
-- [CalendarProps](#calendarprops)
 - [ConfigProviderProps](#configproviderprops)
-- [DatePickerProps](#datepickerprops)
 - [DescriptionItemProps](#descriptionitemprops)
 - [DescriptionProps](#descriptionprops)
 - [DrawerProps](#drawerprops)
@@ -71,7 +69,6 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [RoutesProps](#routesprops)
 - [TableItemProps](#tableitemprops)
 - [TableProps](#tableprops)
-- [TimePickerProps](#timepickerprops)
 - [TitleProps](#titleprops)
 - [setDrawerProps](#setdrawerprops)
 - [setModalProps](#setmodalprops)
@@ -79,12 +76,10 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 ### Variables
 
 - [ConfigContext](#configcontext)
-- [DatePicker](#datepicker)
 
 ### Functions
 
 - [Blank](#blank)
-- [Calendar](#calendar)
 - [ConfigProvider](#configprovider)
 - [Description](#description)
 - [Form](#form)
@@ -93,7 +88,6 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [PageNotFound](#pagenotfound)
 - [Routes](#routes)
 - [Table](#table)
-- [TimePicker](#timepicker)
 - [Title](#title)
 - [transferOptions](#transferoptions)
 - [transferValue](#transfervalue)
@@ -136,12 +130,6 @@ ___
 
 ___
 
-### CalendarProps
-
-Ƭ **CalendarProps**: `AntdProps`<`Dayjs`\>
-
-___
-
 ### ConfigProviderProps
 
 Ƭ **ConfigProviderProps**: `Object`
@@ -176,12 +164,6 @@ ___
 
 ___
 
-### DatePickerProps
-
-Ƭ **DatePickerProps**: `PickerDateProps`<`Dayjs`\>
-
-___
-
 ### DescriptionItemProps
 
 Ƭ **DescriptionItemProps**<`T`\>: { `children?`: `JSX.Element` ; `if?`: (`values`: `Record`<`string`, `any`\>) => `boolean` ; `render?`: (`value`: `T`, `values`: `any`) => `ReactNode` \| `JSX.Element`  } & [`FaasItemProps`](#faasitemprops) & { `object?`: [`DescriptionItemProps`](#descriptionitemprops)[]  }
@@ -333,7 +315,7 @@ ___
 
 ### FormProps
 
-Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `beforeItems?`: `JSX.Element` \| `JSX.Element`[] ; `children?`: `ReactNode` ; `extendTypes?`: [`ExtendTypes`](#extendtypes) ; `footer?`: `JSX.Element` \| `JSX.Element`[] ; `initialValues?`: `Values` ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps`)[] ; `onFinish?`: (`values`: `Values`, `submit?`: (`values`: `any`) => `Promise`<`any`\>) => `Promise`<`any`\> ; `submit?`: ``false`` \| { `text?`: `string` ; `to?`: { `action`: `string` ; `params?`: `Record`<`string`, `any`\>  }  }  } & `Omit`<`AntdFormProps`<`Values`\>, ``"onFinish"`` \| ``"children"`` \| ``"initialValues"``\>
+Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `beforeItems?`: `JSX.Element` \| `JSX.Element`[] ; `children?`: `ReactNode` ; `extendTypes?`: [`ExtendTypes`](#extendtypes) ; `footer?`: `JSX.Element` \| `JSX.Element`[] ; `initialValues?`: `Values` ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps` \| `JSX.Element`)[] ; `onFinish?`: (`values`: `Values`, `submit?`: (`values`: `any`) => `Promise`<`any`\>) => `Promise`<`any`\> ; `submit?`: ``false`` \| { `text?`: `string` ; `to?`: { `action`: `string` ; `params?`: `Record`<`string`, `any`\>  }  }  } & `Omit`<`AntdFormProps`<`Values`\>, ``"onFinish"`` \| ``"children"`` \| ``"initialValues"``\>
 
 #### Type parameters
 
@@ -406,12 +388,6 @@ ___
 
 ___
 
-### TimePickerProps
-
-Ƭ **TimePickerProps**: `Omit`<`PickerTimeProps`<`Dayjs`\>, ``"picker"``\>
-
-___
-
 ### TitleProps
 
 Ƭ **TitleProps**: `Object`
@@ -422,7 +398,6 @@ ___
 | :------ | :------ | :------ |
 | `children?` | `JSX.Element` | return children |
 | `h1?` | `boolean` \| { `className?`: `string` ; `style?`: `React.CSSProperties`  } | return a h1 element |
-| `header?` | `PageHeaderProps` | return a PageHeader element |
 | `plain?` | `boolean` | return a pure text element |
 | `separator?` | `string` | ` - ` as default |
 | `suffix?` | `string` | - |
@@ -474,12 +449,6 @@ ___
 
 • `Const` **ConfigContext**: `Context`<[`ConfigProviderProps`](#configproviderprops)\>
 
-___
-
-### DatePicker
-
-• `Const` **DatePicker**: `PickerComponentClass`<`Object`, `unknown`\> & {}
-
 ## Functions
 
 ### Blank
@@ -504,25 +473,9 @@ If value is undefined or null, return text, otherwise return value.
 
 ___
 
-### Calendar
-
-▸ **Calendar**(`props`): `Element`
-
-#### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `props` | `CalendarProps`<`Dayjs`\> |
-
-#### Returns
-
-`Element`
-
-___
-
 ### ConfigProvider
 
-▸ **ConfigProvider**(`__namedParameters`): `Element`
+▸ **ConfigProvider**(`«destructured»`): `Element`
 
 Config for @faasjs/ant-design components.
 
@@ -540,9 +493,9 @@ Config for @faasjs/ant-design components.
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | `Object` |
-| `__namedParameters.children` | `ReactNode` |
-| `__namedParameters.config` | [`ConfigProviderProps`](#configproviderprops) |
+| `«destructured»` | `Object` |
+| › `children` | `ReactNode` |
+| › `config` | [`ConfigProviderProps`](#configproviderprops) |
 
 #### Returns
 
@@ -608,10 +561,10 @@ FormItem, can be used without Form.
 
 ```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 />
 </>
 ```
@@ -636,7 +589,7 @@ ___
 
 ### Link
 
-▸ **Link**(`__namedParameters`): `Element`
+▸ **Link**(`«destructured»`): `Element`
 
 ```ts
 // pure link
@@ -650,7 +603,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | [`LinkProps`](#linkprops) |
+| `«destructured»` | [`LinkProps`](#linkprops) |
 
 #### Returns
 
@@ -731,24 +684,6 @@ https://ant.design/components/table/
 
 ___
 
-### TimePicker
-
-▸ **TimePicker**(`props`): `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>
-
-**NOTE**: Exotic components are not callable.
-
-#### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `props` | [`TimePickerProps`](#timepickerprops) & `RefAttributes`<`any`\> |
-
-#### Returns
-
-`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>
-
-___
-
 ### Title
 
 ▸ **Title**(`props`): `JSX.Element`
@@ -834,7 +769,7 @@ Hook style drawer.
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `init?` | [`DrawerProps`](#drawerprops) | initial props  ```ts function Example() {   const { drawer, setDrawerProps } = useDrawer()    return <>     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>       Toggle     </Button>     {drawer}   </> } ``` |
+| `init?` | [`DrawerProps`](#drawerprops) | initial props ```ts function Example() { const { drawer, setDrawerProps } = useDrawer() return <> <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }> Toggle </Button> {drawer} </> } ``` |
 
 #### Returns
 
@@ -858,7 +793,7 @@ Hook style modal.
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `init?` | [`ModalProps`](#modalprops) | initial props  ```ts function Example() {   const { modal, setModalProps } = useModal()    return <>     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>     {modal}</> } ``` |
+| `init?` | [`ModalProps`](#modalprops) | initial props ```ts function Example() { const { modal, setModalProps } = useModal() return <> <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button> {modal}</> } ``` |
 
 #### Returns
 

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)),
@@ -832,15 +846,13 @@ function Link({
     if (button)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Button, {
         ...button,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-          href,
-          target: target || (Link2 == null ? void 0 : Link2.target) || "_blank",
-          style: {
-            ...Link2.style,
-            ...style || {}
-          },
-          children: text || children
-        })
+        target: target || (Link2 == null ? void 0 : Link2.target) || "_blank",
+        style: {
+          ...Link2.style,
+          ...style || {}
+        },
+        href,
+        children: text || children
       });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
       href,
@@ -853,11 +865,11 @@ function Link({
     });
   }
   if (button)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Button, {
-      ...button,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Link, {
-        to: href,
-        target: target || (Link2 == null ? void 0 : Link2.target),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Link, {
+      to: href,
+      target: target || (Link2 == null ? void 0 : Link2.target),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Button, {
+        ...button,
         style: {
           ...Link2.style,
           ...style || {}
@@ -943,7 +955,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 +984,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 +993,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 +1026,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 +1056,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 +1087,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 +1115,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 +1199,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 +1245,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 +1263,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 +1278,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 +1297,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)),
@@ -817,15 +832,13 @@ function Link({
     if (button)
       return /* @__PURE__ */ jsx7(Button3, {
         ...button,
-        children: /* @__PURE__ */ jsx7("a", {
-          href,
-          target: target || (Link2 == null ? void 0 : Link2.target) || "_blank",
-          style: {
-            ...Link2.style,
-            ...style || {}
-          },
-          children: text || children
-        })
+        target: target || (Link2 == null ? void 0 : Link2.target) || "_blank",
+        style: {
+          ...Link2.style,
+          ...style || {}
+        },
+        href,
+        children: text || children
       });
     return /* @__PURE__ */ jsx7("a", {
       href,
@@ -838,11 +851,11 @@ function Link({
     });
   }
   if (button)
-    return /* @__PURE__ */ jsx7(Button3, {
-      ...button,
-      children: /* @__PURE__ */ jsx7(RouterLink, {
-        to: href,
-        target: target || (Link2 == null ? void 0 : Link2.target),
+    return /* @__PURE__ */ jsx7(RouterLink, {
+      to: href,
+      target: target || (Link2 == null ? void 0 : Link2.target),
+      children: /* @__PURE__ */ jsx7(Button3, {
+        ...button,
         style: {
           ...Link2.style,
           ...style || {}
@@ -938,7 +951,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 +960,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 +989,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 +1031,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 +1061,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 +1092,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 +1120,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 +1250,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 +1271,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 +1283,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 +1302,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.11",
   "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.11",
     "react-router-dom": "*",
     "dayjs": "*"
   },
   "devDependencies": {
-    "@types/lodash": "*",
+    "@types/lodash-es": "*",
     "@testing-library/jest-dom": "*",
     "@testing-library/react": "*",
     "@testing-library/user-event": "*"