Bamboo is Light
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index b58e7c8e13fe..a6faf0e3b1fe 100644
--- 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 (
@@ -94,14 +94,14 @@ export default function ErrorList({
return (
{(itemProps) => {
diff --git a/components/form/style/explain.tsx b/components/form/style/explain.tsx
new file mode 100644
index 000000000000..eba79c81a261
--- /dev/null
+++ b/components/form/style/explain.tsx
@@ -0,0 +1,56 @@
+import type { FormToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genFormValidateMotionStyle: GenerateStyle = (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
index 8a5d42220aef..23071031b3b0 100644
--- 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 = (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 = (token) => {
'&-extra': {
minHeight: token.controlHeightSM,
+ transition: `color ${token.motionDurationMid} ${token.motionEaseOut}`, // sync input color transition
},
'&-explain': {
@@ -320,58 +321,6 @@ const genFormItemStyle: GenerateStyle = (token) => {
};
};
-const genFormMotionStyle: GenerateStyle = (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 = (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),