Skip to content

Commit 1f52c60

Browse files
jemise111jemise111
authored
Merge branch 'master' into master
2 parents b6ebea9 + b870524 commit 1f52c60

File tree

14 files changed

+936
-138
lines changed

14 files changed

+936
-138
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ assignees: ''
88
---
99

1010
Your issue may already be reported!
11-
Please search on the [issue tracker](../) before creating one.
11+
Please search on the [issue tracker](https://github.com/jemise111/react-native-swipe-list-view/issues) before creating one.
1212

1313
**Describe the bug**
1414
A clear and concise description of what the bug is.

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The `useFlatList` prop is no longer required, as `FlatList` is the default ListV
2222

2323
## Example
2424

25-
![](https://media.giphy.com/media/XAaoqXk1blvXukLIcZ/giphy.gif)
25+
![](https://media.giphy.com/media/WrmrvmwMnvvmzN3ZpX/giphy.gif)
2626

2727
Try it out! https://snack.expo.io/@jemise111/react-native-swipe-list-view
2828

@@ -42,6 +42,9 @@ The application under ./SwipeListExample will produce the above example. To run
4242
* ```cd react-native-swipe-list-view```
4343
* ```cd SwipeListExample```
4444
* ```yarn```
45+
* ```cd ios```
46+
* ```pod install```
47+
* ```cd ..```
4548
* ```react-native run-ios | react-native run-android```
4649

4750
> Android: If you get the [following error](https://github.com/facebook/react-native/issues/25629#issuecomment-511209583) `SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.`:
@@ -130,11 +133,13 @@ And see `example.js` for a full usage example.
130133
## Also see `docs/` for help with
131134
* [Manually Closing Rows](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/manually-closing-rows.md)
132135
* [Per Row Behavior](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/per-row-behavior.md)
136+
* [Actions](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/actions.md)
133137
134138
## And the `examples/` folder for examples on
135-
* Swipe to Delete
139+
* Swipe to Delete (also see "Actions" for an alternative way to achieve this)
136140
* Per Row Behavior
137141
* UI Based on Swipe Values
142+
* Actions
138143
139144
## Core Support
140145

‎SwipeListExample/example.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import PerRowConfig from './examples/per_row_config';
1313
import StandloneSwipeRow from './examples/standalone_swipe_row';
1414
import SwipeToDelete from './examples/swipe_to_delete';
1515
import SwipeValueBasedUi from './examples/swipe_value_based_ui';
16+
import Actions from './examples/actions';
1617

1718
const componentMap = {
1819
Basic,
@@ -21,6 +22,7 @@ const componentMap = {
2122
StandloneSwipeRow,
2223
SwipeToDelete,
2324
SwipeValueBasedUi,
25+
Actions,
2426
};
2527

2628
export default function App() {

‎SwipeListExample/examples/actions.js‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
import React, { useState } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
Image,
6+
Animated,
7+
TouchableOpacity,
8+
TouchableHighlight,
9+
View,
10+
} from 'react-native';
11+
12+
import SwipeListView from '../SwipeListView';
13+
14+
export default function Actions() {
15+
const [listData, setListData] = useState(
16+
Array(20)
17+
.fill('')
18+
.map((_, i) => ({
19+
key: `${i}`,
20+
text: `item #${i}`,
21+
initialLeftActionState: i % 2 !== 0,
22+
}))
23+
);
24+
25+
const closeRow = (rowMap, rowKey) => {
26+
if (rowMap[rowKey]) {
27+
rowMap[rowKey].closeRow();
28+
}
29+
};
30+
31+
const deleteRow = (rowMap, rowKey) => {
32+
closeRow(rowMap, rowKey);
33+
const newData = [...listData];
34+
const prevIndex = listData.findIndex(item => item.key === rowKey);
35+
newData.splice(prevIndex, 1);
36+
setListData(newData);
37+
};
38+
39+
const onRowDidOpen = rowKey => {
40+
console.log('This row opened', rowKey);
41+
};
42+
43+
const onLeftActionStatusChange = rowKey => {
44+
console.log('onLeftActionStatusChange', rowKey);
45+
};
46+
47+
const onRightActionStatusChange = rowKey => {
48+
console.log('onRightActionStatusChange', rowKey);
49+
};
50+
51+
const onRightAction = rowKey => {
52+
console.log('onRightAction', rowKey);
53+
};
54+
55+
const onLeftAction = rowKey => {
56+
console.log('onLeftAction', rowKey);
57+
};
58+
59+
const VisibleItem = props => {
60+
console.log(props.leftActionState);
61+
62+
const {
63+
rowHeightAnimatedValue,
64+
rightActionState,
65+
leftActionState,
66+
data,
67+
removeRow,
68+
} = props;
69+
70+
if (rightActionState) {
71+
Animated.timing(rowHeightAnimatedValue, {
72+
toValue: 0,
73+
duration: 200,
74+
}).start(() => {
75+
removeRow();
76+
});
77+
}
78+
79+
return (
80+
<Animated.View
81+
style={[
82+
styles.rowFront,
83+
{ height: rowHeightAnimatedValue },
84+
leftActionState && { backgroundColor: 'lightgreen' },
85+
]}
86+
>
87+
<TouchableHighlight
88+
onPress={() => console.log('You touched me')}
89+
style={[
90+
styles.rowFront,
91+
leftActionState && {
92+
backgroundColor: 'lightgreen',
93+
},
94+
]}
95+
underlayColor={'#AAA'}
96+
>
97+
<View>
98+
<Text>I am {data.item.text} in a SwipeListView</Text>
99+
</View>
100+
</TouchableHighlight>
101+
</Animated.View>
102+
);
103+
};
104+
105+
const renderItem = (data, rowMap) => {
106+
const rowHeightAnimatedValue = new Animated.Value(50);
107+
return (
108+
<VisibleItem
109+
rowHeightAnimatedValue={rowHeightAnimatedValue}
110+
data={data}
111+
removeRow={() => deleteRow(rowMap, data.item.key)}
112+
/>
113+
);
114+
};
115+
116+
const HiddenItemWithActions = props => {
117+
const {
118+
leftActionActivated,
119+
rightActionActivated,
120+
swipeAnimatedValue,
121+
rowActionAnimatedValue,
122+
rowHeightAnimatedValue,
123+
onClose,
124+
onDelete,
125+
} = props;
126+
127+
if (rightActionActivated) {
128+
Animated.spring(rowActionAnimatedValue, {
129+
toValue: 500,
130+
}).start();
131+
} else {
132+
Animated.spring(rowActionAnimatedValue, {
133+
toValue: 75,
134+
}).start();
135+
}
136+
137+
return (
138+
<Animated.View
139+
style={[
140+
styles.rowBack,
141+
{ height: rowHeightAnimatedValue },
142+
leftActionActivated && { backgroundColor: 'lightgreen' },
143+
]}
144+
>
145+
<Text>Left</Text>
146+
{!leftActionActivated && (
147+
<TouchableOpacity
148+
style={[styles.backRightBtn, styles.backRightBtnLeft]}
149+
onPress={onClose}
150+
>
151+
<Text style={styles.backTextWhite}>Close</Text>
152+
</TouchableOpacity>
153+
)}
154+
{!leftActionActivated && (
155+
<Animated.View
156+
style={[
157+
styles.backRightBtn,
158+
styles.backRightBtnRight,
159+
{ flex: 1, width: rowActionAnimatedValue },
160+
]}
161+
>
162+
<TouchableOpacity
163+
style={[
164+
styles.backRightBtn,
165+
styles.backRightBtnRight,
166+
]}
167+
onPress={onDelete}
168+
>
169+
<Animated.View
170+
style={[
171+
styles.trash,
172+
{
173+
transform: [
174+
{
175+
scale: swipeAnimatedValue.interpolate(
176+
{
177+
inputRange: [-90, -45],
178+
outputRange: [1, 0],
179+
extrapolate: 'clamp',
180+
}
181+
),
182+
},
183+
],
184+
},
185+
]}
186+
>
187+
<Image
188+
source={require('../images/trash.png')}
189+
style={styles.trash}
190+
/>
191+
</Animated.View>
192+
</TouchableOpacity>
193+
</Animated.View>
194+
)}
195+
</Animated.View>
196+
);
197+
};
198+
199+
const renderHiddenItem = (data, rowMap) => {
200+
const rowActionAnimatedValue = new Animated.Value(75);
201+
const rowHeightAnimatedValue = new Animated.Value(50);
202+
return (
203+
<HiddenItemWithActions
204+
data={data}
205+
rowMap={rowMap}
206+
rowActionAnimatedValue={rowActionAnimatedValue}
207+
rowHeightAnimatedValue={rowHeightAnimatedValue}
208+
onClose={() => closeRow(rowMap, data.item.key)}
209+
onDelete={() => deleteRow(rowMap, data.item.key)}
210+
/>
211+
);
212+
};
213+
214+
return (
215+
<View style={styles.container}>
216+
<SwipeListView
217+
data={listData}
218+
renderItem={renderItem}
219+
renderHiddenItem={renderHiddenItem}
220+
onRowDidOpen={onRowDidOpen}
221+
leftOpenValue={75}
222+
rightOpenValue={-150}
223+
leftActivationValue={100}
224+
rightActivationValue={-200}
225+
leftActionValue={0}
226+
rightActionValue={-500}
227+
onLeftAction={onLeftAction}
228+
onRightAction={onRightAction}
229+
onLeftActionStatusChange={onLeftActionStatusChange}
230+
onRightActionStatusChange={onRightActionStatusChange}
231+
/>
232+
</View>
233+
);
234+
}
235+
236+
const styles = StyleSheet.create({
237+
container: {
238+
backgroundColor: 'white',
239+
flex: 1,
240+
},
241+
backTextWhite: {
242+
color: '#FFF',
243+
},
244+
rowFront: {
245+
alignItems: 'center',
246+
backgroundColor: '#CCC',
247+
borderBottomColor: 'black',
248+
borderBottomWidth: 1,
249+
justifyContent: 'center',
250+
height: 50,
251+
width: '100%',
252+
},
253+
rowBack: {
254+
alignItems: 'center',
255+
backgroundColor: '#DDD',
256+
flex: 1,
257+
flexDirection: 'row',
258+
justifyContent: 'space-between',
259+
paddingLeft: 15,
260+
},
261+
backRightBtn: {
262+
alignItems: 'flex-end',
263+
bottom: 0,
264+
justifyContent: 'center',
265+
position: 'absolute',
266+
top: 0,
267+
width: 75,
268+
paddingRight: 17,
269+
},
270+
backRightBtnLeft: {
271+
backgroundColor: 'blue',
272+
right: 75,
273+
},
274+
backRightBtnRight: {
275+
backgroundColor: 'red',
276+
right: 0,
277+
},
278+
trash: {
279+
height: 25,
280+
width: 25,
281+
marginRight: 7,
282+
},
283+
});

‎SwipeListExample/examples/swipe_to_delete.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export default function SwipeToDelete() {
8787
renderHiddenItem={renderHiddenItem}
8888
rightOpenValue={-Dimensions.get('window').width}
8989
onSwipeValueChange={onSwipeValueChange}
90+
useNativeDriver={false}
9091
/>
9192
</View>
9293
);

0 commit comments

Comments
 (0)