wix-style-react/dist/src/Transition/Transition.types.d.ts

wix-style-react

import * as React from 'react';
export type Duration = 'fast01' | 'fast02' | 'medium01' | 'medium02' | 'slow01' | 'slow02';
export type Delay = 'short' | 'medium' | 'long';
export type Direction = 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft';
export type FadeIn = {
    delay?: Delay;
    duration: Duration;
    easing?: 'enterEasing' | 'standardEasing';
};
export type FadeOut = {
    delay?: Delay;
    duration: Duration;
    easing?: 'exitEasing' | 'standardEasing';
};
export type MoveIn = {
    delay?: Delay;
    direction: Direction;
    distance: string;
    duration: Duration;
    easing?: 'enterEasing' | 'standardEasing';
};
export type MoveOut = {
    delay?: Delay;
    direction: Direction;
    distance: string;
    duration: Duration;
    easing?: 'exitEasing' | 'standardEasing';
};
export type Expand = {
    delay?: Delay;
    direction: Direction;
    duration: Duration;
    easing?: 'enterEasing' | 'standardEasing';
};
export type Collapse = {
    delay?: Delay;
    direction: Direction;
    duration: Duration;
    easing?: 'exitEasing' | 'standardEasing';
};
export type ScaleUp = {
    delay?: Delay;
    direction: 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart';
    duration: Duration;
    easing?: 'enterEasing' | 'standardEasing';
    scale: string;
};
export type ScaleDown = {
    delay?: Delay;
    direction: 'center' | 'top' | 'topEnd' | 'right' | 'bottomEnd' | 'bottom' | 'bottomStart' | 'left' | 'topStart';
    duration: Duration;
    easing?: 'exitEasing' | 'standardEasing';
    scale: string;
};
export type EnterAnimation = {
    fadeIn?: FadeIn | boolean;
    moveIn?: MoveIn | boolean;
    expand?: Expand | boolean;
    scaleUp?: ScaleUp | boolean;
};
export type ExitAnimation = {
    fadeOut?: FadeOut | boolean;
    moveOut?: MoveOut | boolean;
    collapse?: Collapse | boolean;
    scaleDown?: ScaleDown | boolean;
};
export type TransitionProps = {
    /** Shows enter animation on component mount. */
    animateOnLoad?: boolean;
    /** Applies a data-hook HTML attribute to be used in the tests. */
    dataHook?: string;
    /** Allows to render any component as a child item. */
    children?: React.ReactNode;
    /**
     Sets a type of animation that happens on enter animation.
     * - fadeIn -
     ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'enterEasing' | 'standardEasing';
      }
      ```
     * - moveIn -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'topToBottom'
          | 'bottomToTop'
          | 'leftToRight'
          | 'rightToLeft';
        distance: string;
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'enterEasing' | 'standardEasing';
      }
      ```
     * - expand -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'topToBottom'
          | 'bottomToTop'
          | 'leftToRight'
          | 'rightToLeft';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'enterEasing' | 'standardEasing';
      }
      ```
     * - scaleUp -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'center'
          | 'top'
          | 'topEnd'
          | 'right'
          | 'bottomEnd'
          | 'bottom'
          | 'bottomStart'
          | 'left'
          | 'topStart';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'enterEasing' | 'standardEasing';
        scale: string;
      }
      ```
    */
    enterAnimation?: EnterAnimation;
    /**
     Sets a type of animation that happens on exit animation.
     * - fadeOut -
      ```javascript
     {
        delay?: 'short' | 'medium' | 'long';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'exitEasing' | 'standardEasing';
      }
      ```
     * - moveOut -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'topToBottom'
          | 'bottomToTop'
          | 'leftToRight'
          | 'rightToLeft';
        distance: string;
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'exitEasing' | 'standardEasing'
      }
      ```
     * - collapse -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'topToBottom'
          | 'bottomToTop'
          | 'leftToRight'
          | 'rightToLeft';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'exitEasing' | 'standardEasing';
      }
      ```
     * - scaleDown -
      ```javascript
      {
        delay?: 'short' | 'medium' | 'long';
        direction:
          | 'center'
          | 'top'
          | 'topEnd'
          | 'right'
          | 'bottomEnd'
          | 'bottom'
          | 'bottomStart'
          | 'left'
          | 'topStart';
        duration:
          | 'fast01'
          | 'fast02'
          | 'medium01'
          | 'medium02'
          | 'slow01'
          | 'slow02';
        easing?: 'exitEasing' | 'standardEasing';
        scale: string;
      }
      ```
    */
    exitAnimation?: ExitAnimation;
    /** Lazy-mounts the component. If false, will be mounted immediately. It true, will be mounted with first enter. */
    mountOnEnter?: boolean;
    /** Defines a callback function which is called immediately after the animation starts. */
    onStart?: () => void;
    /** Defines a callback function which is called immediately after the animation ends. */
    onEnd?: () => void;
    /** Shows animation when set to true. */
    show?: boolean;
    /** Unmounts the component after it finishes exiting. If false, will stay mounted after exit. */
    unmountOnExit?: boolean;
    /** className to be applied to the root element. */
    className?: string;
};
//# sourceMappingURL=Transition.types.d.ts.map