mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat: 动画样式添加 prefix (#29268)

Browse Source 
* feat: add prefix

* fix: 剩余

* fix: test

* fix: test

* fix: test

* fix: test

* fix: 传了 name 则使用传的

* fix: pop 添加 prefix

* fix: Ok OK ?

* fix: modal confirm

* fix: select

* fix: test
This commit is contained in:
叶枫 2021-02-08 17:09:13 +08:00 committed by GitHub
parent 153bea9a0f
commit 6e89866694
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 501 additions and 445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/_util/motion.tsx
View File

@ -21,4 +21,11 @@ const collapseMotion: CSSMotionProps = {
motionDeadline: 500,
};
const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
if (transitionName !== undefined) {
return transitionName;
}
return `${rootPrefixCls}-${motion}`;
};
export { getTransitionName };
export default collapseMotion;

13
components/back-top/index.tsx
View File

@ -75,7 +75,13 @@ const BackTop: React.FC<BackTopProps> = props => {
}
};
const renderChildren = ({ prefixCls }: { prefixCls: string }) => {
const renderChildren = ({
prefixCls,
rootPrefixCls,
}: {
prefixCls: string;
rootPrefixCls: string;
}) => {
const { children } = props;
const defaultElement = (
<div className={`${prefixCls}-content`}>
@ -85,7 +91,7 @@ const BackTop: React.FC<BackTopProps> = props => {
</div>
);
return (
<CSSMotion visible={visible} motionName="fade" removeOnLeave>
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`} removeOnLeave>
{({ className: motionClassName }) => {
const childNode = children || defaultElement;
return (
@ -103,6 +109,7 @@ const BackTop: React.FC<BackTopProps> = props => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '' } = props;
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const classString = classNames(
prefixCls,
{
@ -123,7 +130,7 @@ const BackTop: React.FC<BackTopProps> = props => {
return (
<div {...divProps} className={classString} onClick={scrollToTop} ref={ref}>
{renderChildren({ prefixCls })}
{renderChildren({ prefixCls, rootPrefixCls })}
</div>
);
};

10
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -586,7 +586,7 @@ exports[`Cascader can be selected in RTL direction 2`] = `
exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
<div>
<div
class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
class="ant-cascader-menus ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div>
@ -1023,7 +1023,7 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
exports[`Cascader should highlight keyword and filter when search in Cascader 1`] = `
<div>
<div
class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
class="ant-cascader-menus ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div>
@ -1060,7 +1060,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `
<div>
<div
class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
class="ant-cascader-menus ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div>
@ -1103,7 +1103,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi
exports[`Cascader should render not found content 1`] = `
<div>
<div
class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
class="ant-cascader-menus ant-cascader-menu-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div>
@ -1172,7 +1172,7 @@ exports[`Cascader should render not found content 1`] = `
exports[`Cascader should show not found content when options.length is 0 1`] = `
<div>
<div
class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
class="ant-cascader-menus ant-cascader-menu-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div>

4
components/cascader/index.tsx
View File

@ -21,6 +21,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
import devWarning from '../_util/devWarning';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { replaceElement } from '../_util/reactNode';
import { getTransitionName } from '../_util/motion';
export interface CascaderOptionType {
value?: string | number;
@ -254,7 +255,6 @@ function getEmptyNode(
class Cascader extends React.Component<CascaderProps, CascaderState> {
static defaultProps = {
transitionName: 'slide-up',
options: [],
disabled: false,
allowClear: true,
@ -672,6 +672,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
[`${prefixCls}-menu-empty`]:
options.length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND',
});
const rootPrefixCls = getPrefixCls();
return (
<RcCascader
@ -690,6 +691,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
popupPlacement={this.getPopupPlacement(direction)}
// rc-cascader should update ts define to fix this case
dropdownRender={dropdownRender as any}
transitionName={getTransitionName(rootPrefixCls, 'slide-up', props.transitionName)}
>
{input}
</RcCascader>

4
components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View File

@ -43,7 +43,7 @@ Array [
</div>,
<div>
<div
class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div
@ -665,7 +665,7 @@ Array [
</div>,
<div>
<div
class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div

3
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -69,6 +69,7 @@ export default function generateRangePicker<DateType>(
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
};
const rootPrefixCls = getPrefixCls();
return (
<SizeContext.Consumer>
@ -87,7 +88,7 @@ export default function generateRangePicker<DateType>(
suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
className={classNames(

3
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -102,6 +102,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
? getTimeProps({ format, ...this.props, picker: mergedPicker })
: {}),
};
const rootPrefixCls = getPrefixCls();
return (
<SizeContext.Consumer>
@ -117,7 +118,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
{...additionalOverrideProps}

5
components/dropdown/dropdown.tsx
View File

@ -65,14 +65,15 @@ const Dropdown: DropdownInterface = props => {
);
const getTransitionName = () => {
const rootPrefixCls = getPrefixCls();
const { placement = '', transitionName } = props;
if (transitionName !== undefined) {
return transitionName;
}
if (placement.indexOf('top') >= 0) {
return 'slide-down';
return `${rootPrefixCls}-slide-down`;
}
return 'slide-up';
return `${rootPrefixCls}-slide-up`;
};
const renderOverlay = (prefixCls: string) => {

5
components/form/ErrorList.tsx
View File

@ -5,6 +5,7 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
import useCacheErrors from './hooks/useCacheErrors';
import useForceUpdate from '../_util/hooks/useForceUpdate';
import { FormItemPrefixContext } from './context';
import { ConfigContext } from '../config-provider';
const EMPTY_LIST: React.ReactNode[] = [];
@ -23,6 +24,7 @@ export default function ErrorList({
}: ErrorListProps) {
const forceUpdate = useForceUpdate();
const { prefixCls, status } = React.useContext(FormItemPrefixContext);
const { getPrefixCls } = React.useContext(ConfigContext);
const [visible, cacheErrors] = useCacheErrors(
errors,
@ -58,12 +60,13 @@ export default function ErrorList({
}, [visible, status]);
const baseClassName = `${prefixCls}-item-explain`;
const rootPrefixCls = getPrefixCls();
return (
<CSSMotion
motionDeadline={500}
visible={visible}
motionName="show-help"
motionName={`${rootPrefixCls}-show-help`}
onLeaveEnd={() => {
onDomErrorVisibleChange?.(false);
}}

9
components/form/style/index.less
View File

@ -199,13 +199,14 @@
}
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName, @duration);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
.@{name}-leave {
animation-timing-function: @ease-in-out;
}
}

2
components/list/__tests__/__snapshots__/pagination.test.js.snap
View File

@ -390,7 +390,7 @@ exports[`List.pagination should change page size work 2`] = `
</div>
<div>
<div
class="ant-select-dropdown slide-up-enter slide-up-enter-prepare slide-up"
class="ant-select-dropdown ant-slide-up-enter ant-slide-up-enter-prepare ant-slide-up"
style="pointer-events: none; min-width: 0; opacity: 0;"
>
<div>

716
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

4
components/menu/__tests__/index.test.js
View File

@ -27,9 +27,9 @@ const expectSubMenuBehavior = (menu, enter = noop, leave = noop) => {
menu.update();
expect(menu.find('.ant-menu-sub').length).toBe(0);
const AnimationClassNames = {
horizontal: 'slide-up-leave',
horizontal: 'ant-slide-up-leave',
inline: 'ant-motion-collapse-leave',
vertical: 'zoom-big-leave',
vertical: 'ant-zoom-big-leave',
};
const mode = menu.prop('mode') || 'horizontal';
enter();

6
components/menu/index.tsx
View File

@ -54,11 +54,13 @@ class InternalMenu extends React.Component<InternalMenuProps> {
}
renderMenu = ({ getPopupContainer, getPrefixCls, direction }: ConfigConsumerProps) => {
const rootPrefixCls = getPrefixCls();
const { prefixCls: customizePrefixCls, className, theme, expandIcon } = this.props;
const defaultMotions = {
horizontal: { motionName: 'slide-up' },
horizontal: { motionName: `${rootPrefixCls}-slide-up` },
inline: collapseMotion,
other: { motionName: 'zoom-big' },
other: { motionName: `${rootPrefixCls}-zoom-big` },
};
const prefixCls = getPrefixCls('menu', customizePrefixCls);

2
components/message/__tests__/config.test.js
View File

@ -95,7 +95,7 @@ describe('message.config', () => {
message.info('last');
expect(document.querySelectorAll('.move-up-enter').length).toBe(0);
message.config({
transitionName: 'move-up',
transitionName: 'ant-move-up',
});
});
});

2
components/message/hooks/useMessage.tsx
View File

@ -38,6 +38,7 @@ export default function createUseMessage(
function notify(args: ArgsProps) {
const { prefixCls: customizePrefixCls } = args;
const mergedPrefixCls = getPrefixCls('message', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const target = args.key || getKeyThenIncreaseKey();
const closePromise = new Promise(resolve => {
const callback = () => {
@ -50,6 +51,7 @@ export default function createUseMessage(
{
...args,
prefixCls: mergedPrefixCls,
rootPrefixCls,
},
({ prefixCls, instance }) => {
innerInstance = instance;

33
components/message/index.tsx
View File

@ -18,8 +18,10 @@ let messageInstance: RCNotificationInstance | null;
let defaultDuration = 3;
let defaultTop: number;
let key = 1;
let rootLocalPrefixCls = 'ant';
let localPrefixCls = 'ant-message';
let transitionName = 'move-up';
let hasTransitionName = false;
let getContainer: () => HTMLElement;
let maxCount: number;
let rtl = false;
@ -32,6 +34,7 @@ export interface ConfigOptions {
top?: number;
duration?: number;
prefixCls?: string;
rootPrefixCls?: string;
getContainer?: () => HTMLElement;
transitionName?: string;
maxCount?: number;
@ -46,6 +49,9 @@ function setMessageConfig(options: ConfigOptions) {
if (options.duration !== undefined) {
defaultDuration = options.duration;
}
if (options.rootPrefixCls !== undefined) {
rootLocalPrefixCls = options.rootPrefixCls;
}
if (options.prefixCls !== undefined) {
localPrefixCls = options.prefixCls;
}
@ -55,6 +61,7 @@ function setMessageConfig(options: ConfigOptions) {
if (options.transitionName !== undefined) {
transitionName = options.transitionName;
messageInstance = null; // delete messageInstance for new transitionName
hasTransitionName = true;
}
if (options.maxCount !== undefined) {
maxCount = options.maxCount;
@ -67,37 +74,34 @@ function setMessageConfig(options: ConfigOptions) {
function getRCNotificationInstance(
args: ArgsProps,
callback: (info: { prefixCls: string; instance: RCNotificationInstance }) => void,
callback: (info: {
prefixCls: string;
rootPrefixCls: string;
instance: RCNotificationInstance;
}) => void,
) {
const prefixCls = args.prefixCls || localPrefixCls;
const rootPrefixCls = args.rootPrefixCls || rootLocalPrefixCls;
if (messageInstance) {
callback({
prefixCls,
instance: messageInstance,
});
callback({ prefixCls, rootPrefixCls, instance: messageInstance });
return;
}
RCNotification.newInstance(
{
prefixCls,
transitionName,
transitionName: hasTransitionName ? transitionName : `${rootPrefixCls}-${transitionName}`,
style: { top: defaultTop }, // 覆盖原来的样式
getContainer,
maxCount,
},
(instance: any) => {
if (messageInstance) {
callback({
prefixCls,
instance: messageInstance,
});
callback({ prefixCls, rootPrefixCls, instance: messageInstance });
return;
}
messageInstance = instance;
callback({
prefixCls,
instance,
});
callback({ prefixCls, rootPrefixCls, instance });
},
);
}
@ -122,6 +126,7 @@ export interface ArgsProps {
duration: number | null;
type: NoticeType;
prefixCls?: string;
rootPrefixCls?: string;
onClose?: () => void;
icon?: React.ReactNode;
key?: string | number;

9
components/modal/ConfirmDialog.tsx
View File

@ -4,12 +4,13 @@ import Dialog, { ModalFuncProps } from './Modal';
import ActionButton from './ActionButton';
import devWarning from '../_util/devWarning';
import ConfigProvider from '../config-provider';
import { getTransitionName } from '../_util/motion';
interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void;
close: (...args: any[]) => void;
autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls?: string;
rootPrefixCls: string;
}
const ConfirmDialog = (props: ConfirmDialogProps) => {
@ -56,8 +57,6 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
// 默认为 false，保持旧版默认行为
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
const transitionName = props.transitionName || 'zoom';
const maskTransitionName = props.maskTransitionName || 'fade';
const classString = classNames(
contentPrefixCls,
@ -86,9 +85,9 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
onCancel={() => close({ triggerCancel: true })}
visible={visible}
title=""
transitionName={transitionName}
footer=""
maskTransitionName={maskTransitionName}
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
mask={mask}
maskClosable={maskClosable}
maskStyle={maskStyle}

7
components/modal/Modal.tsx
View File

@ -10,6 +10,7 @@ import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/but
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigContext, DirectionType } from '../config-provider';
import { canUseDocElement } from '../_util/styleChecker';
import { getTransitionName } from '../_util/motion';
let mousePosition: { x: number; y: number } | null;
export const destroyFns: Array<() => void> = [];
@ -185,6 +186,8 @@ const Modal: ModalInterface = props => {
} = props;
const prefixCls = getPrefixCls('modal', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const defaultFooter = (
<LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
{renderFooter}
@ -213,6 +216,8 @@ const Modal: ModalInterface = props => {
onClose={handleCancel}
closeIcon={closeIconToRender}
focusTriggerAfterClose={focusTriggerAfterClose}
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
/>
);
};
@ -221,8 +226,6 @@ Modal.useModal = useModal;
Modal.defaultProps = {
width: 520,
transitionName: 'zoom',
maskTransitionName: 'fade',
confirmLoading: false,
visible: false,
okType: 'primary' as LegacyButtonType,

12
components/modal/__tests__/__snapshots__/Modal.test.js.snap
View File

@ -11,7 +11,7 @@ exports[`Modal render correctly 1`] = `
class="ant-modal-root"
>
<div
class="ant-modal-mask fade-appear fade-appear-start fade"
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
class="ant-modal-wrap"
@ -19,7 +19,7 @@ exports[`Modal render correctly 1`] = `
tabindex="-1"
>
<div
class="ant-modal zoom-appear zoom-appear-prepare zoom"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="document"
style="width: 520px;"
>
@ -110,7 +110,7 @@ exports[`Modal render without footer 1`] = `
class="ant-modal-root"
>
<div
class="ant-modal-mask fade-appear fade-appear-start fade"
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
class="ant-modal-wrap"
@ -118,7 +118,7 @@ exports[`Modal render without footer 1`] = `
tabindex="-1"
>
<div
class="ant-modal zoom-appear zoom-appear-prepare zoom"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="document"
style="width: 520px;"
>
@ -185,7 +185,7 @@ exports[`Modal support closeIcon 1`] = `
class="ant-modal-root"
>
<div
class="ant-modal-mask fade-appear fade-appear-start fade"
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
class="ant-modal-wrap"
@ -193,7 +193,7 @@ exports[`Modal support closeIcon 1`] = `
tabindex="-1"
>
<div
class="ant-modal zoom-appear zoom-appear-prepare zoom"
class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="document"
style="width: 520px;"
>

4
components/popconfirm/index.tsx
View File

@ -10,6 +10,7 @@ import defaultLocale from '../locale/default';
import { ConfigContext } from '../config-provider';
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
import { cloneElement } from '../_util/reactNode';
import { getTransitionName } from '../_util/motion';
export interface PopconfirmProps extends AbstractTooltipProps {
title: React.ReactNode | RenderFunction;
@ -138,6 +139,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
{(popconfirmLocale: PopconfirmLocale) => renderOverlay(prefixCls, popconfirmLocale)}
</LocaleReceiver>
);
const rootPrefixCls = getPrefixCls();
return (
<Tooltip
@ -149,6 +151,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
overlay={overlay}
overlayClassName={overlayClassNames}
ref={ref as any}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', props.transitionName)}
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
@ -163,7 +166,6 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
});
Popconfirm.defaultProps = {
transitionName: 'zoom-big',
placement: 'top' as PopconfirmProps['placement'],
trigger: 'click' as PopconfirmProps['trigger'],
okType: 'primary' as PopconfirmProps['okType'],

5
components/popover/index.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
import { ConfigContext } from '../config-provider';
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
import { getTransitionName } from '../_util/motion';
export interface PopoverProps extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction;
@ -20,12 +21,15 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
);
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
return (
<Tooltip
{...otherProps}
prefixCls={prefixCls}
ref={ref as any}
overlay={getOverlay(prefixCls)}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
/>
);
},
@ -35,7 +39,6 @@ Popover.displayName = 'Popover';
Popover.defaultProps = {
placement: 'top' as TooltipPlacement,
transitionName: 'zoom-big',
trigger: 'hover',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,

5
components/select/index.tsx
View File

@ -8,6 +8,7 @@ import { OptionProps } from 'rc-select/lib/Option';
import { ConfigContext } from '../config-provider';
import getIcons from './utils/iconUtil';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { getTransitionName } from '../_util/motion';
type RawValue = string | number;
@ -53,7 +54,6 @@ const InternalSelect = <VT extends SelectValue = SelectValue>(
listItemHeight = 24,
size: customizeSize,
notFoundContent,
transitionName = 'slide-up',
...props
}: SelectProps<VT>,
ref: React.Ref<RefSelectProps>,
@ -69,6 +69,7 @@ const InternalSelect = <VT extends SelectValue = SelectValue>(
const size = React.useContext(SizeContext);
const prefixCls = getPrefixCls('select', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const mode = React.useMemo(() => {
const { mode: m } = props as InternalSelectProps<VT>;
@ -126,7 +127,7 @@ const InternalSelect = <VT extends SelectValue = SelectValue>(
virtual={virtual}
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
{...selectProps}
transitionName={transitionName}
transitionName={getTransitionName(rootPrefixCls, 'slide-up', props.transitionName)}
listHeight={listHeight}
listItemHeight={listItemHeight}
mode={mode}

4
components/slider/index.tsx
View File

@ -107,13 +107,15 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
} = props;
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
const rootPrefixCls = getPrefixCls();
return (
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''}
visible={visible}
placement={getTooltipPlacement(tooltipPlacement, vertical)}
transitionName="zoom-down"
transitionName={`${rootPrefixCls}-zoom-down`}
key={index}
overlayClassName={`${prefixCls}-tooltip`}
getPopupContainer={getTooltipPopupContainer || getPopupContainer}

9
components/style/core/motion/fade.less
View File

@ -1,11 +1,12 @@
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter,
.@{className}-appear {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{className}-leave {
.@{name}-leave {
animation-timing-function: linear;
}
}

9
components/style/core/motion/move.less
View File

@ -1,11 +1,12 @@
.move-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter,
.@{className}-appear {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: @ease-out-circ;
}
.@{className}-leave {
.@{name}-leave {
animation-timing-function: @ease-in-circ;
}
}

9
components/style/core/motion/slide.less
View File

@ -1,11 +1,12 @@
.slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter,
.@{className}-appear {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: @ease-out-quint;
}
.@{className}-leave {
.@{name}-leave {
animation-timing-function: @ease-in-quint;
}
}

9
components/style/core/motion/zoom.less
View File

@ -1,7 +1,8 @@
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
.make-motion(@className, @keyframeName, @duration);
.@{className}-enter,
.@{className}-appear {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName, @duration);
.@{name}-enter,
.@{name}-appear {
transform: scale(0); // need this by yiminghe
opacity: 0;
animation-timing-function: @ease-out-circ;
@ -10,7 +11,7 @@
transform: none;
}
}
.@{className}-leave {
.@{name}-leave {
animation-timing-function: @ease-in-out-circ;
}
}

6
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -334,7 +334,7 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
</span>
<div>
<div
class="ant-tooltip zoom-big-fast-appear zoom-big-fast-appear-prepare zoom-big-fast"
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
style="opacity: 0; pointer-events: none;"
>
<div
@ -817,7 +817,7 @@ exports[`Table.filter should support getPopupContainer 1`] = `
</span>
<div>
<div
class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div
@ -1049,7 +1049,7 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
</span>
<div>
<div
class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div

4
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -1079,7 +1079,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
</span>
<div>
<div
class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<ul
@ -1412,7 +1412,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
</span>
<div>
<div
class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<ul

3
components/tabs/index.tsx
View File

@ -40,6 +40,7 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...pr
showAdd: hideAdd !== true,
};
}
const rootPrefixCls = getPrefixCls();
devWarning(
!('onPrevClick' in props) && !('onNextClick' in props),
@ -50,8 +51,8 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...pr
return (
<RcTabs
direction={direction}
moreTransitionName={`${rootPrefixCls}-slide-up`}
{...props}
moreTransitionName="slide-up"
className={classNames(
{
[`${prefixCls}-${size}`]: size,

2
components/time-picker/__tests__/__snapshots__/index.test.js.snap
View File

@ -114,7 +114,7 @@ Array [
</div>,
<div>
<div
class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none;"
>
<div

5
components/tooltip/index.tsx
View File

@ -8,6 +8,7 @@ import { cloneElement, isValidElement } from '../_util/reactNode';
import { ConfigContext } from '../config-provider';
import { PresetColorType, PresetColorTypes } from '../_util/colors';
import { LiteralUnion } from '../_util/type';
import { getTransitionName } from '../_util/motion';
export { AdjustOverflow, PlacementsConfig };
@ -215,6 +216,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
children,
} = props;
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
let tempVisible = visible;
// Hide tooltip when there is no title
if (!('visible' in props) && isNoTitle()) {
@ -256,6 +259,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
onPopupAlign={onPopupAlign}
overlayInnerStyle={formattedOverlayInnerStyle}
arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName)}
>
{tempVisible ? cloneElement(child, { className: childCls }) : child}
</RcTooltip>
@ -266,7 +270,6 @@ Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
placement: 'top' as TooltipPlacement,
transitionName: 'zoom-big-fast',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
arrowPointAtCenter: false,

2
components/tree-select/__tests__/__snapshots__/index.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
</div>
<div>
<div
class="ant-select-dropdown ant-tree-select-dropdown slide-up-appear slide-up-appear-prepare slide-up"
class="ant-select-dropdown ant-tree-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
>
<div>

8
components/tree-select/index.tsx
View File

@ -15,6 +15,7 @@ import { AntTreeNodeProps } from '../tree';
import getIcons from '../select/utils/iconUtil';
import renderSwitcherIcon from '../tree/utils/iconUtil';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { getTransitionName } from '../_util/motion';
type RawValue = string | number;
@ -57,7 +58,7 @@ const InternalTreeSelect = <T extends DefaultValueType>(
getPopupContainer,
dropdownClassName,
treeIcon = false,
transitionName = 'slide-up',
transitionName,
choiceTransitionName = '',
...props
}: TreeSelectProps<T>,
@ -124,6 +125,7 @@ const InternalTreeSelect = <T extends DefaultValueType>(
},
className,
);
const rootPrefixCls = getPrefixCls();
return (
<RcTreeSelect
@ -150,8 +152,8 @@ const InternalTreeSelect = <T extends DefaultValueType>(
getPopupContainer={getPopupContainer || getContextPopupContainer}
treeMotion={null}
dropdownClassName={mergedDropdownClassName}
choiceTransitionName={choiceTransitionName}
transitionName={transitionName}
choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
/>
);
};

6
components/upload/UploadList/ListItem.tsx
View File

@ -6,6 +6,8 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
import Tooltip from '../../tooltip';
import Progress from '../../progress';
import { ConfigContext } from '../../config-provider';
import {
ItemRender,
UploadFile,
@ -228,13 +230,15 @@ const ListItem = React.forwardRef(
{preview}
</span>
);
const { getPrefixCls } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
const dom = (
<div className={infoUploadingClass}>
<div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
{actions}
{showProgress && (
<CSSMotion motionName="fade" visible={file.status === 'uploading'}>
<CSSMotion motionName={`${rootPrefixCls}-fade`} visible={file.status === 'uploading'}>
{({ className: motionClassName }) => {
// show loading icon if upload progress listener is disabled
const loadingProgress =