@faasjs/ant-design 2.6.0 → 2.6.1

package/README.md

@@ -42,6 +42,7 @@ type FaasItemProps = {
 - [DrawerProps](interfaces/DrawerProps.md)
 - [ErrorBoundaryProps](interfaces/ErrorBoundaryProps.md)
 - [ExtendDescriptionTypeProps](interfaces/ExtendDescriptionTypeProps.md)
+- [ExtendFormItemProps](interfaces/ExtendFormItemProps.md)
 - [FaasDataWrapperProps](interfaces/FaasDataWrapperProps.md)
 - [FaasItemProps](interfaces/FaasItemProps.md)
 - [FormItemProps](interfaces/FormItemProps.md)
@@ -60,7 +61,6 @@ type FaasItemProps = {
 
 - [BaseOption](type-aliases/BaseOption.md)
 - [ExtendDescriptionItemProps](type-aliases/ExtendDescriptionItemProps.md)
-- [ExtendFormItemProps](type-aliases/ExtendFormItemProps.md)
 - [ExtendFormTypeProps](type-aliases/ExtendFormTypeProps.md)
 - [ExtendTableItemProps](type-aliases/ExtendTableItemProps.md)
 - [ExtendTableTypeProps](type-aliases/ExtendTableTypeProps.md)

package/dist/index.d.mts

@@ -11,7 +11,7 @@ import * as antd_es_modal_confirm from 'antd/es/modal/confirm';
 import * as react from 'react';
 import { Dispatch, SetStateAction, CSSProperties, ReactNode, ReactElement, LazyExoticComponent, ComponentType } from 'react';
 export { lazy } from 'react';
-import { ModalProps as ModalProps$1, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, DatePickerProps, FormInstance, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1 } from 'antd';
+import { ModalProps as ModalProps$1, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, FormInstance, InputProps, SelectProps, RadioProps, InputNumberProps, SwitchProps, DatePickerProps, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1 } from 'antd';
 import { BrowserRouterProps, RouteProps } from 'react-router-dom';
 import { Dayjs } from 'dayjs';
 import * as antd_es_form_FormItem from 'antd/es/form/FormItem';
@@ -234,9 +234,20 @@ type ExtendFormTypeProps<T = any> = {
 type ExtendTypes = {
     [type: string]: ExtendFormTypeProps;
 };
-type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
-interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
-    input?: InputProps | InputNumberProps | SwitchProps | SelectProps<T> | DatePickerProps;
+type InputTypeMap<T> = {
+    string: InputProps | SelectProps<T> | RadioProps;
+    'string[]': InputProps | SelectProps<T> | RadioProps;
+    number: InputNumberProps | SelectProps<T> | RadioProps;
+    'number[]': InputNumberProps | SelectProps<T> | RadioProps;
+    boolean: SwitchProps;
+    date: DatePickerProps;
+    time: DatePickerProps;
+    object: never;
+    'object[]': never;
+};
+interface FormItemProps<T = any> extends BaseItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
+    type?: FaasItemType;
+    input?: InputTypeMap<T>[FaasItemType];
     maxCount?: number;
     object?: FormItemProps[];
     disabled?: boolean;
@@ -254,6 +265,42 @@ interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>,
     /** trigger when any item's value changed */
     if?: (values: Record<string, any>) => boolean;
 }
+/**
+ * Extend custom form item types.
+ *
+ * @example
+ * ```ts
+ * import type { ExtendFormItemProps, FormProps } from '@faasjs/ant-design'
+ *
+ * // define custom type
+ * interface ExtendTypes extends ExtendFormItemProps {
+ *   type: 'password'
+ * }
+ *
+ * // extend form
+ * function ExtendForm(props: FormProps<any, ExtendTypes>) {
+ *   return (
+ *     <Form
+ *       {...props}
+ *       extendTypes={{ password: { children: <Input.Password /> } }}
+ *     />
+ *   )
+ * }
+ *
+ * // use custom type
+ * <ExtendForm
+ *   items={[
+ *     {
+ *       id: 'test',
+ *       type: 'password',
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+interface ExtendFormItemProps extends Omit<FormItemProps, 'type'> {
+    type?: string;
+}
 /**
  * FormItem
  *
@@ -515,8 +562,8 @@ type FormSubmitProps = {
         finally?: () => void;
     };
 };
-interface FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
-    items?: (FormItemProps | ExtendItemProps | JSX.Element)[];
+interface FormProps<Values extends Record<string, any> = any, ExtendItemProps extends ExtendFormItemProps = ExtendFormItemProps> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
+    items?: ((ExtendItemProps extends ExtendFormItemProps ? ExtendItemProps | FormItemProps : FormItemProps) | JSX.Element)[];
     /** Default: { text: 'Submit' }, set false to disable it */
     submit?: false | FormSubmitProps;
     onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any>;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import * as antd_es_modal_confirm from 'antd/es/modal/confirm';
 import * as react from 'react';
 import { Dispatch, SetStateAction, CSSProperties, ReactNode, ReactElement, LazyExoticComponent, ComponentType } from 'react';
 export { lazy } from 'react';
-import { ModalProps as ModalProps$1, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, DatePickerProps, FormInstance, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1 } from 'antd';
+import { ModalProps as ModalProps$1, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, FormInstance, InputProps, SelectProps, RadioProps, InputNumberProps, SwitchProps, DatePickerProps, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1 } from 'antd';
 import { BrowserRouterProps, RouteProps } from 'react-router-dom';
 import { Dayjs } from 'dayjs';
 import * as antd_es_form_FormItem from 'antd/es/form/FormItem';
@@ -234,9 +234,20 @@ type ExtendFormTypeProps<T = any> = {
 type ExtendTypes = {
     [type: string]: ExtendFormTypeProps;
 };
-type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
-interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
-    input?: InputProps | InputNumberProps | SwitchProps | SelectProps<T> | DatePickerProps;
+type InputTypeMap<T> = {
+    string: InputProps | SelectProps<T> | RadioProps;
+    'string[]': InputProps | SelectProps<T> | RadioProps;
+    number: InputNumberProps | SelectProps<T> | RadioProps;
+    'number[]': InputNumberProps | SelectProps<T> | RadioProps;
+    boolean: SwitchProps;
+    date: DatePickerProps;
+    time: DatePickerProps;
+    object: never;
+    'object[]': never;
+};
+interface FormItemProps<T = any> extends BaseItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
+    type?: FaasItemType;
+    input?: InputTypeMap<T>[FaasItemType];
     maxCount?: number;
     object?: FormItemProps[];
     disabled?: boolean;
@@ -254,6 +265,42 @@ interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>,
     /** trigger when any item's value changed */
     if?: (values: Record<string, any>) => boolean;
 }
+/**
+ * Extend custom form item types.
+ *
+ * @example
+ * ```ts
+ * import type { ExtendFormItemProps, FormProps } from '@faasjs/ant-design'
+ *
+ * // define custom type
+ * interface ExtendTypes extends ExtendFormItemProps {
+ *   type: 'password'
+ * }
+ *
+ * // extend form
+ * function ExtendForm(props: FormProps<any, ExtendTypes>) {
+ *   return (
+ *     <Form
+ *       {...props}
+ *       extendTypes={{ password: { children: <Input.Password /> } }}
+ *     />
+ *   )
+ * }
+ *
+ * // use custom type
+ * <ExtendForm
+ *   items={[
+ *     {
+ *       id: 'test',
+ *       type: 'password',
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+interface ExtendFormItemProps extends Omit<FormItemProps, 'type'> {
+    type?: string;
+}
 /**
  * FormItem
  *
@@ -515,8 +562,8 @@ type FormSubmitProps = {
         finally?: () => void;
     };
 };
-interface FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
-    items?: (FormItemProps | ExtendItemProps | JSX.Element)[];
+interface FormProps<Values extends Record<string, any> = any, ExtendItemProps extends ExtendFormItemProps = ExtendFormItemProps> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
+    items?: ((ExtendItemProps extends ExtendFormItemProps ? ExtendItemProps | FormItemProps : FormItemProps) | JSX.Element)[];
     /** Default: { text: 'Submit' }, set false to disable it */
     submit?: false | FormSubmitProps;
     onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any>;

package/dist/index.js

@@ -449,6 +449,9 @@ function Description(props) {
   );
 }
 Description.whyDidYouRender = true;
+function isOptionsProps(item) {
+  return item && Array.isArray(item.options);
+}
 function processProps(propsCopy, config) {
   if (!propsCopy.title) propsCopy.title = lodashEs.upperFirst(propsCopy.id);
   if (!propsCopy.label && propsCopy.label !== false)
@@ -474,10 +477,8 @@ function processProps(propsCopy, config) {
       });
   }
   if (!propsCopy.input) propsCopy.input = {};
-  if (propsCopy.options)
-    propsCopy.input.options = transferOptions(
-      propsCopy.options
-    );
+  if (isOptionsProps(propsCopy))
+    propsCopy.input.options = transferOptions(propsCopy.options);
   switch (propsCopy.type) {
     case "boolean":
       propsCopy.valuePropName = "checked";
@@ -485,8 +486,7 @@ function processProps(propsCopy, config) {
     case "object":
       if (!Array.isArray(propsCopy.name)) propsCopy.name = [propsCopy.name];
       for (const sub of propsCopy.object) {
-        if (!sub.name)
-          sub.name = propsCopy.name.concat(sub.id);
+        if (!sub.name) sub.name = propsCopy.name.concat(sub.id);
         processProps(sub, config);
       }
       break;
@@ -537,11 +537,11 @@ function FormItem(props) {
     return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: computedProps.render(null, null, 0, "form") });
   switch (computedProps.type) {
     case "string":
-      if (computedProps.options)
+      if (isOptionsProps(computedProps))
         return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: computedProps.options.length > 10 ? /* @__PURE__ */ jsxRuntime.jsx(antd.Select, { ...computedProps.input }) : /* @__PURE__ */ jsxRuntime.jsx(antd.Radio.Group, { ...computedProps.input }) });
       return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input, { ...computedProps.input }) });
     case "string[]":
-      if (computedProps.options)
+      if (isOptionsProps(computedProps))
         return /* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Select, { mode: "multiple", ...computedProps.input }) });
       return /* @__PURE__ */ jsxRuntime.jsx(
         antd.Form.List,
@@ -733,6 +733,9 @@ function FormItem(props) {
 }
 FormItem.whyDidYouRender = true;
 FormItem.useStatus = antd.Form.Item.useStatus;
+function isFormItemProps(item) {
+  return item.id !== void 0;
+}
 function Form(props) {
   var _a, _b;
   const [loading, setLoading] = react$1.useState(false);
@@ -752,14 +755,17 @@ function Form(props) {
     if (propsCopy.initialValues && ((_a2 = propsCopy.items) == null ? void 0 : _a2.length)) {
       for (const key in propsCopy.initialValues) {
         propsCopy.initialValues[key] = transferValue(
-          (_b2 = propsCopy.items.find((item2) => item2.id === key)) == null ? void 0 : _b2.type,
+          (_b2 = propsCopy.items.find((item2) => isFormItemProps(item2) && item2.id === key)) == null ? void 0 : _b2.type,
           propsCopy.initialValues[key]
         );
-        const item = propsCopy.items.find((item2) => item2.id === key);
+        const item = propsCopy.items.find(
+          (item2) => isFormItemProps(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);
+        if (isFormItemProps(item) && item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
       }
       setInitialValues(propsCopy.initialValues);
       delete propsCopy.initialValues;
@@ -824,7 +830,9 @@ function Form(props) {
       }
       if (!props.items) return;
       for (const key in changedValues) {
-        const item = computedProps.items.find((i) => i.id === key);
+        const item = computedProps.items.find(
+          (i) => isFormItemProps(i) && i.id === key
+        );
         if (item == null ? void 0 : item.onValueChange)
           item.onValueChange(changedValues[key], allValues, form);
       }
@@ -840,16 +848,11 @@ function Form(props) {
   if (!computedProps) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(antd.Form, { ...computedProps, onValuesChange, children: [
     computedProps.beforeItems,
-    (_a = computedProps.items) == null ? void 0 : _a.map(
-      (item) => react$1.isValidElement(item) ? item : /* @__PURE__ */ jsxRuntime.jsx(
-        FormItem,
-        {
-          ...item,
-          extendTypes
-        },
-        item.id
-      )
-    ),
+    (_a = computedProps.items) == null ? void 0 : _a.map((item) => {
+      if (isFormItemProps(item))
+        return /* @__PURE__ */ jsxRuntime.jsx(FormItem, { ...item, extendTypes }, item.id);
+      return item;
+    }),
     computedProps.children,
     computedProps.submit !== false && /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { htmlType: "submit", type: "primary", loading, children: ((_b = computedProps.submit) == null ? void 0 : _b.text) || config.theme.Form.submit.text }),
     computedProps.footer

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { createSplitedContext, ErrorBoundary as ErrorBoundary$1, FaasReactClient
 export { faas, useFaas } from '@faasjs/react';
 import { Form as Form$1, Modal as Modal$1, Drawer as Drawer$1, message, notification, ConfigProvider as ConfigProvider$1, Typography, Spin, Descriptions, Input, Button, Row, Col, DatePicker, Switch, Select, InputNumber, Radio, Result, Skeleton, Table as Table$1, Tabs as Tabs$1, Alert, Space } from 'antd';
 import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
-import { createContext, useState, useCallback, useEffect, useContext, useMemo, cloneElement, isValidElement, Suspense } from 'react';
+import { createContext, useState, useCallback, useEffect, useContext, useMemo, cloneElement, Suspense } from 'react';
 export { lazy } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { BrowserRouter, useNavigate, Link as Link$1, Routes as Routes$1, Route, useLocation } from 'react-router-dom';
@@ -445,6 +445,9 @@ function Description(props) {
   );
 }
 Description.whyDidYouRender = true;
+function isOptionsProps(item) {
+  return item && Array.isArray(item.options);
+}
 function processProps(propsCopy, config) {
   if (!propsCopy.title) propsCopy.title = upperFirst(propsCopy.id);
   if (!propsCopy.label && propsCopy.label !== false)
@@ -470,10 +473,8 @@ function processProps(propsCopy, config) {
       });
   }
   if (!propsCopy.input) propsCopy.input = {};
-  if (propsCopy.options)
-    propsCopy.input.options = transferOptions(
-      propsCopy.options
-    );
+  if (isOptionsProps(propsCopy))
+    propsCopy.input.options = transferOptions(propsCopy.options);
   switch (propsCopy.type) {
     case "boolean":
       propsCopy.valuePropName = "checked";
@@ -481,8 +482,7 @@ function processProps(propsCopy, config) {
     case "object":
       if (!Array.isArray(propsCopy.name)) propsCopy.name = [propsCopy.name];
       for (const sub of propsCopy.object) {
-        if (!sub.name)
-          sub.name = propsCopy.name.concat(sub.id);
+        if (!sub.name) sub.name = propsCopy.name.concat(sub.id);
         processProps(sub, config);
       }
       break;
@@ -533,11 +533,11 @@ function FormItem(props) {
     return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: computedProps.render(null, null, 0, "form") });
   switch (computedProps.type) {
     case "string":
-      if (computedProps.options)
+      if (isOptionsProps(computedProps))
         return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: computedProps.options.length > 10 ? /* @__PURE__ */ jsx(Select, { ...computedProps.input }) : /* @__PURE__ */ jsx(Radio.Group, { ...computedProps.input }) });
       return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: /* @__PURE__ */ jsx(Input, { ...computedProps.input }) });
     case "string[]":
-      if (computedProps.options)
+      if (isOptionsProps(computedProps))
         return /* @__PURE__ */ jsx(Form$1.Item, { ...computedProps, children: /* @__PURE__ */ jsx(Select, { mode: "multiple", ...computedProps.input }) });
       return /* @__PURE__ */ jsx(
         Form$1.List,
@@ -729,6 +729,9 @@ function FormItem(props) {
 }
 FormItem.whyDidYouRender = true;
 FormItem.useStatus = Form$1.Item.useStatus;
+function isFormItemProps(item) {
+  return item.id !== void 0;
+}
 function Form(props) {
   var _a, _b;
   const [loading, setLoading] = useState(false);
@@ -748,14 +751,17 @@ function Form(props) {
     if (propsCopy.initialValues && ((_a2 = propsCopy.items) == null ? void 0 : _a2.length)) {
       for (const key in propsCopy.initialValues) {
         propsCopy.initialValues[key] = transferValue(
-          (_b2 = propsCopy.items.find((item2) => item2.id === key)) == null ? void 0 : _b2.type,
+          (_b2 = propsCopy.items.find((item2) => isFormItemProps(item2) && item2.id === key)) == null ? void 0 : _b2.type,
           propsCopy.initialValues[key]
         );
-        const item = propsCopy.items.find((item2) => item2.id === key);
+        const item = propsCopy.items.find(
+          (item2) => isFormItemProps(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);
+        if (isFormItemProps(item) && item.if)
+          item.hidden = !item.if(propsCopy.initialValues);
       }
       setInitialValues(propsCopy.initialValues);
       delete propsCopy.initialValues;
@@ -820,7 +826,9 @@ function Form(props) {
       }
       if (!props.items) return;
       for (const key in changedValues) {
-        const item = computedProps.items.find((i) => i.id === key);
+        const item = computedProps.items.find(
+          (i) => isFormItemProps(i) && i.id === key
+        );
         if (item == null ? void 0 : item.onValueChange)
           item.onValueChange(changedValues[key], allValues, form);
       }
@@ -836,16 +844,11 @@ function Form(props) {
   if (!computedProps) return null;
   return /* @__PURE__ */ jsxs(Form$1, { ...computedProps, onValuesChange, children: [
     computedProps.beforeItems,
-    (_a = computedProps.items) == null ? void 0 : _a.map(
-      (item) => isValidElement(item) ? item : /* @__PURE__ */ jsx(
-        FormItem,
-        {
-          ...item,
-          extendTypes
-        },
-        item.id
-      )
-    ),
+    (_a = computedProps.items) == null ? void 0 : _a.map((item) => {
+      if (isFormItemProps(item))
+        return /* @__PURE__ */ jsx(FormItem, { ...item, extendTypes }, item.id);
+      return item;
+    }),
     computedProps.children,
     computedProps.submit !== false && /* @__PURE__ */ jsx(Button, { htmlType: "submit", type: "primary", loading, children: ((_b = computedProps.submit) == null ? void 0 : _b.text) || config.theme.Form.submit.text }),
     computedProps.footer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -38,7 +38,7 @@
     "lodash-es": "*"
   },
   "peerDependencies": {
-    "@faasjs/react": "2.6.0",
+    "@faasjs/react": "2.6.1",
     "antd": "*",
     "react": "*",
     "react-dom": "*",
@@ -50,7 +50,7 @@
     "@testing-library/react": "*",
     "@testing-library/user-event": "*",
     "@welldone-software/why-did-you-render": "*",
-    "@faasjs/react": "2.6.0",
+    "@faasjs/react": "2.6.1",
     "antd": "*",
     "react": "*",
     "react-dom": "*",