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

feat: BackTop ref support nativeElement (#45547)

Browse Source
This commit is contained in:
lijianan 2023-10-26 21:00:35 +08:00 committed by GitHub
parent 62bb2faae9
commit 017c04c8a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react';
import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import { composeRef } from 'rc-util/lib/ref';
import getScroll from '../_util/getScroll';
import scrollTo from '../_util/scrollTo';
@ -14,7 +13,7 @@ import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { BackTopProps, FloatButtonProps, FloatButtonRef, FloatButtonShape } from './interface';
import useStyle from './style';
const BackTop = React.forwardRef<FloatButtonRef['nativeElement'], BackTopProps>((props, ref) => {
const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
@ -32,7 +31,9 @@ const BackTop = React.forwardRef<FloatButtonRef['nativeElement'], BackTopProps>(
const internalRef = React.useRef<FloatButtonRef['nativeElement']>(null);
const mergedRef = composeRef<FloatButtonRef['nativeElement']>(ref, internalRef);
React.useImperativeHandle(ref, () => ({
nativeElement: internalRef.current,
}));
const getDefaultTarget = (): HTMLElement | Document | Window =>
internalRef.current && internalRef.current.ownerDocument
@ -78,7 +79,7 @@ const BackTop = React.forwardRef<FloatButtonRef['nativeElement'], BackTopProps>(
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
{({ className: motionClassName }) => (
<FloatButton
ref={mergedRef}
ref={internalRef}
{...contentProps}
onClick={scrollToTop}
className={classNames(className, motionClassName)}

2
components/float-button/interface.ts
View File

@ -7,7 +7,7 @@ import type Group from './FloatButtonGroup';
import type PurePanel from './PurePanel';
export interface FloatButtonRef {
nativeElement: HTMLAnchorElement & HTMLButtonElement;
nativeElement: (HTMLAnchorElement & HTMLButtonElement) | null;
}
export type FloatButtonType = 'default' | 'primary';