Skip to content

Commit 035dbbd

Browse files
FMota0Copybara
authored andcommitted
fix(react-slick): Patch react-slick to avoid speed change when scrolling up and down on mobile
Issue: https://linear.app/plasmic/issue/PLA-10951 Change-Id: I03786b52bcecbcec8c632c9d3366457941181fa2 GitOrigin-RevId: afd6a1e06499738730f6dbbcdd9ee7fb400e8bd4
1 parent 4625ace commit 035dbbd

File tree

6 files changed

+436
-7
lines changed

6 files changed

+436
-7
lines changed

platform/loader-bundle-env/package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"dependenciesComments": {
55
"@ant-design/pro-components": "Must be 2.6.4. Earlier doesn't support newer antd, later incurs a disallowed dynamic require of antd/es/layout/Sider. https://app.shortcut.com/plasmic/story/37043/richlayout-always-initially-loads-with-dark-background"
66
},
7+
"scripts": {
8+
"postinstall": "patch-package"
9+
},
710
"dependencies": {
811
"@ant-design/icons": "^5.1.4",
912
"@ant-design/pro-components": "2.6.4",
@@ -87,5 +90,9 @@
8790
"@ant-design/pro-components/antd": "^5.0.0",
8891
"@ant-design/pro-table/antd": "^5.0.0",
8992
"@ant-design/pro-list/antd": "^5.0.0"
93+
},
94+
"devDependencies": {
95+
"patch-package": "^8.0.0",
96+
"postinstall-postinstall": "^2.1.0"
9097
}
9198
}
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
diff --git a/node_modules/react-slick/lib/inner-slider.js b/node_modules/react-slick/lib/inner-slider.js
2+
index ab9c65f..e569d1d 100644
3+
--- a/node_modules/react-slick/lib/inner-slider.js
4+
+++ b/node_modules/react-slick/lib/inner-slider.js
5+
@@ -59,6 +59,29 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
6+
7+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8+
9+
+// We will be ignoring width changes in react-slick because of the following issue:
10+
+// https://github.com/akiran/react-slick/issues/2368
11+
+//
12+
+// In mobile, while scrolling up and down the resize event is triggered and the slider attempts to recalculate
13+
+// inner properties based on it. This is buggy and causes the slider to change speed.
14+
+// https://stackoverflow.com/questions/17328742/mobile-chrome-fires-resize-event-on-scroll
15+
+let __globalOuterWidth;
16+
+
17+
+function __hasChangedWidth() {
18+
+ if (typeof window !== 'undefined') {
19+
+ const width = window.outerWidth;
20+
+
21+
+ if (width !== __globalOuterWidth) {
22+
+ __globalOuterWidth = width;
23+
+ return true;
24+
+ } else {
25+
+ return false;
26+
+ }
27+
+ }
28+
+
29+
+ return false;
30+
+}
31+
+
32+
var InnerSlider = /*#__PURE__*/function (_React$Component) {
33+
_inherits(InnerSlider, _React$Component);
34+
35+
@@ -142,9 +165,9 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
36+
});
37+
38+
if (window.addEventListener) {
39+
- window.addEventListener("resize", _this.onWindowResized);
40+
+ window.addEventListener("resize", _this.wrappedOnWindowResized);
41+
} else {
42+
- window.attachEvent("onresize", _this.onWindowResized);
43+
+ window.attachEvent("onresize", _this.wrappedOnWindowResized);
44+
}
45+
});
46+
47+
@@ -166,9 +189,9 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
48+
}
49+
50+
if (window.addEventListener) {
51+
- window.removeEventListener("resize", _this.onWindowResized);
52+
+ window.removeEventListener("resize", _this.wrappedOnWindowResized);
53+
} else {
54+
- window.detachEvent("onresize", _this.onWindowResized);
55+
+ window.detachEvent("onresize", _this.wrappedOnWindowResized);
56+
}
57+
58+
if (_this.autoplayTimer) {
59+
@@ -237,6 +260,13 @@ var InnerSlider = /*#__PURE__*/function (_React$Component) {
60+
_this.debouncedResize();
61+
});
62+
63+
+ _defineProperty(_assertThisInitialized(_this), "wrappedOnWindowResized", function (setTrackStyle) {
64+
+ if (!__hasChangedWidth()) {
65+
+ return;
66+
+ }
67+
+ _this.onWindowResized(setTrackStyle);
68+
+ });
69+
+
70+
_defineProperty(_assertThisInitialized(_this), "resizeWindow", function () {
71+
var setTrackStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
72+
var isTrackMounted = Boolean(_this.track && _this.track.node); // prevent warning: setting state on unmounted component (server side rendering)

0 commit comments

Comments
 (0)