129 lines
6.6 KiB
TypeScript
129 lines
6.6 KiB
TypeScript
import type { MotionParam } from '@fluentui/react-motion';
|
|
import { PresenceComponent } from '@fluentui/react-motion';
|
|
import type { PresenceMotion } from '@fluentui/react-motion';
|
|
import type { PresenceMotionFn } from '@fluentui/react-motion';
|
|
|
|
/** A React component that applies collapse/expand transitions to its children. */
|
|
export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
|
|
|
|
export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
|
|
|
|
declare type CollapseDelayedVariantParams = {
|
|
/** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */
|
|
enterSizeDuration?: number;
|
|
/** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */
|
|
enterOpacityDuration?: number;
|
|
/** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */
|
|
exitSizeDuration?: number;
|
|
/** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
|
|
exitOpacityDuration?: number;
|
|
/** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */
|
|
enterDelay?: number;
|
|
/** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */
|
|
exitDelay?: number;
|
|
/** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value. */
|
|
enterEasing?: string;
|
|
/** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */
|
|
exitEasing?: string;
|
|
};
|
|
|
|
declare type CollapseOrientation = 'horizontal' | 'vertical';
|
|
|
|
export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
|
|
|
|
export declare type CollapseRuntimeParams = {
|
|
/** Whether to animate the opacity. Defaults to `true`. */
|
|
animateOpacity?: boolean;
|
|
/** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
|
|
orientation?: CollapseOrientation;
|
|
};
|
|
|
|
export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
|
|
|
|
declare type CollapseVariantParams = {
|
|
/** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
|
|
enterDuration?: number;
|
|
/** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value. */
|
|
enterEasing?: string;
|
|
/** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
|
|
exitDuration?: number;
|
|
/** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry. */
|
|
exitEasing?: string;
|
|
};
|
|
|
|
/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
|
|
export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>;
|
|
|
|
/** Defines a presence motion for collapse/expand. */
|
|
export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
|
|
|
|
/** Define a presence motion for fade in/out */
|
|
export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
|
|
|
|
/** Define a presence motion for scale in/out */
|
|
export declare const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable>;
|
|
|
|
/** A React component that applies fade in/out transitions to its children. */
|
|
export declare const Fade: PresenceComponent< {}>;
|
|
|
|
export declare const FadeRelaxed: PresenceComponent< {}>;
|
|
|
|
export declare const FadeSnappy: PresenceComponent< {}>;
|
|
|
|
declare type FadeVariantParams = {
|
|
/** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
|
|
enterDuration?: number;
|
|
/** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */
|
|
enterEasing?: string;
|
|
/** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
|
|
exitDuration?: number;
|
|
/** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */
|
|
exitEasing?: string;
|
|
};
|
|
|
|
/**
|
|
* This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
|
|
* The generated object defines a presence motion with `enter` and `exit` transitions.
|
|
* This motion object is declarative, i.e. data without side effects,
|
|
* and it is framework-independent, i.e. non-React.
|
|
* It can be turned into a React component using `createPresenceComponent`.
|
|
*/
|
|
declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
|
|
|
|
/**
|
|
* This is a factory function that generates a motion function, which has variant params bound into it.
|
|
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
|
* This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
|
|
* For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
|
|
* while the runtime params may give access to the target element, which is different for each instance.
|
|
*
|
|
* The generated motion function is also framework-independent, i.e. non-React.
|
|
* It can be turned into a React component using `createPresenceComponent`.
|
|
*/
|
|
declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
|
|
|
|
/** A React component that applies scale in/out transitions to its children. */
|
|
export declare const Scale: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
|
|
export declare const ScaleRelaxed: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
|
|
declare type ScaleRuntimeParams_unstable = {
|
|
/** Whether to animate the opacity. Defaults to `true`. */
|
|
animateOpacity?: boolean;
|
|
};
|
|
|
|
export declare const ScaleSnappy: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
|
|
declare type ScaleVariantParams_unstable = {
|
|
/** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
|
|
enterDuration?: number;
|
|
/** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */
|
|
enterEasing?: string;
|
|
/** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
|
|
exitDuration?: number;
|
|
/** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */
|
|
exitEasing?: string;
|
|
};
|
|
|
|
export { }
|