mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

type: update FloatButtonProps type with React.DOMAttributes (#46175)

Browse Source 
* type: update FloatButtonProps type with React.DOMAttributes

* test: add test
This commit is contained in:
lijianan 2023-11-30 11:06:41 +08:00 committed by GitHub
parent 7488c58e1f
commit 55183fa304
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,13 @@ import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import FloatButtonGroupContext from './context';
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { BackTopProps, FloatButtonProps, FloatButtonRef, FloatButtonShape } from './interface';
import type {
BackTopProps,
FloatButtonElement,
FloatButtonProps,
FloatButtonRef,
FloatButtonShape,
} from './interface';
import useStyle from './style';
const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
@ -58,7 +64,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
};
}, [target]);
const scrollToTop: React.MouseEventHandler<HTMLDivElement> = (e) => {
const scrollToTop: React.MouseEventHandler<FloatButtonElement> = (e) => {
scrollTo(0, { getContainer: target || getDefaultTarget, duration });
onClick?.(e);
};

6
components/float-button/FloatButton.tsx
View File

@ -1,4 +1,4 @@
import React, { forwardRef, useContext, useMemo } from 'react';
import React, { useContext, useMemo } from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
@ -13,15 +13,15 @@ import type {
CompoundedComponent,
FloatButtonBadgeProps,
FloatButtonContentProps,
FloatButtonElement,
FloatButtonProps,
FloatButtonRef,
FloatButtonShape,
} from './interface';
import useStyle from './style';
export const floatButtonPrefixCls = 'float-btn';
const FloatButton = forwardRef<FloatButtonRef['nativeElement'], FloatButtonProps>((props, ref) => {
const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,

16
components/float-button/__tests__/index.test.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import FloatButton from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -38,11 +39,20 @@ describe('FloatButton', () => {
rerender(<FloatButton shape={squareShape} />);
expect(container.querySelector(`.ant-float-btn-${squareShape}`)).toBeTruthy();
});
it('support onClick', () => {
it('support onClick & onMouseEnter & onMouseLeave', () => {
const onClick = jest.fn();
const { container } = render(<FloatButton onClick={onClick} />);
fireEvent.click(container.querySelector('.ant-float-btn')!);
const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn();
const { container } = render(
<FloatButton onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
);
const element = container.querySelector('.ant-float-btn')!;
fireEvent.click(element);
expect(onClick).toHaveBeenCalled();
fireEvent.mouseEnter(element);
expect(onMouseEnter).toHaveBeenCalled();
fireEvent.mouseLeave(element);
expect(onMouseLeave).toHaveBeenCalled();
});
it('should console Error', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

2
components/float-button/demo/basic.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;
const App: React.FC = () => <FloatButton onClick={() => console.log('onClick')} />;
export default App;

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

@ -6,8 +6,10 @@ import type BackTop from './BackTop';
import type Group from './FloatButtonGroup';
import type PurePanel from './PurePanel';
export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement;
export interface FloatButtonRef {
nativeElement: (HTMLAnchorElement & HTMLButtonElement) | null;
nativeElement: FloatButtonElement | null;
}
export type FloatButtonType = 'default' | 'primary';
@ -18,7 +20,7 @@ export type FloatButtonGroupTrigger = 'click' | 'hover';
export type FloatButtonBadgeProps = Omit<BadgeProps, 'status' | 'text' | 'title' | 'children'>;
export interface FloatButtonProps {
export interface FloatButtonProps extends React.DOMAttributes<FloatButtonElement> {
prefixCls?: string;
className?: string;
rootClassName?: string;
@ -31,8 +33,7 @@ export interface FloatButtonProps {
href?: string;
target?: React.HTMLAttributeAnchorTarget;
badge?: FloatButtonBadgeProps;
onClick?: React.MouseEventHandler<HTMLElement>;
['aria-label']?: React.HtmlHTMLAttributes<HTMLButtonElement>['aria-label'];
['aria-label']?: React.HtmlHTMLAttributes<HTMLElement>['aria-label'];
}
export interface FloatButtonContentProps extends React.DOMAttributes<HTMLDivElement> {
@ -57,7 +58,7 @@ export interface FloatButtonGroupProps extends FloatButtonProps {
export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
visibilityHeight?: number;
onClick?: React.MouseEventHandler<HTMLDivElement>;
onClick?: React.MouseEventHandler<FloatButtonElement>;
target?: () => HTMLElement | Window | Document;
prefixCls?: string;
children?: React.ReactNode;
@ -68,7 +69,7 @@ export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
}
export type CompoundedComponent = React.ForwardRefExoticComponent<
FloatButtonProps & React.RefAttributes<FloatButtonRef['nativeElement']>
FloatButtonProps & React.RefAttributes<FloatButtonElement>
> & {
Group: typeof Group;
BackTop: typeof BackTop;