@micromag/element-scroll 0.3.767 → 0.3.771

package/es/index.js

@@ -1,9 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useScroll } from '@use-gesture/react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useDimensionObserver } from '@micromag/core/hooks';
 
 var styles = {"container":"micromag-element-scroll-container","scrollable":"micromag-element-scroll-scrollable","arrowContainer":"micromag-element-scroll-arrowContainer","arrow":"micromag-element-scroll-arrow","upAndDown":"micromag-element-scroll-upAndDown","withScroll":"micromag-element-scroll-withScroll","withArrow":"micromag-element-scroll-withArrow","withShadow":"micromag-element-scroll-withShadow","top":"micromag-element-scroll-top","scrollee":"micromag-element-scroll-scrollee","middle":"micromag-element-scroll-middle","bottom":"micromag-element-scroll-bottom","disabled":"micromag-element-scroll-disabled"};
@@ -18,6 +19,8 @@ var propTypes = {
   scrolleeClassName: PropTypes.string,
   children: PropTypes.node,
   scrollPosition: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  triggers: PropTypes.arrayOf(PropTypes.number),
+  onScrolledTrigger: PropTypes.func,
   onScrolledBottom: PropTypes.func,
   onScrolledNotBottom: PropTypes.func,
   onScrollHeightChange: PropTypes.func,
@@ -36,6 +39,8 @@ var defaultProps = {
   scrolleeClassName: null,
   children: null,
   scrollPosition: null,
+  triggers: [0.1, 0.25, 0.5, 0.75, 0.9, 1.0],
+  onScrolledTrigger: null,
   onScrolledBottom: null,
   onScrolledNotBottom: null,
   onScrollHeightChange: null,
@@ -53,6 +58,8 @@ function Scroll(_ref) {
     scrolleeClassName = _ref.scrolleeClassName,
     children = _ref.children,
     scrollPosition = _ref.scrollPosition,
+    triggers = _ref.triggers,
+    onScrolledTrigger = _ref.onScrolledTrigger,
     onScrolledBottom = _ref.onScrolledBottom,
     onScrolledNotBottom = _ref.onScrolledNotBottom,
     onScrollHeightChange = _ref.onScrollHeightChange,
@@ -63,6 +70,7 @@ function Scroll(_ref) {
     width: width,
     height: height
   };
+  var triggersCompletedRef = useRef([]);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     withArrow = _useState2[0],
@@ -85,6 +93,19 @@ function Scroll(_ref) {
     var newWithArrow = scrollY <= 1;
     var maxScrollAmount = scrolleeHeight - scrollableHeight;
     var nowReachedBottom = scrollY + 1 >= maxScrollAmount;
+    var progress = Math.min(Math.max((scrollY + 1) / maxScrollAmount, 0), 1);
+    var newTriggersCompleted = (triggers || []).filter(function (step) {
+      return progress >= step && triggersCompletedRef.current.indexOf(step) === -1;
+    });
+    newTriggersCompleted.forEach(function (step) {
+      if (onScrolledTrigger != null) {
+        // console.log('call me', step, progress);
+        onScrolledTrigger(step);
+      }
+    });
+    if (newTriggersCompleted.length > 0) {
+      triggersCompletedRef.current = [].concat(_toConsumableArray(triggersCompletedRef.current), _toConsumableArray(newTriggersCompleted));
+    }
     if (nowReachedBottom) {
       if (!reachedBottom.current) {
         if (onScrolledBottom !== null) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-scroll",
-    "version": "0.3.767",
+    "version": "0.3.771",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,7 +59,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.767",
+        "@micromag/core": "^0.3.769",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "af57b08ccc073db83b6480e3a43fe14e6f36e0f6"
+    "gitHead": "a74bf984979f2bee58b57859808a8d9f6fa31f4a"
 }