Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

10516 - cleanup the dtui in-page nav component #184

Merged
merged 7 commits into from
Feb 13, 2024
Merged

10516 - cleanup the dtui in-page nav component #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8e7978e
in page nav clean up
anjenkin Feb 12, 2024
d51679c
Merge branch 'master' into mod/10516-cleanup
anjenkin Feb 12, 2024
8c6a205
added passing unit test
anjenkin Feb 12, 2024
35e7c86
added unit test for the testable helper method
anjenkin Feb 13, 2024
8ee67df
added artifacts
anjenkin Feb 13, 2024
8fcb5d7
updated changes from pr
anjenkin Feb 13, 2024
ed2f29d
added artifacts
anjenkin Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 7 additions & 30 deletions components/InPageNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
import { throttle } from "lodash";
import { mediumScreen, largeScreen, xLargeScreen } from '../dataMapping/mobileBreakpoints';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { checkIsOverflow, getElementData, reset } from '../helpers/inPageNavHelper';

require('../styles/components/_inPageNav.scss');

Expand Down Expand Up @@ -35,20 +36,8 @@ const InPageNav = (props) => {

// detect if the element is overflowing on the left or the right
const checkIsOverflowHidden = () => {
let left = false;
let right = false;
const ulEl = navBar?.current?.querySelector("ul");
const elArray = [...ulEl?.childNodes];
const firstElPosition = elArray[0]?.getBoundingClientRect();
const lastElPosition = elArray[elArray.length - 1]?.getBoundingClientRect();

if (firstElPosition.left < 0 || ulEl.scrollLeft > 0) {
left = true;
}

if (lastElPosition.right > ulEl.clientWidth + padding || lastElPosition.right > ulEl.scrollWidth) {
right = true;
}
const { left, right } = checkIsOverflow(ulEl, padding);

setIsOverflowLeft(left);
setIsOverflowRight(right);
Expand All @@ -59,11 +48,6 @@ const InPageNav = (props) => {
checkIsOverflowHidden();
});

const reset = () => {
const ulEl = navBar.current.querySelector("ul");
ulEl.scrollTo({ left: "0", behavior: 'smooth' });
};

const scrollLeft = useCallback((e) => {
e.stopPropagation();

Expand All @@ -85,13 +69,13 @@ const InPageNav = (props) => {
});

const lastVisibleIndex = lastVisibleEl.index;
// check for last visible item
// check for last 2 visible items
if (lastVisibleIndex + 2 < elementData.length) {
const newLeftPosition = (ulEl.scrollLeft - ulEl.clientWidth) + 20 + elementData[lastVisibleIndex + 1].width + elementData[lastVisibleIndex + 2].width;
ulEl.scrollTo({ left: newLeftPosition, behavior: 'smooth' });
}
else {
reset();
reset(navBar);
}
});

Expand Down Expand Up @@ -120,27 +104,20 @@ const InPageNav = (props) => {

const index = firstRtHiddenEl.index;

// check for 2 items
if (index - 2 >= 0) {
const leftPosition = elementData[index - 2]?.originalLeftOffset + (padding / 2);
ulEl.scrollTo({ left: leftPosition, behavior: 'smooth' });
}
else {
reset();
reset(navBar);
}
}
});

const getInitialElements = useCallback(() => {
const tempElementData = [];
const ulEl = navBar.current.querySelector("ul");
ulEl.childNodes.forEach((el) => {
const box = el.getBoundingClientRect();
tempElementData.push({
name: el.innerHTML,
originalLeftOffset: box.left,
width: box.width
});
});
const tempElementData = getElementData(ulEl);

setUlElement(ulEl);
setElementData(tempElementData);
Expand Down
2 changes: 1 addition & 1 deletion dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions docs/211.2c897004.iframe.bundle.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions docs/211.9d343354.iframe.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

0 ...211.2c897004.iframe.bundle.js.LICENSE.txt → ...211.9d343354.iframe.bundle.js.LICENSE.txt
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions docs/iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@
/* eslint-enable object-shorthand */
})
);
};</script><link href="main.5287ced847bc7e83e87f.css" rel="stylesheet"><style>#root[hidden],
};</script><link href="main.21c130231a7d8d65f95b.css" rel="stylesheet"><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
Expand All @@ -361,4 +361,4 @@



window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="211.2c897004.iframe.bundle.js"></script><script src="main.1774ad58.iframe.bundle.js"></script></body></html>
window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="211.9d343354.iframe.bundle.js"></script><script src="main.bbdcc254.iframe.bundle.js"></script></body></html>
1 change: 0 additions & 1 deletion docs/main.1774ad58.iframe.bundle.js
View file
Open in desktop

This file was deleted.

Loading