@cleartrip/ct-design-transition 4.0.0-TEST.3 → 5.0.0

package/src/type.ts

@@ -0,0 +1,64 @@
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+import { CSSProperties } from 'react';
+
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+
+export type Direction = 'left' | 'right' | 'up' | 'down';
+export interface EasingProps {
+  easing: string | { enter?: string; exit?: string };
+}
+
+export type TransitionKeys =
+  | 'in'
+  | 'mountOnEnter'
+  | 'unmountOnExit'
+  | 'timeout'
+  | 'easing'
+  | 'addEndListener'
+  | TransitionHandlerKeys;
+export interface TransitionProps
+  extends
+    TransitionActions,
+    Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>,
+    React.HTMLAttributes<HTMLElement> {}
+
+export interface TransitionProps {
+  /**
+   * check if component ready for transition
+   * @default true
+   */
+  appear?: boolean;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement;
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: boolean;
+  /**
+   * transition type
+   * @default fade
+   */
+  type: 'fade' | 'zoom' | 'slide' | 'grow' | 'collapse' | 'grow_from_container' | 'slide_fade';
+  /**
+   * add css styles
+   */
+  css?: CSSProperties;
+  containerRef?: React.MutableRefObject<HTMLElement | null>;
+  slideDirection?: Direction;
+}
+
+export interface IGrowFromContainerProps {
+  containerRef?: React.MutableRefObject<HTMLElement | null>;
+  node: HTMLElement;
+  transitionProps?: ITransitionProps;
+}
+
+export interface ITransitionProps {
+  duration?: number | string;
+  easing?: string;
+  delay?: number | string;
+}