@faceless-ui/jumplist - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.2

dist/DotNav/index.js

@@ -33,7 +33,6 @@ "use strict";
     var _a = props.htmlElement, Tag = _a === void 0 ? 'div' : _a, dotClassName = props.dotClassName, activeDotClassName = props.activeDotClassName, _b = props.buttonProps, buttonProps = _b === void 0 ? {} : _b, rest = __rest(props, ["htmlElement", "dotClassName", "activeDotClassName", "buttonProps"]);
-    var _c = (0, context_1.useJumplist)(), scrollToID = _c.scrollToID, currentJumplistIndex = _c.currentJumplistIndex, jumplist = _c.jumplist;
+    var _c = (0, context_1.useJumplist)(), scrollToID = _c.scrollToID, jumplist = _c.jumplist;
     var dotsArray = Array.from(Array(jumplist.length || 0).keys());
     return (react_1.default.createElement(Tag, __assign({}, rest), dotsArray.map(function (dot, index) {
-        var nodeID = jumplist[index].nodeID;
-        var isActive = currentJumplistIndex === index;
+        var _a = jumplist[index], nodeID = _a.nodeID, isIntersecting = _a.isIntersecting;
         return (react_1.default.createElement("button", __assign({ "aria-label": "Scroll to node ".concat(nodeID), key: index }, buttonProps, { onClick: function (e) {
@@ -45,3 +44,3 @@ scrollToID(nodeID);
             }, className: [
-                isActive && activeDotClassName,
+                isIntersecting && activeDotClassName,
                 dotClassName,
@@ -48,0 +47,0 @@ buttonProps.className

dist/JumplistButton/index.d.ts

@@ -6,4 +6,5 @@ import React, { HTMLProps } from 'react';
     direction?: 'prev' | 'next';
-    nodeID?: string;
+    nodeID: string;
+    activeClassName?: string;
 }
 export declare const JumplistButton: React.FC<JumplistButtonProps>;

dist/JumplistButton/index.js

@@ -52,21 +52,14 @@ "use strict";
 var JumplistButton = function (props) {
-    var _a = props.htmlElement, Tag = _a === void 0 ? 'button' : _a, children = props.children, direction = props.direction, nodeID = props.nodeID, onClick = props.onClick, rest = __rest(props, ["htmlElement", "children", "direction", "nodeID", "onClick"]);
-    var _b = (0, context_1.useJumplist)(), scrollToID = _b.scrollToID, jumplist = _b.jumplist, activeJumplistIndex = _b.activeJumplistIndex;
+    var _a = props.htmlElement, Tag = _a === void 0 ? 'button' : _a, children = props.children, nodeID = props.nodeID, onClick = props.onClick, activeClassName = props.activeClassName, className = props.className, rest = __rest(props, ["htmlElement", "children", "nodeID", "onClick", "activeClassName", "className"]);
+    var _b = (0, context_1.useJumplist)(), scrollToID = _b.scrollToID, jumplist = _b.jumplist;
+    var _c = react_1.default.useState(function () { return jumplist === null || jumplist === void 0 ? void 0 : jumplist.find(function (item) { return item.nodeID === nodeID; }); }), nodeState = _c[0], setNodeState = _c[1];
+    (0, react_1.useEffect)(function () {
+        setNodeState(jumplist === null || jumplist === void 0 ? void 0 : jumplist.find(function (item) { return item.nodeID === nodeID; }));
+    }, [
+        jumplist,
+        nodeID
+    ]);
     var handleClick = (0, react_1.useCallback)(function (e) {
-        if (activeJumplistIndex !== undefined) {
-            if (direction === 'prev') {
-                var prevItem = jumplist[activeJumplistIndex - 1];
-                if (prevItem) {
-                    scrollToID(prevItem.nodeID);
-                }
-            }
-            if (direction === 'next') {
-                var nextItem = jumplist[activeJumplistIndex + 1];
-                if (nextItem) {
-                    scrollToID(nextItem.nodeID);
-                }
-            }
-            if (!direction && nodeID !== undefined) {
-                scrollToID(nodeID);
-            }
+        if (nodeID) {
+            scrollToID(nodeID);
         }
@@ -77,16 +70,12 @@ if (typeof onClick === 'function') {
     }, [
-        direction,
         scrollToID,
         onClick,
-        jumplist,
-        activeJumplistIndex,
         nodeID
     ]);
-    var ariaLabel = direction === 'prev' ? 'Scroll to previous item' : 'Scroll to next item';
-    if (!direction && nodeID !== undefined) {
-        ariaLabel = "Scroll to ".concat(nodeID);
-    }
-    return (react_1.default.createElement(Tag, __assign({ id: nodeID ? "jumplist-button_".concat(nodeID) : undefined, type: "button", "aria-label": ariaLabel }, rest, { onClick: handleClick }), children && children));
+    return (react_1.default.createElement(Tag, __assign({ id: nodeID ? "jumplist-button_".concat(nodeID) : undefined, type: "button", "aria-label": "Scroll to ".concat(nodeID), className: [
+            className,
+            (nodeState === null || nodeState === void 0 ? void 0 : nodeState.isIntersecting) && activeClassName
+        ].filter(Boolean).join(' ') }, rest, { onClick: handleClick }), children && children));
 };
 exports.JumplistButton = JumplistButton;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@faceless-ui/jumplist",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts",

No alert changes

Worsened metrics

Total package byte prevSize

37657

-0.6%

Lines of code

546

-1.8%

No dependency changes