Skip to content

Commit abf3277

Browse files
author
Marek Rozmus
committed
Remove debug info and update example app
1 parent f259f67 commit abf3277

File tree

3 files changed

+43
-115
lines changed

3 files changed

+43
-115
lines changed

examples/src/App.js

Lines changed: 35 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,39 @@ function App() {
6666

6767
return (
6868
<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>
7673
<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}>
77102
<SwipeableList threshold={0.25}>
78103
<SwipeableListItem
79104
swipeLeft={swipeLeftDataComplex('First')}
@@ -117,92 +142,9 @@ function App() {
117142
</SwipeableListItem>
118143
</SwipeableList>
119144
</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>
204146
<span className={styles.actionInfo}>{triggeredComplexItemAction}</span>
205-
<div className={styles.complexListContainer}>
147+
<div className={styles.listContainer}>
206148
<SwipeableList threshold={0.25}>
207149
<SwipeableListItem
208150
swipeLeft={swipeLeftDataComplex('First')}
@@ -246,6 +188,7 @@ function App() {
246188
</SwipeableListItem>
247189
</SwipeableList>
248190
</div>
191+
<div>THE END</div>
249192
</div>
250193
);
251194
}

src/SwipeableListItem.js

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,6 @@ const SwipeActionPropType = PropTypes.shape({
88
content: PropTypes.node.isRequired
99
});
1010

11-
const debugDragDirection = direction => {
12-
switch (direction) {
13-
case 1:
14-
console.info('N, NE, NW - UP');
15-
break;
16-
case 2:
17-
console.info('S, SE, SW - DOWN');
18-
break;
19-
case 3:
20-
console.info('W - LEFT');
21-
break;
22-
case 4:
23-
console.info('E - RIGHT');
24-
break;
25-
case 5:
26-
console.info('NOT SET YET');
27-
break;
28-
}
29-
};
30-
3111
const DragDirection = {
3212
UP: 1,
3313
DOWN: 2,
@@ -239,9 +219,6 @@ class SwipeableListItem extends PureComponent {
239219
}
240220
break;
241221
}
242-
243-
console.info('SET UP to ', this.dragDirection);
244-
debugDragDirection(this.dragDirection);
245222
}
246223

247224
return this.dragDirection;

src/__tests__/helpers.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,37 @@ const movePoint = (point, direction) => {
4040

4141
export const makeMouseGesture = (container, directions) => {
4242
let point = startPoint();
43+
4344
fireEvent.mouseDown(container, point);
45+
4446
for (let i = 0; i < directions.length; i++) {
4547
point = movePoint(point, directions[i]);
4648
fireEvent.mouseMove(container, point);
4749
}
50+
4851
fireEvent.mouseUp(container, point);
52+
4953
return point;
5054
};
5155

5256
export const makeTouchGesture = (container, directions) => {
5357
let point = startPoint();
58+
5459
fireEvent.touchStart(container, {
5560
targetTouches: [point]
5661
});
62+
5763
for (let i = 0; i < directions.length; i++) {
5864
point = movePoint(point, directions[i]);
5965
fireEvent.touchMove(container, {
6066
targetTouches: [point]
6167
});
6268
}
69+
6370
fireEvent.touchEnd(container, {
6471
targetTouches: [point]
6572
});
73+
6674
return point;
6775
};
6876

0 commit comments

Comments
 (0)