custom feedback icons initial

components/form/FormItem/ItemHolder.tsx

@@ -49,6 +49,7 @@ export default function ItemHolder(props: ItemHolderProps) {
     validateStatus,
     meta,
     hasFeedback,
+    customFeedbackIcons,
     hidden,
     children,
     fieldId,
@@ -111,6 +112,13 @@ export default function ItemHolder(props: ItemHolderProps) {
   const formItemStatusContext = React.useMemo<FormItemStatusContextProps>(() => {
     let feedbackIcon: React.ReactNode;
     if (hasFeedback) {
+      const customIconNode =
+        mergedValidateStatus &&
+        (customFeedbackIcons
+          ? customFeedbackIcons({ status: mergedValidateStatus, errors, warnings })?.[
+              mergedValidateStatus
+            ]
+          : null);
       const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
       feedbackIcon = IconNode ? (
         <span
@@ -119,7 +127,7 @@ export default function ItemHolder(props: ItemHolderProps) {
             `${itemPrefixCls}-feedback-icon-${mergedValidateStatus}`,
           )}
         >
-          <IconNode />
+          {customIconNode || <IconNode />}
         </span>
       ) : null;
     }

components/form/FormItem/index.tsx

@@ -35,6 +35,12 @@ type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactN
 type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
 type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 
+type CustomFeedbackIconsType = (itemStatus: {
+  status: ValidateStatus;
+  errors?: React.ReactNode[];
+  warnings?: React.ReactNode[];
+}) => { [key in ValidateStatus]?: React.ReactNode };
+
 interface MemoInputProps {
   value: any;
   update: any;
@@ -63,6 +69,7 @@ export interface FormItemProps<Values = any>
   children?: ChildrenType<Values>;
   id?: string;
   hasFeedback?: boolean;
+  customFeedbackIcons?: CustomFeedbackIconsType;
   validateStatus?: ValidateStatus;
   required?: boolean;
   hidden?: boolean;

components/form/demo/custom-feedback-icons.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { uniqueId } from 'lodash';
+
+import { createStyles, css } from 'antd-style';
+import { AlertFilled } from '@ant-design/icons';
+import { Button, Form, Input, Tooltip } from 'antd';
+
+const useStyle = createStyles(() => ({
+  'custom-feedback-icons': css`
+    .ant-form-item-feedback-icon {
+      pointer-events: all;
+    }
+  `,
+}));
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+  const { styles } = useStyle();
+
+  return (
+    <Form form={form} style={{ maxWidth: 600 }}>
+      <Form.Item
+        name="custom-feedback-test-item"
+        label="Test"
+        className={styles['custom-feedback-icons']}
+        rules={[{ required: true, type: 'email' }, { min: 10 }]}
+        help=""
+        hasFeedback
+        customFeedbackIcons={({ errors }) => ({
+          error: (
+            <Tooltip
+              key="tooltipKey"
+              title={errors?.map((error) => <div key={uniqueId()}>{error}</div>)}
+              color="red"
+            >
+              <AlertFilled />
+            </Tooltip>
+          ),
+        })}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item>
+        <Button htmlType="submit">Submit</Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;

components/form/demo/custom-feedback-items.md

@@ -0,0 +1,5 @@
+## zh-CN
+
+## en-US
+
+Custom feedback items can be used while hasFeedback prop is enabled.

components/form/index.en-US.md

@@ -52,6 +52,7 @@ High performance Form component with data scope management. Including data colle
 <code src="./demo/label-debug.tsx" debug>label ellipsis</code>
 <code src="./demo/col-24-debug.tsx" debug>Test col 24 usage</code>
 <code src="./demo/ref-item.tsx" debug>Ref item</code>
+<code src="./demo/custom-feedback-icons.tsx" debug>Custom feedback icons</code>
 
 ## API
 
@@ -120,6 +121,7 @@ Form field component for data bidirectional binding, validation, layout, and so
 | getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any\[]) => any | - |  |
 | getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false |  |
+| customFeedbackIcons | Used with `hasFeedback`, this option replaces the feedback icons with the given ones. | ({status:ValidateStatus, errors: ReactNode, warnings: ReactNode}) => [ValidateStatus]ReactNode | - | 5.7.3 |
 | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - |  |
 | hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | 4.4.0 |
 | htmlFor | Set sub label `htmlFor` | string | - |  |

components/form/index.zh-CN.md

@@ -53,6 +53,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/label-debug.tsx" debug>测试 label 省略</code>
 <code src="./demo/col-24-debug.tsx" debug>测试特殊 col 24 用法</code>
 <code src="./demo/ref-item.tsx" debug>引用字段</code>
+<code src="./demo/custom-feedback-icons.tsx" debug>Custom feedback icons</code>
 
 ## API
 
@@ -121,6 +122,7 @@ const validateMessages = {
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any\[]) => any | - |  |
 | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
 | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
+| customFeedbackIcons | Used with `hasFeedback`, this option replaces the feedback icons with the given ones. | ({status:ValidateStatus, errors: ReactNode, warnings: ReactNode}) => [ValidateStatus]ReactNode | - | 5.7.3 |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - |  |
 | hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
 | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |  |