fix(ui:form): fix required type of 'optional'

DevCloudFE · Jan 23, 2022 · ca475f7 · ca475f7
1 parent 7f92f7e
commit ca475f7
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 24 deletions.
diff --git a/packages/ui/src/components/form/Form.tsx b/packages/ui/src/components/form/Form.tsx
@@ -14,7 +14,7 @@ export interface DFormContextData {
   formBreakpointMatchs: DBreakpoints[];
   formLabelWidth: number | string;
   formLabelColon: boolean;
-  formCustomLabel: NonNullable<DFormProps['dCustomLabel']>;
+  formRequiredType: NonNullable<DFormProps['dRequiredType']>;
   formLayout: NonNullable<DFormProps['dLayout']>;
   formInlineSpan: number | true;
   formFeedbackIcon: NonNullable<DFormProps['dFeedbackIcon']>;
@@ -25,7 +25,7 @@ export interface DFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   dForm: DFormInstance;
   dLabelWidth?: number | string;
   dLabelColon?: boolean;
-  dCustomLabel?: 'required' | 'optional' | 'hidden';
+  dRequiredType?: 'required' | 'optional' | 'hidden';
   dLayout?: 'horizontal' | 'vertical' | 'inline';
   dInlineSpan?: number | true;
   dFeedbackIcon?:
@@ -37,7 +37,7 @@ export interface DFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
         pending?: React.ReactNode;
       };
   dSize?: 'smaller' | 'larger';
-  dResponsiveProps?: Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' | 'dCustomLabel' | 'dLayout' | 'dInlineSpan'>>;
+  dResponsiveProps?: Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' | 'dRequiredType' | 'dLayout' | 'dInlineSpan'>>;
 }
 
 const { COMPONENT_NAME } = generateComponentMate('DForm');
@@ -46,7 +46,7 @@ export function DForm(props: DFormProps) {
     dForm,
     dLabelWidth,
     dLabelColon,
-    dCustomLabel = 'required',
+    dRequiredType = 'required',
     dLayout = 'horizontal',
     dInlineSpan = 6,
     dFeedbackIcon = false,
@@ -89,7 +89,7 @@ export function DForm(props: DFormProps) {
       formBreakpointMatchs: mediaMatch,
       formLabelWidth: dLabelWidth ?? 150,
       formLabelColon: dLabelColon ?? true,
-      formCustomLabel: dCustomLabel,
+      formRequiredType: dRequiredType,
       formLayout: dLayout,
       formInlineSpan: dInlineSpan,
       formFeedbackIcon: dFeedbackIcon,
@@ -104,7 +104,7 @@ export function DForm(props: DFormProps) {
       for (const breakpoint of mediaMatch) {
         if (breakpoint in dResponsiveProps) {
           mergeProps(breakpoint, 'formLabelWidth', 'dLabelWidth');
-          mergeProps(breakpoint, 'formCustomLabel', 'dCustomLabel');
+          mergeProps(breakpoint, 'formRequiredType', 'dRequiredType');
           mergeProps(breakpoint, 'formLayout', 'dLayout');
           mergeProps(breakpoint, 'formInlineSpan', 'dInlineSpan');
           break;
@@ -115,7 +115,7 @@ export function DForm(props: DFormProps) {
     contextValue.formLabelColon = dLabelColon ?? (contextValue.formLayout === 'vertical' ? false : true);
 
     return contextValue;
-  }, [dCustomLabel, dFeedbackIcon, dForm, dInlineSpan, dLabelColon, dLabelWidth, dLayout, dResponsiveProps, mediaMatch]);
+  }, [dRequiredType, dFeedbackIcon, dForm, dInlineSpan, dLabelColon, dLabelWidth, dLayout, dResponsiveProps, mediaMatch]);
 
   return (
     <DGeneralStateContext.Provider value={generalStateContextValue}>

diff --git a/packages/ui/src/components/form/FormItem.tsx b/packages/ui/src/components/form/FormItem.tsx
@@ -51,7 +51,7 @@ export function DFormItem(props: DFormItemProps) {
     formBreakpointMatchs,
     formLabelWidth,
     formLabelColon,
-    formCustomLabel,
+    formRequiredType,
     formInstance,
     formLayout,
     formInlineSpan,
@@ -346,17 +346,17 @@ export function DFormItem(props: DFormItemProps) {
             (dLabel ? (
               <div
                 className={getClassName(`${dPrefix}form-item__label`, {
-                  [`${dPrefix}form-item__label--required`]: formCustomLabel === 'required' && dLabel && required,
-                  [`${dPrefix}form-item__label--colon`]: dLabel && formLabelColon,
+                  [`${dPrefix}form-item__label--required`]: formRequiredType === 'required' && required,
+                  [`${dPrefix}form-item__label--colon`]: formLabelColon,
                 })}
                 style={{ width: formLayout === 'vertical' ? undefined : labelWidth }}
               >
                 <label htmlFor={id} onClick={handleLabelClick}>
                   {dLabel}
-                  {(extraNode || formCustomLabel === 'optional') && (
+                  {(extraNode || (formRequiredType === 'optional' && !required)) && (
                     <div className={`${dPrefix}form-item__extra`}>
                       {extraNode}
-                      {formCustomLabel === 'optional' && <span>{t('Optional')}</span>}
+                      {formRequiredType === 'optional' && !required && <span>{t('Optional')}</span>}
                     </div>
                   )}
                 </label>

diff --git a/packages/ui/src/components/form/README.md b/packages/ui/src/components/form/README.md
@@ -21,12 +21,12 @@ Extend `React.FormHTMLAttributes<HTMLFormElement>`.
 | dForm | Bind the instance returned by [useForm](#useForm) | DFormInstance | - |
 | dLabelWidth | Label length | number \| string | - |
 | dLabelColon | Whether the label shows a colon | boolean | - |
-| dCustomLabel | Custom label | 'required' \| 'optional' \| 'hidden' | 'required' |
+| dRequiredType | Required style | 'required' \| 'optional' \| 'hidden' | 'required' |
 | dLayout | Form layout | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' |
 | dInlineSpan | Set the number of grids occupied by each form item in the row layout, a total of 12 grids | number \| true | 6 |
 | dFeedbackIcon | Set the verification result feedback icon | boolean \| `{ success?: React.ReactNode; warning?: React.ReactNode; error?: React.ReactNode; pending?: React.ReactNode; }` | false |
 | dSize | Set form size | 'smaller' \| 'larger' | - |
-| dResponsiveProps | Responsive layout | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dCustomLabel' \| 'dLayout' \| 'dInlineSpan'>>` | - |
+| dResponsiveProps | Responsive layout | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dRequiredType' \| 'dLayout' \| 'dInlineSpan'>>` | - |
 <!-- prettier-ignore-end -->
 
 ### DFormGroupProps

diff --git a/packages/ui/src/components/form/README.zh-Hant.md b/packages/ui/src/components/form/README.zh-Hant.md
@@ -20,12 +20,12 @@ title: 表单
 | dForm | 绑定 [useForm](#useForm) 返回的实例 | DFormInstance | - |
 | dLabelWidth | 标签长度 | number \| string | - |
 | dLabelColon | 标签是否显示冒号 | boolean | - |
-| dCustomLabel | 自定义标签 | 'required' \| 'optional' \| 'hidden' | 'required' |
+| dRequiredType | 必填样式 | 'required' \| 'optional' \| 'hidden' | 'required' |
 | dLayout | 表单布局 | 'horizontal' \| 'vertical' \| 'inline' | 'horizontal' |
 | dInlineSpan | 设置行内布局每个表单项占据的格数，共有 12 格 | number \| true | 6 |
 | dFeedbackIcon | 设置校验结果反馈图标 | boolean \| `{ success?: React.ReactNode; warning?: React.ReactNode; error?: React.ReactNode; pending?: React.ReactNode; }` | false |
 | dSize | 设置表单尺寸 | 'smaller' \| 'larger' | - |
-| dResponsiveProps | 响应式布局 | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dCustomLabel' \| 'dLayout' \| 'dInlineSpan'>>` | - |
+| dResponsiveProps | 响应式布局 | `Record<DBreakpoints, Pick<DFormProps, 'dLabelWidth' \| 'dRequiredType' \| 'dLayout' \| 'dInlineSpan'>>` | - |
 <!-- prettier-ignore-end -->
 
 ### DFormGroupProps

diff --git a/packages/ui/src/components/form/demos/5.CustomLabel.md b/packages/ui/src/components/form/demos/5.CustomLabel.md
@@ -6,11 +6,11 @@ title:
 
 # en-US
 
-`DFormItem` supports `dLabelExtra` to configure additional information, `DForm` supports `dCustomLabel` global custom label.
+`DFormItem` supports `dLabelExtra` to configure extra information, `DForm` supports `dRequiredType` to set required styles globally.
 
 # zh-Hant
 
-`DFormItem` 支持 `dLabelExtra` 配置额外信息，`DForm` 支持 `dCustomLabel` 全局自定义标签。
+`DFormItem` 支持 `dLabelExtra` 配置额外信息，`DForm` 支持 `dRequiredType` 全局设置必填样式。
 
 ```tsx
 import { useState } from 'react';
@@ -20,12 +20,18 @@ import { DForm, DFormItem, FormControl, FormGroup, Validators, useForm, DInput,
 export default function Demo() {
   const [label, setLabel] = useState('required');
 
-  const formInstance = useForm(
+  const formInstance1 = useForm(
     () =>
       new FormGroup({
-        username1: new FormControl('', Validators.required),
+        username1: new FormControl(''),
         username2: new FormControl('', Validators.required),
-        username3: new FormControl('', Validators.required),
+      })
+  );
+  const formInstance2 = useForm(
+    () =>
+      new FormGroup({
+        username1: new FormControl(''),
+        username2: new FormControl(''),
       })
   );
 
@@ -39,19 +45,25 @@ export default function Demo() {
         ))}
       </DRadioGroup>
       <br />
-      <DForm dForm={formInstance} dLayout="vertical" dCustomLabel={label}>
+      <DForm dForm={formInstance1} dLayout="vertical" dRequiredType={label}>
         <DFormItem dLabel="Username" dErrors="Please input your username!">
           <DInput dFormControlName="username1" placeholder="Username" />
         </DFormItem>
-        <DFormItem dLabel="Username" dErrors="Please input your username!" dLabelExtra={[{ title: 'Some info!' }]}>
+        <DFormItem dLabel="Username" dErrors="Please input your username!">
           <DInput dFormControlName="username2" placeholder="Username" />
         </DFormItem>
+      </DForm>
+      <br />
+      <DForm dForm={formInstance2} dLayout="vertical" dRequiredType={label}>
+        <DFormItem dLabel="Username" dErrors="Please input your username!" dLabelExtra={[{ title: 'Some info!' }]}>
+          <DInput dFormControlName="username1" placeholder="Username" />
+        </DFormItem>
         <DFormItem
           dLabel="Username"
           dErrors="Please input your username!"
           dLabelExtra={['Info', { title: 'Some info!', icon: <DIcon dName="search"></DIcon> }]}
         >
-          <DInput dFormControlName="username3" placeholder="Username" />
+          <DInput dFormControlName="username2" placeholder="Username" />
         </DFormItem>
       </DForm>
     </>