Skip to content

Commit f259f67

Browse files
author
Marek Rozmus
committed
Fix scrolling and swiping issues
1 parent d0a74da commit f259f67

File tree

8 files changed

+485
-131
lines changed

8 files changed

+485
-131
lines changed

‎babel.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const presets = [
2121
const plugins = ['@babel/plugin-proposal-class-properties'];
2222

2323
module.exports = function(api) {
24-
api.cache.invalidate(() => process.env.NODE_ENV);
2524
const isTest = api.env('test');
2625

2726
if (isTest) {

‎examples/.prettierrc

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
{
2-
"tabWidth": 2,
32
"singleQuote": true
43
}

‎examples/src/App.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,111 @@ 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>
76+
<div className={styles.listContainer}>
77+
<SwipeableList threshold={0.25}>
78+
<SwipeableListItem
79+
swipeLeft={swipeLeftDataComplex('First')}
80+
swipeRight={swipeRightDataComplex('First')}
81+
>
82+
<ListItem
83+
icon={<MailIcon />}
84+
name="first"
85+
description="first description"
86+
/>
87+
</SwipeableListItem>
88+
<SwipeableListItem
89+
swipeLeft={swipeLeftDataComplex('Second')}
90+
swipeRight={swipeRightDataComplex('Second')}
91+
>
92+
<ListItem
93+
icon={<MailIcon />}
94+
name="second"
95+
description="second description"
96+
/>
97+
</SwipeableListItem>
98+
<SwipeableListItem
99+
swipeLeft={swipeLeftDataComplex('Second')}
100+
swipeRight={swipeRightDataComplex('Second')}
101+
>
102+
<ListItem
103+
icon={<MailIcon />}
104+
name="third"
105+
description="third description"
106+
/>
107+
</SwipeableListItem>
108+
<SwipeableListItem
109+
swipeLeft={swipeLeftDataComplex('Second')}
110+
swipeRight={swipeRightDataComplex('Second')}
111+
>
112+
<ListItem
113+
icon={<MailIcon />}
114+
name="fourth"
115+
description="fourth description"
116+
/>
117+
</SwipeableListItem>
118+
</SwipeableList>
119+
</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>
69174
<h3>react-swipeable-list example</h3>
70175
<h5>(try also mobile view in dev tools for touch events)</h5>
71176
<h3>Simple example (with default 0.5 action trigger threshold)</h3>

‎examples/src/app.module.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ h5 {
2323
flex-direction: column;
2424
align-items: center;
2525
height: 100%;
26+
min-height: 100%;
27+
overflow-y: scroll;
2628
}
2729

2830
.listContainer {

‎src/SwipeableList.js

Lines changed: 19 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,29 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import PropTypes from 'prop-types';
33

44
import styles from './SwipeableList.css';
55

6-
const SwipeableList = ({ children, scrollElement, threshold }) => {
7-
const [blockSwipe, setBlockSwipe] = useState(false);
8-
9-
useEffect(() => {
10-
window.addEventListener('mouseup', handleDragEnd);
11-
window.addEventListener('touchend', handleDragEnd);
12-
13-
return () => {
14-
window.removeEventListener('mouseup', handleDragEnd);
15-
window.removeEventListener('touchend', handleDragEnd);
16-
};
17-
}, []);
18-
19-
useEffect(() => {
20-
if (scrollElement) {
21-
scrollElement.addEventListener('scroll', handleScroll);
22-
}
23-
24-
return () => {
25-
if (scrollElement) {
26-
scrollElement.removeEventListener('scroll', handleScroll);
27-
}
28-
};
29-
}, [scrollElement]);
30-
31-
const handleDragStart = () => setBlockSwipe(false);
32-
33-
const handleDragEnd = () => setBlockSwipe(false);
34-
35-
const handleScroll = () => setBlockSwipe(true);
36-
37-
return (
38-
<div
39-
className={styles.swipeableList}
40-
onMouseDown={handleDragStart}
41-
onTouchStart={handleDragStart}
42-
onScroll={handleScroll}
43-
data-testid="list-wrapper"
44-
>
45-
{React.Children.map(children, child =>
46-
React.cloneElement(child, { blockSwipe, threshold })
47-
)}
48-
</div>
49-
);
50-
};
6+
const SwipeableList = ({
7+
children,
8+
scrollStartThreshold,
9+
swipeStartThreshold,
10+
threshold
11+
}) => (
12+
<div className={styles.swipeableList} data-testid="list-wrapper">
13+
{React.Children.map(children, child =>
14+
React.cloneElement(child, {
15+
scrollStartThreshold,
16+
swipeStartThreshold,
17+
threshold
18+
})
19+
)}
20+
</div>
21+
);
5122

5223
SwipeableList.propTypes = {
5324
children: PropTypes.node,
54-
scrollElement:
55-
typeof EventTarget !== 'undefined'
56-
? PropTypes.instanceOf(EventTarget)
57-
: PropTypes.any,
25+
scrollStartThreshold: PropTypes.number,
26+
swipeStartThreshold: PropTypes.number,
5827
threshold: PropTypes.number
5928
};
6029

0 commit comments

Comments
 (0)