1 | import * as React from 'react';
|
2 | import { Component } from 'react';
|
3 | import { Animated, StyleProp, ViewStyle } from 'react-native';
|
4 | import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
|
5 | type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
|
6 | type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
|
7 | export 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 | }
|
143 | type 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 | */
|
156 | export 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 | }
|
183 | export {};
|