react-simple-pull-to-refresh 1.2.5 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +7 -0
  2. package/build/components/pull-to-refresh.d.ts +1 -0
  3. package/build/components/pulling-content.d.ts +1 -0
  4. package/build/components/refreshing-content.d.ts +1 -0
  5. package/build/index.cjs.js +21 -20
  6. package/build/index.esm.js +21 -20
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -72,6 +72,7 @@ return (
72
72
  | onRefresh | () => Promise<any> | true | | Function called when Refresh Event has been trigerred |
73
73
  | pullDownThreshold | number | false | 67 | Distance in pixel to pull to trigger a Refresh Event |
74
74
  | maxPullDownDistance | number | false | 95 | Maximum transitionY applied to Children when dragging |
75
+ | resistance | number | false | 1 | Scale of difficulty to pull down |
75
76
  | refreshingContent | JSX.Element or string | false | <RefreshingContent /> | Content displayed when Pulling or Fetch more has been trigerred |
76
77
  | pullingContent | JSX.Element or string | false | <PullingContent /> | Content displayed when Pulling |
77
78
  | canFetchMore | boolean | false | false | Enable or disable fetching more feature |
@@ -82,6 +83,12 @@ return (
82
83
 
83
84
  ## Changelog
84
85
 
86
+ 1.3.2: Fix build issue encountered with 1.3.1
87
+
88
+ 1.3.1: Fix issue preventing fixed elements to work properly - (From: [@ManuDoni](https://github.com/ManuDoni))
89
+
90
+ 1.3.0: Add a _resistance_ prop, that allows to adjust the pull down difficulty - (From: [@joshuahiggins](https://github.com/joshuahiggins))
91
+
85
92
  1.2.5: Fix event listenter leaks - (From: [@d-s-x](https://github.com/d-s-x))
86
93
 
87
94
  1.2.4: Fix overscroll on iOS Safari - (From: [@d-s-x](https://github.com/d-s-x))
package/build/components/pull-to-refresh.d.ts CHANGED
@@ -11,6 +11,7 @@ interface PullToRefreshProps {
11
11
  pullDownThreshold?: number;
12
12
  fetchMoreThreshold?: number;
13
13
  maxPullDownDistance?: number;
14
+ resistance?: number;
14
15
  backgroundColor?: string;
15
16
  className?: string;
16
17
  }
package/build/components/pulling-content.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const PullingContent: () => JSX.Element;
2
3
  export default PullingContent;
package/build/components/refreshing-content.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import '../styles/refreshing-content.scss';
2
3
  declare const RefreshingContent: () => JSX.Element;
3
4
  export default RefreshingContent;
package/build/index.cjs.js CHANGED
@@ -96,7 +96,8 @@ styleInject(css$1);
96
96
 
97
97
  var PullToRefresh = function (_a) {
98
98
  var _b = _a.isPullable, isPullable = _b === void 0 ? true : _b, _c = _a.canFetchMore, canFetchMore = _c === void 0 ? false : _c, onRefresh = _a.onRefresh, onFetchMore = _a.onFetchMore, _d = _a.refreshingContent, refreshingContent = _d === void 0 ? React__default.createElement(RefreshingContent, null) : _d, _e = _a.pullingContent, pullingContent = _e === void 0 ? React__default.createElement(PullingContent, null) : _e, children = _a.children, _f = _a.pullDownThreshold, pullDownThreshold = _f === void 0 ? 67 : _f, _g = _a.fetchMoreThreshold, fetchMoreThreshold = _g === void 0 ? 100 : _g, _h = _a.maxPullDownDistance, maxPullDownDistance = _h === void 0 ? 95 : _h, // max distance to scroll to trigger refresh
99
- backgroundColor = _a.backgroundColor, _j = _a.className, className = _j === void 0 ? '' : _j;
99
+ _j = _a.resistance, // max distance to scroll to trigger refresh
100
+ resistance = _j === void 0 ? 1 : _j, backgroundColor = _a.backgroundColor, _k = _a.className, className = _k === void 0 ? '' : _k;
100
101
  var containerRef = React.useRef(null);
101
102
  var childrenRef = React.useRef(null);
102
103
  var pullDownRef = React.useRef(null);
@@ -109,24 +110,23 @@ var PullToRefresh = function (_a) {
109
110
  React.useEffect(function () {
110
111
  if (!isPullable || !childrenRef || !childrenRef.current)
111
112
  return;
112
- childrenRef.current.addEventListener('touchstart', onTouchStart, { passive: true });
113
- childrenRef.current.addEventListener('mousedown', onTouchStart);
114
- childrenRef.current.addEventListener('touchmove', onTouchMove, { passive: false });
115
- childrenRef.current.addEventListener('mousemove', onTouchMove);
113
+ var childrenEl = childrenRef.current;
114
+ childrenEl.addEventListener('touchstart', onTouchStart, { passive: true });
115
+ childrenEl.addEventListener('mousedown', onTouchStart);
116
+ childrenEl.addEventListener('touchmove', onTouchMove, { passive: false });
117
+ childrenEl.addEventListener('mousemove', onTouchMove);
116
118
  window.addEventListener('scroll', onScroll);
117
- childrenRef.current.addEventListener('touchend', onEnd);
118
- childrenRef.current.addEventListener('mouseup', onEnd);
119
+ childrenEl.addEventListener('touchend', onEnd);
120
+ childrenEl.addEventListener('mouseup', onEnd);
119
121
  document.body.addEventListener('mouseleave', onEnd);
120
122
  return function () {
121
- if (!isPullable || !childrenRef || !childrenRef.current)
122
- return;
123
- childrenRef.current.removeEventListener('touchstart', onTouchStart);
124
- childrenRef.current.removeEventListener('mousedown', onTouchStart);
125
- childrenRef.current.removeEventListener('touchmove', onTouchMove);
126
- childrenRef.current.removeEventListener('mousemove', onTouchMove);
123
+ childrenEl.removeEventListener('touchstart', onTouchStart);
124
+ childrenEl.removeEventListener('mousedown', onTouchStart);
125
+ childrenEl.removeEventListener('touchmove', onTouchMove);
126
+ childrenEl.removeEventListener('mousemove', onTouchMove);
127
127
  window.removeEventListener('scroll', onScroll);
128
- childrenRef.current.removeEventListener('touchend', onEnd);
129
- childrenRef.current.removeEventListener('mouseup', onEnd);
128
+ childrenEl.removeEventListener('touchend', onEnd);
129
+ childrenEl.removeEventListener('mouseup', onEnd);
130
130
  document.body.removeEventListener('mouseleave', onEnd);
131
131
  };
132
132
  }, [
@@ -179,7 +179,7 @@ var PullToRefresh = function (_a) {
179
179
  if (childrenRef.current) {
180
180
  childrenRef.current.style.overflowX = 'hidden';
181
181
  childrenRef.current.style.overflowY = 'auto';
182
- childrenRef.current.style.transform = "translate(0px, 0px)";
182
+ childrenRef.current.style.transform = "unset";
183
183
  }
184
184
  if (pullDownRef.current) {
185
185
  pullDownRef.current.style.opacity = '0';
@@ -232,20 +232,21 @@ var PullToRefresh = function (_a) {
232
232
  if (e.cancelable) {
233
233
  e.preventDefault();
234
234
  }
235
+ var yDistanceMoved = Math.min((currentY - startY) / resistance, maxPullDownDistance);
235
236
  // Limit to trigger refresh has been breached
236
- if (currentY - startY >= pullDownThreshold) {
237
+ if (yDistanceMoved >= pullDownThreshold) {
237
238
  isDragging = true;
238
239
  pullToRefreshThresholdBreached = true;
239
240
  containerRef.current.classList.remove('ptr--dragging');
240
241
  containerRef.current.classList.add('ptr--pull-down-treshold-breached');
241
242
  }
242
243
  // maxPullDownDistance breached, stop the animation
243
- if (currentY - startY > maxPullDownDistance) {
244
+ if (yDistanceMoved >= maxPullDownDistance) {
244
245
  return;
245
246
  }
246
- pullDownRef.current.style.opacity = ((currentY - startY) / 65).toString();
247
+ pullDownRef.current.style.opacity = ((yDistanceMoved) / 65).toString();
247
248
  childrenRef.current.style.overflow = 'visible';
248
- childrenRef.current.style.transform = "translate(0px, " + (currentY - startY) + "px)";
249
+ childrenRef.current.style.transform = "translate(0px, " + yDistanceMoved + "px)";
249
250
  pullDownRef.current.style.visibility = 'visible';
250
251
  };
251
252
  var onScroll = function (e) {
package/build/index.esm.js CHANGED
@@ -91,7 +91,8 @@ styleInject(css$1);
91
91
 
92
92
  var PullToRefresh = function (_a) {
93
93
  var _b = _a.isPullable, isPullable = _b === void 0 ? true : _b, _c = _a.canFetchMore, canFetchMore = _c === void 0 ? false : _c, onRefresh = _a.onRefresh, onFetchMore = _a.onFetchMore, _d = _a.refreshingContent, refreshingContent = _d === void 0 ? React.createElement(RefreshingContent, null) : _d, _e = _a.pullingContent, pullingContent = _e === void 0 ? React.createElement(PullingContent, null) : _e, children = _a.children, _f = _a.pullDownThreshold, pullDownThreshold = _f === void 0 ? 67 : _f, _g = _a.fetchMoreThreshold, fetchMoreThreshold = _g === void 0 ? 100 : _g, _h = _a.maxPullDownDistance, maxPullDownDistance = _h === void 0 ? 95 : _h, // max distance to scroll to trigger refresh
94
- backgroundColor = _a.backgroundColor, _j = _a.className, className = _j === void 0 ? '' : _j;
94
+ _j = _a.resistance, // max distance to scroll to trigger refresh
95
+ resistance = _j === void 0 ? 1 : _j, backgroundColor = _a.backgroundColor, _k = _a.className, className = _k === void 0 ? '' : _k;
95
96
  var containerRef = useRef(null);
96
97
  var childrenRef = useRef(null);
97
98
  var pullDownRef = useRef(null);
@@ -104,24 +105,23 @@ var PullToRefresh = function (_a) {
104
105
  useEffect(function () {
105
106
  if (!isPullable || !childrenRef || !childrenRef.current)
106
107
  return;
107
- childrenRef.current.addEventListener('touchstart', onTouchStart, { passive: true });
108
- childrenRef.current.addEventListener('mousedown', onTouchStart);
109
- childrenRef.current.addEventListener('touchmove', onTouchMove, { passive: false });
110
- childrenRef.current.addEventListener('mousemove', onTouchMove);
108
+ var childrenEl = childrenRef.current;
109
+ childrenEl.addEventListener('touchstart', onTouchStart, { passive: true });
110
+ childrenEl.addEventListener('mousedown', onTouchStart);
111
+ childrenEl.addEventListener('touchmove', onTouchMove, { passive: false });
112
+ childrenEl.addEventListener('mousemove', onTouchMove);
111
113
  window.addEventListener('scroll', onScroll);
112
- childrenRef.current.addEventListener('touchend', onEnd);
113
- childrenRef.current.addEventListener('mouseup', onEnd);
114
+ childrenEl.addEventListener('touchend', onEnd);
115
+ childrenEl.addEventListener('mouseup', onEnd);
114
116
  document.body.addEventListener('mouseleave', onEnd);
115
117
  return function () {
116
- if (!isPullable || !childrenRef || !childrenRef.current)
117
- return;
118
- childrenRef.current.removeEventListener('touchstart', onTouchStart);
119
- childrenRef.current.removeEventListener('mousedown', onTouchStart);
120
- childrenRef.current.removeEventListener('touchmove', onTouchMove);
121
- childrenRef.current.removeEventListener('mousemove', onTouchMove);
118
+ childrenEl.removeEventListener('touchstart', onTouchStart);
119
+ childrenEl.removeEventListener('mousedown', onTouchStart);
120
+ childrenEl.removeEventListener('touchmove', onTouchMove);
121
+ childrenEl.removeEventListener('mousemove', onTouchMove);
122
122
  window.removeEventListener('scroll', onScroll);
123
- childrenRef.current.removeEventListener('touchend', onEnd);
124
- childrenRef.current.removeEventListener('mouseup', onEnd);
123
+ childrenEl.removeEventListener('touchend', onEnd);
124
+ childrenEl.removeEventListener('mouseup', onEnd);
125
125
  document.body.removeEventListener('mouseleave', onEnd);
126
126
  };
127
127
  }, [
@@ -174,7 +174,7 @@ var PullToRefresh = function (_a) {
174
174
  if (childrenRef.current) {
175
175
  childrenRef.current.style.overflowX = 'hidden';
176
176
  childrenRef.current.style.overflowY = 'auto';
177
- childrenRef.current.style.transform = "translate(0px, 0px)";
177
+ childrenRef.current.style.transform = "unset";
178
178
  }
179
179
  if (pullDownRef.current) {
180
180
  pullDownRef.current.style.opacity = '0';
@@ -227,20 +227,21 @@ var PullToRefresh = function (_a) {
227
227
  if (e.cancelable) {
228
228
  e.preventDefault();
229
229
  }
230
+ var yDistanceMoved = Math.min((currentY - startY) / resistance, maxPullDownDistance);
230
231
  // Limit to trigger refresh has been breached
231
- if (currentY - startY >= pullDownThreshold) {
232
+ if (yDistanceMoved >= pullDownThreshold) {
232
233
  isDragging = true;
233
234
  pullToRefreshThresholdBreached = true;
234
235
  containerRef.current.classList.remove('ptr--dragging');
235
236
  containerRef.current.classList.add('ptr--pull-down-treshold-breached');
236
237
  }
237
238
  // maxPullDownDistance breached, stop the animation
238
- if (currentY - startY > maxPullDownDistance) {
239
+ if (yDistanceMoved >= maxPullDownDistance) {
239
240
  return;
240
241
  }
241
- pullDownRef.current.style.opacity = ((currentY - startY) / 65).toString();
242
+ pullDownRef.current.style.opacity = ((yDistanceMoved) / 65).toString();
242
243
  childrenRef.current.style.overflow = 'visible';
243
- childrenRef.current.style.transform = "translate(0px, " + (currentY - startY) + "px)";
244
+ childrenRef.current.style.transform = "translate(0px, " + yDistanceMoved + "px)";
244
245
  pullDownRef.current.style.visibility = 'visible';
245
246
  };
246
247
  var onScroll = function (e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-pull-to-refresh",
3
- "version": "1.2.5",
3
+ "version": "1.3.2",
4
4
  "description": "A Simple Pull To Refresh Component for React Application",
5
5
  "main": "build/index.cjs.js",
6
6
  "module": "build/index.esm.js",
@@ -31,7 +31,7 @@
31
31
  "@types/react": "^16.9.9",
32
32
  "@types/react-dom": "^16.9.2",
33
33
  "ncp": "^2.0.0",
34
- "node-sass": "^4.13.0",
34
+ "node-sass": "^7.0.1",
35
35
  "npm-run-all": "^4.1.5",
36
36
  "rollup": "^1.25.0",
37
37
  "rollup-plugin-delete": "^1.1.0",