@micromag/element-scroll 0.3.824 → 0.4.4
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.d.ts +3 -0
- package/es/index.js +35 -60
- package/es/styles.css +1 -0
- package/package.json +12 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.container{height:100%;margin:0 auto;min-height:inherit;position:relative}.container>.scrollable{height:100%;left:0;min-height:inherit;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;position:absolute;top:0;width:100%;-ms-scroll-chaining:none;overscroll-behavior:contain;scrollbar-width:none}.container>.scrollable::-webkit-scrollbar{display:none}.container .arrowContainer{bottom:0;height:5rem;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;z-index:3}.container .arrow{-webkit-animation:upAndDown .75s alternate infinite var(--mm-ease-in-out-soft-sine);animation:upAndDown .75s alternate infinite var(--mm-ease-in-out-soft-sine);color:var(--mm-white);display:inline-block;height:auto;position:relative;top:1rem;width:1rem;z-index:3}.container .arrow path{stroke:var(--mm-black);stroke-width:20}.container.withArrow>.arrowContainer{opacity:1}.container.withShadow>.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: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:2}.container.top>.scrollable>.scrollee{margin-bottom:auto}.container.middle>.scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.container.middle>.scrollable>.scrollee{margin:auto 0}.container.bottom>.scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.container.bottom>.scrollable>.scrollee{margin-top:auto}.container.disabled>.scrollable{overflow:visible;position:static}.container.disabled>.scrollable>.scrollee{margin:0}@-webkit-keyframes upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}@keyframes upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}
|
package/es/index.d.ts
ADDED
package/es/index.js
CHANGED
|
@@ -3,69 +3,46 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
|
3
3
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
4
4
|
import { useScroll } from '@use-gesture/react';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
|
-
import PropTypes from 'prop-types';
|
|
7
6
|
import React, { useRef, useState, useEffect } from 'react';
|
|
8
7
|
import { useDimensionObserver } from '@micromag/core/hooks';
|
|
9
8
|
|
|
10
|
-
var styles = {"container":"
|
|
9
|
+
var styles = {"container":"container","scrollable":"scrollable","arrowContainer":"arrowContainer","arrow":"arrow","upAndDown":"upAndDown","withScroll":"withScroll","withArrow":"withArrow","withShadow":"withShadow","top":"top","scrollee":"scrollee","middle":"middle","bottom":"bottom","disabled":"disabled"};
|
|
11
10
|
|
|
12
|
-
var propTypes = {
|
|
13
|
-
width: PropTypes.number,
|
|
14
|
-
height: PropTypes.number,
|
|
15
|
-
disabled: PropTypes.bool,
|
|
16
|
-
verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
17
|
-
className: PropTypes.string,
|
|
18
|
-
scrollableClassName: PropTypes.string,
|
|
19
|
-
scrolleeClassName: PropTypes.string,
|
|
20
|
-
children: PropTypes.node,
|
|
21
|
-
scrollPosition: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
22
|
-
triggers: PropTypes.arrayOf(PropTypes.number),
|
|
23
|
-
onScrolledTrigger: PropTypes.func,
|
|
24
|
-
onScrolledBottom: PropTypes.func,
|
|
25
|
-
onScrolledNotBottom: PropTypes.func,
|
|
26
|
-
onScrollHeightChange: PropTypes.func,
|
|
27
|
-
scrollContainerRef: PropTypes.any,
|
|
28
|
-
// eslint-disable-line
|
|
29
|
-
withShadow: PropTypes.bool,
|
|
30
|
-
withArrow: PropTypes.bool
|
|
31
|
-
};
|
|
32
|
-
var defaultProps = {
|
|
33
|
-
width: null,
|
|
34
|
-
height: null,
|
|
35
|
-
disabled: false,
|
|
36
|
-
verticalAlign: null,
|
|
37
|
-
className: null,
|
|
38
|
-
scrollableClassName: null,
|
|
39
|
-
scrolleeClassName: null,
|
|
40
|
-
children: null,
|
|
41
|
-
scrollPosition: null,
|
|
42
|
-
triggers: [0.1, 0.25, 0.5, 0.75, 0.9, 1.0],
|
|
43
|
-
onScrolledTrigger: null,
|
|
44
|
-
onScrolledBottom: null,
|
|
45
|
-
onScrolledNotBottom: null,
|
|
46
|
-
onScrollHeightChange: null,
|
|
47
|
-
scrollContainerRef: null,
|
|
48
|
-
withShadow: false,
|
|
49
|
-
withArrow: true
|
|
50
|
-
};
|
|
51
11
|
function Scroll(_ref) {
|
|
52
|
-
var width = _ref.width,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
12
|
+
var _ref$width = _ref.width,
|
|
13
|
+
width = _ref$width === void 0 ? null : _ref$width,
|
|
14
|
+
_ref$height = _ref.height,
|
|
15
|
+
height = _ref$height === void 0 ? null : _ref$height,
|
|
16
|
+
_ref$disabled = _ref.disabled,
|
|
17
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
18
|
+
_ref$verticalAlign = _ref.verticalAlign,
|
|
19
|
+
verticalAlign = _ref$verticalAlign === void 0 ? null : _ref$verticalAlign,
|
|
20
|
+
_ref$className = _ref.className,
|
|
21
|
+
className = _ref$className === void 0 ? null : _ref$className,
|
|
22
|
+
_ref$scrollableClassN = _ref.scrollableClassName,
|
|
23
|
+
scrollableClassName = _ref$scrollableClassN === void 0 ? null : _ref$scrollableClassN,
|
|
24
|
+
_ref$scrolleeClassNam = _ref.scrolleeClassName,
|
|
25
|
+
scrolleeClassName = _ref$scrolleeClassNam === void 0 ? null : _ref$scrolleeClassNam,
|
|
26
|
+
_ref$children = _ref.children,
|
|
27
|
+
children = _ref$children === void 0 ? null : _ref$children,
|
|
28
|
+
_ref$scrollPosition = _ref.scrollPosition,
|
|
29
|
+
scrollPosition = _ref$scrollPosition === void 0 ? null : _ref$scrollPosition,
|
|
30
|
+
_ref$triggers = _ref.triggers,
|
|
31
|
+
triggers = _ref$triggers === void 0 ? [0.1, 0.25, 0.5, 0.75, 0.9, 1.0] : _ref$triggers,
|
|
32
|
+
_ref$onScrolledTrigge = _ref.onScrolledTrigger,
|
|
33
|
+
onScrolledTrigger = _ref$onScrolledTrigge === void 0 ? null : _ref$onScrolledTrigge,
|
|
34
|
+
_ref$onScrolledBottom = _ref.onScrolledBottom,
|
|
35
|
+
onScrolledBottom = _ref$onScrolledBottom === void 0 ? null : _ref$onScrolledBottom,
|
|
36
|
+
_ref$onScrolledNotBot = _ref.onScrolledNotBottom,
|
|
37
|
+
onScrolledNotBottom = _ref$onScrolledNotBot === void 0 ? null : _ref$onScrolledNotBot,
|
|
38
|
+
_ref$onScrollHeightCh = _ref.onScrollHeightChange,
|
|
39
|
+
onScrollHeightChange = _ref$onScrollHeightCh === void 0 ? null : _ref$onScrollHeightCh,
|
|
40
|
+
_ref$scrollContainerR = _ref.scrollContainerRef,
|
|
41
|
+
scrollContainerRef = _ref$scrollContainerR === void 0 ? null : _ref$scrollContainerR,
|
|
42
|
+
_ref$withShadow = _ref.withShadow,
|
|
43
|
+
withShadow = _ref$withShadow === void 0 ? false : _ref$withShadow,
|
|
44
|
+
_ref$withArrow = _ref.withArrow,
|
|
45
|
+
showArrow = _ref$withArrow === void 0 ? true : _ref$withArrow;
|
|
69
46
|
var finalStyle = {
|
|
70
47
|
width: width,
|
|
71
48
|
height: height
|
|
@@ -193,8 +170,6 @@ function Scroll(_ref) {
|
|
|
193
170
|
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"
|
|
194
171
|
}))) : null);
|
|
195
172
|
}
|
|
196
|
-
Scroll.defaultProps = defaultProps;
|
|
197
|
-
Scroll.propTypes = propTypes;
|
|
198
173
|
var Scroll_default = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
199
174
|
return /*#__PURE__*/React.createElement(Scroll, Object.assign({
|
|
200
175
|
scrollContainerRef: ref
|
package/es/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.container{height:100%;margin:0 auto;min-height:inherit;position:relative}.container>.scrollable{height:100%;left:0;min-height:inherit;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;position:absolute;top:0;width:100%;-ms-scroll-chaining:none;overscroll-behavior:contain;scrollbar-width:none}.container>.scrollable::-webkit-scrollbar{display:none}.container .arrowContainer{bottom:0;height:5rem;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%;z-index:3}.container .arrow{-webkit-animation:upAndDown .75s alternate infinite var(--mm-ease-in-out-soft-sine);animation:upAndDown .75s alternate infinite var(--mm-ease-in-out-soft-sine);color:var(--mm-white);display:inline-block;height:auto;position:relative;top:1rem;width:1rem;z-index:3}.container .arrow path{stroke:var(--mm-black);stroke-width:20}.container.withArrow>.arrowContainer{opacity:1}.container.withShadow>.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: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:2}.container.top>.scrollable>.scrollee{margin-bottom:auto}.container.middle>.scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.container.middle>.scrollable>.scrollee{margin:auto 0}.container.bottom>.scrollable{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.container.bottom>.scrollable>.scrollee{margin-top:auto}.container.disabled>.scrollable{overflow:visible;position:static}.container.disabled>.scrollable>.scrollee{margin:0}@-webkit-keyframes upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}@keyframes upAndDown{0%{-webkit-transform:translateY(-30%);transform:translateY(-30%)}to{-webkit-transform:translateY(30%);transform:translateY(30%)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-scroll",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
"module": "es/index.js",
|
|
35
35
|
"exports": {
|
|
36
36
|
".": {
|
|
37
|
+
"types": "./es/index.d.ts",
|
|
37
38
|
"import": "./es/index.js"
|
|
38
39
|
},
|
|
39
40
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -47,29 +48,29 @@
|
|
|
47
48
|
"scripts": {
|
|
48
49
|
"clean": "rm -rf es && rm -rf lib && rm -rf assets",
|
|
49
50
|
"prepublishOnly": "npm run build",
|
|
50
|
-
"build": "../../scripts/prepare-package.sh"
|
|
51
|
+
"build": "../../scripts/prepare-package.sh --types"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
|
-
"react": "^
|
|
54
|
-
"react-dom": "^
|
|
54
|
+
"react": "^19.2.0",
|
|
55
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
55
56
|
},
|
|
56
57
|
"peerDependencies": {
|
|
57
|
-
"react": "^
|
|
58
|
-
"react-dom": "^
|
|
58
|
+
"react": "^19.2.0",
|
|
59
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
59
60
|
},
|
|
60
61
|
"dependencies": {
|
|
61
62
|
"@babel/runtime": "^7.13.10",
|
|
62
|
-
"@micromag/core": "^0.
|
|
63
|
+
"@micromag/core": "^0.4.4",
|
|
63
64
|
"@use-gesture/react": "^10.3.0",
|
|
64
65
|
"classnames": "^2.2.6",
|
|
65
|
-
"lodash": "^4.17.
|
|
66
|
-
"
|
|
67
|
-
"react-intl": "^6.6.4",
|
|
66
|
+
"lodash": "^4.17.23",
|
|
67
|
+
"react-intl": "^8.1.3",
|
|
68
68
|
"uuid": "^9.0.0"
|
|
69
69
|
},
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public",
|
|
72
72
|
"registry": "https://registry.npmjs.org/"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
|
|
75
|
+
"types": "es/index.d.ts"
|
|
75
76
|
}
|