Skip to content

Commit

Permalink
fix: 修复LFrom表单在某些情况会触发两次onFinish
Browse files Browse the repository at this point in the history
  • Loading branch information
@llq0802
llq0802 committed Dec 21, 2023
1 parent 903c513 commit 579f3d7
Show file tree
Hide file tree
Showing 11 changed files with 41 additions and 53 deletions.
5 changes: 3 additions & 2 deletions src/Form/base/Submitter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,14 @@ const LFormSubmitter: FC<LFormSubmitterProps> = (props) => {
});
const submitClick = useMemoizedFn((e) => {
if (!submitPreventDefault) {
form?.submit();
if (!isEnterSubmit && isReady) form?.submit();
Promise.resolve().then(() => onSubmit?.(e));
}
submitButtonProps?.onClick?.(e);
});

const dom = useMemo(() => {
const htmlType = isEnterSubmit && isReady ? 'submit' : 'button';
const ret = [
// 默认设置为重置
<Button key="reset-lightd-form" {...resetButtonProps} onClick={resetClick}>
Expand All @@ -91,7 +92,7 @@ const LFormSubmitter: FC<LFormSubmitterProps> = (props) => {
<Button
key="submit-lightd-form"
type="primary"
htmlType={isEnterSubmit && isReady ? 'submit' : 'button'}
htmlType={htmlType}
{...submitButtonProps}
onClick={submitClick}
>
Expand Down
13 changes: 4 additions & 9 deletions src/Form/demos/Demo2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,14 @@ const Demo5 = () => {
const { dates, ...resetValues } = values;
const newValues = {
...resetValues,
startDate: values.dates[0],
endDate: values.dates[1],
startDate: dates[0],
endDate: dates[1],
};
return newValues;
}}
>
<LFormItemInput name="name2" required label="姓名" />
<LFormItemDatePicker
label="日期选择"
name="date2"
required
rangePicker
/>
<LFormItemInput name="name" required label="姓名" />
<LFormItemDatePicker label="日期选择" name="dates" required rangePicker />
</LForm>
</>
);
Expand Down
1 change: 0 additions & 1 deletion src/QueryForm/demos/Demo1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const Demo1 = () => {
return (
<>
<LQueryForm
name="query-form-1"
form={form}
onFinish={async (values) => {
console.log('onFinish-values ', values);
Expand Down
1 change: 0 additions & 1 deletion src/QueryForm/demos/Demo2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const Demo1 = () => {
<>
<LQueryForm
isSpace
name="query-form-2"
form={form}
onFinish={async (values) => {
console.log('onFinish-values ', values);
Expand Down
1 change: 0 additions & 1 deletion src/QueryForm/demos/Demo3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const Demo1 = () => {
return (
<>
<LQueryForm
name="query-form-3"
form={form}
showColsNumber={3}
onFinish={async (values) => {
Expand Down
1 change: 0 additions & 1 deletion src/QueryForm/demos/Demo4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const Demo1 = () => {
return (
<LQueryForm
layout="vertical"
name="query-form-4"
showColsNumber={2}
form={form}
onFinish={async (values) => {
Expand Down
1 change: 0 additions & 1 deletion src/QueryForm/demos/Demo5.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const Demo1 = () => {
return (
<>
<LQueryForm
name="query-form-5"
itemColProps={{
xs: 24,
sm: 24,
Expand Down
7 changes: 1 addition & 6 deletions src/QueryForm/demos/Demo7.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
LForm,
LFormItemDatePicker,
LFormItemInput,
LQueryForm,
} from 'lighting-design';
import { LForm, LFormItemDatePicker, LFormItemInput, LQueryForm } from 'lighting-design';

const Demo7 = () => {
const [form] = LForm.useForm();
Expand Down
4 changes: 2 additions & 2 deletions src/QueryForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ function LQueryForm(props: LQueryFormProps) {
<BaseForm
layout={layout}
submitter={
submitter === undefined || submitter
submitter === void 0 || submitter
? {
submitText: '查询',
...submitter,
Expand All @@ -143,7 +143,7 @@ function LQueryForm(props: LQueryFormProps) {
...defualtColSpan,
...itemColProps,
}
: {};
: emptyObject;

return (
<Row gutter={gutter}>
Expand Down
56 changes: 28 additions & 28 deletions src/Trigger/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,34 +58,34 @@ import { LTrigger } from 'lighting-design';

:::

| 参数 | 说明 | 类型 | 默认值 |
| :---------------: | :------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :---------------------------------: |
| mode | 显示的模式 | `'default' \| 'tag'` | `'default'` |
| width | 选择框宽度 | `number\|string` | `250` |
| fieldNames | 配置字段 label 字段名，value 字段的名 | `{ label: string; value: string; }` | `{ label: 'label',value: 'value' }` |
| size | 选择框大小 | `'small' \| 'middle'\|'large'` | `'middle'` |
| overlayArrow | 修改弹出层的箭头的显示状态以及修改箭头是否指向目标元素中心 | `boolean` \| `{ pointAtCenter: boolean }` | `false` |
| allowClear | 清除图标 | `boolean\| { clearIcon :ReactNode}` | `true` |
| placement | 弹出层弹出的位置 | `Placement` | `'bottomLeft'` |
| destroyOnHide | 弹出层关闭时是否销毁 `children` 组件 | `boolean` | `false` |
| bordered | 组件是否需要边框 | `boolean` | `true` |
| labelInValue | 是否把传入子组件 `value 的值 从 value.value 变为 { value: string, label: ReactNode }` 的格式 | `boolean` | `false` |
| disabled | 是否禁用 | `boolean` | `false` |
| placeholder | placeholder | `string` | `'请选择'` |
| overlayStyle | 弹出层样式 | `CSSProperties` | `-` |
| className | 组件类名 | `string` | `-` |
| overlayClassName | 弹出层的类名 | `string` | `-` |
| style | 组件样式 | `CSSProperties` | `-` |
| open | 受控, 是否打开弹出层 | `boolean` | `-` |
| suffixIcon | 自定义的选择框后缀图标 | `ReactNode` | `-` |
| defaultValue | 默认值 | 默认为`{ label: string\| string[]; value: string\| string[] }` 与`fieldNames`配置有关 | `-` |
| defaultOpen | 默认是否打开弹出层 | `boolean` | `false` |
| value | 受控值, 配合`onChange`使用 | 默认为`{ label: string\| string[]; value: string\| string[] }` 与`fieldNames`配置有关 | `-` |
| onOpenChange | 受控, 打开弹出层的的回调 | `function(open):void` | `-` |
| tagRender | 自定义渲染 tag `mode=tag`模式下生效 | `(props) => ReactElement \| JSXElementConstructor` | `-` |
| onChange | 受控, value 变化时，调用此函数 | `function(value)` | `-` |
| getPopupContainer | 控制渲染到的节点。默认渲染到 body 上 | `(triggerNode: HTMLElement) => HTMLElement` | `() => document.body` |
| children | children 组件会接受到 `open`，`setOpen`，`value`，`onChange` | `ReactElement` | `-` |
| 参数 | 说明 | 类型 | 默认值 |
| :---------------: | :---------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :---------------------------------: |
| mode | 显示的模式 | `'default' \| 'tag'` | `'default'` |
| width | 选择框宽度 | `number\|string` | `250` |
| fieldNames | 配置字段 label 字段名，value 字段的名 | `{ label: string; value: string; }` | `{ label: 'label',value: 'value' }` |
| size | 选择框大小 | `'small' \| 'middle'\|'large'` | `'middle'` |
| overlayArrow | 修改弹出层的箭头的显示状态以及修改箭头是否指向目标元素中心 | `boolean` \| `{ pointAtCenter: boolean }` | `false` |
| allowClear | 清除图标 | `boolean\| { clearIcon :ReactNode}` | `true` |
| placement | 弹出层弹出的位置 | `Placement` | `'bottomLeft'` |
| destroyOnHide | 弹出层关闭时是否销毁 `children` 组件 | `boolean` | `false` |
| bordered | 组件是否需要边框 | `boolean` | `true` |
| labelInValue | 是否把传入子组件 `value 的值 从 value.value 变为 { value: xxx, label: xxx }` 的格式 | `boolean` | `false` |
| disabled | 是否禁用 | `boolean` | `false` |
| placeholder | placeholder | `string` | `'请选择'` |
| overlayStyle | 弹出层样式 | `CSSProperties` | `-` |
| className | 组件类名 | `string` | `-` |
| overlayClassName | 弹出层的类名 | `string` | `-` |
| style | 组件样式 | `CSSProperties` | `-` |
| open | 受控, 是否打开弹出层 | `boolean` | `-` |
| suffixIcon | 自定义的选择框后缀图标 | `ReactNode` | `-` |
| defaultValue | 默认值 | 默认为`{ label: string\| string[]; value: string\| string[] }` 与`fieldNames`配置有关 | `-` |
| defaultOpen | 默认是否打开弹出层 | `boolean` | `false` |
| value | 受控值, 配合`onChange`使用 | 默认为`{ label: string\| string[]; value: string\| string[] }` 与`fieldNames`配置有关 | `-` |
| onOpenChange | 受控, 打开弹出层的的回调 | `function(open):void` | `-` |
| tagRender | 自定义渲染 tag `mode=tag`模式下生效 | `(props) => ReactElement \| JSXElementConstructor` | `-` |
| onChange | 受控, value 变化时，调用此函数 | `function(value)` | `-` |
| getPopupContainer | 控制渲染到的节点。默认渲染到 body 上 | `(triggerNode: HTMLElement) => HTMLElement` | `() => document.body` |
| children | children 组件会接受到 `open`，`setOpen`，`value`，`onChange` | `ReactElement` | `-` |

### Placement

Expand Down
4 changes: 3 additions & 1 deletion src/Trigger/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,8 @@ const LTrigger: React.FC<LTriggerProps> = (props) => {
/>
);

const value = state?.[fieldNames.label] === 0 ? 0 : state?.[fieldNames.label] || void 0;

return (
<Popover
{...popoverProps}
Expand Down Expand Up @@ -273,7 +275,7 @@ const LTrigger: React.FC<LTriggerProps> = (props) => {
tagRender={tagRender}
mode={outMode === 'default' ? void 0 : 'multiple'}
onChange={setState}
value={state?.[fieldNames.label]}
value={value}
notFoundContent={null}
options={void 0}
onInputKeyDown={(e) => {
Expand Down

0 comments on commit 579f3d7

Please sign in to comment.