1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { PanResponder, Animated, View, StyleSheet, } from 'react-native';
|
14 | import ListItemBase from './ListItemBase';
|
15 | import { ScreenWidth } from '../helpers';
|
16 | const ListItemSwipeable = (_a) => {
|
17 | var { children, leftStyle, rightStyle, leftContent, rightContent, leftWidth = ScreenWidth / 3, rightWidth = ScreenWidth / 3 } = _a, props = __rest(_a, ["children", "leftStyle", "rightStyle", "leftContent", "rightContent", "leftWidth", "rightWidth"]);
|
18 | const { current: panX } = React.useRef(new Animated.Value(0));
|
19 | const currValue = React.useRef(0);
|
20 | const prevValue = React.useRef(0);
|
21 | React.useEffect(() => {
|
22 | let subs = panX.addListener(({ value }) => {
|
23 | currValue.current = value;
|
24 | });
|
25 | return () => {
|
26 | panX.removeListener(subs);
|
27 | };
|
28 | }, [panX]);
|
29 | const slideAnimation = React.useCallback((toValue) => {
|
30 | Animated.spring(panX, {
|
31 | toValue,
|
32 | useNativeDriver: true,
|
33 | }).start();
|
34 | prevValue.current = toValue;
|
35 | }, [panX]);
|
36 | const onPanResponderMove = (_, { dx }) => {
|
37 | if (!prevValue.current) {
|
38 | prevValue.current = currValue.current;
|
39 | }
|
40 | let newDX = prevValue.current + dx;
|
41 | if (Math.abs(newDX) > ScreenWidth / 2) {
|
42 | return;
|
43 | }
|
44 | panX.setValue(newDX);
|
45 | };
|
46 | const onPanResponderRelease = (_, { dx }) => {
|
47 | prevValue.current = currValue.current;
|
48 | if ((Math.sign(dx) > 0 && !leftContent) ||
|
49 | (Math.sign(dx) < 0 && !rightContent)) {
|
50 | return slideAnimation(0);
|
51 | }
|
52 | if (Math.abs(currValue.current) >= ScreenWidth / 3) {
|
53 | slideAnimation(currValue.current > 0 ? rightWidth : -leftWidth);
|
54 | }
|
55 | else {
|
56 | slideAnimation(0);
|
57 | }
|
58 | };
|
59 | const { current: _panResponder } = React.useRef(PanResponder.create({
|
60 | onMoveShouldSetPanResponderCapture: () => true,
|
61 | onPanResponderGrant: () => false,
|
62 | onPanResponderMove,
|
63 | onPanResponderRelease,
|
64 | }));
|
65 | return (<View style={{
|
66 | justifyContent: 'center',
|
67 | }}>
|
68 | <View style={[
|
69 | styles.hidden,
|
70 | {
|
71 | flex: 1,
|
72 | flexDirection: 'row',
|
73 | justifyContent: 'space-between',
|
74 | },
|
75 | ]}>
|
76 | <View style={[
|
77 | {
|
78 | width: leftWidth,
|
79 | zIndex: 1,
|
80 | },
|
81 | leftStyle,
|
82 | ]}>
|
83 | {leftContent}
|
84 | </View>
|
85 | <View style={{ flex: 0 }}/>
|
86 | <View style={[
|
87 | {
|
88 | width: rightWidth,
|
89 | zIndex: 1,
|
90 | },
|
91 | rightStyle,
|
92 | ]}>
|
93 | {rightContent}
|
94 | </View>
|
95 | </View>
|
96 | <Animated.View style={{
|
97 | transform: [
|
98 | {
|
99 | translateX: panX,
|
100 | },
|
101 | ],
|
102 | zIndex: 2,
|
103 | }} {..._panResponder.panHandlers}>
|
104 | <ListItemBase {...props}>{children}</ListItemBase>
|
105 | </Animated.View>
|
106 | </View>);
|
107 | };
|
108 | const styles = StyleSheet.create({
|
109 | hidden: {
|
110 | bottom: 0,
|
111 | left: 0,
|
112 | overflow: 'hidden',
|
113 | position: 'absolute',
|
114 | right: 0,
|
115 | top: 0,
|
116 | },
|
117 | });
|
118 | export default ListItemSwipeable;
|
119 |
|
\ | No newline at end of file |