@faasjs/ant-design 0.0.2-beta.442 → 0.0.2-beta.444

package/dist/index.d.ts

@@ -145,6 +145,7 @@ declare type ExtendDescriptionItemProps = BaseItemProps;
 declare type DescriptionItemProps<T = any> = {
     children?: JSX.Element;
     render?: (value: T, values: any) => ReactNode | JSX.Element;
+    if?: (values: Record<string, any>) => boolean;
 } & FaasItemProps & {
     object?: DescriptionItemProps[];
 };
@@ -252,6 +253,8 @@ declare type FormItemProps<T = any> = {
     extendTypes?: ExtendTypes;
     /** trigger when current item's value changed */
     onValueChange?: (value: T, values: any, form: FormInstance) => void;
+    /** trigger when any item's value changed */
+    if?: (values: Record<string, any>) => boolean;
 } & FormItemInputProps & FaasItemProps & Omit<FormItemProps$1<T>, 'children'>;
 /**
  * FormItem, can be used without Form.
@@ -268,7 +271,7 @@ declare type FormItemProps<T = any> = {
  */
 declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
 
-declare type FormProps<Values = any, ExtendItemProps = any> = {
+declare type FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> = {
     items?: (FormItemProps | ExtendItemProps)[];
     /** Default: { text: 'Submit' }, set false to disable it */
     submit?: false | {
@@ -398,6 +401,7 @@ declare type TableItemProps<T = any> = {
     optionsType?: 'auto';
     /** @deprecated use render */
     children?: JSX.Element | null;
+    object?: TableItemProps[];
 } & FaasItemProps & Omit<TableColumnProps<T>, 'children'>;
 declare type ExtendTableTypeProps = {
     children?: JSX.Element | null;

package/dist/index.js

@@ -294,15 +294,17 @@ function Description(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions, {
       ...props,
       title: (0, import_lodash4.isFunction)(props.renderTitle) ? props.renderTitle(props.dataSource) : props.title,
-      children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions.Item, {
-        label: item.title || (0, import_lodash4.upperFirst)(item.id),
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescriptionItemContent, {
-          item,
-          value: props.dataSource[item.id],
-          values: props.dataSource,
-          extendTypes: props.extendTypes
-        })
-      }, item.id))
+      children: props.items.map((item) => {
+        return !item.if || item.if(props.dataSource) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions.Item, {
+          label: item.title || (0, import_lodash4.upperFirst)(item.id),
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescriptionItemContent, {
+            item,
+            value: props.dataSource[item.id],
+            values: props.dataSource,
+            extendTypes: props.extendTypes
+          })
+        }, item.id) : null;
+      }).filter(Boolean)
     });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.FaasDataWrapper, {
     fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Skeleton, {
@@ -312,15 +314,17 @@ function Description(props) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions, {
         ...props,
         title: (0, import_lodash4.isFunction)(props.renderTitle) ? props.renderTitle(data) : props.title,
-        children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions.Item, {
-          label: item.title || (0, import_lodash4.upperFirst)(item.id),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescriptionItemContent, {
-            item,
-            value: data[item.id],
-            values: data,
-            extendTypes: props.extendTypes
-          })
-        }, item.id))
+        children: props.items.map((item) => {
+          return !item.if || item.if(data) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd3.Descriptions.Item, {
+            label: item.title || (0, import_lodash4.upperFirst)(item.id),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DescriptionItemContent, {
+              item,
+              value: data[item.id],
+              values: data,
+              extendTypes: props.extendTypes
+            })
+          }, item.id) : null;
+        }).filter(Boolean)
       });
     },
     ...props.faasData
@@ -752,12 +756,15 @@ function Form(props) {
     var _a2, _b2;
     const propsCopy = {
       ...props,
+      items: (props.items || []).filter((it) => {
+        return !it.if || it.if(props.initialValues || {});
+      }),
       form
     };
     if (propsCopy.initialValues)
       for (const key in propsCopy.initialValues)
         propsCopy.initialValues[key] = transferValue(
-          (_a2 = propsCopy.items.find((i) => i.id === key)) == null ? void 0 : _a2.type,
+          (_a2 = propsCopy.items.find((item) => item.id === key)) == null ? void 0 : _a2.type,
           propsCopy.initialValues[key]
         );
     if (propsCopy.onFinish) {
@@ -796,16 +803,37 @@ function Form(props) {
     propsCopy.onValuesChange = (changedValues, allValues) => {
       if (originValuesChange)
         originValuesChange(changedValues, allValues);
-      if (!propsCopy.items)
+      if (!props.items)
         return;
       for (const key in changedValues) {
         const item = propsCopy.items.find((i) => i.id === key);
         if (item == null ? void 0 : item.onValueChange)
           item.onValueChange(changedValues[key], allValues, form);
       }
+      const filterItems = props.items.filter((it) => {
+        if (!it.if) {
+          return true;
+        }
+        const show = it.if(allValues);
+        if (show) {
+          propsCopy.form.setFields([
+            {
+              name: it.id,
+              errors: null
+            }
+          ]);
+        }
+        return show;
+      });
+      if (propsCopy.items.length !== filterItems.length || propsCopy.items.some((it, i) => it !== filterItems[i])) {
+        setComputedProps({
+          ...propsCopy,
+          items: filterItems
+        });
+      }
     };
     setComputedProps(propsCopy);
-  }, []);
+  }, [props]);
   if (!computedProps)
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd6.Form, {
@@ -1214,6 +1242,20 @@ function Table(props) {
           if (!item.sorter)
             item.sorter = (a, b) => (0, import_dayjs5.default)(a[item.id]).isBefore(b[item.id]) ? -1 : 1;
           break;
+        case "object":
+          if (!item.render)
+            item.render = (value) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Description, {
+              items: item.object,
+              dataSource: value
+            });
+          break;
+        case "object[]":
+          if (!item.render)
+            item.render = (value) => value.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Description, {
+              items: item.object,
+              dataSource: v
+            }, i));
+          break;
         default:
           if (!item.render)
             item.render = (value) => processValue(item, value);

package/dist/index.mjs

@@ -255,15 +255,17 @@ function Description(props) {
     return /* @__PURE__ */ jsx3(Descriptions, {
       ...props,
       title: isFunction(props.renderTitle) ? props.renderTitle(props.dataSource) : props.title,
-      children: props.items.map((item) => /* @__PURE__ */ jsx3(Descriptions.Item, {
-        label: item.title || upperFirst2(item.id),
-        children: /* @__PURE__ */ jsx3(DescriptionItemContent, {
-          item,
-          value: props.dataSource[item.id],
-          values: props.dataSource,
-          extendTypes: props.extendTypes
-        })
-      }, item.id))
+      children: props.items.map((item) => {
+        return !item.if || item.if(props.dataSource) ? /* @__PURE__ */ jsx3(Descriptions.Item, {
+          label: item.title || upperFirst2(item.id),
+          children: /* @__PURE__ */ jsx3(DescriptionItemContent, {
+            item,
+            value: props.dataSource[item.id],
+            values: props.dataSource,
+            extendTypes: props.extendTypes
+          })
+        }, item.id) : null;
+      }).filter(Boolean)
     });
   return /* @__PURE__ */ jsx3(FaasDataWrapper, {
     fallback: props.faasData.fallback || /* @__PURE__ */ jsx3(Skeleton, {
@@ -273,15 +275,17 @@ function Description(props) {
       return /* @__PURE__ */ jsx3(Descriptions, {
         ...props,
         title: isFunction(props.renderTitle) ? props.renderTitle(data) : props.title,
-        children: props.items.map((item) => /* @__PURE__ */ jsx3(Descriptions.Item, {
-          label: item.title || upperFirst2(item.id),
-          children: /* @__PURE__ */ jsx3(DescriptionItemContent, {
-            item,
-            value: data[item.id],
-            values: data,
-            extendTypes: props.extendTypes
-          })
-        }, item.id))
+        children: props.items.map((item) => {
+          return !item.if || item.if(data) ? /* @__PURE__ */ jsx3(Descriptions.Item, {
+            label: item.title || upperFirst2(item.id),
+            children: /* @__PURE__ */ jsx3(DescriptionItemContent, {
+              item,
+              value: data[item.id],
+              values: data,
+              extendTypes: props.extendTypes
+            })
+          }, item.id) : null;
+        }).filter(Boolean)
       });
     },
     ...props.faasData
@@ -731,12 +735,15 @@ function Form(props) {
     var _a2, _b2;
     const propsCopy = {
       ...props,
+      items: (props.items || []).filter((it) => {
+        return !it.if || it.if(props.initialValues || {});
+      }),
       form
     };
     if (propsCopy.initialValues)
       for (const key in propsCopy.initialValues)
         propsCopy.initialValues[key] = transferValue(
-          (_a2 = propsCopy.items.find((i) => i.id === key)) == null ? void 0 : _a2.type,
+          (_a2 = propsCopy.items.find((item) => item.id === key)) == null ? void 0 : _a2.type,
           propsCopy.initialValues[key]
         );
     if (propsCopy.onFinish) {
@@ -775,16 +782,37 @@ function Form(props) {
     propsCopy.onValuesChange = (changedValues, allValues) => {
       if (originValuesChange)
         originValuesChange(changedValues, allValues);
-      if (!propsCopy.items)
+      if (!props.items)
         return;
       for (const key in changedValues) {
         const item = propsCopy.items.find((i) => i.id === key);
         if (item == null ? void 0 : item.onValueChange)
           item.onValueChange(changedValues[key], allValues, form);
       }
+      const filterItems = props.items.filter((it) => {
+        if (!it.if) {
+          return true;
+        }
+        const show = it.if(allValues);
+        if (show) {
+          propsCopy.form.setFields([
+            {
+              name: it.id,
+              errors: null
+            }
+          ]);
+        }
+        return show;
+      });
+      if (propsCopy.items.length !== filterItems.length || propsCopy.items.some((it, i) => it !== filterItems[i])) {
+        setComputedProps({
+          ...propsCopy,
+          items: filterItems
+        });
+      }
     };
     setComputedProps(propsCopy);
-  }, []);
+  }, [props]);
   if (!computedProps)
     return null;
   return /* @__PURE__ */ jsxs2(AntdForm2, {
@@ -1211,6 +1239,20 @@ function Table(props) {
           if (!item.sorter)
             item.sorter = (a, b) => dayjs3(a[item.id]).isBefore(b[item.id]) ? -1 : 1;
           break;
+        case "object":
+          if (!item.render)
+            item.render = (value) => /* @__PURE__ */ jsx11(Description, {
+              items: item.object,
+              dataSource: value
+            });
+          break;
+        case "object[]":
+          if (!item.render)
+            item.render = (value) => value.map((v, i) => /* @__PURE__ */ jsx11(Description, {
+              items: item.object,
+              dataSource: v
+            }, i));
+          break;
         default:
           if (!item.render)
             item.render = (value) => processValue(item, value);

package/package.json

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