UNPKG

6.9 kBTypeScriptView Raw
1import * as React from 'react';
2import { Component } from 'react';
3import { Animated, StyleProp, ViewStyle } from 'react-native';
4import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
5type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
6type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
7export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
8 /**
9 * Enables two-finger gestures on supported devices, for example iPads with
10 * trackpads. If not enabled the gesture will require click + drag, with
11 * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
12 * the gesture.
13 */
14 enableTrackpadTwoFingerGesture?: boolean;
15 /**
16 * Specifies how much the visual interaction will be delayed compared to the
17 * gesture distance. e.g. value of 1 will indicate that the swipeable panel
18 * should exactly follow the gesture, 2 means it is going to be two times
19 * "slower".
20 */
21 friction?: number;
22 /**
23 * Distance from the left edge at which released panel will animate to the
24 * open state (or the open panel will animate into the closed state). By
25 * default it's a half of the panel's width.
26 */
27 leftThreshold?: number;
28 /**
29 * Distance from the right edge at which released panel will animate to the
30 * open state (or the open panel will animate into the closed state). By
31 * default it's a half of the panel's width.
32 */
33 rightThreshold?: number;
34 /**
35 * Distance that the panel must be dragged from the left edge to be considered
36 * a swipe. The default value is 10.
37 */
38 dragOffsetFromLeftEdge?: number;
39 /**
40 * Distance that the panel must be dragged from the right edge to be considered
41 * a swipe. The default value is 10.
42 */
43 dragOffsetFromRightEdge?: number;
44 /**
45 * Value indicating if the swipeable panel can be pulled further than the left
46 * actions panel's width. It is set to true by default as long as the left
47 * panel render method is present.
48 */
49 overshootLeft?: boolean;
50 /**
51 * Value indicating if the swipeable panel can be pulled further than the
52 * right actions panel's width. It is set to true by default as long as the
53 * right panel render method is present.
54 */
55 overshootRight?: boolean;
56 /**
57 * Specifies how much the visual interaction will be delayed compared to the
58 * gesture distance at overshoot. Default value is 1, it mean no friction, for
59 * a native feel, try 8 or above.
60 */
61 overshootFriction?: number;
62 /**
63 * @deprecated Use `direction` argument of onSwipeableOpen()
64 *
65 * Called when left action panel gets open.
66 */
67 onSwipeableLeftOpen?: () => void;
68 /**
69 * @deprecated Use `direction` argument of onSwipeableOpen()
70 *
71 * Called when right action panel gets open.
72 */
73 onSwipeableRightOpen?: () => void;
74 /**
75 * Called when action panel gets open (either right or left).
76 */
77 onSwipeableOpen?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
78 /**
79 * Called when action panel is closed.
80 */
81 onSwipeableClose?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
82 /**
83 * @deprecated Use `direction` argument of onSwipeableWillOpen()
84 *
85 * Called when left action panel starts animating on open.
86 */
87 onSwipeableLeftWillOpen?: () => void;
88 /**
89 * @deprecated Use `direction` argument of onSwipeableWillOpen()
90 *
91 * Called when right action panel starts animating on open.
92 */
93 onSwipeableRightWillOpen?: () => void;
94 /**
95 * Called when action panel starts animating on open (either right or left).
96 */
97 onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
98 /**
99 * Called when action panel starts animating on close.
100 */
101 onSwipeableWillClose?: (direction: 'left' | 'right') => void;
102 /**
103 * Called when action panel starts being shown on dragging to open.
104 */
105 onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
106 /**
107 * Called when action panel starts being shown on dragging to close.
108 */
109 onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
110 /**
111 *
112 * This map describes the values to use as inputRange for extra interpolation:
113 * AnimatedValue: [startValue, endValue]
114 *
115 * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
116 *
117 * To support `rtl` flexbox layouts use `flexDirection` styling.
118 * */
119 renderLeftActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
120 /**
121 *
122 * This map describes the values to use as inputRange for extra interpolation:
123 * AnimatedValue: [startValue, endValue]
124 *
125 * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
126 *
127 * To support `rtl` flexbox layouts use `flexDirection` styling.
128 * */
129 renderRightActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
130 useNativeAnimations?: boolean;
131 animationOptions?: Record<string, unknown>;
132 /**
133 * Style object for the container (`Animated.View`), for example to override
134 * `overflow: 'hidden'`.
135 */
136 containerStyle?: StyleProp<ViewStyle>;
137 /**
138 * Style object for the children container (`Animated.View`), for example to
139 * apply `flex: 1`
140 */
141 childrenContainerStyle?: StyleProp<ViewStyle>;
142}
143type SwipeableState = {
144 dragX: Animated.Value;
145 rowTranslation: Animated.Value;
146 rowState: number;
147 leftWidth?: number;
148 rightOffset?: number;
149 rowWidth?: number;
150};
151/**
152 * @deprecated use Reanimated version of Swipeable instead
153 *
154 * This component allows for implementing swipeable rows or similar interaction.
155 */
156export default class Swipeable extends Component<SwipeableProps, SwipeableState> {
157 static defaultProps: {
158 friction: number;
159 overshootFriction: number;
160 useNativeAnimations: boolean;
161 };
162 constructor(props: SwipeableProps);
163 shouldComponentUpdate(props: SwipeableProps, state: SwipeableState): boolean;
164 private onGestureEvent?;
165 private transX?;
166 private showLeftAction?;
167 private leftActionTranslate?;
168 private showRightAction?;
169 private rightActionTranslate?;
170 private updateAnimatedEvent;
171 private onTapHandlerStateChange;
172 private onHandlerStateChange;
173 private handleRelease;
174 private animateRow;
175 private onRowLayout;
176 private currentOffset;
177 close: () => void;
178 openLeft: () => void;
179 openRight: () => void;
180 reset: () => void;
181 render(): React.JSX.Element;
182}
183export {};