@enact/ui

// Type definitions for ui/Transition import * as React from "react"; type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N; export interface TransitionBaseProps { /** * Provide a function to get the reference to the child node (the one with the content) at render time. * * Useful if you need to measure or interact with the node directly. */ childRef?: object | Function; /** * The node to be transitioned. */ children?: React.ReactNode; /** * The height of the transition when `type` is set to `'clip'` , used when direction is 'left' or 'right'. */ clipHeight?: number; /** * The width of the transition when `type` is set to `'clip'` , used when direction is 'left' or 'right'. */ clipWidth?: number; /** * Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component. * * The following classes are supported: * * `transition` - The root component class * * `inner` - The element inside the transition. This is the container for the transitioning content. * * `shown` - Applied when content is present (visible), related to the `visible` prop/state * * `hidden` - Applied when content is not present (hiding), related to the `visible` prop/state * * `slide` - Applied when the `slide` `type` is set * * `fade` - Applied when the `fade` `type` is set * * `clip` - Applied when the `clip` `type` is set * * `up` - Applied when the `direction` `up` is set * * `right` - Applied when the `direction` `right` is set * * `down` - Applied when the `direction` `down` is set * * `left` - Applied when the `direction` `left` is set * * `short` - Applied when the `duration` `short` is set * * `medium` - Applied when the `duration` `medium` is set * * `long` - Applied when the `duration` `long` is set * * `ease` - Applied when the `timingFunction` `ease` is set * * `ease-in` - Applied when the `timingFunction` `ease-in` is set * * `ease-out` - Applied when the `timingFunction` `ease-out` is set * * `ease-in-out` - Applied when the `timingFunction` `ease-in-out` is set * * `ease-in-quart` - Applied when the `timingFunction` `ease-in-quart` is set * * `ease-out-quart` - Applied when the `timingFunction` `ease-out-quart` is set * * `linear` - Applied when the `timingFunction` `linear` is set */ css?: object; /** * Sets the direction of transition. Where the component will move _to_ ; the destination. Supported directions are: `'up'` , `'right'` , `'down'` , `'left'` . */ direction?: string; /** * Controls how long the transition should take. Supported preset durations are: `'short'` (250ms), `'medium'` (500ms), and `'long'` (1s). `'medium'` (500ms) is default when no others are specified. Any valid CSS duration value is also accepted, e.g. "200ms" or "3s". Pure numeric values are also supported and treated as milliseconds. */ duration?: string | number; /** * Disables transition animation. * * When `false` , visibility changes animate. */ noAnimation?: boolean; /** * The transition timing function. * * Supported function names are: `ease` , `ease-in` , `ease-out` , `ease-in-out` , `ease-in-quart` , `ease-out-quart` , and `linear` . */ timingFunction?: string; /** * The type of transition to affect the content. * * Supported types are: `'slide'` , `'clip'` , and `'fade'` . * * Details on types: * * `'slide'` - Typically used for bringing something which is off the edge of the screen, and not visible, onto the screen. Think of a popup, toast, notification, dialog, or an overlaying menu. This requires no re-rendering or repainting of the screen during the transition, making it very performant. However, this does not affect layout at all, which makes it less useful for transitioning from a place already on the screen. * * `'clip'` - This is useful for showing a component that transitions-in from a location that is already on the screen. Examples would be an expanding header or an accordion. This type does affect layout, its current size will push other sibling elements to make room for itself. Because of this, repainting the layout does happen during transition. * * `'fade'` - Fade the components onto the screen, from 0 opacity (completely invisible) to 1 (full visibility). Pretty basic, but useful for fading on/off a tooltip, a menu, a panel, or even view contents. This does not affect layout at all. */ type?: string; /** * Sets the visibility of the component, which determines whether it's on screen or off. */ visible?: boolean; } /** * The stateless structure of the component. * * In case you want to provide all of the state yourself. In general, you'll probably want to use the `Transition` instead of `TransitionBase` . */ export class TransitionBase extends React.Component< Merge<React.HTMLProps<HTMLElement>, TransitionBaseProps> > {} export interface TransitionProps { /** * The node to be transitioned. */ children?: React.ReactNode; /** * The direction of transition (i.e. where the component will move _to_ ; the destination). * * Supported directions are: `'up'` , `'right'` , `'down'` , `'left'` . */ direction?: string; /** * Controls how long the transition should take. * * Supported preset durations are: `'short'` (250ms), `'medium'` (500ms), and `'long'` (1s). `'medium'` (500ms) is default when no others are specified. * * Any valid CSS duration value is also accepted, e.g. "200ms" or "3s". Pure numeric values are also supported and treated as milliseconds. */ duration?: string | number; /** * Disables transition animation. * * When `false` , visibility changes animate. */ noAnimation?: boolean; /** * Called after transition for hiding is finished. */ onHide?: Function; /** * Called after transition for showing is finished. */ onShow?: Function; /** * The transition timing function. Supported function names are: `ease` , `ease-in` , `ease-out` , `ease-in-out` , `ease-in-quart` , `ease-out-quart` , and `linear` . */ timingFunction?: string; /** * The type of transition to affect the content. * * Supported types are: `'slide'` , `'clip'` , and `'fade'` . * * Details on types: * * `'slide'` - Typically used for bringing something which is off the edge of the screen, and not visible, onto the screen. Think of a popup, toast, notification, dialog, or an overlaying menu. This requires no re-rendering or repainting of the screen during the transition, making it very performant. However, this does not affect layout at all, which makes it less useful for transitioning from a place already on the screen. * * `'clip'` - This is useful for showing a component that transitions-in from a location that is already on the screen. Examples would be an expanding header or an accordion. This type does affect layout, its current size will push other sibling elements to make room for itself. Because of this, repainting the layout does happen during transition. * * `'fade'` - Fade the components onto the screen, from 0 opacity (completely invisible) to 1 (full visibility). Pretty basic, but useful for fading on/off a tooltip, a menu, a panel, or even view contents. This does not affect layout at all. */ type?: string; /** * The visibility of the component, which determines whether it's on the screen or off. */ visible?: boolean; } /** * A stateful component that allows for applying transitions to its child items via configurable properties and events. */ export class Transition extends React.Component< Merge<React.HTMLProps<HTMLElement>, TransitionProps> > {} export default Transition;