ultra-design
Version:
123 lines (122 loc) • 3.99 kB
TypeScript
import React from 'react';
import { Placement } from './placement';
export declare type PositionRect = Omit<DOMRect, 'toJSON'>;
declare const defaultProps: {
trigger: string;
defaultVisible: boolean;
placement: string;
showDelay: number;
hideDelay: number;
offset: number;
showArrow: boolean;
transitionClassName: string;
transitionTimeout: number;
name: string;
};
export interface TriggerProps {
/**
* @description.zh-CN 提示内容
* @description.en-US trigger content
*/
content?: React.ReactNode;
/**
* @description.zh-CN 触发提示框的方式
* @description.en-US trigger mode
* @default 'hover'
*/
trigger?: 'hover' | 'click';
/**
* @description.zh-CN 提示框出现的方位
* @description.en-US trigger position
* @default 'bottom'
*/
placement?: Placement;
/**
* @description.zh-CN 是否默认显示
* @description.en-US position of the trigger relative to the target
* @default true
*/
defaultVisible?: boolean;
/**
* @description.zh-CN 是否显示
* @description.en-US set visible as default
* @default false
*/
visible?: boolean;
/**
* @description.zh-CN 当提示框状态改变时触发
* @description.en-US call when visibility of the trigger is changed
*/
onVisibleChange?: (visible: boolean) => void;
/**
* @description.zh-CN 在提示显示前的延迟
* @description.en-US delay before trigger is shown
* @default 50
*/
showDelay?: number;
/**
* @description.zh-CN 关闭提示前的延迟
* @description.en-US delay before trigger is hidden (only work in 'hover' mode)
* @default 50
*/
hideDelay?: number;
/**
* @description.zh-CN 是否显示箭头
* @description.en-US show arrow icon
* @default true
*/
showArrow?: boolean;
/**
* @description.zh-CN 提示框与目标之间的偏移
* @description.en-US distance between pop-up and target
* @default 'hover'
*/
offset?: number;
/**
* @description.zh-CN 浮层渲染父节点，默认渲染到 body 上
* @description.en-US layer parent node, render in body layerElement default
* @default () => document.body;
*/
getLayerContainer?: (trigger?: HTMLElement | null) => HTMLElement;
/**
* @description.zh-CN 弹出框的类名
* @description.en-US tclassName of layer box
*/
layerClassName?: string;
/**
* @description.zh-CN 渐变的类名，提供后可以自定义渐变效果
* @description.en-US className of `CSSTransition`, for custom transition
* @default 'ultra-trigger-layer-fade'
*/
transitionClassName?: string;
/**
* @description.zh-CN 渐变的持续的时间，尽量和 css 中的保持一致，此值将提供给 `CSSTransition`
* @description.en-US timeout of `CSSTransition`, be best set to same as transition duration in css
* @default 300
*/
transitionTimeout?: number;
name?: string;
id?: string;
children?: React.ReactNode;
/**
* @description.zh-CN 自定义触发元素，不仅仅是通过 children
* @description.en-US custom trigger element, not only by children
*/
triggerRef?: React.RefObject<HTMLElement | null>;
/**
* @description.zh-CN 完全自定义 layer 位置等其他 css 信息
* @description.en-US fully customize the layer position and other CSS information
*/
layerStyle?: React.CSSProperties;
}
export interface TriggerRef {
layerElement?: HTMLElement;
update: () => void;
visible: boolean;
changeVisible: (visible: boolean) => void;
}
export declare type MergedTriggerProps = typeof defaultProps & TriggerProps;
declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & {
children?: React.ReactNode;
} & React.RefAttributes<TriggerRef>>;
export default Trigger;