@faasjs/ant-design 0.0.2-beta.443 → 0.0.2-beta.445

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.
@@ -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
@@ -750,10 +754,11 @@ function Form(props) {
   const [form] = import_antd6.Form.useForm(props.form);
   (0, import_react9.useEffect)(() => {
     var _a2, _b2;
-    if (!props.items)
-      return;
     const propsCopy = {
       ...props,
+      items: (props.items || []).filter((it) => {
+        return !it.if || it.if(props.initialValues || {});
+      }),
       form
     };
     if (propsCopy.initialValues)
@@ -798,11 +803,34 @@ function Form(props) {
     propsCopy.onValuesChange = (changedValues, allValues) => {
       if (originValuesChange)
         originValuesChange(changedValues, allValues);
+      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]);
@@ -1214,6 +1242,22 @@ 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,
+              column: 1
+            });
+          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,
+              column: 1
+            }, 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
@@ -729,10 +733,11 @@ function Form(props) {
   const [form] = AntdForm2.useForm(props.form);
   useEffect4(() => {
     var _a2, _b2;
-    if (!props.items)
-      return;
     const propsCopy = {
       ...props,
+      items: (props.items || []).filter((it) => {
+        return !it.if || it.if(props.initialValues || {});
+      }),
       form
     };
     if (propsCopy.initialValues)
@@ -777,11 +782,34 @@ function Form(props) {
     propsCopy.onValuesChange = (changedValues, allValues) => {
       if (originValuesChange)
         originValuesChange(changedValues, allValues);
+      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]);
@@ -1211,6 +1239,22 @@ 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,
+              column: 1
+            });
+          break;
+        case "object[]":
+          if (!item.render)
+            item.render = (value) => value.map((v, i) => /* @__PURE__ */ jsx11(Description, {
+              items: item.object,
+              dataSource: v,
+              column: 1
+            }, 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.443",
+  "version": "0.0.2-beta.445",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.443",
+    "@faasjs/react": "^0.0.2-beta.445",
     "react-router-dom": "*",
     "dayjs": "*"
   },