From 3640a65dec0fbccdb844a81ff6e1154dfb9e0d39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 24 Nov 2022 20:39:33 +0800 Subject: [PATCH 1/2] fix: form missing motion validate --- components/form/ErrorList.tsx | 18 +++++----- components/form/style/explain.tsx | 56 +++++++++++++++++++++++++++++ components/form/style/index.tsx | 59 +++---------------------------- 3 files changed, 69 insertions(+), 64 deletions(-) create mode 100644 components/form/style/explain.tsx 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), From c924f0e6a9f07b2bc6082da87450130a566b1c4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 24 Nov 2022 20:59:42 +0800 Subject: [PATCH 2/2] test: Update snapshot --- .../__snapshots__/components.test.tsx.snap | 35 ++++++++----------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index a18eb46a94dd..93163ce2263f 100644 --- 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;" >