@blaze-cms/react-page-builder 0.119.0-alpha.0 → 0.119.0-alpha.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.
- package/CHANGELOG.md +11 -0
- package/lib/components/CarouselWrapper.js +12 -12
- package/lib/components/CarouselWrapper.js.map +1 -1
- package/lib-es/components/CarouselWrapper.js +10 -12
- package/lib-es/components/CarouselWrapper.js.map +1 -1
- package/package.json +2 -2
- package/src/components/CarouselWrapper.js +10 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.119.0-alpha.2](https://github.com/thebyte9/blaze/compare/v0.119.0-alpha.1...v0.119.0-alpha.2) (2022-01-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fixed setInterval not clearing ([#3321](https://github.com/thebyte9/blaze/issues/3321)) ([b1b1287](https://github.com/thebyte9/blaze/commit/b1b1287bc6ad6232533e80984641e64683dceb20))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.119.0-alpha.0](https://github.com/thebyte9/blaze/compare/v0.118.1-alpha.0...v0.119.0-alpha.0) (2022-01-26)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -61,20 +61,19 @@ var CarouselWrapper = function CarouselWrapper(_ref) {
|
|
|
61
61
|
var autoScrollRef = (0, _react.useRef)();
|
|
62
62
|
(0, _react.useEffect)(function () {
|
|
63
63
|
autoScrollRef.current = shouldAutoScroll;
|
|
64
|
+
var id = setInterval(scrollCheck, autoScrollTimer);
|
|
64
65
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
clearInterval(id);
|
|
71
|
-
} else {
|
|
72
|
-
handleButtonNavigation(true);
|
|
73
|
-
}
|
|
66
|
+
function scrollCheck() {
|
|
67
|
+
if (!autoScrollRef.current) {
|
|
68
|
+
clearInterval(id);
|
|
69
|
+
} else {
|
|
70
|
+
handleButtonNavigation(true);
|
|
74
71
|
}
|
|
75
|
-
}
|
|
72
|
+
}
|
|
76
73
|
|
|
77
|
-
|
|
74
|
+
return function () {
|
|
75
|
+
return clearInterval(id);
|
|
76
|
+
};
|
|
78
77
|
}, [autoScrollTimer, shouldAutoScroll]);
|
|
79
78
|
(0, _react.useEffect)(function () {
|
|
80
79
|
var _ref$current = ref.current,
|
|
@@ -101,6 +100,7 @@ var CarouselWrapper = function CarouselWrapper(_ref) {
|
|
|
101
100
|
};
|
|
102
101
|
|
|
103
102
|
var handleButtonNavigation = function handleButtonNavigation(direction) {
|
|
103
|
+
if (!ref || !ref.current) return;
|
|
104
104
|
var _ref$current3 = ref.current,
|
|
105
105
|
offsetWidth = _ref$current3.offsetWidth,
|
|
106
106
|
scrollLeft = _ref$current3.scrollLeft,
|
|
@@ -123,7 +123,7 @@ var CarouselWrapper = function CarouselWrapper(_ref) {
|
|
|
123
123
|
className: "cards-carousel--left-button-wrapper"
|
|
124
124
|
}, displayLeft && /*#__PURE__*/_react["default"].createElement("button", {
|
|
125
125
|
type: "button",
|
|
126
|
-
className: "cards-
|
|
126
|
+
className: "cards-carousel--button-back icon-button icon",
|
|
127
127
|
onClick: function onClick() {
|
|
128
128
|
setShouldAutoScroll(false);
|
|
129
129
|
handleButtonNavigation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","ref","displayLeft","displayRight","buttonDisplay","setButtonDisplays","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","
|
|
1
|
+
{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","ref","displayLeft","displayRight","buttonDisplay","setButtonDisplays","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","PropTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaAngleLeft, FaAngleRight } from 'react-icons/fa';\n\nconst CarouselWrapper = ({\n children,\n bannerModifier,\n itemsPerRow,\n enableAutoScroll,\n autoScrollTimer\n}) => {\n const ref = useRef();\n const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n const autoScrollRef = useRef();\n\n useEffect(\n () => {\n autoScrollRef.current = shouldAutoScroll;\n const id = setInterval(scrollCheck, autoScrollTimer);\n function scrollCheck() {\n if (!autoScrollRef.current) {\n clearInterval(id);\n } else {\n handleButtonNavigation(true);\n }\n }\n\n return () => clearInterval(id);\n },\n [autoScrollTimer, shouldAutoScroll]\n );\n\n useEffect(\n () => {\n const {\n current: { offsetWidth, scrollWidth }\n } = ref;\n if (scrollWidth <= offsetWidth)\n setButtonDisplays({ displayLeft: false, displayRight: false });\n setShouldAutoScroll(enableAutoScroll);\n },\n [enableAutoScroll]\n );\n\n const handleScroll = () => {\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n const updatedDisplayLeft = !!scrollLeft;\n const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n };\n\n const handleButtonNavigation = direction => {\n if (!ref || !ref.current) return;\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n\n if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n ref.current.scrollLeft = 0;\n } else {\n ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n }\n };\n\n const { displayLeft, displayRight } = buttonDisplay;\n const wrapperClassName = `cards-carousel${bannerModifier}`;\n const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n return (\n <div className={wrapperClassName}>\n <div className=\"cards-carousel--left-button-wrapper\">\n {displayLeft && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-back icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation();\n }}>\n <i>\n <FaAngleLeft />\n </i>\n </button>\n )}\n </div>\n <div className=\"cards-carousel--right-button-wrapper\">\n {displayRight && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-forward icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation(true);\n }}>\n <i>\n <FaAngleRight />\n </i>\n </button>\n )}\n </div>\n <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n {children}\n </div>\n </div>\n );\n};\n\nCarouselWrapper.propTypes = {\n bannerModifier: PropTypes.string,\n itemsPerRow: PropTypes.number,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n enableAutoScroll: PropTypes.bool,\n autoScrollTimer: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n itemsPerRow: 0,\n bannerModifier: '',\n children: [],\n enableAutoScroll: false,\n autoScrollTimer: 0\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}
|
|
@@ -18,20 +18,17 @@ const CarouselWrapper = ({
|
|
|
18
18
|
const autoScrollRef = useRef();
|
|
19
19
|
useEffect(() => {
|
|
20
20
|
autoScrollRef.current = shouldAutoScroll;
|
|
21
|
+
const id = setInterval(scrollCheck, autoScrollTimer);
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
clearInterval(id);
|
|
28
|
-
} else {
|
|
29
|
-
handleButtonNavigation(true);
|
|
30
|
-
}
|
|
23
|
+
function scrollCheck() {
|
|
24
|
+
if (!autoScrollRef.current) {
|
|
25
|
+
clearInterval(id);
|
|
26
|
+
} else {
|
|
27
|
+
handleButtonNavigation(true);
|
|
31
28
|
}
|
|
32
|
-
}
|
|
29
|
+
}
|
|
33
30
|
|
|
34
|
-
|
|
31
|
+
return () => clearInterval(id);
|
|
35
32
|
}, [autoScrollTimer, shouldAutoScroll]);
|
|
36
33
|
useEffect(() => {
|
|
37
34
|
const {
|
|
@@ -64,6 +61,7 @@ const CarouselWrapper = ({
|
|
|
64
61
|
};
|
|
65
62
|
|
|
66
63
|
const handleButtonNavigation = direction => {
|
|
64
|
+
if (!ref || !ref.current) return;
|
|
67
65
|
const {
|
|
68
66
|
current: {
|
|
69
67
|
offsetWidth,
|
|
@@ -91,7 +89,7 @@ const CarouselWrapper = ({
|
|
|
91
89
|
className: "cards-carousel--left-button-wrapper"
|
|
92
90
|
}, displayLeft && /*#__PURE__*/React.createElement("button", {
|
|
93
91
|
type: "button",
|
|
94
|
-
className: "cards-
|
|
92
|
+
className: "cards-carousel--button-back icon-button icon",
|
|
95
93
|
onClick: () => {
|
|
96
94
|
setShouldAutoScroll(false);
|
|
97
95
|
handleButtonNavigation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["React","useRef","useState","useEffect","PropTypes","FaAngleLeft","FaAngleRight","CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","ref","buttonDisplay","setButtonDisplays","displayLeft","displayRight","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","
|
|
1
|
+
{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["React","useRef","useState","useEffect","PropTypes","FaAngleLeft","FaAngleRight","CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","ref","buttonDisplay","setButtonDisplays","displayLeft","displayRight","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaAngleLeft, FaAngleRight } from 'react-icons/fa';\n\nconst CarouselWrapper = ({\n children,\n bannerModifier,\n itemsPerRow,\n enableAutoScroll,\n autoScrollTimer\n}) => {\n const ref = useRef();\n const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n const autoScrollRef = useRef();\n\n useEffect(\n () => {\n autoScrollRef.current = shouldAutoScroll;\n const id = setInterval(scrollCheck, autoScrollTimer);\n function scrollCheck() {\n if (!autoScrollRef.current) {\n clearInterval(id);\n } else {\n handleButtonNavigation(true);\n }\n }\n\n return () => clearInterval(id);\n },\n [autoScrollTimer, shouldAutoScroll]\n );\n\n useEffect(\n () => {\n const {\n current: { offsetWidth, scrollWidth }\n } = ref;\n if (scrollWidth <= offsetWidth)\n setButtonDisplays({ displayLeft: false, displayRight: false });\n setShouldAutoScroll(enableAutoScroll);\n },\n [enableAutoScroll]\n );\n\n const handleScroll = () => {\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n const updatedDisplayLeft = !!scrollLeft;\n const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n };\n\n const handleButtonNavigation = direction => {\n if (!ref || !ref.current) return;\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n\n if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n ref.current.scrollLeft = 0;\n } else {\n ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n }\n };\n\n const { displayLeft, displayRight } = buttonDisplay;\n const wrapperClassName = `cards-carousel${bannerModifier}`;\n const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n return (\n <div className={wrapperClassName}>\n <div className=\"cards-carousel--left-button-wrapper\">\n {displayLeft && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-back icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation();\n }}>\n <i>\n <FaAngleLeft />\n </i>\n </button>\n )}\n </div>\n <div className=\"cards-carousel--right-button-wrapper\">\n {displayRight && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-forward icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation(true);\n }}>\n <i>\n <FaAngleRight />\n </i>\n </button>\n )}\n </div>\n <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n {children}\n </div>\n </div>\n );\n};\n\nCarouselWrapper.propTypes = {\n bannerModifier: PropTypes.string,\n itemsPerRow: PropTypes.number,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n enableAutoScroll: PropTypes.bool,\n autoScrollTimer: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n itemsPerRow: 0,\n bannerModifier: '',\n children: [],\n enableAutoScroll: false,\n autoScrollTimer: 0\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.119.0-alpha.
|
|
3
|
+
"version": "0.119.0-alpha.2",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"lib/*",
|
|
84
84
|
"lib-es/*"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "48eacb8ab1011f1c45fdfe51312388e92b9776ba"
|
|
87
87
|
}
|
|
@@ -17,18 +17,16 @@ const CarouselWrapper = ({
|
|
|
17
17
|
useEffect(
|
|
18
18
|
() => {
|
|
19
19
|
autoScrollRef.current = shouldAutoScroll;
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
handleButtonNavigation(true);
|
|
27
|
-
}
|
|
20
|
+
const id = setInterval(scrollCheck, autoScrollTimer);
|
|
21
|
+
function scrollCheck() {
|
|
22
|
+
if (!autoScrollRef.current) {
|
|
23
|
+
clearInterval(id);
|
|
24
|
+
} else {
|
|
25
|
+
handleButtonNavigation(true);
|
|
28
26
|
}
|
|
29
|
-
}
|
|
27
|
+
}
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
return () => clearInterval(id);
|
|
32
30
|
},
|
|
33
31
|
[autoScrollTimer, shouldAutoScroll]
|
|
34
32
|
);
|
|
@@ -55,6 +53,7 @@ const CarouselWrapper = ({
|
|
|
55
53
|
};
|
|
56
54
|
|
|
57
55
|
const handleButtonNavigation = direction => {
|
|
56
|
+
if (!ref || !ref.current) return;
|
|
58
57
|
const {
|
|
59
58
|
current: { offsetWidth, scrollLeft, scrollWidth }
|
|
60
59
|
} = ref;
|
|
@@ -76,7 +75,7 @@ const CarouselWrapper = ({
|
|
|
76
75
|
{displayLeft && (
|
|
77
76
|
<button
|
|
78
77
|
type="button"
|
|
79
|
-
className="cards-
|
|
78
|
+
className="cards-carousel--button-back icon-button icon"
|
|
80
79
|
onClick={() => {
|
|
81
80
|
setShouldAutoScroll(false);
|
|
82
81
|
handleButtonNavigation();
|