fix: 优化request代码

llq0802 · Nov 21, 2023 · 86fe702 · 86fe702
1 parent c8f9517
commit 86fe702
Show file tree

Hide file tree

Showing 33 changed files with 26,526 additions and 689 deletions.
diff --git a/src/Form/base/BaseForm.tsx b/src/Form/base/BaseForm.tsx
@@ -1,28 +1,16 @@
-import {
-  useMemoizedFn,
-  useRafState,
-  useUpdateEffect,
-  useUpdateLayoutEffect,
-} from 'ahooks';
+import { useMemoizedFn, useRafState, useUpdateEffect, useUpdateLayoutEffect } from 'ahooks';
 import type { FormInstance, FormProps } from 'antd';
 import { Form } from 'antd';
 import classnames from 'classnames';
 import type { MouseEvent, ReactElement, ReactNode } from 'react';
-import {
-  Children,
-  createContext,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
+import { Children, createContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { getFormInitValues, isFunction, uniqueId } from '../../_utils';
 import type { LFormSubmitterProps } from './Submitter';
 import Submitter from './Submitter';
 
 const prefixCls = 'lightd-form';
 
-export interface BaseFormProps
-  extends Omit<FormProps, 'onReset' | 'title' | 'onValuesChange'> {
+export interface BaseFormProps extends Omit<FormProps, 'onReset' | 'title' | 'onValuesChange'> {
   /**
    *LForm 下面所有的 LFormItemXXX 或者 Form.Item 的 name 的属性值组成的字段数组
    *@author 李岚清 <https://github.com/llq0802>
@@ -113,11 +101,7 @@ export interface BaseFormProps
    *@version 2.1.24
    *@see 官网 https://llq0802.github.io/lighting-design/latest LFormProps
    */
-  onValuesChange?(
-    currentName: string,
-    currentValue: any,
-    allValues: Record<string, any>,
-  ): void;
+  onValuesChange?(currentName: string, currentValue: any, allValues: Record<string, any>): void;
 
   children?: ReactNode;
 
@@ -189,6 +173,11 @@ function BaseForm(props: BaseFormProps): JSX.Element {
 
   const formItems = Children.toArray(children);
 
+  const submitterProps = useMemo(
+    () => (typeof submitter === 'boolean' || !submitter ? {} : submitter),
+    [submitter],
+  );
+
   const initFieldValues = useMemo(
     () =>
       getFormInitValues({
@@ -219,9 +208,7 @@ function BaseForm(props: BaseFormProps): JSX.Element {
   const handleOnFinish = useMemoizedFn(async (values) => {
     if (!isFunction(onFinish)) return;
 
-    const formValues = transformValues
-      ? transformValues(values) ?? values
-      : values;
+    const formValues = transformValues ? transformValues(values) ?? values : values;
     const ret: unknown = onFinish?.(formValues);
     if (ret instanceof Promise) {
       setLoading(true);
@@ -237,11 +224,6 @@ function BaseForm(props: BaseFormProps): JSX.Element {
     }
   });
 
-  const submitterProps = useMemo(
-    () => (typeof submitter === 'boolean' || !submitter ? {} : submitter),
-    [submitter],
-  );
-
   const submitterDom = useMemo(() => {
     return submitter ? (
       <Submitter
@@ -262,14 +244,7 @@ function BaseForm(props: BaseFormProps): JSX.Element {
         }}
       />
     ) : null;
-  }, [
-    initFieldValues,
-    isReady,
-    loading,
-    submitter,
-    submitterProps,
-    isEnterSubmit,
-  ]);
+  }, [initFieldValues, isReady, loading, submitter, submitterProps, isEnterSubmit]);
 
   const formContent = contentRender
     ? contentRender(formItems, submitterDom, formRef?.current)
@@ -315,9 +290,7 @@ function BaseForm(props: BaseFormProps): JSX.Element {
     </LFormContext.Provider>
   );
 
-  return (
-    formRender ? formRender(formDom, submitterDom) : formDom
-  ) as JSX.Element;
+  return (formRender ? formRender(formDom, submitterDom) : formDom) as JSX.Element;
 }
 
 export default BaseForm;

diff --git a/src/Form/base/Submitter.tsx b/src/Form/base/Submitter.tsx
@@ -25,17 +25,16 @@ export interface LFormSubmitterProps {
   isEnterSubmit?: boolean;
   /** 表单是否准备完成 */
   isReady?: boolean;
+  /** 内部的重置按钮是否使用 form.resetFields() */
+  isAntdReset?: boolean;
   /** 是否展示重置按钮 */
   showReset?: boolean;
   /** form实例 */
   form?: FormInstance;
   /** 同Form的wrapperCol */
   wrapperCol?: FormProps['wrapperCol'];
   /** 重新渲染函数 */
-  render?: (
-    dom: ReactElement[],
-    props: LFormSubmitterProps,
-  ) => ReactNode[] | ReactNode | false;
+  render?: (dom: ReactElement[], props: LFormSubmitterProps) => ReactNode[] | ReactNode | false;
   /** 按钮位置 */
   buttonAlign?: 'left' | 'right' | 'center' | number;
 }
@@ -44,6 +43,7 @@ const LFormSubmitter: FC<LFormSubmitterProps> = (props) => {
   const {
     isEnterSubmit,
     isReady,
+    isAntdReset = false,
     initFormValues,
     onSubmit = () => {},
     onReset = () => {},
@@ -55,15 +55,13 @@ const LFormSubmitter: FC<LFormSubmitterProps> = (props) => {
     form,
     render,
   } = props;
-  const { preventDefault: submitPreventDefault, ...submitButtonProps } =
-    outSubmitButtonProps;
-  const { preventDefault: resetPreventDefault, ...resetButtonProps } =
-    outResetButtonProps;
+  const { preventDefault: submitPreventDefault, ...submitButtonProps } = outSubmitButtonProps;
+  const { preventDefault: resetPreventDefault, ...resetButtonProps } = outResetButtonProps;
 
   const resetClick = useMemoizedFn((e) => {
     if (!resetPreventDefault) {
-      const hasInitFormValues = Object.keys(initFormValues ?? {}).length > 0;
-      if (hasInitFormValues) {
+      // const hasInitFormValues = Object.keys(initFormValues ?? {}).length > 0;
+      if (!isAntdReset) {
         form?.setFieldsValue({ ...initFormValues });
       } else {
         // resetFields 会重置整个 Field，因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用（例如异步数据、状态等等）。
@@ -86,11 +84,7 @@ const LFormSubmitter: FC<LFormSubmitterProps> = (props) => {
   const dom = useMemo(() => {
     const ret = [
       // 默认设置为重置
-      <Button
-        key="reset-lightd-form"
-        {...resetButtonProps}
-        onClick={resetClick}
-      >
+      <Button key="reset-lightd-form" {...resetButtonProps} onClick={resetClick}>
         {resetText}
       </Button>,
       // 默认设置为提交

diff --git a/src/Form/index.md b/src/Form/index.md
@@ -74,6 +74,7 @@ nav:
 
   1.  `submitter`自定义按钮渲染后绑定`form.resetFields`方法
   2.  `resetButtonProps`中设置`preventDefault = true`后在`onClick`中绑定`form.resetFields`
+  3.  通过设置 `submitter.isAntdReset 为 true`
 
 :::
 
@@ -119,17 +120,18 @@ import { LForm } from 'lighting-design';
 </LForm>
 ```
 
-| 参数              | 说明                                                                                                                           | 类型                                                                             | 默认值 |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ------ |
-| submitText        | 提交按钮文本                                                                                                                   | `ReactNode`                                                                      | `提交` |
-| resetText         | 重置按钮文本                                                                                                                   | `ReactNode`                                                                      | `重置` |
-| submitButtonProps | 提交按钮属性，和 [Button](https://ant.design/components/button-cn#api) 一致                                                    | [ButtonProps](https://ant.design/components/button-cn#api)                       | `-`    |
-| resetButtonProps  | 重置按钮属性，和 [Button](https://ant.design/components/button-cn#api) 一致                                                    | [ButtonProps](https://ant.design/components/button-cn#api)                       | `-`    |
-| wrapperCol        | 只在`LForm`组件中生效 </br>效果和[ Form 的 wrapperCol](https://ant.design/components/form-cn#api)一致                          | `ColProps`                                                                       | `-`    |
-| showReset         | 是否渲染重置按钮                                                                                                               | `boolean`                                                                        | `true` |
-| buttonAlign       | 按钮位置 , 为`number`类型时与`LForm`的`labelWidth`效果一致<br>在 `LMoadlForm` 默认为`right`<br>在 `LDrawerForm` 默认为`center` | `'left' \| 'right' \| 'center'\| number`                                         | `-`    |
-| onSubmit          | 点击提交按钮的回调                                                                                                             | `(e) => void`                                                                    | `-`    |
-| onReset           | 点击重置按钮的回调 (优先级比 LForm 的 onReset 高)                                                                              | `(e) => void`                                                                    | `-`    |
-| render            | 自定义操作的渲染                                                                                                               | ` (dom: ReactElement[], props: LFormSubmitterProps) => ReactNode[] \| ReactNode` | `-`    |
+| 参数              | 说明                                                                                                                           | 类型                                                                             | 默认值  |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ------- |
+| submitText        | 提交按钮文本                                                                                                                   | `ReactNode`                                                                      | `提交`  |
+| resetText         | 重置按钮文本                                                                                                                   | `ReactNode`                                                                      | `重置`  |
+| submitButtonProps | 提交按钮属性，和 [Button](https://ant.design/components/button-cn#api) 一致                                                    | [ButtonProps](https://ant.design/components/button-cn#api)                       | `-`     |
+| resetButtonProps  | 重置按钮属性，和 [Button](https://ant.design/components/button-cn#api) 一致                                                    | [ButtonProps](https://ant.design/components/button-cn#api)                       | `-`     |
+| wrapperCol        | 只在`LForm`组件中生效 </br>效果和[ Form 的 wrapperCol](https://ant.design/components/form-cn#api)一致                          | `ColProps`                                                                       | `-`     |
+| showReset         | 是否渲染重置按钮                                                                                                               | `boolean`                                                                        | `true`  |
+| isAntdReset       | 内部的重置按钮是否使用 `form.resetFields()` `true`时会每次重置就会重新挂挂载子组件                                             | `boolean`                                                                        | `false` |
+| buttonAlign       | 按钮位置 , 为`number`类型时与`LForm`的`labelWidth`效果一致<br>在 `LMoadlForm` 默认为`right`<br>在 `LDrawerForm` 默认为`center` | `'left' \| 'right' \| 'center'\| number`                                         | `-`     |
+| onSubmit          | 点击提交按钮的回调                                                                                                             | `(e) => void`                                                                    | `-`     |
+| onReset           | 点击重置按钮的回调 (优先级比 LForm 的 onReset 高)                                                                              | `(e) => void`                                                                    | `-`     |
+| render            | 自定义操作的渲染                                                                                                               | ` (dom: ReactElement[], props: LFormSubmitterProps) => ReactNode[] \| ReactNode` | `-`     |
 
 [LFormSubmitterProps]: #lformsubmitterprops
diff --git a/src/FormItem/index.md b/src/FormItem/index.md
@@ -83,8 +83,8 @@ import { LFormItem } from 'lighting-design';
 | contentAlignItems | 当配置了 `contentBefore` 或者 `contentAfter` 时组件原本子项内容`(label 的右边)`与 `contentBefore` 或者 `contentAfter` 与垂直的对齐方式 | `'center' \| 'start' \| 'end'`                               | `'center'` |
 | wrapperAlignItems | 当配置了 `label` 时组件左边的 `label` 与右边整体的内容区域 `( 如果配置了 contentBefore 或者 contentAfter 则包含它们 )` 的垂直对齐方式  | `'center' \| 'start' \| 'end'`                               | `'start'`  |
 | ownColSpans       | 只在作为`LQueryForm`组件的子项生效，与`antd.Col`组件的配置一样，配置单独这一项占多数份                                                 | [ColProps](https://ant.design/components/grid-cn/#col)       | `-`        |
-| disabled          | 是否禁用组件, 所有的内置`LFormItemXXX`组件均支持<br>如果自定义组件则需要开发者自己控制内部`children`的禁用                             | `boolean`                                                    | `false`    |
-| size              | 组件大小, 所有的内置`LFormItemXXX`组件均支持<br>如果自定义组件则需要开发者自己控制内部`children`的大小                                 | `'large' \| 'middle' \| 'small'`                             | `-`        |
+| disabled          | 是否禁用组件, 几乎所有的内置`LFormItemXXX`组件均支持<br>如果自定义组件则需要开发者自己控制内部`children`的禁用                         | `boolean`                                                    | `false`    |
+| size              | 组件大小, 几乎所有的内置`LFormItemXXX`组件均支持<br>如果自定义组件则需要开发者自己控制内部`children`的大小                             | `'large' \| 'middle' \| 'small'`                             | `-`        |
 | placeholder       | 组件的 placeholder<br>自定义组件则需要开发者自己控制内部`children`的 placeholder                                                       | `string\|string[]`                                           | `-`        |
 | renderField       | 重新渲染 `LFormItem` 的子组件                                                                                                          | `(dom: ReactElement, props: LFormItemProps) => ReactElement` | `-`        |
 | renderFormItem    | 重新渲染整个 `LFormItem` 组件                                                                                                          | `(dom: ReactElement) => ReactElement`                        | `-`        |

diff --git a/src/FormItemCascader/demos/Demo1.tsx b/src/FormItemCascader/demos/Demo1.tsx
@@ -1,39 +1,7 @@
 import { LForm, LFormItemCascader, LFormItemSelect } from 'lighting-design';
 
-const options: any[] = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
+import china_city from './china_city.json';
+const options: any[] = china_city;
 
 const Demo1 = () => {
   const [form] = LForm.useForm();
@@ -58,14 +26,15 @@ const Demo1 = () => {
 
       <LFormItemCascader
         label="级联选择"
-        name={'cascader'}
+        name="cascader"
         required
-        request={async (params) => {
-          console.log('request-params', params);
-          // if (!params) return [];
-          return options;
-        }}
+        options={options}
         cascaderProps={{
+          fieldNames: {
+            label: 'name',
+            value: 'code',
+            children: 'children',
+          },
           onChange(value) {
             console.log('value111', value);
           },

diff --git a/src/FormItemCascader/demos/Demo3.tsx b/src/FormItemCascader/demos/Demo3.tsx
@@ -1,41 +1,8 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { LForm, LFormItemCascader } from 'lighting-design';
 import { awaitTime } from '../../_test';
-
-const options: any[] = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
+import china_city from './china_city.json';
+const options: any[] = china_city;
 
 const Index = () => {
   const [form] = LForm.useForm();
@@ -52,6 +19,13 @@ const Index = () => {
             return result.data;
           }
         }}
+        cascaderProps={{
+          fieldNames: {
+            label: 'name',
+            value: 'code',
+            children: 'children',
+          },
+        }}
       />
       <LFormItemCascader
         label="级联选择"
@@ -66,6 +40,13 @@ const Index = () => {
             return result.data;
           }
         }}
+        cascaderProps={{
+          fieldNames: {
+            label: 'name',
+            value: 'code',
+            children: 'children',
+          },
+        }}
       />
     </LForm>
   );