fix(form): InlineErrorFormItemPopover support radio and checkbox

close #4997
ant-design · Jul 12, 2023 · 8c6ede6 · 8c6ede6
1 parent 854ce2b
commit 8c6ede6
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 63 deletions.
diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -1,5 +1,5 @@
 import { useStyle } from '@ant-design/pro-utils';
-import { Checkbox, ConfigProvider, Space, Spin } from 'antd';
+import { Checkbox, ConfigProvider, Form, Space, Spin } from 'antd';
 import type { CheckboxGroupProps } from 'antd/lib/checkbox';
 import classNames from 'classnames';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
@@ -26,11 +26,23 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
 ) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const layoutClassName = getPrefixCls('pro-field-checkbox');
+  const status = Form.Item?.useStatus?.();
   const [loading, options, fetchData] = useFieldFetchData(rest);
+
   // css
   const { wrapSSR, hashId } = useStyle('Checkbox', (token) => {
     return {
       [`.${layoutClassName}`]: {
+        '&-error': {
+          span: {
+            color: token.colorError,
+          },
+        },
+        '&-warning': {
+          span: {
+            color: token.colorWarning,
+          },
+        },
         '&-vertical': {
           //ant design 5
           [`&${token.antCls}-checkbox-group`]: {
@@ -92,6 +104,10 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
           rest.fieldProps?.className,
           hashId,
           `${layoutClassName}-${layout}`,
+          {
+            [`${layoutClassName}-error`]: status?.status === 'error',
+            [`${layoutClassName}-warning`]: status?.status === 'warning',
+          },
         )}
         options={options}
       />,

diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx
@@ -1,6 +1,6 @@
 import { useStyle } from '@ant-design/pro-utils';
 import type { RadioGroupProps } from 'antd';
-import { ConfigProvider, Radio, Spin } from 'antd';
+import { ConfigProvider, Form, Radio, Spin } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import type { ProFieldFC } from '../../index';
@@ -30,6 +30,7 @@ const FieldRadio: ProFieldFC<GroupProps> = (
   const layoutClassName = getPrefixCls('pro-field-radio');
   const [loading, options, fetchData] = useFieldFetchData(rest);
   const radioRef = useRef();
+  const status = Form.Item?.useStatus?.();
 
   useImperativeHandle(
     ref,
@@ -43,6 +44,16 @@ const FieldRadio: ProFieldFC<GroupProps> = (
   // css
   const { wrapSSR, hashId } = useStyle('FieldRadioRadio', (token) => {
     return {
+      [`.${layoutClassName}-error`]: {
+        span: {
+          color: token.colorError,
+        },
+      },
+      [`.${layoutClassName}-warning`]: {
+        span: {
+          color: token.colorWarning,
+        },
+      },
       [`.${layoutClassName}-vertical`]: {
         [`${token.antCls}-radio-wrapper`]: {
           display: 'flex',
@@ -85,6 +96,10 @@ const FieldRadio: ProFieldFC<GroupProps> = (
         {...rest.fieldProps}
         className={classNames(
           rest.fieldProps?.className,
+          {
+            [`${layoutClassName}-error`]: status?.status === 'error',
+            [`${layoutClassName}-warning`]: status?.status === 'warning',
+          },
           hashId,
           `${layoutClassName}-${rest.fieldProps.layout || 'horizontal'}`,
         )}

diff --git a/packages/provider/package.json b/packages/provider/package.json
@@ -33,7 +33,7 @@
     "> 1%"
   ],
   "dependencies": {
-    "@ant-design/cssinjs": "^1.11.0",
+    "@ant-design/cssinjs": "^1.11.1",
     "@babel/runtime": "^7.18.0",
     "@ctrl/tinycolor": "^3.4.0",
     "rc-util": "^5.0.1",

diff --git a/packages/provider/src/index.tsx b/packages/provider/src/index.tsx
@@ -284,6 +284,14 @@ const ConfigProviderContainer: React.FC<{
     },
   );
 
+  const hashed = useMemo(() => {
+    if (props.hashed === false) {
+      return false;
+    }
+    if (proProvide.hashed === false) return false;
+    return true;
+  }, [proProvide.hashed, props.hashed]);
+
   const hashId = useMemo(() => {
     if (props.hashed === false) {
       return '';
@@ -302,11 +310,9 @@ const ConfigProviderContainer: React.FC<{
     const themeConfig = {
       ...restConfig.theme,
       hashId: hashId,
-      hashed:
-        props.hashed !== false &&
-        proProvide.hashed !== false &&
-        isNeedOpenHash(),
+      hashed: hashed && isNeedOpenHash(),
     };
+
     return (
       <AntdConfigProvider {...restConfig} theme={{ ...themeConfig }}>
         <ProConfigContext.Provider
@@ -315,7 +321,7 @@ const ConfigProviderContainer: React.FC<{
             valueTypeMap: valueTypeMap || proProvideValue?.valueTypeMap,
             token,
             theme: tokenContext.theme as unknown as Theme<any, any>,
-            hashed: props.hashed,
+            hashed,
             hashId,
           }}
         >

diff --git a/packages/utils/src/components/InlineErrorFormItem/index.tsx b/packages/utils/src/components/InlineErrorFormItem/index.tsx
@@ -1,4 +1,5 @@
 import { LoadingOutlined } from '@ant-design/icons';
+import { useToken } from '@ant-design/pro-provider';
 import type { FormItemProps, PopoverProps } from 'antd';
 import { ConfigProvider, Form, Popover } from 'antd';
 import type { NamePath } from 'rc-field-form/lib/interface';
@@ -38,8 +39,8 @@ const InlineErrorFormItemPopover: React.FC<{
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls();
 
+  const token = useToken();
   const { wrapSSR, hashId } = useStyle(`${prefixCls}-form-item-with-help`);
-
   useEffect(() => {
     if (inputProps.validateStatus !== 'validating') {
       setErrorList(inputProps.errors);
@@ -59,20 +60,37 @@ const InlineErrorFormItemPopover: React.FC<{
   return (
     <Popover
       key="popover"
-      trigger={popoverProps?.trigger || 'focus'}
-      placement={popoverProps?.placement || 'topRight'}
+      trigger={popoverProps?.trigger || ['click']}
+      placement={popoverProps?.placement || 'topLeft'}
       {...popoverOpenProps}
       getPopupContainer={popoverProps?.getPopupContainer}
       getTooltipContainer={popoverProps?.getTooltipContainer}
       content={wrapSSR(
-        <div className={`${prefixCls}-form-item-with-help ${hashId}`.trim()}>
-          {loading ? <LoadingOutlined /> : null}
-          {errorList}
+        <div
+          className={`${prefixCls}-form-item ${hashId} ${token.hashId}`.trim()}
+          style={{
+            margin: 0,
+            padding: 0,
+          }}
+        >
+          <div
+            className={`${prefixCls}-form-item-with-help ${hashId} ${token.hashId}`.trim()}
+          >
+            {loading ? <LoadingOutlined /> : null}
+            {errorList}
+          </div>
         </div>,
       )}
       {...popoverProps}
     >
-      <div>
+      <div
+        style={{
+          width: 'max-content',
+          maxWidth: '100%',
+          padding: 4,
+        }}
+        tabIndex={-1}
+      >
         {input}
         {extra}
       </div>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml