fix: fix requiredMark hidden (#3796)

alibaba · Apr 20, 2023 · 0d18711 · 0d18711
1 parent 39fac2b
commit 0d18711
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -421,6 +421,27 @@ export default () => {
               x-decorator="FormItem"
               x-component="Input"
             />
+            <SchemaField.String
+              default="When the field is not editable, always hide the required/optional flag"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+            <SchemaField.String
+              title="I am Required"
+              required
+              default="Not editable"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+            <SchemaField.String
+              title="I am Optional"
+              default="Not editable"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
           </SchemaField>
         </FormLayout>
       </FormProvider>

diff --git a/packages/antd/docs/components/FormItem.zh-CN.md b/packages/antd/docs/components/FormItem.zh-CN.md
@@ -422,6 +422,27 @@ export default () => {
               x-decorator="FormItem"
               x-component="Input"
             />
+            <SchemaField.String
+              default="字段不可编辑时，始终隐藏必填/选填标识"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+            <SchemaField.String
+              title="我是必填项"
+              required
+              default="不可编辑"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
+            <SchemaField.String
+              title="我是选填项"
+              default="不可编辑"
+              x-editable={false}
+              x-decorator="FormItem"
+              x-component="Input"
+            />
           </SchemaField>
         </FormLayout>
       </FormProvider>

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -45,6 +45,7 @@ export interface IFormItemProps {
   enableOutlineFeedback?: boolean
   getPopupContainer?: (node: HTMLElement) => HTMLElement
   asterisk?: boolean
+  optionalMarkHidden?: boolean
   gridSpan?: number
   bordered?: boolean
 }
@@ -76,6 +77,7 @@ const useFormItemLayout = (props: IFormItemProps) => {
     inset: props.inset ?? layout.inset,
     asterisk: props.asterisk,
     requiredMark: layout.requiredMark,
+    optionalMarkHidden: props.optionalMarkHidden,
     bordered: props.bordered ?? layout.bordered,
     feedbackIcon: props.feedbackIcon,
     feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? 'loose',
@@ -144,6 +146,7 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = ({
     addonAfter,
     asterisk,
     requiredMark = true,
+    optionalMarkHidden = false,
     feedbackStatus,
     extra,
     feedbackText,
@@ -235,7 +238,7 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = ({
             <span className={`${prefixCls}-asterisk`}>{'*'}</span>
           )}
           <label>{label}</label>
-          {!asterisk && requiredMark === 'optional' && (
+          {!asterisk && requiredMark === 'optional' && !optionalMarkHidden && (
             <span className={`${prefixCls}-optional`}>
               {locale?.Form?.optional}
             </span>
@@ -429,6 +432,8 @@ export const FormItem: ComposeFormItem = connect(
       feedbackStatus: takeFeedbackStatus(),
       feedbackText: takeMessage(),
       asterisk: takeAsterisk(),
+      optionalMarkHidden:
+        field.pattern === 'readPretty' && !('asterisk' in props),
       extra: props.extra || field.description,
     }
   })