@micromag/element-scroll 0.3.307 → 0.3.318
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/assets/css/styles.css +1 -1
- package/es/index.js +21 -33
- package/lib/index.js +21 -33
- package/package.json +4 -4
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{scrollbar-width:none}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable::-webkit-scrollbar{display:none}.micromag-element-scroll-container{
|
|
1
|
+
.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{scrollbar-width:none}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable::-webkit-scrollbar{display:none}.micromag-element-scroll-container{height:100%;margin:0 auto;min-height:inherit;position:relative}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-withScroll.micromag-element-scroll-containOverscroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-top .micromag-element-scroll-scrollee{margin-bottom:auto}.micromag-element-scroll-container.micromag-element-scroll-middle .micromag-element-scroll-scrollee{margin:auto 0}.micromag-element-scroll-container.micromag-element-scroll-bottom .micromag-element-scroll-scrollee{margin-top:auto}.micromag-element-scroll-container.micromag-element-scroll-withArrow .micromag-element-scroll-arrowContainer{opacity:1}.micromag-element-scroll-scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;min-height:inherit;width:100%}.micromag-element-scroll-arrowContainer{bottom:0;height:5rem;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;z-index:2}.micromag-element-scroll-withShadow .micromag-element-scroll-arrowContainer:after{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.85)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.85));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.85));content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.micromag-element-scroll-arrow{-webkit-animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;animation:micromag-element-scroll-upAndDown .75s cubic-bezier(.4,0,.6,1) infinite alternate;color:#fff;display:inline-block;height:auto;position:relative;top:1rem;width:1rem;z-index:2}.micromag-element-scroll-arrow path{stroke-width:20;stroke:#1c1c1c}@-webkit-keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}@keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}
|
package/es/index.js
CHANGED
|
@@ -35,54 +35,46 @@ var defaultProps = {
|
|
|
35
35
|
scrollContainerRef: null,
|
|
36
36
|
withShadow: false
|
|
37
37
|
};
|
|
38
|
-
|
|
39
38
|
function Scroll(_ref) {
|
|
40
39
|
var _ref3;
|
|
41
|
-
|
|
42
40
|
var width = _ref.width,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
41
|
+
height = _ref.height,
|
|
42
|
+
disabled = _ref.disabled,
|
|
43
|
+
verticalAlign = _ref.verticalAlign,
|
|
44
|
+
className = _ref.className,
|
|
45
|
+
children = _ref.children,
|
|
46
|
+
onScrolledBottom = _ref.onScrolledBottom,
|
|
47
|
+
onScrolledNotBottom = _ref.onScrolledNotBottom,
|
|
48
|
+
contain = _ref.contain,
|
|
49
|
+
scrollContainerRef = _ref.scrollContainerRef,
|
|
50
|
+
withShadow = _ref.withShadow;
|
|
53
51
|
var finalStyle = {
|
|
54
52
|
width: width,
|
|
55
53
|
height: height
|
|
56
54
|
};
|
|
57
|
-
|
|
58
55
|
var _useState = useState(false),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
withArrow = _useState2[0],
|
|
58
|
+
setWithArrow = _useState2[1];
|
|
63
59
|
var _useDimensionObserver = useDimensionObserver(),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
60
|
+
scrollableRef = _useDimensionObserver.ref,
|
|
61
|
+
scrollableHeight = _useDimensionObserver.height;
|
|
67
62
|
if (scrollContainerRef !== null) {
|
|
68
63
|
scrollContainerRef.current = scrollableRef.current; // eslint-disable-line
|
|
69
64
|
}
|
|
70
65
|
|
|
71
66
|
var _useDimensionObserver2 = useDimensionObserver(),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
67
|
+
scrolleeRef = _useDimensionObserver2.ref,
|
|
68
|
+
scrolleeHeight = _useDimensionObserver2.height;
|
|
75
69
|
var scrolledBottomOnce = useRef(false);
|
|
76
70
|
var scrolledNotBottomOnce = useRef(false);
|
|
77
71
|
var reachedBottom = useRef(false);
|
|
78
72
|
var bind = useScroll(function (_ref2) {
|
|
79
73
|
var _ref2$xy = _slicedToArray(_ref2.xy, 2),
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
scrollY = _ref2$xy[1];
|
|
82
75
|
var newWithArrow = scrollY <= 1;
|
|
83
76
|
var maxScrollAmount = scrolleeHeight - scrollableHeight;
|
|
84
77
|
var nowReachedBottom = scrollY + 1 >= maxScrollAmount;
|
|
85
|
-
|
|
86
78
|
if (nowReachedBottom) {
|
|
87
79
|
if (!reachedBottom.current) {
|
|
88
80
|
if (onScrolledBottom !== null) {
|
|
@@ -90,7 +82,6 @@ function Scroll(_ref) {
|
|
|
90
82
|
initial: !scrolledBottomOnce.current
|
|
91
83
|
});
|
|
92
84
|
}
|
|
93
|
-
|
|
94
85
|
scrolledBottomOnce.current = true;
|
|
95
86
|
}
|
|
96
87
|
} else if (reachedBottom.current) {
|
|
@@ -99,25 +90,23 @@ function Scroll(_ref) {
|
|
|
99
90
|
initial: !scrolledNotBottomOnce.current
|
|
100
91
|
});
|
|
101
92
|
}
|
|
102
|
-
|
|
103
93
|
scrolledNotBottomOnce.current = true;
|
|
104
94
|
}
|
|
105
|
-
|
|
106
95
|
if (newWithArrow !== withArrow) {
|
|
107
96
|
setWithArrow(newWithArrow);
|
|
108
97
|
}
|
|
109
|
-
|
|
110
98
|
reachedBottom.current = nowReachedBottom;
|
|
111
99
|
}, {
|
|
112
100
|
enabled: !disabled
|
|
113
|
-
});
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// need to call scrolled callbacks on initial render also
|
|
114
104
|
|
|
115
105
|
useEffect(function () {
|
|
116
106
|
if (scrolleeHeight > 0 && scrollableHeight > 0 && !disabled) {
|
|
117
107
|
setWithArrow(Math.round(scrolleeHeight) > Math.round(scrollableHeight));
|
|
118
108
|
var maxScrollAmount = scrolleeHeight - scrollableHeight;
|
|
119
109
|
var nowReachedBottom = scrollableRef.current.scrollTop + 1 >= maxScrollAmount;
|
|
120
|
-
|
|
121
110
|
if (nowReachedBottom) {
|
|
122
111
|
if (onScrolledBottom !== null) {
|
|
123
112
|
onScrolledBottom({
|
|
@@ -153,7 +142,6 @@ function Scroll(_ref) {
|
|
|
153
142
|
points: ".38 11.38 5 16 9.62 11.38 8.56 10.32 5.75 13.13 5.75 1.61 4.25 1.61 4.25 13.13 1.44 10.32 .38 11.38"
|
|
154
143
|
}))) : null);
|
|
155
144
|
}
|
|
156
|
-
|
|
157
145
|
Scroll.propTypes = propTypes;
|
|
158
146
|
Scroll.defaultProps = defaultProps;
|
|
159
147
|
var Scroll$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
package/lib/index.js
CHANGED
|
@@ -45,54 +45,46 @@ var defaultProps = {
|
|
|
45
45
|
scrollContainerRef: null,
|
|
46
46
|
withShadow: false
|
|
47
47
|
};
|
|
48
|
-
|
|
49
48
|
function Scroll(_ref) {
|
|
50
49
|
var _ref3;
|
|
51
|
-
|
|
52
50
|
var width = _ref.width,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
height = _ref.height,
|
|
52
|
+
disabled = _ref.disabled,
|
|
53
|
+
verticalAlign = _ref.verticalAlign,
|
|
54
|
+
className = _ref.className,
|
|
55
|
+
children = _ref.children,
|
|
56
|
+
onScrolledBottom = _ref.onScrolledBottom,
|
|
57
|
+
onScrolledNotBottom = _ref.onScrolledNotBottom,
|
|
58
|
+
contain = _ref.contain,
|
|
59
|
+
scrollContainerRef = _ref.scrollContainerRef,
|
|
60
|
+
withShadow = _ref.withShadow;
|
|
63
61
|
var finalStyle = {
|
|
64
62
|
width: width,
|
|
65
63
|
height: height
|
|
66
64
|
};
|
|
67
|
-
|
|
68
65
|
var _useState = React.useState(false),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
66
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
67
|
+
withArrow = _useState2[0],
|
|
68
|
+
setWithArrow = _useState2[1];
|
|
73
69
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
scrollableRef = _useDimensionObserver.ref,
|
|
71
|
+
scrollableHeight = _useDimensionObserver.height;
|
|
77
72
|
if (scrollContainerRef !== null) {
|
|
78
73
|
scrollContainerRef.current = scrollableRef.current; // eslint-disable-line
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
var _useDimensionObserver2 = hooks.useDimensionObserver(),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
77
|
+
scrolleeRef = _useDimensionObserver2.ref,
|
|
78
|
+
scrolleeHeight = _useDimensionObserver2.height;
|
|
85
79
|
var scrolledBottomOnce = React.useRef(false);
|
|
86
80
|
var scrolledNotBottomOnce = React.useRef(false);
|
|
87
81
|
var reachedBottom = React.useRef(false);
|
|
88
82
|
var bind = react.useScroll(function (_ref2) {
|
|
89
83
|
var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 2),
|
|
90
|
-
|
|
91
|
-
|
|
84
|
+
scrollY = _ref2$xy[1];
|
|
92
85
|
var newWithArrow = scrollY <= 1;
|
|
93
86
|
var maxScrollAmount = scrolleeHeight - scrollableHeight;
|
|
94
87
|
var nowReachedBottom = scrollY + 1 >= maxScrollAmount;
|
|
95
|
-
|
|
96
88
|
if (nowReachedBottom) {
|
|
97
89
|
if (!reachedBottom.current) {
|
|
98
90
|
if (onScrolledBottom !== null) {
|
|
@@ -100,7 +92,6 @@ function Scroll(_ref) {
|
|
|
100
92
|
initial: !scrolledBottomOnce.current
|
|
101
93
|
});
|
|
102
94
|
}
|
|
103
|
-
|
|
104
95
|
scrolledBottomOnce.current = true;
|
|
105
96
|
}
|
|
106
97
|
} else if (reachedBottom.current) {
|
|
@@ -109,25 +100,23 @@ function Scroll(_ref) {
|
|
|
109
100
|
initial: !scrolledNotBottomOnce.current
|
|
110
101
|
});
|
|
111
102
|
}
|
|
112
|
-
|
|
113
103
|
scrolledNotBottomOnce.current = true;
|
|
114
104
|
}
|
|
115
|
-
|
|
116
105
|
if (newWithArrow !== withArrow) {
|
|
117
106
|
setWithArrow(newWithArrow);
|
|
118
107
|
}
|
|
119
|
-
|
|
120
108
|
reachedBottom.current = nowReachedBottom;
|
|
121
109
|
}, {
|
|
122
110
|
enabled: !disabled
|
|
123
|
-
});
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// need to call scrolled callbacks on initial render also
|
|
124
114
|
|
|
125
115
|
React.useEffect(function () {
|
|
126
116
|
if (scrolleeHeight > 0 && scrollableHeight > 0 && !disabled) {
|
|
127
117
|
setWithArrow(Math.round(scrolleeHeight) > Math.round(scrollableHeight));
|
|
128
118
|
var maxScrollAmount = scrolleeHeight - scrollableHeight;
|
|
129
119
|
var nowReachedBottom = scrollableRef.current.scrollTop + 1 >= maxScrollAmount;
|
|
130
|
-
|
|
131
120
|
if (nowReachedBottom) {
|
|
132
121
|
if (onScrolledBottom !== null) {
|
|
133
122
|
onScrolledBottom({
|
|
@@ -163,7 +152,6 @@ function Scroll(_ref) {
|
|
|
163
152
|
points: ".38 11.38 5 16 9.62 11.38 8.56 10.32 5.75 13.13 5.75 1.61 4.25 1.61 4.25 13.13 1.44 10.32 .38 11.38"
|
|
164
153
|
}))) : null);
|
|
165
154
|
}
|
|
166
|
-
|
|
167
155
|
Scroll.propTypes = propTypes;
|
|
168
156
|
Scroll.defaultProps = defaultProps;
|
|
169
157
|
var Scroll$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-scroll",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -52,16 +52,16 @@
|
|
|
52
52
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
53
53
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
54
54
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
55
|
-
"@micromag/core": "^0.3.
|
|
55
|
+
"@micromag/core": "^0.3.318",
|
|
56
56
|
"@use-gesture/react": "^10.2.4",
|
|
57
57
|
"classnames": "^2.2.6",
|
|
58
58
|
"lodash": "^4.17.21",
|
|
59
59
|
"prop-types": "^15.7.2",
|
|
60
60
|
"react-intl": "^5.12.1",
|
|
61
|
-
"uuid": "^
|
|
61
|
+
"uuid": "^9.0.0"
|
|
62
62
|
},
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
67
67
|
}
|