From 39d555903c81207d5d2bf34a2a5d1942152dcee0 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 26 Apr 2024 16:28:38 +0800
Subject: [PATCH] feat(form): add showValidateMessage api (#2816)

---
 .changeset/stupid-cougars-attack.md           |  5 +++
 .changeset/tasty-spies-invite.md              |  5 +++
 packages/ui/form/src/Form.tsx                 | 12 +++++--
 packages/ui/form/src/FormLabel.tsx            | 10 +++++-
 packages/ui/form/src/context.ts               |  1 +
 .../ui/form/stories/get-values.stories.tsx    |  2 +-
 packages/ui/form/stories/index.stories.tsx    |  1 +
 .../form/stories/validate-message.stories.tsx | 34 +++++++++++++++++++
 8 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/stupid-cougars-attack.md
 create mode 100644 .changeset/tasty-spies-invite.md
 create mode 100644 packages/ui/form/stories/validate-message.stories.tsx

diff --git a/.changeset/stupid-cougars-attack.md b/.changeset/stupid-cougars-attack.md
new file mode 100644
index 000000000..4dd0e78a1
--- /dev/null
+++ b/.changeset/stupid-cougars-attack.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/form": minor
+---
+
+feat: add showValidateMessage api
diff --git a/.changeset/tasty-spies-invite.md b/.changeset/tasty-spies-invite.md
new file mode 100644
index 000000000..678d419a3
--- /dev/null
+++ b/.changeset/tasty-spies-invite.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(form): add showValidateMessage api
diff --git a/packages/ui/form/src/Form.tsx b/packages/ui/form/src/Form.tsx
index 1975ecbfe..0f125927c 100644
--- a/packages/ui/form/src/Form.tsx
+++ b/packages/ui/form/src/Form.tsx
@@ -29,6 +29,7 @@ export const Form = forwardRef<HTMLFormElement | null, FormProps>(
       contentPosition = 'center',
       showRequiredOnValidateRequired = false,
       showColon = true,
+      showValidateMessage = true,
       ...rest
     },
     ref
@@ -61,17 +62,19 @@ export const Form = forwardRef<HTMLFormElement | null, FormProps>(
         showColon,
         contentPosition,
         showRequiredOnValidateRequired,
+        showValidateMessage,
         ...formContext,
         prefixCls,
       }
     }, [
       labelWidth,
-      formContext,
       labelPlacement,
       showColon,
-      prefixCls,
       contentPosition,
       showRequiredOnValidateRequired,
+      showValidateMessage,
+      formContext,
+      prefixCls,
     ])
 
     const cls = cx(prefixCls, className, placement && `${prefixCls}--placement-${placement}`)
@@ -118,6 +121,11 @@ export interface FormProps<Values = Record<string, any>>
    * FormItem 开启 filed 的 required 校验时，展示红色星号
    */
   showRequiredOnValidateRequired?: boolean
+  /**
+   * 是否显示校验提示
+   * @default true
+   */
+  showValidateMessage?: boolean
 }
 
 if (__DEV__) {
diff --git a/packages/ui/form/src/FormLabel.tsx b/packages/ui/form/src/FormLabel.tsx
index 704741da4..3489c0dd2 100644
--- a/packages/ui/form/src/FormLabel.tsx
+++ b/packages/ui/form/src/FormLabel.tsx
@@ -16,6 +16,7 @@ export const FormLabel = forwardRef<HTMLDivElement | null, FormLabelProps>((prop
     labelPlacement: labelPlacementContext,
     showColon: showColonContext,
     contentPosition: contentPositionContext,
+    showValidateMessage: showValidateMessageContext,
   } = useFormContext()
 
   const {
@@ -32,6 +33,7 @@ export const FormLabel = forwardRef<HTMLDivElement | null, FormLabelProps>((prop
     contentPosition = contentPositionContext,
     labelPlacement = labelPlacementContext,
     formMessage,
+    showValidateMessage: showValidateMessageProp = showValidateMessageContext,
     ...rest
   } = props
 
@@ -92,7 +94,9 @@ export const FormLabel = forwardRef<HTMLDivElement | null, FormLabelProps>((prop
           {children}
         </div>
       </div>
-      <div style={{ paddingLeft: `calc(100% - ${controlWidth})` }}>{formMessage}</div>
+      {showValidateMessageProp && (
+        <div style={{ paddingLeft: `calc(100% - ${controlWidth})` }}>{formMessage}</div>
+      )}
     </div>
   )
 })
@@ -126,6 +130,10 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
    * 提示信息
    */
   formMessage?: ReactNode
+  /**
+   * 是否显示校验提示。优先级高于 Form 设置的 showValidateMessage
+   */
+  showValidateMessage?: boolean
 }
 
 if (__DEV__) {
diff --git a/packages/ui/form/src/context.ts b/packages/ui/form/src/context.ts
index 0803192ab..e1aff7fa7 100644
--- a/packages/ui/form/src/context.ts
+++ b/packages/ui/form/src/context.ts
@@ -8,6 +8,7 @@ export interface FormContextProps extends UseFormReturn {
   contentPosition: 'top' | 'center' | 'bottom'
   showColon: boolean
   showRequiredOnValidateRequired: boolean
+  showValidateMessage: boolean
   prefixCls: string
 }
 
diff --git a/packages/ui/form/stories/get-values.stories.tsx b/packages/ui/form/stories/get-values.stories.tsx
index f087fa8e7..6252945b5 100644
--- a/packages/ui/form/stories/get-values.stories.tsx
+++ b/packages/ui/form/stories/get-values.stories.tsx
@@ -51,7 +51,7 @@ export const GetValues = () => {
           <FormItem required={true} label="姓名" field="name" valueType="string">
             <Input placeholder="请输入" style={{ width: 200 }} />
           </FormItem>
-          <FormItem valueType={null} field={null}>
+          <FormItem valueType={null} field={null} showValidateMessage={false}>
             <Button
               type="primary"
               onClick={() => {
diff --git a/packages/ui/form/stories/index.stories.tsx b/packages/ui/form/stories/index.stories.tsx
index 1cc7f7ec7..7f07a03bb 100644
--- a/packages/ui/form/stories/index.stories.tsx
+++ b/packages/ui/form/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './label-placement.stories'
 export * from './placement.stories'
 export * from './validate.stories'
 export * from './validate-field.stories'
+export * from './validate-message.stories'
 export * from './set-values.stories'
 export * from './get-values.stories'
 export * from './render.stories'
diff --git a/packages/ui/form/stories/validate-message.stories.tsx b/packages/ui/form/stories/validate-message.stories.tsx
new file mode 100644
index 000000000..bb544a521
--- /dev/null
+++ b/packages/ui/form/stories/validate-message.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Form from '../src'
+import Input from '@hi-ui/input'
+import Button from '@hi-ui/button'
+import Card from '@hi-ui/card'
+
+/**
+ * @title 是否显示校验提示
+ * @desc 适用于无需展示校验提示的场景
+ */
+export const ValidateMessage = () => {
+  const FormItem = Form.Item
+
+  return (
+    <>
+      <h1>ValidateMessage</h1>
+      <div className="form-validate-message__wrap" style={{ width: 900 }}>
+        <Card>
+          <Form placement="horizontal" labelPlacement="right" showValidateMessage={false}>
+            <FormItem label="商品ID" labelWidth="100" valueType="string">
+              <Input placeholder={'请输入'} />
+            </FormItem>
+            <FormItem label="商品分类" labelWidth="100" valueType="string">
+              <Input placeholder={'请输入'} />
+            </FormItem>
+            <FormItem showValidateMessage={false}>
+              <Button>查询</Button>
+            </FormItem>
+          </Form>
+        </Card>
+      </div>
+    </>
+  )
+}