grep-components 1.7.0 → 1.8.2

package/dist/components/ToC/components/nav-tree-node.d.ts

@@ -14,6 +14,8 @@ export interface GrepTableOfContentNavTreeNodeProps {
     className?: string;
     style?: React.CSSProperties;
     renderChilds: (children: ContextTree) => ReactElement;
+    setSelectedValue: (selected: any) => void;
+    percentageRendered: number;
 }
 export declare const GrepTableOfContentNavTreeNode: React.FC<GrepTableOfContentNavTreeNodeProps>;
 export default GrepTableOfContentNavTreeNode;

package/dist/components/ToC/components/nav-tree.d.ts

@@ -4,6 +4,8 @@ interface Props {
     elements: ContextTree;
     className?: string;
     style?: React.CSSProperties;
+    setSelectedValue: (selected: any) => void;
+    percentageRendered: number;
 }
 declare const NavTree: React.FC<Props>;
 export default NavTree;

package/dist/components/ToC/components/nav.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export interface GrepTableOfContentNavProps {
     className?: string;
     style?: React.CSSProperties;
+    setSelectedValue: (selected: any) => void;
+    percentageRendered: number;
 }
 export declare const GrepTableOfContentNav: React.FC<GrepTableOfContentNavProps>;
 export default GrepTableOfContentNav;

package/dist/components/ToC/index.d.ts

@@ -3,6 +3,8 @@ import { GrepTableOfContentProviderProps as ContextProviderProps } from './conte
 export interface GrepTableOfContentProps extends ContextProviderProps {
     style?: React.CSSProperties;
     className?: string;
+    setSelectedValue: (selected: any) => void;
+    percentageRendered: number;
 }
 export declare const GrepTableOfContent: React.FC<GrepTableOfContentProps>;
 export default GrepTableOfContent;

package/dist/index.js

@@ -22296,12 +22296,13 @@ var useStyles$2 = makeStyles()(function (_a, _b) {
 
 var GrepTableOfContentNavTreeNode = function (props) {
     var linkRef = useRef(null);
-    var node = props.node, style = props.style, renderChilds = props.renderChilds;
+    var node = props.node, style = props.style, renderChilds = props.renderChilds, setSelectedValue = props.setSelectedValue, percentageRendered = props.percentageRendered;
     var lvl = node.lvl, el = node.el, index = node.index, children = node.children;
-    var _a = useContext(context), selected = _a.selected, setSelected = _a.setSelected, classes = _a.classes;
+    var _a = useContext(context), selected = _a.selected, setSelected = _a.setSelected, classes = _a.classes, elements = _a.elements;
     var isSelected = el === selected;
     var styles = useStyles$2({ lvl: lvl }).classes;
     var className = clsx('grep-toc__nav-tree-node', isSelected && 'grep-toc__nav-tree-node--selected', styles.root, classes === null || classes === void 0 ? void 0 : classes.node, props.className);
+    var _b = __read(useState(false), 2), awaitingRender = _b[0], setAwaitingRender = _b[1];
     var txt = el.innerText;
     var location = useSelector(function (s) { return getLocation(s); });
     var url = "".concat(location.pathname).concat(location.search, "#").concat(node.id);
@@ -22309,19 +22310,36 @@ var GrepTableOfContentNavTreeNode = function (props) {
         var link = linkRef.current;
         if (isSelected) {
             link === null || link === void 0 ? void 0 : link.scrollIntoViewIfNeeded();
+            //setTimeout(() => link?.scrollIntoViewIfNeeded(), 2000);
         }
         else if (link === document.activeElement) {
             link === null || link === void 0 ? void 0 : link.blur();
         }
-    }, [isSelected, linkRef]);
+    }, [isSelected, linkRef, setSelectedValue]);
     var tabIndex = isSelected ? 0 : -1;
+    useEffect(function () {
+        if (awaitingRender) {
+            doSelect();
+            setAwaitingRender(false);
+        }
+    }, [percentageRendered]);
+    var doSelect = function (checkAwaitRender) {
+        if (checkAwaitRender === void 0) { checkAwaitRender = false; }
+        window.history.replaceState({}, txt, url);
+        setSelected(el, true);
+        var values = Object.values(elements);
+        var newPercentage = values.findIndex(function (e) { return e === el; }) / values.length + 0.1;
+        setSelectedValue(newPercentage);
+        if (checkAwaitRender && newPercentage > percentageRendered) {
+            setAwaitingRender(true);
+        }
+    };
     return (React__default.createElement("li", { key: index, "data-lvl": lvl, className: className, style: style },
         React__default.createElement(Link$1, { ref: linkRef, className: clsx(styles.link, isSelected && "".concat(styles.link, "--selected")), href: url, tabIndex: tabIndex, onClick: function (event) {
                 console.debug('node click', node);
                 event.preventDefault();
                 event.stopPropagation();
-                window.history.replaceState({}, txt, url);
-                setSelected(el, true);
+                doSelect(true);
             }, color: "inherit" }, txt),
         children && renderChilds(children)));
 };
@@ -22338,11 +22356,11 @@ var useStyles$1 = makeStyles()(function () { return ({
 }); });
 
 var NavTree = function (props) {
-    var elements = props.elements, style = props.style;
+    var elements = props.elements, style = props.style, setSelectedValue = props.setSelectedValue, percentageRendered = props.percentageRendered;
     var classes = useContext(context).classes;
     var styles = useStyles$1().classes;
     var className = clsx('grep-toc__nav-tree', styles.root, classes === null || classes === void 0 ? void 0 : classes.tree, props.className);
-    return (React__default.createElement("ul", { className: className, style: style }, Object.values(elements).map(function (node) { return (React__default.createElement(GrepTableOfContentNavTreeNode, { node: node, key: node.index, renderChilds: function (children) { return React__default.createElement(NavTree, { elements: children }); } })); })));
+    return (React__default.createElement("ul", { className: className, style: style }, Object.values(elements).map(function (node) { return (React__default.createElement(GrepTableOfContentNavTreeNode, { node: node, key: node.index, renderChilds: function (children) { return (React__default.createElement(NavTree, { elements: children, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })); }, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })); })));
 };
 NavTree.displayName = 'Grep.ToC.NavTree';
 
@@ -22467,14 +22485,14 @@ var GrepTableOfContentNav = function (props) {
     var style = useStyles().classes;
     var className = clsx('grep-toc__nav', style.root, classes === null || classes === void 0 ? void 0 : classes.nav, props.className, showKeyboardHint && style.keyboardHint);
     return (React__default.createElement("nav", { className: className, style: props.style, tabIndex: selected ? -1 : 0, onKeyDown: onKeyDown, ref: ref },
-        React__default.createElement(NavTree, { elements: tree })));
+        React__default.createElement(NavTree, { elements: tree, setSelectedValue: props.setSelectedValue, percentageRendered: props.percentageRendered })));
 };
 GrepTableOfContentNav.displayName = 'Grep.ToC.Nav';
 
 var GrepTableOfContent = function (_a) {
-    var style = _a.style, className = _a.className, props = __rest$1(_a, ["style", "className"]);
+    var style = _a.style, className = _a.className, setSelectedValue = _a.setSelectedValue, percentageRendered = _a.percentageRendered, props = __rest$1(_a, ["style", "className", "setSelectedValue", "percentageRendered"]);
     return (React__default.createElement(GrepTableOfContentProvider, __assign({}, props),
-        React__default.createElement(GrepTableOfContentNav, { className: className, style: style })));
+        React__default.createElement(GrepTableOfContentNav, { className: className, style: style, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })));
 };
 GrepTableOfContent.displayName = 'Grep.ToC';