@@ -66,14 +66,39 @@ function App() {
66
66
67
67
return (
68
68
< div className = { styles . example } >
69
- < span >
70
- Suspendisse nunc arcu, pretium id arcu nec, bibendum semper libero.
71
- Morbi aliquet pellentesque nunc quis dapibus. Proin a facilisis purus,
72
- quis pellentesque leo. Nullam maximus nulla ac ante lacinia pharetra.
73
- Cras bibendum ac mauris id laoreet. Maecenas luctus arcu ac sapien
74
- pharetra convallis. Mauris sed varius sapien, eu fermentum turpis.
75
- </ span >
69
+ < h3 > react-swipeable-list example</ h3 >
70
+ < h5 > (try also mobile view in dev tools for touch events)</ h5 >
71
+ < h3 > Simple example (with default 0.5 action trigger threshold)</ h3 >
72
+ < span className = { styles . actionInfo } > { triggeredSimpleItemAction } </ span >
76
73
< div className = { styles . listContainer } >
74
+ < SwipeableList >
75
+ < SwipeableListItem
76
+ swipeRight = { swipeRightDataSimple ( 'Item with swipe right' ) }
77
+ >
78
+ { itemContentSimple ( 'Item with swipe right' ) }
79
+ </ SwipeableListItem >
80
+ < SwipeableListItem
81
+ swipeLeft = { swipeLeftDataSimple ( 'Item with swipe left' ) }
82
+ >
83
+ { itemContentSimple ( 'Item with swipe left' ) }
84
+ </ SwipeableListItem >
85
+ < SwipeableListItem
86
+ swipeRight = { swipeRightDataSimple ( 'Item with both swipes' ) }
87
+ swipeLeft = { swipeLeftDataSimple ( 'Item with both swipes' ) }
88
+ >
89
+ { itemContentSimple ( 'Item with both swipes' ) }
90
+ </ SwipeableListItem >
91
+ < SwipeableListItem >
92
+ { itemContentSimple ( 'Item without swipe actions' ) }
93
+ </ SwipeableListItem >
94
+ </ SwipeableList >
95
+ </ div >
96
+ < h3 >
97
+ More complex items and scroll (with 0.25 action trigger threshold)
98
+ </ h3 >
99
+ < h3 > List in smaller container</ h3 >
100
+ < span className = { styles . actionInfo } > { triggeredComplexItemAction } </ span >
101
+ < div className = { styles . complexListContainer } >
77
102
< SwipeableList threshold = { 0.25 } >
78
103
< SwipeableListItem
79
104
swipeLeft = { swipeLeftDataComplex ( 'First' ) }
@@ -117,92 +142,9 @@ function App() {
117
142
</ SwipeableListItem >
118
143
</ SwipeableList >
119
144
</ div >
120
- < span >
121
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet
122
- elit ut erat viverra tempor vitae nec velit. Mauris quam leo, efficitur
123
- ut leo eget, faucibus semper justo. Aenean tellus justo, ornare a justo
124
- quis, fermentum semper massa. Fusce lacinia nulla ut enim rhoncus
125
- molestie. Cras dui dui, luctus eget nunc a, blandit efficitur ligula.
126
- Curabitur lobortis neque ut nulla faucibus fringilla. Nunc commodo
127
- suscipit vehicula. Sed consectetur mattis pulvinar. Aliquam lacinia,
128
- ipsum id placerat eleifend, risus nunc accumsan tellus, sit amet viverra
129
- ante mauris vel purus. Curabitur quis neque id metus convallis sodales.
130
- Aenean ornare velit eu mauris pretium, ac suscipit ex fermentum. In et
131
- eros arcu. Vestibulum sollicitudin, erat vel tincidunt bibendum, lorem
132
- risus hendrerit sem, ut molestie nisl ligula in quam. Nam vehicula
133
- dignissim mi, id pretium eros mattis eget. Donec a metus dapibus,
134
- sodales justo sit amet, efficitur risus. Suspendisse aliquam porttitor
135
- viverra. Suspendisse nunc arcu, pretium id arcu nec, bibendum semper
136
- libero. Morbi aliquet pellentesque nunc quis dapibus. Proin a facilisis
137
- purus, quis pellentesque leo. Nullam maximus nulla ac ante lacinia
138
- pharetra. Cras bibendum ac mauris id laoreet. Maecenas luctus arcu ac
139
- sapien pharetra convallis. Mauris sed varius sapien, eu fermentum
140
- turpis. Suspendisse pellentesque placerat tellus, quis convallis augue
141
- ornare quis. Vestibulum faucibus nibh at augue aliquet faucibus. Duis
142
- auctor, mauris et aliquet blandit, sem erat rutrum ipsum, et efficitur
143
- elit justo a arcu. Nunc porta justo non justo tempor, id ultrices risus
144
- egestas. Maecenas porttitor lectus sollicitudin molestie vehicula.
145
- Pellentesque gravida enim in purus convallis rutrum. Proin eget
146
- ullamcorper diam. Etiam mauris nunc, consequat ac quam vitae, vulputate
147
- laoreet purus. Aenean blandit lobortis erat vitae posuere. Donec nibh
148
- mauris, blandit id magna ac, scelerisque ullamcorper erat. Nulla
149
- sollicitudin lectus libero, id mollis mauris porta a. In iaculis non
150
- enim nec pretium. Vestibulum ultrices aliquam tortor sed hendrerit.
151
- Integer tortor nibh, faucibus ac aliquet sit amet, sollicitudin ac
152
- massa. Morbi euismod cursus rhoncus. Quisque ultricies nisl at diam
153
- fringilla, sit amet facilisis massa ullamcorper. Sed ut turpis lacus.
154
- Cras consequat in leo quis placerat. Etiam facilisis diam pulvinar augue
155
- dignissim, sed maximus orci tempus. Integer eget ligula id lorem ornare
156
- efficitur nec vitae nibh. Pellentesque tincidunt vehicula metus, vitae
157
- placerat erat tincidunt vel. Morbi nunc augue, laoreet sed lobortis eu,
158
- faucibus in odio. Sed vestibulum, mi a hendrerit aliquam, sapien nibh
159
- venenatis urna, et sodales risus urna non metus. Pellentesque habitant
160
- morbi tristique senectus et netus et malesuada fames ac turpis egestas.
161
- Suspendisse nec urna orci. Aliquam lacus nisi, condimentum eget luctus
162
- sit amet, mattis id lectus. Aliquam bibendum turpis sed leo luctus, nec
163
- consectetur mi consectetur. Morbi tempor nisi eu odio finibus dictum.
164
- Maecenas cursus porttitor nisi et semper. Praesent in posuere metus.
165
- Phasellus erat nisi, iaculis at bibendum vitae, suscipit eget urna.
166
- Etiam pretium metus id odio placerat, vitae feugiat eros hendrerit.
167
- Aenean consectetur vehicula mattis. Suspendisse leo sapien, rhoncus nec
168
- dictum venenatis, fermentum vitae ligula. Pellentesque maximus blandit
169
- maximus. Donec dignissim, nisi ac lacinia aliquam, orci odio malesuada
170
- diam, consectetur vestibulum urna nulla non urna. Donec enim felis,
171
- condimentum ac blandit sed, varius ac neque. Sed luctus lorem vitae
172
- lacus dictum, in sodales orci posuere.
173
- </ span >
174
- < h3 > react-swipeable-list example</ h3 >
175
- < h5 > (try also mobile view in dev tools for touch events)</ h5 >
176
- < h3 > Simple example (with default 0.5 action trigger threshold)</ h3 >
177
- < span className = { styles . actionInfo } > { triggeredSimpleItemAction } </ span >
178
- < div className = { styles . listContainer } >
179
- < SwipeableList >
180
- < SwipeableListItem
181
- swipeRight = { swipeRightDataSimple ( 'Item with swipe right' ) }
182
- >
183
- { itemContentSimple ( 'Item with swipe right' ) }
184
- </ SwipeableListItem >
185
- < SwipeableListItem
186
- swipeLeft = { swipeLeftDataSimple ( 'Item with swipe left' ) }
187
- >
188
- { itemContentSimple ( 'Item with swipe left' ) }
189
- </ SwipeableListItem >
190
- < SwipeableListItem
191
- swipeRight = { swipeRightDataSimple ( 'Item with both swipes' ) }
192
- swipeLeft = { swipeLeftDataSimple ( 'Item with both swipes' ) }
193
- >
194
- { itemContentSimple ( 'Item with both swipes' ) }
195
- </ SwipeableListItem >
196
- < SwipeableListItem >
197
- { itemContentSimple ( 'Item without swipe actions' ) }
198
- </ SwipeableListItem >
199
- </ SwipeableList >
200
- </ div >
201
- < h3 >
202
- More complex items and scroll (with 0.25 action trigger threshold)
203
- </ h3 >
145
+ < h3 > List in size to content container</ h3 >
204
146
< span className = { styles . actionInfo } > { triggeredComplexItemAction } </ span >
205
- < div className = { styles . complexListContainer } >
147
+ < div className = { styles . listContainer } >
206
148
< SwipeableList threshold = { 0.25 } >
207
149
< SwipeableListItem
208
150
swipeLeft = { swipeLeftDataComplex ( 'First' ) }
@@ -246,6 +188,7 @@ function App() {
246
188
</ SwipeableListItem >
247
189
</ SwipeableList >
248
190
</ div >
191
+ < div > THE END</ div >
249
192
</ div >
250
193
) ;
251
194
}
0 commit comments