ant-design/components/float-button/interface.ts
𝑾𝒖𝒙𝒉 d38aea0138
feat(float-button): support TooltipProps (#53138)
* feat(float-button): support Tooltips props

(cherry picked from commit fb3d131beea52655e780e462eae08662b08095db)

* chore: update demo

(cherry picked from commit 36b39f5e7bf8ace89c705e7ece22549bc623f9e3)

* chore: logic reuse

* chore: update demo snap

* test: add unit test

* chore: edge case

* chore: add warn

* docs: update docs

* revert

* fix: handle undefined and null in convertToTooltipProps
2025-03-13 11:02:06 +08:00

75 lines
2.2 KiB
TypeScript

import type React from 'react';
import type { BadgeProps } from '../badge';
import type { ButtonHTMLType } from '../button';
import type { TooltipProps } from '../tooltip';
export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement;
export interface FloatButtonRef {
nativeElement: FloatButtonElement | null;
}
export type FloatButtonType = 'default' | 'primary';
export type FloatButtonShape = 'circle' | 'square';
export type FloatButtonGroupTrigger = 'click' | 'hover';
export type FloatButtonBadgeProps = Omit<BadgeProps, 'status' | 'text' | 'title' | 'children'>;
export interface FloatButtonProps extends React.DOMAttributes<FloatButtonElement> {
prefixCls?: string;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
icon?: React.ReactNode;
description?: React.ReactNode;
type?: FloatButtonType;
shape?: FloatButtonShape;
tooltip?: React.ReactNode | TooltipProps;
href?: string;
target?: React.HTMLAttributeAnchorTarget;
badge?: FloatButtonBadgeProps;
/**
* @since 5.21.0
* @default button
*/
htmlType?: ButtonHTMLType;
'aria-label'?: React.HtmlHTMLAttributes<HTMLElement>['aria-label'];
}
export interface FloatButtonContentProps extends React.DOMAttributes<HTMLDivElement> {
className?: string;
icon?: FloatButtonProps['icon'];
description?: FloatButtonProps['description'];
prefixCls: FloatButtonProps['prefixCls'];
}
export interface FloatButtonGroupProps extends FloatButtonProps {
// 包含的 Float Button
children: React.ReactNode;
// 触发方式 (有触发方式为菜单模式)
trigger?: FloatButtonGroupTrigger;
// 受控展开
open?: boolean;
// 关闭按钮自定义图标
closeIcon?: React.ReactNode;
// 菜单弹出方向
placement?: 'top' | 'left' | 'right' | 'bottom';
// 展开收起的回调
onOpenChange?: (open: boolean) => void;
}
export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
visibilityHeight?: number;
onClick?: React.MouseEventHandler<FloatButtonElement>;
target?: () => HTMLElement | Window | Document;
prefixCls?: string;
children?: React.ReactNode;
className?: string;
rootClassName?: string;
style?: React.CSSProperties;
duration?: number;
}