@faasjs/ant-design 0.0.2-beta.405 → 0.0.2-beta.407

package/dist/index.js

@@ -32,10 +32,11 @@ __export(src_exports, {
   ConfigProvider: () => ConfigProvider,
   DatePicker: () => DatePicker,
   Description: () => Description,
-  Drawer: () => import_antd3.Drawer,
+  Drawer: () => import_antd4.Drawer,
   Form: () => Form,
   FormItem: () => FormItem,
-  Modal: () => import_antd6.Modal,
+  Link: () => Link,
+  Modal: () => import_antd7.Modal,
   Routes: () => Routes,
   Table: () => Table,
   TimePicker: () => TimePicker,
@@ -51,11 +52,13 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 
 // src/Blank.tsx
-var import_antd = require("antd");
-var import_lodash = require("lodash");
+var import_antd2 = require("antd");
+var import_lodash2 = require("lodash");
 
 // src/Config.tsx
 var import_react2 = require("react");
+var import_antd = require("antd");
+var import_lodash = require("lodash");
 var import_jsx_runtime = require("react/jsx-runtime");
 var isZH = /^zh/i.test(navigator.language);
 var common = isZH ? {
@@ -78,6 +81,7 @@ var common = isZH ? {
   required: "is required"
 };
 var baseConfig = {
+  antd: {},
   lang: "en",
   common,
   Blank: { text: common.blank },
@@ -85,7 +89,8 @@ var baseConfig = {
   Title: {
     separator: " - ",
     suffix: ""
-  }
+  },
+  Link: { style: {} }
 };
 var ConfigContext = (0, import_react2.createContext)(baseConfig);
 function ConfigProvider({
@@ -93,11 +98,11 @@ function ConfigProvider({
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigContext.Provider, {
-    value: {
-      ...baseConfig,
-      ...config
-    },
-    children
+    value: (0, import_lodash.defaultsDeep)(config, baseConfig),
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, {
+      ...config.antd,
+      children
+    })
   });
 }
 function useConfigContext() {
@@ -107,10 +112,10 @@ function useConfigContext() {
 // src/Blank.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Blank(options) {
-  const config = useConfigContext();
-  return !options || (0, import_lodash.isNil)(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Typography.Text, {
+  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, {
     disabled: true,
-    children: (options == null ? void 0 : options.text) || config.Blank.text
+    children: (options == null ? void 0 : options.text) || Blank2.text
   }) : options.value;
 }
 
@@ -121,12 +126,12 @@ var import_style = require("antd/es/calendar/style/index.js");
 var Calendar = (0, import_generateCalendar.default)(import_dayjs.default);
 
 // src/data.ts
-var import_lodash2 = require("lodash");
+var import_lodash3 = require("lodash");
 function transferOptions(options) {
   if (!options)
     return [];
   return options.map((item) => typeof item === "object" ? item : {
-    label: (0, import_lodash2.upperFirst)(item.toString()),
+    label: (0, import_lodash3.upperFirst)(item.toString()),
     value: item
   });
 }
@@ -139,8 +144,8 @@ var DatePicker = (0, import_generatePicker.default)(import_dayjs2.default);
 
 // src/Description.tsx
 var import_icons = require("@ant-design/icons");
-var import_antd2 = require("antd");
-var import_lodash3 = require("lodash");
+var import_antd3 = require("antd");
+var import_lodash4 = require("lodash");
 var import_react3 = require("react");
 var import_dayjs3 = __toESM(require("dayjs"));
 var import_react4 = require("@faasjs/react");
@@ -151,7 +156,7 @@ function DescriptionItemContent(props) {
     var _a, _b;
     const propsCopy = { ...props };
     if (!propsCopy.item.title)
-      propsCopy.item.title = (0, import_lodash3.upperFirst)(propsCopy.item.id);
+      propsCopy.item.title = (0, import_lodash4.upperFirst)(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
     if ((_a = propsCopy.item.options) == null ? void 0 : _a.length) {
@@ -234,10 +239,10 @@ function DescriptionItemContent(props) {
 }
 function Description(props) {
   if (!props.faasData)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Descriptions, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions, {
       ...props,
-      children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Descriptions.Item, {
-        label: item.title || (0, import_lodash3.upperFirst)(item.id),
+      children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions.Item, {
+        label: item.title || (0, import_lodash4.upperFirst)(item.id),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionItemContent, {
           item,
           value: props.dataSource[item.id],
@@ -247,13 +252,13 @@ function Description(props) {
       }, item.id))
     });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Skeleton, {
+    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Skeleton, {
       active: true
     }),
-    render: ({ data }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Descriptions, {
+    render: ({ data }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions, {
       ...props,
-      children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd2.Descriptions.Item, {
-        label: item.title || (0, import_lodash3.upperFirst)(item.id),
+      children: props.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Descriptions.Item, {
+        label: item.title || (0, import_lodash4.upperFirst)(item.id),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionItemContent, {
           item,
           value: data[item.id],
@@ -267,7 +272,7 @@ function Description(props) {
 }
 
 // src/Drawer.tsx
-var import_antd3 = require("antd");
+var import_antd4 = require("antd");
 var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function useDrawer(init) {
@@ -280,7 +285,7 @@ function useDrawer(init) {
     ...init
   });
   return {
-    drawer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd3.Drawer, {
+    drawer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Drawer, {
       ...props
     }),
     drawerProps: props,
@@ -295,14 +300,14 @@ function useDrawer(init) {
 
 // src/Form.tsx
 var import_react8 = require("@faasjs/react");
-var import_antd5 = require("antd");
+var import_antd6 = require("antd");
 var import_react9 = require("react");
 
 // src/FormItem.tsx
-var import_antd4 = require("antd");
+var import_antd5 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var import_react7 = require("react");
-var import_lodash4 = require("lodash");
+var import_lodash5 = require("lodash");
 
 // src/TimePicker.tsx
 var import_react6 = require("react");
@@ -318,10 +323,11 @@ var TimePicker = (0, import_react6.forwardRef)((props, ref) => {
 TimePicker.displayName = "TimePicker";
 
 // src/FormItem.tsx
+var import_dayjs4 = __toESM(require("dayjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function processProps(propsCopy, config) {
   if (!propsCopy.title)
-    propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
+    propsCopy.title = (0, import_lodash5.upperFirst)(propsCopy.id);
   if (!propsCopy.label && propsCopy.label !== false)
     propsCopy.label = propsCopy.title;
   if (!propsCopy.name)
@@ -365,50 +371,76 @@ function processProps(propsCopy, config) {
   }
   return propsCopy;
 }
+function DateItem(options) {
+  const [value, setValue] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    setValue(options.value && !(0, import_dayjs4.isDayjs)(options.value) ? (0, import_dayjs4.default)(options.value) : null);
+  }, [options.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePicker, {
+    ...options,
+    value
+  });
+}
+function TimeItem(options) {
+  const [value, setValue] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    setValue(options.value && !(0, import_dayjs4.isDayjs)(options.value) ? (0, import_dayjs4.default)(options.value) : null);
+  }, [options.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimePicker, {
+    ...options,
+    value
+  });
+}
 function FormItem(props) {
   var _a;
   const [computedProps, setComputedProps] = (0, import_react7.useState)();
+  const [extendTypes, setExtendTypes] = (0, import_react7.useState)();
   const config = useConfigContext();
   (0, import_react7.useEffect)(() => {
-    setComputedProps(processProps({ ...props }, config));
+    const propsCopy = { ...props };
+    if (propsCopy.extendTypes) {
+      setExtendTypes(propsCopy.extendTypes);
+      delete propsCopy.extendTypes;
+    }
+    setComputedProps(processProps(propsCopy, config));
   }, [props]);
   if (!computedProps)
     return null;
-  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.type])
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+  if (extendTypes && extendTypes[computedProps.type])
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
       ...computedProps,
-      children: computedProps.extendTypes[computedProps.type].children
+      children: extendTypes[computedProps.type].children
     });
   if (computedProps.children)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
       ...computedProps,
       children: computedProps.children
     });
   if (computedProps.render)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
       ...computedProps,
       children: computedProps.render()
     });
   switch (computedProps.type) {
     case "string":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
         ...computedProps,
-        children: computedProps.options ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Select, {
+        children: computedProps.options ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Select, {
           ...computedProps.input
-        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Input, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Input, {
           ...computedProps.input
         })
       });
     case "string[]":
       if (computedProps.options)
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
           ...computedProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Select, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Select, {
             mode: "multiple",
             ...computedProps.input
           })
         });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.List, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.List, {
         name: computedProps.name,
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
@@ -424,24 +456,24 @@ function FormItem(props) {
               }),
               fields.map((field) => {
                 var _a3;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Row, {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Row, {
                     gutter: 24,
                     style: { flexFlow: "row nowrap" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Col, {
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Col, {
                         span: 23,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
                           ...field,
                           noStyle: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Input, {
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Input, {
                             ...computedProps.input
                           })
                         })
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Col, {
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Col, {
                         span: 1,
-                        children: !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Button, {
+                        children: !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
                           danger: true,
                           type: "link",
                           style: { float: "right" },
@@ -453,15 +485,15 @@ function FormItem(props) {
                   })
                 }, field.key);
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Form.Item, {
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Form.Item, {
                 children: [
-                  !((_a2 = computedProps.input) == null ? void 0 : _a2.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Button, {
+                  !((_a2 = computedProps.input) == null ? void 0 : _a2.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
                     type: "dashed",
                     block: true,
                     onClick: () => add(),
                     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.PlusOutlined, {})
                   }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.ErrorList, {
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.ErrorList, {
                     errors
                   })
                 ]
@@ -471,25 +503,25 @@ function FormItem(props) {
         }
       });
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
         ...computedProps,
-        children: computedProps.options ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Select, {
+        children: computedProps.options ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Select, {
           ...computedProps.input
-        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.InputNumber, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.InputNumber, {
           style: { width: "100%" },
           ...computedProps.input
         })
       });
     case "number[]":
       if (computedProps.options)
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
           ...computedProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Select, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Select, {
             mode: "multiple",
             ...computedProps.input
           })
         });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.List, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.List, {
         name: computedProps.name,
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => {
@@ -505,25 +537,25 @@ function FormItem(props) {
               }),
               fields.map((field) => {
                 var _a3;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Row, {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Row, {
                     gutter: 24,
                     style: { flexFlow: "row nowrap" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Col, {
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Col, {
                         span: 23,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
                           ...field,
                           noStyle: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.InputNumber, {
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.InputNumber, {
                             style: { width: "100%" },
                             ...computedProps.input
                           })
                         })
                       }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Col, {
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Col, {
                         span: 1,
-                        children: !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Button, {
+                        children: !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
                           danger: true,
                           type: "link",
                           style: { float: "right" },
@@ -535,15 +567,15 @@ function FormItem(props) {
                   })
                 }, field.key);
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Form.Item, {
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Form.Item, {
                 children: [
-                  !((_b = computedProps.input) == null ? void 0 : _b.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Button, {
+                  !((_b = computedProps.input) == null ? void 0 : _b.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
                     type: "dashed",
                     block: true,
                     onClick: () => add(),
                     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.PlusOutlined, {})
                   }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.ErrorList, {
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.ErrorList, {
                     errors
                   })
                 ]
@@ -553,23 +585,23 @@ function FormItem(props) {
         }
       });
     case "boolean":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
         ...computedProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Switch, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Switch, {
           ...computedProps.input
         })
       });
     case "date":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
         ...computedProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePicker, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DateItem, {
           ...computedProps.input
         })
       });
     case "time":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.Item, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.Item, {
         ...computedProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimePicker, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimeItem, {
           ...computedProps.input
         })
       });
@@ -589,12 +621,12 @@ function FormItem(props) {
         ]
       });
     case "object[]":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.List, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.List, {
         name: computedProps.name,
         rules: computedProps.rules,
         children: (fields, { add, remove }, { errors }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
           children: [
-            fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Form.Item, {
+            fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Form.Item, {
               style: { marginBottom: 0 },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -604,7 +636,7 @@ function FormItem(props) {
                       computedProps.label,
                       " ",
                       field.name + 1,
-                      !computedProps.disabled && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Button, {
+                      !computedProps.disabled && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
                         danger: true,
                         type: "link",
                         onClick: () => remove(field.name),
@@ -613,9 +645,9 @@ function FormItem(props) {
                     ]
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Row, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Row, {
                   gutter: 24,
-                  children: computedProps.object.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Col, {
+                  children: computedProps.object.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Col, {
                     span: o.col || 6,
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, {
                       ...o,
@@ -625,9 +657,9 @@ function FormItem(props) {
                 })
               ]
             }, field.key)),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Form.Item, {
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Form.Item, {
               children: [
-                !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd4.Button, {
+                !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Button, {
                   type: "dashed",
                   block: true,
                   onClick: () => add(),
@@ -638,7 +670,7 @@ function FormItem(props) {
                     computedProps.label
                   ]
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd4.Form.ErrorList, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Form.ErrorList, {
                   errors
                 })
               ]
@@ -658,6 +690,7 @@ function Form(props) {
   const [loading, setLoading] = (0, import_react9.useState)(false);
   const [computedProps, setComputedProps] = (0, import_react9.useState)();
   const config = useConfigContext();
+  const [extendTypes, setExtendTypes] = (0, import_react9.useState)();
   (0, import_react9.useEffect)(() => {
     var _a2;
     const propsCopy = { ...props };
@@ -686,20 +719,24 @@ function Form(props) {
         } : values);
       };
     }
+    if (propsCopy.extendTypes) {
+      setExtendTypes(propsCopy.extendTypes);
+      delete propsCopy.extendTypes;
+    }
     setComputedProps(propsCopy);
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd5.Form, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd6.Form, {
     ...computedProps,
     children: [
       computedProps.beforeItems,
       (_a = computedProps.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, {
         ...item,
-        extendTypes: computedProps.extendTypes
+        extendTypes
       }, item.id)),
       computedProps.children,
-      computedProps.submit !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd5.Button, {
+      computedProps.submit !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Button, {
         htmlType: "submit",
         type: "primary",
         loading,
@@ -709,11 +746,34 @@ function Form(props) {
     ]
   });
 }
-Form.useForm = import_antd5.Form.useForm;
+Form.useForm = import_antd6.Form.useForm;
 Form.Item = FormItem;
 
+// src/Link.tsx
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Link({
+  href,
+  target,
+  text,
+  children,
+  style
+}) {
+  const { Link: Link2 } = useConfigContext();
+  style = Object.assign({ cursor: "pointer" }, style);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Link, {
+    to: href,
+    target: target || (Link2 == null ? void 0 : Link2.target),
+    style: {
+      ...Link2.style,
+      ...style || {}
+    },
+    children: text || children
+  });
+}
+
 // src/Modal.tsx
-var import_antd6 = require("antd");
+var import_antd7 = require("antd");
 var import_react10 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function useModal(init) {
@@ -726,7 +786,7 @@ function useModal(init) {
     ...init
   });
   return {
-    modal: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd6.Modal, {
+    modal: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Modal, {
       ...props
     }),
     modalProps: props,
@@ -740,33 +800,33 @@ function useModal(init) {
 }
 
 // src/Routers.tsx
-var import_antd7 = require("antd");
+var import_antd8 = require("antd");
 var import_react11 = require("react");
-var import_react_router_dom = require("react-router-dom");
+var import_react_router_dom2 = require("react-router-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
 function NotFound() {
   const config = useConfigContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Result, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Result, {
     status: "404",
     title: config.common.pageNotFound
   });
 }
 function Routes(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.Routes, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom2.Routes, {
     children: [
-      props.routes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
+      props.routes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom2.Route, {
         ...r,
         element: r.element || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react11.Suspense, {
           fallback: props.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
             style: { padding: "24px" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd7.Skeleton, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Skeleton, {
               active: true
             })
           }),
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(r.page, {})
         })
       }, r.path)),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom2.Route, {
         path: "*",
         element: props.notFound || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotFound, {})
       }, "*")
@@ -776,10 +836,10 @@ function Routes(props) {
 
 // src/Table.tsx
 var import_react12 = require("react");
-var import_antd8 = require("antd");
-var import_dayjs4 = __toESM(require("dayjs"));
+var import_antd9 = require("antd");
+var import_dayjs5 = __toESM(require("dayjs"));
 var import_icons3 = require("@ant-design/icons");
-var import_lodash5 = require("lodash");
+var import_lodash6 = require("lodash");
 var import_react13 = require("@faasjs/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function processValue(item, value) {
@@ -806,7 +866,7 @@ function processValue(item, value) {
     if (["date", "time"].includes(item.type)) {
       if (typeof value === "number" && value.toString().length === 10)
         value = value * 1e3;
-      value = (0, import_dayjs4.default)(value).format(dayjsFormat);
+      value = (0, import_dayjs5.default)(value).format(dayjsFormat);
     }
   }
   return value;
@@ -822,7 +882,7 @@ function Table(props) {
       if (!item.dataIndex)
         item.dataIndex = item.id;
       if (!item.title)
-        item.title = (0, import_lodash5.upperFirst)(item.id);
+        item.title = (0, import_lodash6.upperFirst)(item.id);
       if (!item.type)
         item.type = "string";
       if ((_a = item.options) == null ? void 0 : _a.length) {
@@ -886,7 +946,7 @@ function Table(props) {
               setSelectedKeys,
               selectedKeys,
               confirm
-            }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd8.Radio.Group, {
+            }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd9.Radio.Group, {
               style: { padding: 8 },
               buttonStyle: "solid",
               value: selectedKeys[0],
@@ -895,10 +955,10 @@ function Table(props) {
                 confirm();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Radio.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Radio.Button, {
                   children: config.common.all
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Radio.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Radio.Button, {
                   value: "true",
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.CheckOutlined, {
                     style: {
@@ -907,7 +967,7 @@ function Table(props) {
                     }
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Radio.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Radio.Button, {
                   value: "false",
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons3.CloseOutlined, {
                     style: {
@@ -916,7 +976,7 @@ function Table(props) {
                     }
                   })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Radio.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Radio.Button, {
                   value: "empty",
                   children: config.common.blank
                 })
@@ -926,11 +986,11 @@ function Table(props) {
             item.onFilter = (value, row) => {
               switch (value) {
                 case "true":
-                  return !(0, import_lodash5.isNil)(row[item.id]) && !!row[item.id];
+                  return !(0, import_lodash6.isNil)(row[item.id]) && !!row[item.id];
                 case "false":
-                  return !(0, import_lodash5.isNil)(row[item.id]) && !row[item.id];
+                  return !(0, import_lodash6.isNil)(row[item.id]) && !row[item.id];
                 case "empty":
-                  return (0, import_lodash5.isNil)(row[item.id]);
+                  return (0, import_lodash6.isNil)(row[item.id]);
                 default:
                   return true;
               }
@@ -939,12 +999,12 @@ function Table(props) {
         case "date":
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
-            item.onFilter = (value, row) => (0, import_dayjs4.default)(row[item.id]).isSame((0, import_dayjs4.default)(value));
+            item.onFilter = (value, row) => (0, import_dayjs5.default)(row[item.id]).isSame((0, import_dayjs5.default)(value));
           break;
         case "time":
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
-            item.onFilter = (value, row) => (0, import_dayjs4.default)(row[item.id]).isSame((0, import_dayjs4.default)(value));
+            item.onFilter = (value, row) => (0, import_dayjs5.default)(row[item.id]).isSame((0, import_dayjs5.default)(value));
           break;
         default:
           item.render = (value) => processValue(item, value);
@@ -958,14 +1018,14 @@ function Table(props) {
   if (!columns)
     return null;
   if (!props.faasData)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Table, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Table, {
       ...props,
       rowKey: props.rowKey || "id",
       columns,
       dataSource: props.dataSource
     });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react13.FaasDataWrapper, {
-    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Skeleton, {
+    fallback: props.faasData.fallback || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Skeleton, {
       active: true
     }),
     render: ({
@@ -974,20 +1034,20 @@ function Table(props) {
       reload
     }) => {
       if (!data)
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Table, {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Table, {
           ...props,
           rowKey: props.rowKey || "id",
           columns,
           dataSource: []
         });
       if (Array.isArray(data))
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Table, {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Table, {
           ...props,
           rowKey: props.rowKey || "id",
           columns,
           dataSource: data
         });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd8.Table, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd9.Table, {
         ...props,
         rowKey: props.rowKey || "id",
         columns,
@@ -1055,6 +1115,7 @@ function Title(props) {
   Drawer,
   Form,
   FormItem,
+  Link,
   Modal,
   Routes,
   Table,