test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: passthrough backtop float button rest props (#38475)

Browse Source
This commit is contained in:
Yanlin Jiang 2022-11-11 20:51:51 +08:00 committed by GitHub
parent f035c9d57f
commit 99d281082d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/float-button/BackTop.tsx
View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import React, { memo, useContext, useEffect, useMemo, useRef } from 'react';
import React, { memo, useContext, useEffect, useRef } from 'react';
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
@ -11,7 +11,7 @@ import getScroll from '../_util/getScroll';
import scrollTo from '../_util/scrollTo';
import { throttleByAnimationFrame } from '../_util/throttleByAnimationFrame';
import FloatButtonGroupContext from './context';
import type { BackTopProps, FloatButtonContentProps, FloatButtonShape } from './interface';
import type { BackTopProps, FloatButtonShape } from './interface';
import useStyle from './style';
const BackTop: React.FC<BackTopProps> = props => {
@ -22,10 +22,10 @@ const BackTop: React.FC<BackTopProps> = props => {
shape = 'circle',
visibilityHeight = 400,
icon = <VerticalAlignTopOutlined />,
description,
target,
onClick,
duration = 450,
...restProps
} = props;
const [visible, setVisible] = useMergedState(false, { value: props.visible });
@ -80,10 +80,7 @@ const BackTop: React.FC<BackTopProps> = props => {
const mergeShape = groupShape || shape;
const contentProps = useMemo<FloatButtonContentProps>(
() => ({ prefixCls, description, icon, type, shape: mergeShape }),
[prefixCls, description, icon, type, mergeShape],
);
const contentProps = { prefixCls, icon, type, shape: mergeShape, ...restProps };
return wrapSSR(
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>

6
components/float-button/__tests__/back-top.test.tsx
View File

@ -44,4 +44,10 @@ describe('BackTop', () => {
fireEvent.click(container.querySelector('.ant-float-btn')!);
expect(onClick).toHaveBeenCalled();
});
it('pass style to float button', () => {
const { container } = render(<BackTop style={{ color: 'red' }} visible target={undefined} />);
const btn = container.querySelector('.ant-float-btn')!;
expect(btn).toHaveAttribute('style', 'color: red;');
});
});