fix: form missing motion validate (#38962)

* fix: form missing motion validate * test: Update snapshot
ant-design · Nov 24, 2022 · 5037708 · 5037708
1 parent a7ee336
commit 5037708
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 85 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -15518,12 +15518,11 @@ exports[`ConfigProvider components Form configProvider 1`] = `
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
+              class="config-form-show-help-item-appear config-form-show-help-item-appear-start config-form-show-help-item config-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15574,12 +15573,11 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
+              class="config-form-show-help-item-appear config-form-show-help-item-appear-start config-form-show-help-item config-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15629,12 +15627,11 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
+              class="config-form-show-help-item-appear config-form-show-help-item-appear-start config-form-show-help-item config-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15684,12 +15681,11 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
+              class="config-form-show-help-item-appear config-form-show-help-item-appear-start config-form-show-help-item config-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15739,12 +15735,11 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
+              class="ant-form-show-help-item-appear ant-form-show-help-item-appear-start ant-form-show-help-item ant-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15794,12 +15789,11 @@ exports[`ConfigProvider components Form normal 1`] = `
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
+              class="ant-form-show-help-item-appear ant-form-show-help-item-appear-start ant-form-show-help-item ant-form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15849,12 +15843,11 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
           style="display: flex; flex-wrap: nowrap;"
         >
           <div
-            class="prefix-Form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help prefix-Form-item-explain-connected"
+            class="prefix-Form-item-explain prefix-Form-show-help-appear prefix-Form-show-help-appear-start prefix-Form-show-help prefix-Form-item-explain-connected"
             role="alert"
-            style="height: 0px; opacity: 0;"
           >
             <div
-              class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item prefix-Form-item-explain-error"
+              class="prefix-Form-show-help-item-appear prefix-Form-show-help-item-appear-start prefix-Form-show-help-item prefix-Form-item-explain-error"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light

diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
@@ -2,12 +2,13 @@ import classNames from 'classnames';
 import CSSMotion, { CSSMotionList } from 'rc-motion';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { ConfigContext } from '../config-provider';
 import initCollapseMotion from '../_util/motion';
 import { FormItemPrefixContext } from './context';
 import type { ValidateStatus } from './FormItem';
 import useDebounce from './hooks/useDebounce';
 
+import useStyle from './style';
+
 const EMPTY_LIST: React.ReactNode[] = [];
 
 interface ErrorEntity {
@@ -49,12 +50,12 @@ export default function ErrorList({
   onVisibleChanged,
 }: ErrorListProps) {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
-  const { getPrefixCls } = React.useContext(ConfigContext);
 
   const baseClassName = `${prefixCls}-item-explain`;
-  const rootPrefixCls = getPrefixCls();
 
-  const collapseMotion = useMemo(() => initCollapseMotion(rootPrefixCls), [rootPrefixCls]);
+  const [, hashId] = useStyle(prefixCls);
+
+  const collapseMotion = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
 
   // We have to debounce here again since somewhere use ErrorList directly still need no shaking
   // ref: https://github.com/ant-design/ant-design/issues/36336
@@ -82,9 +83,8 @@ export default function ErrorList({
 
   return (
     <CSSMotion
-      {...collapseMotion}
       motionDeadline={collapseMotion.motionDeadline}
-      motionName={`${rootPrefixCls}-show-help`}
+      motionName={`${prefixCls}-show-help`}
       visible={!!fullKeyList.length}
       onVisibleChanged={onVisibleChanged}
     >
@@ -94,14 +94,14 @@ export default function ErrorList({
         return (
           <div
             {...helpProps}
-            className={classNames(baseClassName, holderClassName, rootClassName)}
+            className={classNames(baseClassName, holderClassName, rootClassName, hashId)}
             style={holderStyle}
             role="alert"
           >
             <CSSMotionList
               keys={fullKeyList}
-              {...initCollapseMotion(rootPrefixCls)}
-              motionName={`${rootPrefixCls}-show-help-item`}
+              {...initCollapseMotion(prefixCls)}
+              motionName={`${prefixCls}-show-help-item`}
               component={false}
             >
               {(itemProps) => {

diff --git a/components/form/style/explain.tsx b/components/form/style/explain.tsx
@@ -0,0 +1,56 @@
+import type { FormToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
+  const { componentCls } = token;
+
+  const helpCls = `${componentCls}-show-help`;
+  const helpItemCls = `${componentCls}-show-help-item`;
+
+  return {
+    [helpCls]: {
+      // Explain holder
+      transition: `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+
+      '&-appear, &-enter': {
+        opacity: 0,
+
+        '&-active': {
+          opacity: 1,
+        },
+      },
+
+      '&-leave': {
+        opacity: 1,
+
+        '&-active': {
+          opacity: 0,
+        },
+      },
+
+      // Explain
+      [helpItemCls]: {
+        overflow: 'hidden',
+        transition: `height ${token.motionDurationSlow} ${token.motionEaseInOut},
+                     opacity ${token.motionDurationSlow} ${token.motionEaseInOut},
+                     transform ${token.motionDurationSlow} ${token.motionEaseInOut} !important`,
+
+        [`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
+          transform: `translateY(-5px)`,
+          opacity: 0,
+
+          [`&-active`]: {
+            transform: 'translateY(0)',
+            opacity: 1,
+          },
+        },
+
+        [`&${helpItemCls}-leave-active`]: {
+          transform: `translateY(-5px)`,
+        },
+      },
+    },
+  };
+};
+
+export default genFormValidateMotionStyle;
diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx
@@ -3,8 +3,9 @@ import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
+import genFormValidateMotionStyle from './explain';
 
-interface FormToken extends FullToken<'Form'> {
+export interface FormToken extends FullToken<'Form'> {
   formItemCls: string;
   rootPrefixCls: string;
 }
@@ -261,7 +262,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
           color: token.colorTextDescription,
           fontSize: token.fontSize,
           lineHeight: token.lineHeight,
-          transition: `color ${token.motionDurationMid} ${token.motionEaseOut}`, // sync input color transition
         },
 
         '&-explain-connected': {
@@ -270,6 +270,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
 
         '&-extra': {
           minHeight: token.controlHeightSM,
+          transition: `color ${token.motionDurationMid} ${token.motionEaseOut}`, // sync input color transition
         },
 
         '&-explain': {
@@ -320,58 +321,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
   };
 };
 
-const genFormMotionStyle: GenerateStyle<FormToken> = (token) => {
-  const { componentCls, rootPrefixCls } = token;
-
-  return {
-    [componentCls]: {
-      // Explain holder
-      [`.${rootPrefixCls}-show-help`]: {
-        transition: `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-
-        '&-appear, &-enter': {
-          opacity: 0,
-
-          '&-active': {
-            opacity: 1,
-          },
-        },
-
-        '&-leave': {
-          opacity: 1,
-
-          '&-active': {
-            opacity: 0,
-          },
-        },
-      },
-
-      // Explain
-      [`.${rootPrefixCls}-show-help-item`]: {
-        overflow: 'hidden',
-        transition: `height ${token.motionDurationSlow} ${token.motionEaseInOut},
-                     opacity ${token.motionDurationSlow} ${token.motionEaseInOut},
-                     transform ${token.motionDurationSlow} ${token.motionEaseInOut} !important`,
-
-        [`&-appear,
-          &-enter`]: {
-          transform: `translateY(-5px)`,
-          opacity: 0,
-
-          '&-active': {
-            transform: 'translateY(0)',
-            opacity: 1,
-          },
-        },
-
-        '&-leave-active': {
-          transform: `translateY(-5px)`,
-        },
-      },
-    },
-  };
-};
-
 const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
   const { componentCls, formItemCls, rootPrefixCls } = token;
 
@@ -543,7 +492,7 @@ export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
   return [
     genFormStyle(formToken),
     genFormItemStyle(formToken),
-    genFormMotionStyle(formToken),
+    genFormValidateMotionStyle(formToken),
     genHorizontalStyle(formToken),
     genInlineStyle(formToken),
     genVerticalStyle(formToken),