@faasjs/ant-design 0.0.2-beta.415 → 0.0.2-beta.417

package/dist/index.mjs

@@ -24,7 +24,9 @@ var zh = {
   pageNotFound: "\u9875\u9762\u672A\u627E\u5230",
   add: "\u6DFB\u52A0",
   delete: "\u5220\u9664",
-  required: "\u5FC5\u586B"
+  required: "\u5FC5\u586B",
+  search: "\u641C\u7D22",
+  reset: "\u91CD\u7F6E"
 };
 var en = {
   lang: "en",
@@ -34,7 +36,9 @@ var en = {
   pageNotFound: "Page Not Found",
   add: "Add",
   delete: "Delete",
-  required: "is required"
+  required: "is required",
+  search: "Search",
+  reset: "Reset"
 };
 var common = isZH ? zh : en;
 var baseConfig = {
@@ -125,7 +129,7 @@ import {
 } from "react";
 import dayjs from "dayjs";
 import { FaasDataWrapper } from "@faasjs/react";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState2();
   useEffect2(() => {
@@ -177,7 +181,7 @@ function DescriptionItemContent(props) {
       children: computedProps.item.render(computedProps.value, computedProps.values)
     });
   if (typeof computedProps.value === "undefined" || computedProps.value === null)
-    return null;
+    return /* @__PURE__ */ jsx3(Blank, {});
   switch (computedProps.item.type) {
     case "string[]":
       return /* @__PURE__ */ jsx3(Fragment, {
@@ -215,33 +219,39 @@ function DescriptionItemContent(props) {
 }
 function Description(props) {
   if (!props.faasData)
-    return /* @__PURE__ */ jsx3(Descriptions, {
+    return /* @__PURE__ */ jsxs(Descriptions, {
       ...props,
-      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) => /* @__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)),
+        props.footer && props.footer(props.dataSource)
+      ]
     });
   return /* @__PURE__ */ jsx3(FaasDataWrapper, {
     fallback: props.faasData.fallback || /* @__PURE__ */ jsx3(Skeleton, {
       active: true
     }),
-    render: ({ data }) => /* @__PURE__ */ jsx3(Descriptions, {
+    render: ({ data }) => /* @__PURE__ */ jsxs(Descriptions, {
       ...props,
-      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) => /* @__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)),
+        props.footer && props.footer(data)
+      ]
     }),
     ...props.faasData
   });
@@ -315,7 +325,7 @@ TimePicker.displayName = "TimePicker";
 
 // src/FormItem.tsx
 import dayjs2, { isDayjs } from "dayjs";
-import { Fragment as Fragment2, jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function processProps(propsCopy, config) {
   if (!propsCopy.title)
     propsCopy.title = upperFirst3(propsCopy.id);
@@ -436,7 +446,7 @@ function FormItem(props) {
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
           var _a2;
-          return /* @__PURE__ */ jsxs(Fragment2, {
+          return /* @__PURE__ */ jsxs2(Fragment2, {
             children: [
               computedProps.label && /* @__PURE__ */ jsx6("div", {
                 className: "ant-form-item-label",
@@ -448,7 +458,7 @@ function FormItem(props) {
               fields.map((field) => {
                 var _a3;
                 return /* @__PURE__ */ jsx6(AntdForm.Item, {
-                  children: /* @__PURE__ */ jsxs(Row, {
+                  children: /* @__PURE__ */ jsxs2(Row, {
                     gutter: 24,
                     style: { flexFlow: "row nowrap" },
                     children: [
@@ -476,7 +486,7 @@ function FormItem(props) {
                   })
                 }, field.key);
               }),
-              /* @__PURE__ */ jsxs(AntdForm.Item, {
+              /* @__PURE__ */ jsxs2(AntdForm.Item, {
                 children: [
                   !((_a2 = computedProps.input) == null ? void 0 : _a2.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ jsx6(Button, {
                     type: "dashed",
@@ -517,7 +527,7 @@ function FormItem(props) {
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
           var _a2, _b;
-          return /* @__PURE__ */ jsxs(Fragment2, {
+          return /* @__PURE__ */ jsxs2(Fragment2, {
             children: [
               computedProps.label && /* @__PURE__ */ jsx6("div", {
                 className: "ant-form-item-label",
@@ -529,7 +539,7 @@ function FormItem(props) {
               fields.map((field) => {
                 var _a3;
                 return /* @__PURE__ */ jsx6(AntdForm.Item, {
-                  children: /* @__PURE__ */ jsxs(Row, {
+                  children: /* @__PURE__ */ jsxs2(Row, {
                     gutter: 24,
                     style: { flexFlow: "row nowrap" },
                     children: [
@@ -558,7 +568,7 @@ function FormItem(props) {
                   })
                 }, field.key);
               }),
-              /* @__PURE__ */ jsxs(AntdForm.Item, {
+              /* @__PURE__ */ jsxs2(AntdForm.Item, {
                 children: [
                   !((_b = computedProps.input) == null ? void 0 : _b.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ jsx6(Button, {
                     type: "dashed",
@@ -597,7 +607,7 @@ function FormItem(props) {
         })
       });
     case "object":
-      return /* @__PURE__ */ jsxs(Fragment2, {
+      return /* @__PURE__ */ jsxs2(Fragment2, {
         children: [
           computedProps.label && /* @__PURE__ */ jsx6("div", {
             className: "ant-form-item-label",
@@ -615,14 +625,14 @@ function FormItem(props) {
       return /* @__PURE__ */ jsx6(AntdForm.List, {
         name: computedProps.name,
         rules: computedProps.rules,
-        children: (fields, { add, remove }, { errors }) => /* @__PURE__ */ jsxs(Fragment2, {
+        children: (fields, { add, remove }, { errors }) => /* @__PURE__ */ jsxs2(Fragment2, {
           children: [
-            fields.map((field) => /* @__PURE__ */ jsxs(AntdForm.Item, {
+            fields.map((field) => /* @__PURE__ */ jsxs2(AntdForm.Item, {
               style: { marginBottom: 0 },
               children: [
                 /* @__PURE__ */ jsx6("div", {
                   className: "ant-form-item-label",
-                  children: /* @__PURE__ */ jsxs("label", {
+                  children: /* @__PURE__ */ jsxs2("label", {
                     children: [
                       computedProps.label,
                       " ",
@@ -648,9 +658,9 @@ function FormItem(props) {
                 })
               ]
             }, field.key)),
-            /* @__PURE__ */ jsxs(AntdForm.Item, {
+            /* @__PURE__ */ jsxs2(AntdForm.Item, {
               children: [
-                !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ jsxs(Button, {
+                !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ jsxs2(Button, {
                   type: "dashed",
                   block: true,
                   onClick: () => add(),
@@ -675,7 +685,7 @@ function FormItem(props) {
 }
 
 // src/Form.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Form(props) {
   var _a, _b;
   const [loading, setLoading] = useState5(false);
@@ -719,7 +729,7 @@ function Form(props) {
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ jsxs2(AntdForm2, {
+  return /* @__PURE__ */ jsxs3(AntdForm2, {
     ...computedProps,
     children: [
       computedProps.beforeItems,
@@ -839,7 +849,7 @@ import {
   Routes as OriginRoutes,
   Route
 } from "react-router-dom";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function PageNotFound() {
   const config = useConfigContext();
   return /* @__PURE__ */ jsx10(Result, {
@@ -848,7 +858,7 @@ function PageNotFound() {
   });
 }
 function Routes(props) {
-  return /* @__PURE__ */ jsxs3(OriginRoutes, {
+  return /* @__PURE__ */ jsxs4(OriginRoutes, {
     children: [
       props.routes.map((r) => /* @__PURE__ */ jsx10(Route, {
         ...r,
@@ -879,48 +889,45 @@ import {
 import {
   Table as AntdTable,
   Radio,
-  Skeleton as Skeleton3
+  Skeleton as Skeleton3,
+  Input as Input2
 } from "antd";
 import dayjs3 from "dayjs";
+import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
 import {
-  CheckOutlined as CheckOutlined2,
-  CloseOutlined as CloseOutlined2
-} from "@ant-design/icons";
-import { isNil as isNil2, upperFirst as upperFirst4 } from "lodash";
+  isNil as isNil2,
+  uniqBy,
+  upperFirst as upperFirst4
+} from "lodash";
 import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function processValue(item, value) {
   var _a;
-  if (typeof value !== "undefined" && value !== null) {
-    if (item.options) {
-      if (item.type.endsWith("[]"))
-        return value.map((v) => {
-          var _a2;
-          return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
-        });
-      else if ([
-        "string",
-        "number",
-        "boolean"
-      ].includes(item.type))
-        return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
-    }
-    let dayjsFormat = "";
-    if (item.type === "date")
-      dayjsFormat = "YYYY-MM-DD";
-    else if (item.type === "time")
-      dayjsFormat = "YYYY-MM-DD HH:mm:ss";
-    if (["date", "time"].includes(item.type)) {
-      if (typeof value === "number" && value.toString().length === 10)
-        value = value * 1e3;
-      value = dayjs3(value).format(dayjsFormat);
-    }
+  if (typeof value === "undefined" && value === null)
+    return /* @__PURE__ */ jsx11(Blank, {});
+  if (item.options) {
+    if (item.type.endsWith("[]"))
+      return value.map((v) => {
+        var _a2;
+        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
+      });
+    else if ([
+      "string",
+      "number",
+      "boolean"
+    ].includes(item.type))
+      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+  }
+  if (["date", "time"].includes(item.type)) {
+    if (typeof value === "number" && value.toString().length === 10)
+      value = value * 1e3;
+    return dayjs3(value).format(item.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
   }
   return value;
 }
 function Table(props) {
   const [columns, setColumns] = useState7();
-  const config = useConfigContext();
+  const { common: common2 } = useConfigContext();
   useEffect5(() => {
     var _a;
     for (const item of props.items) {
@@ -939,8 +946,6 @@ function Table(props) {
           value: o.value
         }));
       }
-      if (item.render)
-        continue;
       if (item.children)
         delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
@@ -960,81 +965,131 @@ function Table(props) {
       }
       switch (item.type) {
         case "string":
-          item.render = (value) => processValue(item, value);
+          if (!item.render)
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter) {
             item.onFilter = (value, row) => row[item.id].includes(value);
-            if (item.filterDropdown !== false)
-              item.filterDropdown = ({
-                setSelectedKeys,
-                selectedKeys,
-                confirm,
-                clearFilters
-              }) => /* @__PURE__ */ jsxs4("div", {
-                style: { padding: 8 },
-                children: [
-                  /* @__PURE__ */ jsx11("input", {
-                    value: selectedKeys[0],
-                    onChange: (e) => setSelectedKeys(e.target.value ? [e.target.value] : []),
-                    style: {
-                      width: 188,
-                      marginBottom: 8,
-                      display: "block"
-                    }
-                  }),
-                  /* @__PURE__ */ jsx11("button", {
-                    type: "button",
-                    onClick: () => confirm(),
-                    style: {
-                      width: 90,
-                      marginRight: 8
-                    },
-                    children: "Search"
-                  }),
-                  /* @__PURE__ */ jsx11("button", {
-                    type: "button",
-                    onClick: () => clearFilters(),
-                    style: { width: 90 },
-                    children: "Reset"
-                  })
-                ]
-              });
           }
+          if (!item.filters && item.filterDropdown !== false && item.optionsType !== "auto")
+            item.filterDropdown = ({
+              setSelectedKeys,
+              selectedKeys,
+              confirm,
+              clearFilters
+            }) => /* @__PURE__ */ jsx11(Input2.Search, {
+              placeholder: `${common2.search} ${item.title}`,
+              value: selectedKeys[0],
+              allowClear: true,
+              onSearch: (v) => {
+                if (v) {
+                  setSelectedKeys([v]);
+                } else {
+                  setSelectedKeys([]);
+                  clearFilters();
+                }
+                confirm();
+              }
+            });
           break;
         case "string[]":
-          item.render = (value) => processValue(item, value).join(", ");
+          if (!item.render)
+            item.render = (value) => processValue(item, value).join(", ");
           if (!item.onFilter)
             item.onFilter = (value, row) => row[item.id].includes(value);
+          if (!item.filters && item.filterDropdown !== false)
+            item.filterDropdown = ({
+              setSelectedKeys,
+              selectedKeys,
+              confirm,
+              clearFilters
+            }) => /* @__PURE__ */ jsx11(Input2.Search, {
+              placeholder: `${common2.search} ${item.title}`,
+              value: selectedKeys[0],
+              allowClear: true,
+              onSearch: (v) => {
+                if (v) {
+                  setSelectedKeys([v]);
+                } else {
+                  setSelectedKeys([]);
+                  clearFilters();
+                }
+                confirm();
+              }
+            });
           break;
         case "number":
-          item.render = (value) => processValue(item, value);
+          if (!item.render)
+            item.render = (value) => processValue(item, value);
           if (!item.sorter)
             item.sorter = (a, b) => a[item.id] - b[item.id];
           if (!item.onFilter)
             item.onFilter = (value, row) => value === row[item.id];
+          if (!item.filters && item.filterDropdown !== false)
+            item.filterDropdown = ({
+              setSelectedKeys,
+              selectedKeys,
+              confirm,
+              clearFilters
+            }) => /* @__PURE__ */ jsx11(Input2.Search, {
+              placeholder: `${common2.search} ${item.title}`,
+              value: selectedKeys[0],
+              allowClear: true,
+              onSearch: (v) => {
+                if (v) {
+                  setSelectedKeys([v]);
+                } else {
+                  setSelectedKeys([]);
+                  clearFilters();
+                }
+                confirm();
+              }
+            });
           break;
         case "number[]":
-          item.render = (value) => processValue(item, value).join(", ");
+          if (!item.render)
+            item.render = (value) => processValue(item, value).join(", ");
           if (!item.onFilter)
             item.onFilter = (value, row) => row[item.id].includes(value);
+          if (!item.filters && item.filterDropdown !== false)
+            item.filterDropdown = ({
+              setSelectedKeys,
+              selectedKeys,
+              confirm,
+              clearFilters
+            }) => /* @__PURE__ */ jsx11(Input2.Search, {
+              placeholder: `${common2.search} ${item.title}`,
+              value: selectedKeys[0],
+              allowClear: true,
+              onSearch: (v) => {
+                if (v) {
+                  setSelectedKeys([v]);
+                } else {
+                  setSelectedKeys([]);
+                  clearFilters();
+                }
+                confirm();
+              }
+            });
           break;
         case "boolean":
-          item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ jsx11(Blank, {}) : value ? /* @__PURE__ */ jsx11(CheckOutlined2, {
-            style: {
-              marginTop: "4px",
-              color: "#52c41a"
-            }
-          }) : /* @__PURE__ */ jsx11(CloseOutlined2, {
-            style: {
-              marginTop: "4px",
-              color: "#ff4d4f"
-            }
-          });
+          if (!item.render)
+            item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ jsx11(Blank, {}) : value ? /* @__PURE__ */ jsx11(CheckOutlined2, {
+              style: {
+                marginTop: "4px",
+                color: "#52c41a"
+              }
+            }) : /* @__PURE__ */ jsx11(CloseOutlined2, {
+              style: {
+                marginTop: "4px",
+                color: "#ff4d4f"
+              }
+            });
           if (item.filterDropdown !== false)
             item.filterDropdown = ({
               setSelectedKeys,
               selectedKeys,
               confirm
-            }) => /* @__PURE__ */ jsxs4(Radio.Group, {
+            }) => /* @__PURE__ */ jsxs5(Radio.Group, {
               style: { padding: 8 },
               buttonStyle: "solid",
               value: selectedKeys[0],
@@ -1044,7 +1099,7 @@ function Table(props) {
               },
               children: [
                 /* @__PURE__ */ jsx11(Radio.Button, {
-                  children: config.common.all
+                  children: common2.all
                 }),
                 /* @__PURE__ */ jsx11(Radio.Button, {
                   value: "true",
@@ -1066,7 +1121,7 @@ function Table(props) {
                 }),
                 /* @__PURE__ */ jsx11(Radio.Button, {
                   value: "empty",
-                  children: config.common.blank
+                  children: common2.blank
                 })
               ]
             });
@@ -1085,21 +1140,24 @@ function Table(props) {
             };
           break;
         case "date":
-          item.render = (value) => processValue(item, value);
+          if (!item.render)
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => dayjs3(row[item.id]).isSame(dayjs3(value));
           if (!item.sorter)
             item.sorter = (a, b) => dayjs3(a[item.id]).isBefore(b[item.id]) ? -1 : 1;
           break;
         case "time":
-          item.render = (value) => processValue(item, value);
+          if (!item.render)
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => dayjs3(row[item.id]).isSame(dayjs3(value));
           if (!item.sorter)
             item.sorter = (a, b) => dayjs3(a[item.id]).isBefore(b[item.id]) ? -1 : 1;
           break;
         default:
-          item.render = (value) => processValue(item, value);
+          if (!item.render)
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => value === row[item.id];
           break;
@@ -1107,6 +1165,23 @@ function Table(props) {
     }
     setColumns(props.items);
   }, [props.items]);
+  useEffect5(() => {
+    if (!props.dataSource || !columns)
+      return;
+    for (const column of columns) {
+      if (column.optionsType === "auto" && !column.options && !column.filters) {
+        setColumns((prev) => {
+          const newColumns = [...prev];
+          const index = newColumns.findIndex((item) => item.id === column.id);
+          newColumns[index].filters = uniqBy(props.dataSource, column.id).map((v) => ({
+            text: v[column.id],
+            value: v[column.id]
+          }));
+          return newColumns;
+        });
+      }
+    }
+  }, [props.dataSource, columns]);
   if (!columns)
     return null;
   if (!props.faasData)

package/package.json

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