@onepercentio/one-ui 1.3.4 → 1.3.5

package/dist/components/Transition/Transition.d.ts

@@ -0,0 +1,114 @@
+import React, { DetailedHTMLProps, Key, ReactElement } from "react";
+export type TransitionTypeDefinitions = {
+    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP;
+} | {
+    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID;
+    elementId: string;
+} | {
+    transitionType?: TransitionAnimationTypes.MASK;
+    /**
+     * It provides the transition container so you can create a dynamic svg to mask with
+     */
+    maskFactory: (container: HTMLDivElement) => string;
+} | {
+    transitionType?: TransitionAnimationTypes.CUSTOM;
+    config: ReturnType<typeof TransitionClasses>;
+};
+export type TransitionProps = {
+    step: number;
+    className?: string;
+    contentStyle?: React.CSSProperties;
+    contentClassName?: string;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: (discardedKey: React.Key, startedAnimationAt: number) => void;
+    lockTransitionWidth?: boolean;
+    lockTransitionHeight?: boolean;
+} & TransitionTypeDefinitions & Omit<DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "className" | "children">;
+declare function TransitionClasses(type: NonNullable<Exclude<TransitionProps["transitionType"], TransitionAnimationTypes.CUSTOM>>): {
+    /**
+     * Applied to the element that was not visible and is now entering the screen
+     */
+    backward: {
+        elementEntering: string;
+        elementExiting: string;
+    };
+    /**
+     * Applied to the element that was visible and now is exiting the screen
+     */
+    forward: {
+        elementEntering: string;
+        elementExiting: string;
+    };
+};
+export declare enum TransitionAnimationTypes {
+    SLIDE = 0,
+    POP_FROM_CLICK_ORIGIN = 1,
+    POP_FROM_ELEMENT_ID = 2,
+    FADE = 3,
+    COIN_FLIP = 4,
+    MASK = 5,
+    CUSTOM = 6
+}
+/**
+ * A component that manages smooth transitions between different views or screens.
+ * It handles animations and switching between multiple children elements.
+ *
+ * Simple explanation: This component controls how content changes from one screen to another,
+ * making the transition look smooth and professional with various animation styles.
+ */
+declare const Transition: React.ForwardRefExoticComponent<(Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.POP_FROM_ELEMENT_ID | undefined;
+    elementId: string;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.MASK | undefined;
+    /**
+     * It provides the transition container so you can create a dynamic svg to mask with
+     */
+    maskFactory: (container: HTMLDivElement) => string;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref"> | Omit<{
+    step: number;
+    className?: string | undefined;
+    contentStyle?: React.CSSProperties | undefined;
+    contentClassName?: string | undefined;
+    children: (React.ReactElement | undefined)[];
+    onDiscardStep?: ((discardedKey: React.Key, startedAnimationAt: number) => void) | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+} & {
+    transitionType?: TransitionAnimationTypes.CUSTOM | undefined;
+    config: ReturnType<typeof TransitionClasses>;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "className">, "ref">) & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * A component that manages smooth transitions between different views or screens.
+ * It handles animations and switching between multiple children elements.
+ */
+export default Transition;