Skip to content

Commit ca475f7

Browse files
xiejay97xiejay97
committed
fix(ui:form): fix required type of 'optional'
1 parent 7f92f7e commit ca475f7

5 files changed

Lines changed: 36 additions & 24 deletions

File tree

‎packages/ui/src/components/form/Form.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface DFormContextData {
1414
formBreakpointMatchs: DBreakpoints[];
1515
formLabelWidth: number | string;
1616
formLabelColon: boolean;
17-
formCustomLabel: NonNullable<DFormProps['dCustomLabel']>;
17+
formRequiredType: NonNullable<DFormProps['dRequiredType']>;
1818
formLayout: NonNullable<DFormProps['dLayout']>;
1919
formInlineSpan: number | true;
2020
formFeedbackIcon: NonNullable<DFormProps['dFeedbackIcon']>;
@@ -25,7 +25,7 @@ export interface DFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
2525
dForm: DFormInstance;
2626
dLabelWidth?: number | string;
2727
dLabelColon?: boolean;
28-
dCustomLabel?: 'required' | 'optional' | 'hidden';
28+
dRequiredType?: 'required' | 'optional' | 'hidden';
2929
dLayout?: 'horizontal' | 'vertical' | 'inline';
3030
dInlineSpan?: number | true;
3131
dFeedbackIcon?:
@@ -37,7 +37,7 @@ export interface DFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
3737
pending?: React.ReactNode;
3838
};
3939
dSize?: 'smaller' | 'larger';
40-
dResponsiveProps?: Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' | 'dCustomLabel' | 'dLayout' | 'dInlineSpan'>>;
40+
dResponsiveProps?: Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' | 'dRequiredType' | 'dLayout' | 'dInlineSpan'>>;
4141
}
4242

4343
const { COMPONENT_NAME } = generateComponentMate('DForm');
@@ -46,7 +46,7 @@ export function DForm(props: DFormProps) {
4646
dForm,
4747
dLabelWidth,
4848
dLabelColon,
49-
dCustomLabel = 'required',
49+
dRequiredType = 'required',
5050
dLayout = 'horizontal',
5151
dInlineSpan = 6,
5252
dFeedbackIcon = false,
@@ -89,7 +89,7 @@ export function DForm(props: DFormProps) {
8989
formBreakpointMatchs: mediaMatch,
9090
formLabelWidth: dLabelWidth ?? 150,
9191
formLabelColon: dLabelColon ?? true,
92-
formCustomLabel: dCustomLabel,
92+
formRequiredType: dRequiredType,
9393
formLayout: dLayout,
9494
formInlineSpan: dInlineSpan,
9595
formFeedbackIcon: dFeedbackIcon,
@@ -104,7 +104,7 @@ export function DForm(props: DFormProps) {
104104
for (const breakpoint of mediaMatch) {
105105
if (breakpoint in dResponsiveProps) {
106106
mergeProps(breakpoint, 'formLabelWidth', 'dLabelWidth');
107-
mergeProps(breakpoint, 'formCustomLabel', 'dCustomLabel');
107+
mergeProps(breakpoint, 'formRequiredType', 'dRequiredType');
108108
mergeProps(breakpoint, 'formLayout', 'dLayout');
109109
mergeProps(breakpoint, 'formInlineSpan', 'dInlineSpan');
110110
break;
@@ -115,7 +115,7 @@ export function DForm(props: DFormProps) {
115115
contextValue.formLabelColon = dLabelColon ?? (contextValue.formLayout === 'vertical' ? false : true);
116116

117117
return contextValue;
118-
}, [dCustomLabel, dFeedbackIcon, dForm, dInlineSpan, dLabelColon, dLabelWidth, dLayout, dResponsiveProps, mediaMatch]);
118+
}, [dRequiredType, dFeedbackIcon, dForm, dInlineSpan, dLabelColon, dLabelWidth, dLayout, dResponsiveProps, mediaMatch]);
119119

120120
return (
121121
<DGeneralStateContext.Provider value={generalStateContextValue}>

‎packages/ui/src/components/form/FormItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function DFormItem(props: DFormItemProps) {
5151
formBreakpointMatchs,
5252
formLabelWidth,
5353
formLabelColon,
54-
formCustomLabel,
54+
formRequiredType,
5555
formInstance,
5656
formLayout,
5757
formInlineSpan,
@@ -346,17 +346,17 @@ export function DFormItem(props: DFormItemProps) {
346346
(dLabel ? (
347347
<div
348348
className={getClassName(`${dPrefix}form-item__label`, {
349-
[`${dPrefix}form-item__label--required`]: formCustomLabel === 'required' && dLabel && required,
350-
[`${dPrefix}form-item__label--colon`]: dLabel && formLabelColon,
349+
[`${dPrefix}form-item__label--required`]: formRequiredType === 'required' && required,
350+
[`${dPrefix}form-item__label--colon`]: formLabelColon,
351351
})}
352352
style={{ width: formLayout === 'vertical' ? undefined : labelWidth }}
353353
>
354354
<label htmlFor={id} onClick={handleLabelClick}>
355355
{dLabel}
356-
{(extraNode || formCustomLabel === 'optional') && (
356+
{(extraNode || (formRequiredType === 'optional' && !required)) && (
357357
<div className={`${dPrefix}form-item__extra`}>
358358
{extraNode}
359-
{formCustomLabel === 'optional' && <span>{t('Optional')}</span>}
359+
{formRequiredType === 'optional' && !required && <span>{t('Optional')}</span>}
360360
</div>
361361
)}
362362
</label>

‎packages/ui/src/components/form/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ Extend `React.FormHTMLAttributes<HTMLFormElement>`.
2121
| dForm | Bind the instance returned by [useForm](#useForm) | DFormInstance | - |
2222
| dLabelWidth | Label length | number \| string | - |
2323
| dLabelColon | Whether the label shows a colon | boolean | - |
24-
| dCustomLabel | Custom label | 'required' \| 'optional' \| 'hidden' | 'required' |
24+
| dRequiredType | Required style | 'required' \| 'optional' \| 'hidden' | 'required' |
2525
| dLayout | Form layout | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' |
2626
| dInlineSpan | Set the number of grids occupied by each form item in the row layout, a total of 12 grids | number \| true | 6 |
2727
| dFeedbackIcon | Set the verification result feedback icon | boolean \| `{ success?: React.ReactNode; warning?: React.ReactNode; error?: React.ReactNode; pending?: React.ReactNode; }` | false |
2828
| dSize | Set form size | 'smaller' \| 'larger' | - |
29-
| dResponsiveProps | Responsive layout | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dCustomLabel' \| 'dLayout' \| 'dInlineSpan'>>` | - |
29+
| dResponsiveProps | Responsive layout | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dRequiredType' \| 'dLayout' \| 'dInlineSpan'>>` | - |
3030
<!-- prettier-ignore-end -->
3131

3232
### DFormGroupProps

‎packages/ui/src/components/form/README.zh-Hant.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ title: 表单
2020
| dForm | 绑定 [useForm](#useForm) 返回的实例 | DFormInstance | - |
2121
| dLabelWidth | 标签长度 | number \| string | - |
2222
| dLabelColon | 标签是否显示冒号 | boolean | - |
23-
| dCustomLabel | 自定义标签 | 'required' \| 'optional' \| 'hidden' | 'required' |
23+
| dRequiredType | 必填样式 | 'required' \| 'optional' \| 'hidden' | 'required' |
2424
| dLayout | 表单布局 | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' |
2525
| dInlineSpan | 设置行内布局每个表单项占据的格数，共有 12 格 | number \| true | 6 |
2626
| dFeedbackIcon | 设置校验结果反馈图标 | boolean \| `{ success?: React.ReactNode; warning?: React.ReactNode; error?: React.ReactNode; pending?: React.ReactNode; }` | false |
2727
| dSize | 设置表单尺寸 | 'smaller' \| 'larger' | - |
28-
| dResponsiveProps | 响应式布局 | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dCustomLabel' \| 'dLayout' \| 'dInlineSpan'>>` | - |
28+
| dResponsiveProps | 响应式布局 | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dRequiredType' \| 'dLayout' \| 'dInlineSpan'>>` | - |
2929
<!-- prettier-ignore-end -->
3030

3131
### DFormGroupProps

‎packages/ui/src/components/form/demos/5.CustomLabel.md‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ title:
66

77
# en-US
88

9-
`DFormItem` supports `dLabelExtra` to configure additional information, `DForm` supports `dCustomLabel` global custom label.
9+
`DFormItem` supports `dLabelExtra` to configure extra information, `DForm` supports `dRequiredType` to set required styles globally.
1010

1111
# zh-Hant
1212

13-
`DFormItem` 支持 `dLabelExtra` 配置额外信息，`DForm` 支持 `dCustomLabel` 全局自定义标签。
13+
`DFormItem` 支持 `dLabelExtra` 配置额外信息，`DForm` 支持 `dRequiredType` 全局设置必填样式。
1414

1515
```tsx
1616
import { useState } from 'react';
@@ -20,12 +20,18 @@ import { DForm, DFormItem, FormControl, FormGroup, Validators, useForm, DInput,
2020
export default function Demo() {
2121
const [label, setLabel] = useState('required');
2222

23-
const formInstance = useForm(
23+
const formInstance1 = useForm(
2424
() =>
2525
new FormGroup({
26-
username1: new FormControl('', Validators.required),
26+
username1: new FormControl(''),
2727
username2: new FormControl('', Validators.required),
28-
username3: new FormControl('', Validators.required),
28+
})
29+
);
30+
const formInstance2 = useForm(
31+
() =>
32+
new FormGroup({
33+
username1: new FormControl(''),
34+
username2: new FormControl(''),
2935
})
3036
);
3137

@@ -39,19 +45,25 @@ export default function Demo() {
3945
))}
4046
</DRadioGroup>
4147
<br />
42-
<DForm dForm={formInstance} dLayout="vertical" dCustomLabel={label}>
48+
<DForm dForm={formInstance1} dLayout="vertical" dRequiredType={label}>
4349
<DFormItem dLabel="Username" dErrors="Please input your username!">
4450
<DInput dFormControlName="username1" placeholder="Username" />
4551
</DFormItem>
46-
<DFormItem dLabel="Username" dErrors="Please input your username!" dLabelExtra={[{ title: 'Some info!' }]}>
52+
<DFormItem dLabel="Username" dErrors="Please input your username!">
4753
<DInput dFormControlName="username2" placeholder="Username" />
4854
</DFormItem>
55+
</DForm>
56+
<br />
57+
<DForm dForm={formInstance2} dLayout="vertical" dRequiredType={label}>
58+
<DFormItem dLabel="Username" dErrors="Please input your username!" dLabelExtra={[{ title: 'Some info!' }]}>
59+
<DInput dFormControlName="username1" placeholder="Username" />
60+
</DFormItem>
4961
<DFormItem
5062
dLabel="Username"
5163
dErrors="Please input your username!"
5264
dLabelExtra={['Info', { title: 'Some info!', icon: <DIcon dName="search"></DIcon> }]}
5365
>
54-
<DInput dFormControlName="username3" placeholder="Username" />
66+
<DInput dFormControlName="username2" placeholder="Username" />
5567
</DFormItem>
5668
</DForm>
5769
</>

0 commit comments

Comments
 (0)