material-motion
Version:
Makes it easy to add rich, interactive motion to your application.
44 lines (43 loc) • 1.77 kB
TypeScript
import { Direction } from '../enums';
import { MotionProperty } from '../observables';
import { ObservableWithMotionOperators, ScaleStyleStreams, TranslateStyleStreams } from '../types';
import { NumericSpring } from './NumericSpring';
import { Tossable } from './Tossable';
export declare enum SwipeState {
NONE = "none",
LEFT = "left",
RIGHT = "right",
}
export declare type SwipeableArgs = {
tossable: Tossable;
width$: ObservableWithMotionOperators<number>;
};
export declare class Swipeable {
static VISUAL_THRESHOLD: number;
readonly iconSpring: NumericSpring;
readonly backgroundSpring: NumericSpring;
readonly swipeState$: MotionProperty<SwipeState>;
readonly direction$: ObservableWithMotionOperators<Direction>;
readonly isThresholdMet$: ObservableWithMotionOperators<boolean>;
readonly whenThresholdCrossed$: ObservableWithMotionOperators<boolean>;
readonly whenThresholdFirstCrossed$: ObservableWithMotionOperators<boolean>;
/**
* If an item is swiped past the threshold, it will animate by its own width
* + destinationMargin, in the direction of the swipe.
*
* This ensures that decoration that might overflow an item's bounds (like a
* shadow) isn't visible when it's been swiped away.
*/
readonly destinationMargin$: MotionProperty<number>;
destinationMargin: number;
readonly state$: ObservableWithMotionOperators<string>;
readonly tossable: Tossable;
readonly width$: ObservableWithMotionOperators<number>;
readonly styleStreamsByTargetName: {
item: TranslateStyleStreams;
icon: ScaleStyleStreams;
background: ScaleStyleStreams;
};
constructor({tossable, width$}: SwipeableArgs);
}
export default Swipeable;