rsuite-utils

Utilities for creating rsuite components

用于快速创建 RSUITE 组件，提供的常用工具

支持 react 0.14.9, >= 15.3.0, >= 16.0.0

Animation 动画

<Transition> 自定义过渡效果

import Transition from 'rsuite-utils/lib/Animation/Transition';

属性名称	类型 (默认值)	描述
in	boolean	进入
unmountOnExit	boolean	在退出时卸载组件
transitionAppear	boolean	初始显示的时候开启过渡效果
timeout	number (1000)	动画过渡延迟时间
exitedClassName	string	退出动画过渡后 className
exitingClassName	string	退出动画过渡中 className
enteredClassName	string	进入动画过渡后 className
enteringClassName	string	进入动画过渡中 className
onEnter	(node?: null, Element, Text) => void	显示动画过渡的回调函数
onEntering	(node?: null, Element, Text) => void	显示中动画过渡的回调函数
onEntered	(node?: null, Element, Text) => void	显示后动画过渡的回调函数
onExit	(node?: null, Element, Text) => void	退出前动画过渡的回调函数
onExiting	(node?: null, Element, Text) => void	退出中动画过渡的回调函数
onExited	(node?: null, Element, Text) => void	退出后动画过渡的回调函数

<Collapse> 折叠效果

import Collapse from 'rsuite-utils/lib/Animation/Collapse';

属性名称	类型 (默认值)	描述
in	boolean	进入
unmountOnExit	boolean	在退出时卸载组件
transitionAppear	boolean	初始显示的时候开启过渡效果
timeout	number(300)	动画过渡延迟时间
exitedClassName	string ('collapse')	退出动画过渡后 className
exitingClassName	string ('collapsing')	退出动画过渡中 className
enteredClassName	string ('collapse in')	进入动画过渡后 className
enteringClassName	string ('collapsing')	进入动画过渡中 className
onEnter	(node?: null, Element, Text) => void	显示前动画过渡的回调函数
onEntering	(node?: null, Element, Text) => void	显示中动画过渡的回调函数
onEntered	(node?: null, Element, Text) => void	显示后动画过渡的回调函数
onExit	(node?: null, Element, Text) => void	退出前动画过渡的回调函数
onExiting	(node?: null, Element, Text) => void	退出中动画过渡的回调函数
onExited	(node?: null, Element, Text) => void	退出后动画过渡的回调函数
role	string	HTML role
dimension	union: 'height', 'width' ()=>('height', 'width')	设置折叠尺寸类型
getDimensionValue	()=>number	自定义尺寸值

<Fade> 淡进淡出

import Fade from 'rsuite-utils/lib/Animation/Fade';

属性名称	类型 (默认值)	描述
in	boolean	进入
unmountOnExit	boolean	在退出时卸载组件
transitionAppear	boolean	初始显示的时候开启过渡效果
timeout	number (300)	动画过渡延迟时间
exitedClassName	string	退出动画过渡后 className
exitingClassName	string	退出动画过渡中 className
enteredClassName	string	进入动画过渡后 className
enteringClassName	string	进入动画过渡中 className
onEnter	(node?: null, Element, Text) => void	显示动画过渡的回调函数
onEntering	(node?: null, Element, Text) => void	显示中动画过渡的回调函数
onEntered	(node?: null, Element, Text) => void	显示后动画过渡的回调函数
onExit	(node?: null, Element, Text) => void	退出前动画过渡的回调函数
onExiting	(node?: null, Element, Text) => void	退出中动画过渡的回调函数
onExited	(node?: null, Element, Text) => void	退出后动画过渡的回调函数

Overlay 浮层

<Overlay> 覆盖层

import Overlay from 'rsuite-utils/lib/Overlay/Overlay';

属性名称	类型 (默认值)	描述
show	boolean	显示
rootClose	boolean (true)	启用 RootCloseWrapper 代理
animation	union: boolean, React.ElementType (Fade)	动画
onEnter	(node?: null, Element, Text) => void	显示前动画过渡的回调函数
onEntering	(node?: null, Element, Text) => void	显示中动画过渡的回调函数
onEntered	(node?: null, Element, Text) => void	显示后动画过渡的回调函数
onExit	(node?: null, Element, Text) => void	退出前动画过渡的回调函数
onExiting	(node?: null, Element, Text) => void	退出中动画过渡的回调函数
onExited	(node?: null, Element, Text) => void	退出后动画过渡的回调函数

<OverlayTrigger> 覆盖层触发器

import OverlayTrigger from 'rsuite-utils/lib/Overlay/OverlayTrigger';

type PlacementAround = 'top' | 'right' | 'bottom' | 'left';
type PlacementEighPoints =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd';
type Placement = PlacementAround | PlacementEighPoints;

属性名称	类型 (默认值)	描述
placement	enum: Placement	显示位置
trigger	union: 'click', 'hover', 'focus' (['hover','focus'])	触发事件,可以通过数组配置多事件
delay	number	延迟时间
delayShow	number	展示的延迟时间
delayHide	number	隐藏的延迟时间
speaker	React.Element	展示的元素
onEnter	(node?: null, Element, Text) => void	显示前动画过渡的回调函数
onEntering	(node?: null, Element, Text) => void	显示中动画过渡的回调函数
onEntered	(node?: null, Element, Text) => void	显示后动画过渡的回调函数
onExit	(node?: null, Element, Text) => void	退出前动画过渡的回调函数
onExiting	(node?: null, Element, Text) => void	退出中动画过渡的回调函数
onExited	(node?: null, Element, Text) => void	退出后动画过渡的回调函数
defaultOpen	boolean	默认打开
open	boolean	打开（受控）

<RootCloseWrapper> 代理外部关闭事件

import RootCloseWrapper from 'rsuite-utils/lib/Overlay/RootCloseWrapper';

属性名称	类型 (默认值)	描述
onRootClose	()=>void	触发关闭的回调函数