@react-motion-router/core/build/SharedElement.d.ts

Declarative routing library for ReactJS ⚛ with animations baked in ⏮

import { Component } from 'react';
import { EasingFunction, PlainObject, Vec2 } from './common/types';
declare enum TransformOriginKeywordEnum {
    center = 0,
    top = 1,
    bottom = 2,
    left = 3,
    right = 4
}
declare enum TransformOriginLengthUnitEnum {
    cap = 0,
    ch = 1,
    em = 2,
    ex = 3,
    ic = 4,
    lh = 5,
    rem = 6,
    rlh = 7,
    vh = 8,
    vw = 9,
    vi = 10,
    vb = 11,
    vmin = 12,
    vmax = 13,
    px = 14,
    cm = 15,
    mm = 16,
    Q = 17,
    in = 18,
    pc = 19,
    pt = 20,
    '%' = 21
}
declare enum TransformOriginGlobalEnum {
    inital = 0,
    inherit = 1,
    revert = 2,
    unset = 3
}
declare enum TransitionAnimationEnum {
    "morph" = 0,
    "fade-through" = 1,
    "fade" = 2,
    "cross-fade" = 3
}
type TransitionAnimation = keyof typeof TransitionAnimationEnum;
type TransformOriginGlobal = keyof typeof TransformOriginGlobalEnum;
type TransformOriginLengthUnit = keyof typeof TransformOriginLengthUnitEnum;
type TransformOriginLength = `${number}${TransformOriginLengthUnit}` | 0;
type TransformOriginKeyword = keyof typeof TransformOriginKeywordEnum;
type OneValueTransformOrigin = TransformOriginKeyword | TransformOriginLength;
type TwoValueTransformOrigin = `${OneValueTransformOrigin} ${OneValueTransformOrigin}`;
type ThreeValueTransformOrigin = `${OneValueTransformOrigin} ${OneValueTransformOrigin} ${TransformOriginLength}`;
type TransformOrigin = TransformOriginGlobal | OneValueTransformOrigin | TwoValueTransformOrigin | ThreeValueTransformOrigin;
export interface SharedElementNode {
    id: string;
    instance: SharedElement;
}
export type SharedElementNodeMap = Map<string, SharedElementNode>;
export declare class SharedElementScene {
    private _nodes;
    private _name;
    private _scrollPos;
    private _getScreenRect;
    private _keepAlive;
    constructor(name: string);
    addNode(node: SharedElementNode | null): void;
    removeNode(_id: string): void;
    get xRatio(): number;
    get yRatio(): number;
    get nodes(): SharedElementNodeMap;
    get name(): string;
    get scrollPos(): Vec2;
    get x(): number;
    get y(): number;
    get keepAlive(): boolean;
    set scrollPos(_scrollPos: Vec2);
    set getScreenRect(_getScreenRect: () => DOMRect);
    set keepAlive(_keepAlive: boolean);
    isEmpty(): boolean;
}
export declare const SharedElementSceneContext: import("react").Context<SharedElementScene | null>;
interface SharedElementConfig {
    type?: TransitionAnimation;
    transformOrigin?: TransformOrigin;
    easingFunction?: EasingFunction;
    duration?: number;
    delay?: number;
    x?: {
        delay?: number;
        duration?: number;
        easingFunction?: EasingFunction;
    };
    y?: {
        delay?: number;
        duration?: number;
        easingFunction?: EasingFunction;
    };
}
interface SharedElementProps {
    id: string | number;
    children: React.ReactChild;
    disabled?: boolean;
    config?: SharedElementConfig;
}
interface SharedElementState {
    hidden: boolean;
    keepAlive: boolean;
}
export declare class SharedElement extends Component<SharedElementProps, SharedElementState> {
    private _id;
    private _ref;
    private _scene;
    private _mutationObserver;
    private _callbackID;
    private _computedStyle;
    private _isMounted;
    private onRef;
    state: SharedElementState;
    get scene(): SharedElementScene | null;
    get node(): HTMLElement | null;
    get clientRect(): DOMRect;
    get CSSData(): [string, PlainObject<string>];
    get CSSText(): string;
    get id(): string;
    get transitionType(): "fade" | "morph" | "fade-through" | "cross-fade" | undefined;
    onCloneAppended: (e: HTMLElement) => void;
    onCloneRemove: (e: HTMLElement) => void;
    keepAlive(_keepAlive: boolean): Promise<void>;
    hidden(_hidden: boolean): Promise<void>;
    private setRef;
    updateScene(): void;
    componentDidMount(): void;
    componentDidUpdate(prevProps: SharedElementProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
}
export {};