@micromag/element-scroll 0.3.150 → 0.3.156

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 (3) hide show
  1. package/es/index.js +12 -18
  2. package/lib/index.js +11 -17
  3. package/package.json +3 -3
package/es/index.js CHANGED
@@ -6,7 +6,7 @@ import { useScroll } from '@use-gesture/react';
6
6
  import classNames from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
8
  import React, { useState, useRef, useEffect } from 'react';
9
- import { useResizeObserver } from '@micromag/core/hooks';
9
+ import { useDimensionObserver } from '@micromag/core/hooks';
10
10
 
11
11
  var styles = {"container":"micromag-element-scroll-container","withScroll":"micromag-element-scroll-withScroll","scrollable":"micromag-element-scroll-scrollable","arrowContainer":"micromag-element-scroll-arrowContainer","arrow":"micromag-element-scroll-arrow","upAndDown":"micromag-element-scroll-upAndDown","containOverscroll":"micromag-element-scroll-containOverscroll","top":"micromag-element-scroll-top","scrollee":"micromag-element-scroll-scrollee","middle":"micromag-element-scroll-middle","bottom":"micromag-element-scroll-bottom","withArrow":"micromag-element-scroll-withArrow"};
12
12
 
@@ -37,7 +37,7 @@ var defaultProps = {
37
37
  };
38
38
 
39
39
  function Scroll(_ref) {
40
- var _ref5;
40
+ var _ref3;
41
41
 
42
42
  var width = _ref.width,
43
43
  height = _ref.height,
@@ -59,30 +59,24 @@ function Scroll(_ref) {
59
59
  withArrow = _useState2[0],
60
60
  setWithArrow = _useState2[1];
61
61
 
62
- var _useResizeObserver = useResizeObserver(),
63
- scrollableRef = _useResizeObserver.ref,
64
- scrollableRect = _useResizeObserver.entry.contentRect;
65
-
66
- var _ref2 = scrollableRect || {},
67
- scrollableHeight = _ref2.height;
62
+ var _useDimensionObserver = useDimensionObserver(),
63
+ scrollableRef = _useDimensionObserver.ref,
64
+ scrollableHeight = _useDimensionObserver.height;
68
65
 
69
66
  if (scrollContainerRef !== null) {
70
67
  scrollContainerRef.current = scrollableRef.current; // eslint-disable-line
71
68
  }
72
69
 
73
- var _useResizeObserver2 = useResizeObserver(),
74
- scrolleeRef = _useResizeObserver2.ref,
75
- scrolleeRect = _useResizeObserver2.entry.contentRect;
76
-
77
- var _ref3 = scrolleeRect || {},
78
- scrolleeHeight = _ref3.height;
70
+ var _useDimensionObserver2 = useDimensionObserver(),
71
+ scrolleeRef = _useDimensionObserver2.ref,
72
+ scrolleeHeight = _useDimensionObserver2.height;
79
73
 
80
74
  var scrolledBottomOnce = useRef(false);
81
75
  var scrolledNotBottomOnce = useRef(false);
82
76
  var reachedBottom = useRef(false);
83
- var bind = useScroll(function (_ref4) {
84
- var _ref4$xy = _slicedToArray(_ref4.xy, 2),
85
- scrollY = _ref4$xy[1];
77
+ var bind = useScroll(function (_ref2) {
78
+ var _ref2$xy = _slicedToArray(_ref2.xy, 2),
79
+ scrollY = _ref2$xy[1];
86
80
 
87
81
  var newWithArrow = scrollY <= 1;
88
82
  var maxScrollAmount = scrolleeHeight - scrollableHeight;
@@ -137,7 +131,7 @@ function Scroll(_ref) {
137
131
  }
138
132
  }, [scrollableHeight, scrolleeHeight, setWithArrow, disabled]);
139
133
  return /*#__PURE__*/React.createElement("div", {
140
- className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, styles.withScroll, !disabled), _defineProperty(_ref5, styles.containOverscroll, contain), _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles[verticalAlign], verticalAlign !== null), _defineProperty(_ref5, styles.withArrow, withArrow), _ref5)]),
134
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, styles.withScroll, !disabled), _defineProperty(_ref3, styles.containOverscroll, contain), _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles[verticalAlign], verticalAlign !== null), _defineProperty(_ref3, styles.withArrow, withArrow), _ref3)]),
141
135
  style: finalStyle
142
136
  }, /*#__PURE__*/React.createElement("div", Object.assign({
143
137
  className: styles.scrollable,
package/lib/index.js CHANGED
@@ -47,7 +47,7 @@ var defaultProps = {
47
47
  };
48
48
 
49
49
  function Scroll(_ref) {
50
- var _ref5;
50
+ var _ref3;
51
51
 
52
52
  var width = _ref.width,
53
53
  height = _ref.height,
@@ -69,30 +69,24 @@ function Scroll(_ref) {
69
69
  withArrow = _useState2[0],
70
70
  setWithArrow = _useState2[1];
71
71
 
72
- var _useResizeObserver = hooks.useResizeObserver(),
73
- scrollableRef = _useResizeObserver.ref,
74
- scrollableRect = _useResizeObserver.entry.contentRect;
75
-
76
- var _ref2 = scrollableRect || {},
77
- scrollableHeight = _ref2.height;
72
+ var _useDimensionObserver = hooks.useDimensionObserver(),
73
+ scrollableRef = _useDimensionObserver.ref,
74
+ scrollableHeight = _useDimensionObserver.height;
78
75
 
79
76
  if (scrollContainerRef !== null) {
80
77
  scrollContainerRef.current = scrollableRef.current; // eslint-disable-line
81
78
  }
82
79
 
83
- var _useResizeObserver2 = hooks.useResizeObserver(),
84
- scrolleeRef = _useResizeObserver2.ref,
85
- scrolleeRect = _useResizeObserver2.entry.contentRect;
86
-
87
- var _ref3 = scrolleeRect || {},
88
- scrolleeHeight = _ref3.height;
80
+ var _useDimensionObserver2 = hooks.useDimensionObserver(),
81
+ scrolleeRef = _useDimensionObserver2.ref,
82
+ scrolleeHeight = _useDimensionObserver2.height;
89
83
 
90
84
  var scrolledBottomOnce = React.useRef(false);
91
85
  var scrolledNotBottomOnce = React.useRef(false);
92
86
  var reachedBottom = React.useRef(false);
93
- var bind = react.useScroll(function (_ref4) {
94
- var _ref4$xy = _slicedToArray__default["default"](_ref4.xy, 2),
95
- scrollY = _ref4$xy[1];
87
+ var bind = react.useScroll(function (_ref2) {
88
+ var _ref2$xy = _slicedToArray__default["default"](_ref2.xy, 2),
89
+ scrollY = _ref2$xy[1];
96
90
 
97
91
  var newWithArrow = scrollY <= 1;
98
92
  var maxScrollAmount = scrolleeHeight - scrollableHeight;
@@ -147,7 +141,7 @@ function Scroll(_ref) {
147
141
  }
148
142
  }, [scrollableHeight, scrolleeHeight, setWithArrow, disabled]);
149
143
  return /*#__PURE__*/React__default["default"].createElement("div", {
150
- className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles.withScroll, !disabled), _defineProperty__default["default"](_ref5, styles.containOverscroll, contain), _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles[verticalAlign], verticalAlign !== null), _defineProperty__default["default"](_ref5, styles.withArrow, withArrow), _ref5)]),
144
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles.withScroll, !disabled), _defineProperty__default["default"](_ref3, styles.containOverscroll, contain), _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles[verticalAlign], verticalAlign !== null), _defineProperty__default["default"](_ref3, styles.withArrow, withArrow), _ref3)]),
151
145
  style: finalStyle
152
146
  }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
153
147
  className: styles.scrollable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-scroll",
3
- "version": "0.3.150",
3
+ "version": "0.3.156",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,7 +52,7 @@
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.150",
55
+ "@micromag/core": "^0.3.156",
56
56
  "@use-gesture/react": "^10.2.4",
57
57
  "classnames": "^2.2.6",
58
58
  "lodash": "^4.17.21",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
66
+ "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
67
67
  }