259 lines
10 KiB
TypeScript
259 lines
10 KiB
TypeScript
|
import * as React_2 from 'react';
|
||
|
|
import { SlotComponentType } from '@fluentui/react-utilities';
|
||
|
|
import { SlotRenderFunction } from '@fluentui/react-utilities';
|
||
|
|
|
||
|
|
export declare type AtomMotion = {
|
||
|
|
keyframes: Keyframe[];
|
||
|
|
} & KeyframeEffectOptions;
|
||
|
|
|
||
|
|
export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
|
||
|
|
element: HTMLElement;
|
||
|
|
} & MotionParams) => AtomMotion | AtomMotion[];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates a component that will animate the children using the provided motion.
|
||
|
|
*
|
||
|
|
* @param value - A motion definition.
|
||
|
|
*/
|
||
|
|
export declare function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>): React_2.FC<MotionComponentProps & MotionParams>;
|
||
|
|
|
||
|
|
export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
|
||
|
|
|
||
|
|
export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, override: PresenceOverride): PresenceComponent<MotionParams>;
|
||
|
|
|
||
|
|
export declare const curves: {
|
||
|
|
readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
|
||
|
|
readonly curveAccelerateMid: "cubic-bezier(1,0,1,1)";
|
||
|
|
readonly curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
|
||
|
|
readonly curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
|
||
|
|
readonly curveDecelerateMid: "cubic-bezier(0,0,0,1)";
|
||
|
|
readonly curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
|
||
|
|
readonly curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
|
||
|
|
readonly curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
|
||
|
|
readonly curveLinear: "cubic-bezier(0,0,1,1)";
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare const durations: {
|
||
|
|
readonly durationUltraFast: 50;
|
||
|
|
readonly durationFaster: 100;
|
||
|
|
readonly durationFast: 150;
|
||
|
|
readonly durationNormal: 200;
|
||
|
|
readonly durationGentle: 250;
|
||
|
|
readonly durationSlow: 300;
|
||
|
|
readonly durationSlower: 400;
|
||
|
|
readonly durationUltraSlow: 500;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @internal A private symbol to store the motion definition on the component for variants.
|
||
|
|
*/
|
||
|
|
declare const MOTION_DEFINITION: unique symbol;
|
||
|
|
|
||
|
|
export declare type MotionComponentProps = {
|
||
|
|
children: React_2.ReactElement;
|
||
|
|
/** Provides imperative controls for the animation. */
|
||
|
|
imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion finishes.
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
|
||
|
|
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
|
||
|
|
*/
|
||
|
|
onMotionFinish?: (ev: null) => void;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion is cancelled.
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
|
||
|
|
* triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
|
||
|
|
*/
|
||
|
|
onMotionCancel?: (ev: null) => void;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion starts.
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
|
||
|
|
* triggered when the first animation is started. There is no official "start" event with the Web Animations API.
|
||
|
|
* so the callback is triggered with "null".
|
||
|
|
*/
|
||
|
|
onMotionStart?: (ev: null) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type MotionImperativeRef = {
|
||
|
|
/** Sets the playback rate of the animation, where 1 is normal speed. */
|
||
|
|
setPlaybackRate: (rate: number) => void;
|
||
|
|
/** Sets the state of the animation to running or paused. */
|
||
|
|
setPlayState: (state: 'running' | 'paused') => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @internal
|
||
|
|
*
|
||
|
|
* A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain
|
||
|
|
* dependency for React hooks.
|
||
|
|
*/
|
||
|
|
declare type MotionParam = boolean | number | string;
|
||
|
|
|
||
|
|
export declare const motionTokens: {
|
||
|
|
curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
|
||
|
|
curveAccelerateMid: "cubic-bezier(1,0,1,1)";
|
||
|
|
curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
|
||
|
|
curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
|
||
|
|
curveDecelerateMid: "cubic-bezier(0,0,0,1)";
|
||
|
|
curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
|
||
|
|
curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
|
||
|
|
curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
|
||
|
|
curveLinear: "cubic-bezier(0,0,1,1)";
|
||
|
|
durationUltraFast: 50;
|
||
|
|
durationFaster: 100;
|
||
|
|
durationFast: 150;
|
||
|
|
durationNormal: 200;
|
||
|
|
durationGentle: 250;
|
||
|
|
durationSlow: 300;
|
||
|
|
durationSlower: 400;
|
||
|
|
durationUltraSlow: 500;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {
|
||
|
|
(props: PresenceComponentProps & MotionParams): React_2.ReactElement | null;
|
||
|
|
[MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type PresenceComponentProps = {
|
||
|
|
/**
|
||
|
|
* By default, the child component won't execute the "enter" motion when it initially mounts, regardless of the value
|
||
|
|
* of "visible". If you desire this behavior, ensure both "appear" and "visible" are set to "true".
|
||
|
|
*/
|
||
|
|
appear?: boolean;
|
||
|
|
/** A React element that will be cloned and will have motion effects applied to it. */
|
||
|
|
children: React_2.ReactElement;
|
||
|
|
/** Provides imperative controls for the animation. */
|
||
|
|
imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion finishes.
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
|
||
|
|
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
|
||
|
|
*/
|
||
|
|
onMotionFinish?: (ev: null, data: {
|
||
|
|
direction: PresenceDirection;
|
||
|
|
}) => void;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
|
||
|
|
* emit a finish event but a specific cancel event
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
|
||
|
|
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
|
||
|
|
*/
|
||
|
|
onMotionCancel?: (ev: null, data: {
|
||
|
|
direction: PresenceDirection;
|
||
|
|
}) => void;
|
||
|
|
/**
|
||
|
|
* Callback that is called when the whole motion starts.
|
||
|
|
*
|
||
|
|
* A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
|
||
|
|
* triggered when the first animation is started. There is no official "start" event with the Web Animations API.
|
||
|
|
* so the callback is triggered with "null".
|
||
|
|
*/
|
||
|
|
onMotionStart?: (ev: null, data: {
|
||
|
|
direction: PresenceDirection;
|
||
|
|
}) => void;
|
||
|
|
/** Defines whether a component is visible; triggers the "enter" or "exit" motions. */
|
||
|
|
visible?: boolean;
|
||
|
|
/**
|
||
|
|
* By default, the child component remains mounted after it reaches the "finished" state. Set "unmountOnExit" if
|
||
|
|
* you prefer to unmount the component after it finishes exiting.
|
||
|
|
*/
|
||
|
|
unmountOnExit?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type PresenceDirection = 'enter' | 'exit';
|
||
|
|
|
||
|
|
export declare class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
|
||
|
|
private mounted;
|
||
|
|
static getDerivedStateFromProps(nextProps: PresenceGroupProps, { childMapping: prevChildMapping, firstRender }: PresenceGroupState): {
|
||
|
|
childMapping: PresenceGroupChildMapping;
|
||
|
|
firstRender: boolean;
|
||
|
|
};
|
||
|
|
constructor(props: PresenceGroupProps, context: unknown);
|
||
|
|
private handleExit;
|
||
|
|
componentDidMount(): void;
|
||
|
|
componentWillUnmount(): void;
|
||
|
|
render(): JSX.Element;
|
||
|
|
}
|
||
|
|
|
||
|
|
declare type PresenceGroupChild = {
|
||
|
|
element: React_2.ReactElement;
|
||
|
|
appear: boolean;
|
||
|
|
visible: boolean;
|
||
|
|
unmountOnExit: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
declare type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;
|
||
|
|
|
||
|
|
declare type PresenceGroupProps = {
|
||
|
|
children: React_2.ReactNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
declare type PresenceGroupState = {
|
||
|
|
childMapping: PresenceGroupChildMapping;
|
||
|
|
firstRender: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export declare type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;
|
||
|
|
|
||
|
|
export declare type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
|
||
|
|
element: HTMLElement;
|
||
|
|
} & MotionParams) => PresenceMotion;
|
||
|
|
|
||
|
|
export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
|
||
|
|
elementType: React_2.FC<PresenceComponentProps & MotionParams>;
|
||
|
|
defaultProps: PresenceMotionSlotRenderProps & MotionParams;
|
||
|
|
}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
|
||
|
|
|
||
|
|
export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
|
||
|
|
/**
|
||
|
|
* @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
|
||
|
|
*
|
||
|
|
* If you want to override the animation, use the children render function instead.
|
||
|
|
*/
|
||
|
|
as?: keyof JSX.IntrinsicElements;
|
||
|
|
children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
|
||
|
|
children: React_2.ReactElement;
|
||
|
|
}>;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @internal
|
||
|
|
*/
|
||
|
|
declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @internal
|
||
|
|
*
|
||
|
|
* Override properties for presence transitions.
|
||
|
|
*
|
||
|
|
* @example <caption>Override duration for all transitions</caption>
|
||
|
|
* ```
|
||
|
|
* const override: PresenceOverride = {
|
||
|
|
* all: { duration: 1000 },
|
||
|
|
* };
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @example <caption>Override easing for exit transition</caption>
|
||
|
|
* ```
|
||
|
|
* const override: PresenceOverride = {
|
||
|
|
* exit: { easing: 'ease-out' },
|
||
|
|
* };
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
declare type PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @internal
|
||
|
|
*/
|
||
|
|
declare type PresenceOverrideFields = {
|
||
|
|
duration: KeyframeEffectOptions['duration'];
|
||
|
|
easing: KeyframeEffectOptions['easing'];
|
||
|
|
};
|
||
|
|
|
||
|
|
export { }
|