@hitachivantara/uikit-react-core 5.3.0 → 5.5.0
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.
- package/dist/cjs/components/Dialog/Dialog.cjs +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +3 -3
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/Forms/Suggestions/Suggestions.styles.cjs +4 -4
- package/dist/cjs/components/Forms/Suggestions/Suggestions.styles.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
- package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/TimeAgo.cjs +39 -0
- package/dist/cjs/components/TimeAgo/TimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs +134 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs +8 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs +29 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeout.cjs +17 -0
- package/dist/cjs/components/TimeAgo/useTimeout.cjs.map +1 -0
- package/dist/cjs/hocs/withTooltip.cjs +4 -4
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/cjs/index.cjs +23 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/theme.cjs +9 -0
- package/dist/cjs/utils/theme.cjs.map +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +2 -2
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +3 -3
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js +5 -5
- package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
- package/dist/esm/components/ScrollTo/utils.js +76 -0
- package/dist/esm/components/ScrollTo/utils.js.map +1 -0
- package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
- package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
- package/dist/esm/components/TimeAgo/TimeAgo.js +37 -0
- package/dist/esm/components/TimeAgo/TimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/formatUtils.js +126 -0
- package/dist/esm/components/TimeAgo/formatUtils.js.map +1 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js +8 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js +29 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeout.js +17 -0
- package/dist/esm/components/TimeAgo/useTimeout.js.map +1 -0
- package/dist/esm/hocs/withTooltip.js +4 -4
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/index.js +42 -19
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/wrapperTooltip.js +2 -2
- package/dist/esm/utils/wrapperTooltip.js.map +1 -1
- package/dist/types/index.d.ts +244 -1
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalScrollListItemClasses from \"./verticalScrollListItemClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n button: CSSInterpolation;\n notSelected: CSSInterpolation;\n text: CSSInterpolation;\n} = {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n text: {\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n [`& .${verticalScrollListItemClasses.notSelected}`]: {\n height: theme.scrollTo.dotHoverSize,\n width: theme.scrollTo.dotHoverSize,\n backgroundColor: theme.scrollTo.dotHoverColor,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n};\n"],"names":["styles","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","verticalScrollListItemClasses","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQM,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,8BAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root", "notSelected", "button", "text"];
|
|
3
|
+
const verticalScrollListItemClasses = getClasses(classKeys, "HvVerticalScrollListItem");
|
|
4
|
+
const verticalScrollListItemClasses$1 = verticalScrollListItemClasses;
|
|
5
|
+
export {
|
|
6
|
+
verticalScrollListItemClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=verticalScrollListItemClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"verticalScrollListItemClasses.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvVerticalScrollListItemClasses {\n root?: string;\n notSelected?: string;\n button?: string;\n text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"notSelected\", \"button\", \"text\"];\n\nconst verticalScrollListItemClasses =\n getClasses<HvVerticalScrollListItemClasses>(\n classKeys,\n \"HvVerticalScrollListItem\"\n );\n\nexport default verticalScrollListItemClasses;\n"],"names":["classKeys","verticalScrollListItemClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,eAAe,UAAU,MAAM;AAEpE,MAAMC,gCACJC,WACEF,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root", "positionAbsolute", "positionFixed"];
|
|
3
|
+
const scrollToVerticalClasses = getClasses(classKeys, "HvScrollToVertical");
|
|
4
|
+
const scrollToVerticalClasses$1 = scrollToVerticalClasses;
|
|
5
|
+
export {
|
|
6
|
+
scrollToVerticalClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=scrollToVerticalClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollToVerticalClasses.js","sources":["../../../../../src/components/ScrollTo/Vertical/scrollToVerticalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToVerticalClasses {\n root?: string;\n positionAbsolute?: string;\n positionFixed?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"positionAbsolute\", \"positionFixed\"];\n\nconst scrollToVerticalClasses = getClasses<HvScrollToVerticalClasses>(\n classKeys,\n \"HvScrollToVertical\"\n);\n\nexport default scrollToVerticalClasses;\n"],"names":["classKeys","scrollToVerticalClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAsB,CAAC,QAAQ,oBAAoB,eAAe;AAExE,MAAMC,0BAA0BC,WAC9BF,WACA,oBAAoB;AAGtB,MAAA,4BAAeC;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { useState, useRef, useEffect, useCallback } from "react";
|
|
2
|
+
import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "./utils.js";
|
|
3
|
+
const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, href = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
|
|
4
|
+
const RETRY_MAX = 5;
|
|
5
|
+
const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
|
|
6
|
+
const scrollEle = useRef(window);
|
|
7
|
+
const requestedAnimationFrame = useRef(0);
|
|
8
|
+
const lastContainerScrollTop = useRef(0);
|
|
9
|
+
const selectedIndexRef = useRef(selectedIndex);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
selectedIndexRef.current = selectedIndex;
|
|
12
|
+
}, [selectedIndex]);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
|
|
15
|
+
lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
|
|
16
|
+
}, [scrollElementId]);
|
|
17
|
+
const checkScroll = useCallback((event) => {
|
|
18
|
+
if (requestedAnimationFrame.current === 0 && (window == null ? void 0 : window.requestAnimationFrame)) {
|
|
19
|
+
requestedAnimationFrame.current = window.requestAnimationFrame(() => {
|
|
20
|
+
requestedAnimationFrame.current = 0;
|
|
21
|
+
const firstVisibleElementIndex = findFirstVisibleElement(scrollEle.current, options, offset);
|
|
22
|
+
let newSelectedIndex = firstVisibleElementIndex;
|
|
23
|
+
if (firstVisibleElementIndex < 0) {
|
|
24
|
+
newSelectedIndex = 0;
|
|
25
|
+
}
|
|
26
|
+
if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) {
|
|
27
|
+
newSelectedIndex += 1;
|
|
28
|
+
}
|
|
29
|
+
const containerScrollTop = getScrollTop(scrollEle.current);
|
|
30
|
+
const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
|
|
31
|
+
lastContainerScrollTop.current = containerScrollTop;
|
|
32
|
+
if (isScrollingDown) {
|
|
33
|
+
if (newSelectedIndex < selectedIndexRef.current) {
|
|
34
|
+
newSelectedIndex = selectedIndexRef.current;
|
|
35
|
+
}
|
|
36
|
+
} else if (newSelectedIndex > selectedIndexRef.current) {
|
|
37
|
+
newSelectedIndex = selectedIndexRef.current;
|
|
38
|
+
}
|
|
39
|
+
setSelectedIndex(newSelectedIndex);
|
|
40
|
+
onChange == null ? void 0 : onChange(event, newSelectedIndex);
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}, [offset, options, onChange]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (scrollEle.current) {
|
|
46
|
+
scrollEle.current.addEventListener("scroll", checkScroll, false);
|
|
47
|
+
}
|
|
48
|
+
return () => {
|
|
49
|
+
if (scrollEle.current) {
|
|
50
|
+
scrollEle.current.removeEventListener("scroll", checkScroll);
|
|
51
|
+
}
|
|
52
|
+
if (requestedAnimationFrame.current !== 0) {
|
|
53
|
+
window.cancelAnimationFrame(requestedAnimationFrame.current);
|
|
54
|
+
requestedAnimationFrame.current = 0;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
}, [checkScroll]);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
let checkRenderedInterval;
|
|
60
|
+
if (href) {
|
|
61
|
+
const hashValue = document.location.hash.split("#")[1] || "";
|
|
62
|
+
const option = options.find((o) => o.value === hashValue);
|
|
63
|
+
if (option) {
|
|
64
|
+
let retry = 0;
|
|
65
|
+
checkRenderedInterval = setInterval(() => {
|
|
66
|
+
const ele = document.getElementById(option.value);
|
|
67
|
+
if (ele) {
|
|
68
|
+
scrollElement(ele, scrollEle.current, option.offset || offset);
|
|
69
|
+
clearInterval(checkRenderedInterval);
|
|
70
|
+
} else {
|
|
71
|
+
retry += 1;
|
|
72
|
+
if (retry === RETRY_MAX) {
|
|
73
|
+
clearInterval(checkRenderedInterval);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}, 1e3);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return () => {
|
|
80
|
+
clearInterval(checkRenderedInterval);
|
|
81
|
+
};
|
|
82
|
+
}, []);
|
|
83
|
+
const setScrollTo = (event, id, index, wrappedOnChange) => {
|
|
84
|
+
const option = options.find((o) => o.value === id);
|
|
85
|
+
if (option) {
|
|
86
|
+
const ele = document.getElementById(id);
|
|
87
|
+
if (ele) {
|
|
88
|
+
scrollElement(ele, scrollEle.current, option.offset || offset, direction);
|
|
89
|
+
}
|
|
90
|
+
if (href) {
|
|
91
|
+
window.history.pushState({}, "", `#${options[index].value}`);
|
|
92
|
+
}
|
|
93
|
+
setSelectedIndex(index);
|
|
94
|
+
wrappedOnChange == null ? void 0 : wrappedOnChange(index);
|
|
95
|
+
selectedIndexRef.current = index;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
return [selectedIndex, setScrollTo];
|
|
99
|
+
};
|
|
100
|
+
export {
|
|
101
|
+
useScrollTo
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=useScrollTo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollTo.js","sources":["../../../../src/components/ScrollTo/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n findFirstVisibleElement,\n getScrollTop,\n isScrolledToTheBottom,\n scrollElement,\n verticalScrollOffset,\n} from \"./utils\";\nimport { HvScrollToVerticalOption } from \"./Vertical\";\n\nexport const useScrollTo = (\n selectedIndexProp: number = 0,\n scrollElementId: string | undefined = undefined,\n href: boolean = false,\n offset: number = 0,\n options: HvScrollToVerticalOption[] = [],\n onChange:\n | ((\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void)\n | undefined = undefined,\n direction: \"column\" | \"row\" = \"column\"\n): [\n number,\n (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => void\n] => {\n const RETRY_MAX: number = 5;\n const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n const scrollEle = useRef<HTMLElement | (Window & typeof globalThis)>(window);\n const requestedAnimationFrame = useRef(0);\n const lastContainerScrollTop = useRef<number>(0);\n\n // Ref to use a often-changing value in useCallback, as recommended in\n // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n const selectedIndexRef = useRef(selectedIndex);\n\n useEffect(() => {\n selectedIndexRef.current = selectedIndex;\n }, [selectedIndex]);\n\n useEffect(() => {\n scrollEle.current =\n (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n }, [scrollElementId]);\n\n const checkScroll = useCallback(\n (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>\n ) => {\n if (\n requestedAnimationFrame.current === 0 &&\n window?.requestAnimationFrame\n ) {\n requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n requestedAnimationFrame.current = 0;\n\n const firstVisibleElementIndex = findFirstVisibleElement(\n scrollEle.current,\n options,\n offset\n );\n\n let newSelectedIndex = firstVisibleElementIndex;\n\n // select the first element when all elements are bellow the container's top\n if (firstVisibleElementIndex < 0) {\n newSelectedIndex = 0;\n }\n\n // if the user has reached the bottom of the container, select the first nav item still visible\n // (usually this selects the last nav item, when it can't reach the top the container)\n // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n if (\n newSelectedIndex < options.length - 1 &&\n isScrolledToTheBottom(scrollEle.current)\n ) {\n newSelectedIndex += 1;\n }\n\n const containerScrollTop = getScrollTop(scrollEle.current);\n const isScrollingDown =\n containerScrollTop > lastContainerScrollTop.current;\n lastContainerScrollTop.current = containerScrollTop;\n\n // only update the selected item if the scroll direction is moving away from it\n if (isScrollingDown) {\n if (newSelectedIndex < selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n } else if (newSelectedIndex > selectedIndexRef.current) {\n newSelectedIndex = selectedIndexRef.current;\n }\n\n setSelectedIndex(newSelectedIndex);\n onChange?.(event, newSelectedIndex);\n });\n }\n },\n [offset, options, onChange]\n );\n\n // Registers and unregisters the scroll listener\n useEffect(() => {\n if (scrollEle.current) {\n scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n }\n\n return () => {\n if (scrollEle.current) {\n scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n }\n\n if (requestedAnimationFrame.current !== 0) {\n window.cancelAnimationFrame(requestedAnimationFrame.current);\n requestedAnimationFrame.current = 0;\n }\n };\n }, [checkScroll]);\n\n // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n useEffect(() => {\n let checkRenderedInterval;\n\n if (href) {\n const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n const option = options.find((o) => o.value === hashValue);\n\n if (option) {\n let retry = 0;\n checkRenderedInterval = setInterval(() => {\n const ele = document.getElementById(option.value);\n\n if (ele) {\n scrollElement(ele, scrollEle.current, option.offset || offset);\n clearInterval(checkRenderedInterval);\n } else {\n retry += 1;\n if (retry === RETRY_MAX) {\n clearInterval(checkRenderedInterval);\n }\n }\n }, 1000);\n }\n }\n\n return () => {\n clearInterval(checkRenderedInterval);\n };\n\n // We really want to run this just in the first load\n // in fact this doesn't even belong here, the logic should be external\n }, []);\n\n const setScrollTo = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n id: string,\n index: number,\n wrappedOnChange?: (index: number) => void\n ) => {\n const option = options.find((o) => o.value === id);\n\n if (option) {\n const ele = document.getElementById(id);\n if (ele) {\n scrollElement(\n ele,\n scrollEle.current,\n option.offset || offset,\n direction\n );\n }\n\n if (href) {\n window.history.pushState({}, \"\", `#${options[index].value}`);\n }\n\n setSelectedIndex(index);\n wrappedOnChange?.(index);\n\n // Safari scrolls immediately (no smooth scroll support),\n // so this ref value must be updated asap\n selectedIndexRef.current = index;\n }\n };\n\n return [selectedIndex, setScrollTo];\n};\n"],"names":["useScrollTo","selectedIndexProp","scrollElementId","undefined","href","offset","options","onChange","direction","RETRY_MAX","selectedIndex","setSelectedIndex","useState","scrollEle","useRef","window","requestedAnimationFrame","lastContainerScrollTop","selectedIndexRef","useEffect","current","document","getElementById","verticalScrollOffset","checkScroll","useCallback","event","requestAnimationFrame","firstVisibleElementIndex","findFirstVisibleElement","newSelectedIndex","length","isScrolledToTheBottom","containerScrollTop","getScrollTop","isScrollingDown","addEventListener","removeEventListener","cancelAnimationFrame","checkRenderedInterval","hashValue","location","hash","split","option","find","o","value","retry","setInterval","ele","scrollElement","clearInterval","setScrollTo","id","index","wrappedOnChange","history","pushState"],"mappings":"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"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
const getScrollTop = (c = window) => {
|
|
2
|
+
if (c === window) {
|
|
3
|
+
return window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
|
|
4
|
+
}
|
|
5
|
+
return c.scrollTop;
|
|
6
|
+
};
|
|
7
|
+
const verticalScrollOffset = (t, c = window) => {
|
|
8
|
+
var _a;
|
|
9
|
+
if (c === window) {
|
|
10
|
+
return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).top) || 0) + (window.scrollY || window.pageYOffset);
|
|
11
|
+
}
|
|
12
|
+
if (getComputedStyle(c).position !== "static") {
|
|
13
|
+
return t.offsetTop;
|
|
14
|
+
}
|
|
15
|
+
return t.offsetTop - c.offsetTop;
|
|
16
|
+
};
|
|
17
|
+
const horizontalScrollOffset = (t, c = window) => {
|
|
18
|
+
var _a;
|
|
19
|
+
if (c === window) {
|
|
20
|
+
return (((_a = t == null ? void 0 : t.getBoundingClientRect) == null ? void 0 : _a.call(t).left) || 0) + (window.scrollX || window.pageXOffset);
|
|
21
|
+
}
|
|
22
|
+
if (getComputedStyle(c).position !== "static") {
|
|
23
|
+
return t.offsetLeft;
|
|
24
|
+
}
|
|
25
|
+
return t.offsetLeft - c.offsetLeft;
|
|
26
|
+
};
|
|
27
|
+
const scrollElement = (element, container, offset = 0, direction) => {
|
|
28
|
+
var _a, _b;
|
|
29
|
+
if (direction === "row") {
|
|
30
|
+
const elemLeft = horizontalScrollOffset(element, container);
|
|
31
|
+
(_a = container == null ? void 0 : container.scrollTo) == null ? void 0 : _a.call(container, {
|
|
32
|
+
left: elemLeft - offset,
|
|
33
|
+
behavior: "smooth"
|
|
34
|
+
});
|
|
35
|
+
} else {
|
|
36
|
+
const elemTop = verticalScrollOffset(element, container);
|
|
37
|
+
(_b = container == null ? void 0 : container.scrollTo) == null ? void 0 : _b.call(container, {
|
|
38
|
+
top: elemTop - offset,
|
|
39
|
+
behavior: "smooth"
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
element.focus({
|
|
43
|
+
preventScroll: true
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
const isScrolledToTheBottom = (container) => {
|
|
47
|
+
const containerScrollTop = getScrollTop(container);
|
|
48
|
+
if (container === window) {
|
|
49
|
+
const scrollHeight = document.documentElement && document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
50
|
+
return containerScrollTop + window.innerHeight >= scrollHeight;
|
|
51
|
+
}
|
|
52
|
+
return containerScrollTop + container.offsetHeight >= container.scrollHeight;
|
|
53
|
+
};
|
|
54
|
+
const findFirstVisibleElement = (container, options, offset) => {
|
|
55
|
+
const boundsTop = verticalScrollOffset(container);
|
|
56
|
+
let i = 0;
|
|
57
|
+
for (; i < options.length; i += 1) {
|
|
58
|
+
const ele = document.getElementById(options[i].value);
|
|
59
|
+
if (ele) {
|
|
60
|
+
const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);
|
|
61
|
+
if (elemTop > boundsTop) {
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return i - 1;
|
|
67
|
+
};
|
|
68
|
+
export {
|
|
69
|
+
findFirstVisibleElement,
|
|
70
|
+
getScrollTop,
|
|
71
|
+
horizontalScrollOffset,
|
|
72
|
+
isScrolledToTheBottom,
|
|
73
|
+
scrollElement,
|
|
74
|
+
verticalScrollOffset
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/ScrollTo/utils.ts"],"sourcesContent":["import { HvScrollToVerticalOption } from \"./Vertical\";\n\ntype ExtendedWindow = Window & typeof globalThis & HTMLElement;\n\nexport const getScrollTop = (\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n window.scrollY ||\n window.pageYOffset ||\n (document.documentElement && document.documentElement.scrollTop) ||\n document.body.scrollTop\n );\n }\n\n return (c as ExtendedWindow).scrollTop;\n};\n\nexport const verticalScrollOffset = (\n t: HTMLElement | (Window & typeof globalThis),\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n ((t as ExtendedWindow)?.getBoundingClientRect?.().top || 0) +\n (window.scrollY || window.pageYOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return (t as ExtendedWindow).offsetTop;\n }\n\n return (t as ExtendedWindow).offsetTop - (c as ExtendedWindow).offsetTop;\n};\n\nexport const horizontalScrollOffset = (\n t: HTMLElement,\n c: HTMLElement | (Window & typeof globalThis) = window\n) => {\n if (c === window) {\n return (\n (t?.getBoundingClientRect?.().left || 0) +\n (window.scrollX || window.pageXOffset)\n );\n }\n if (getComputedStyle(c as ExtendedWindow).position !== \"static\") {\n return t.offsetLeft;\n }\n\n return t.offsetLeft - (c as ExtendedWindow).offsetLeft;\n};\n\nexport const scrollElement = (\n element: HTMLElement,\n container: HTMLElement | (Window & typeof globalThis),\n offset: number = 0,\n direction?: \"row\" | \"column\"\n) => {\n if (direction === \"row\") {\n const elemLeft = horizontalScrollOffset(element, container);\n container?.scrollTo?.({\n left: elemLeft - offset,\n behavior: \"smooth\",\n });\n } else {\n const elemTop = verticalScrollOffset(element, container);\n container?.scrollTo?.({\n top: elemTop - offset,\n behavior: \"smooth\",\n });\n }\n element.focus({ preventScroll: true });\n};\n\nexport const isScrolledToTheBottom = (\n container: HTMLElement | (Window & typeof globalThis)\n) => {\n const containerScrollTop = getScrollTop(container);\n\n if (container === window) {\n // Accounting for cases where html/body are set to height:100%\n const scrollHeight =\n (document.documentElement && document.documentElement.scrollHeight) ||\n document.body.scrollHeight;\n\n return containerScrollTop + window.innerHeight >= scrollHeight;\n }\n\n return (\n containerScrollTop + (container as ExtendedWindow).offsetHeight >=\n (container as ExtendedWindow).scrollHeight\n );\n};\n\nexport const findFirstVisibleElement = (\n container: HTMLElement | (Window & typeof globalThis),\n options: HvScrollToVerticalOption[],\n offset: number\n) => {\n const boundsTop = verticalScrollOffset(container);\n\n let i = 0;\n\n // Find index of first element whose top is still visible inside the container\n for (; i < options.length; i += 1) {\n const ele = document.getElementById(options[i].value);\n\n if (ele) {\n const elemTop = verticalScrollOffset(ele) - (options[i].offset || offset);\n\n if (elemTop > boundsTop) {\n break;\n }\n }\n }\n\n // Return the previous index, the element that last scrolled past the top\n return i - 1;\n};\n"],"names":["getScrollTop","c","window","scrollY","pageYOffset","document","documentElement","scrollTop","body","verticalScrollOffset","t","getBoundingClientRect","top","getComputedStyle","position","offsetTop","horizontalScrollOffset","left","scrollX","pageXOffset","offsetLeft","scrollElement","element","container","offset","direction","elemLeft","scrollTo","behavior","elemTop","focus","preventScroll","isScrolledToTheBottom","containerScrollTop","scrollHeight","innerHeight","offsetHeight","findFirstVisibleElement","options","boundsTop","i","length","ele","getElementById","value"],"mappings":"AAIaA,MAAAA,eAAeA,CAC1BC,IAAgDC,WAC7C;AACH,MAAID,MAAMC,QAAQ;AAEdA,WAAAA,OAAOC,WACPD,OAAOE,eACNC,SAASC,mBAAmBD,SAASC,gBAAgBC,aACtDF,SAASG,KAAKD;AAAAA,EAElB;AAEA,SAAQN,EAAqBM;AAC/B;AAEO,MAAME,uBAAuBA,CAClCC,GACAT,IAAgDC,WAC7C;AAlBQF;AAmBX,MAAIC,MAAMC,QAAQ;AAChB,cACIQ,4BAAsBC,0BAAtBD,2BAAgDE,QAAO,MACxDV,OAAOC,WAAWD,OAAOE;AAAAA,EAE9B;AACA,MAAIS,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAQJ,EAAqBK;AAAAA,EAC/B;AAEQL,SAAAA,EAAqBK,YAAad,EAAqBc;AACjE;AAEO,MAAMC,yBAAyBA,CACpCN,GACAT,IAAgDC,WAC7C;AAnCQF;AAoCX,MAAIC,MAAMC,QAAQ;AAChB,cACGQ,4BAAGC,0BAAHD,2BAA6BO,SAAQ,MACrCf,OAAOgB,WAAWhB,OAAOiB;AAAAA,EAE9B;AACA,MAAIN,iBAAiBZ,GAAqBa,aAAa,UAAU;AAC/D,WAAOJ,EAAEU;AAAAA,EACX;AAEOV,SAAAA,EAAEU,aAAcnB,EAAqBmB;AAC9C;AAEO,MAAMC,gBAAgBA,CAC3BC,SACAC,WACAC,SAAiB,GACjBC,cACG;AAtDQzB;AAuDX,MAAIyB,cAAc,OAAO;AACjBC,UAAAA,WAAWV,uBAAuBM,SAASC,SAAS;AAC1DA,iDAAWI,aAAXJ,mCAAsB;AAAA,MACpBN,MAAMS,WAAWF;AAAAA,MACjBI,UAAU;AAAA,IAAA;AAAA,EACX,OACI;AACCC,UAAAA,UAAUpB,qBAAqBa,SAASC,SAAS;AACvDA,iDAAWI,aAAXJ,mCAAsB;AAAA,MACpBX,KAAKiB,UAAUL;AAAAA,MACfI,UAAU;AAAA,IAAA;AAAA,EAEd;AACAN,UAAQQ,MAAM;AAAA,IAAEC,eAAe;AAAA,EAAA,CAAM;AACvC;AAEaC,MAAAA,wBAAwBA,CACnCT,cACG;AACGU,QAAAA,qBAAqBjC,aAAauB,SAAS;AAEjD,MAAIA,cAAcrB,QAAQ;AAExB,UAAMgC,eACH7B,SAASC,mBAAmBD,SAASC,gBAAgB4B,gBACtD7B,SAASG,KAAK0B;AAETD,WAAAA,qBAAqB/B,OAAOiC,eAAeD;AAAAA,EACpD;AAGED,SAAAA,qBAAsBV,UAA6Ba,gBAClDb,UAA6BW;AAElC;AAEO,MAAMG,0BAA0BA,CACrCd,WACAe,SACAd,WACG;AACGe,QAAAA,YAAY9B,qBAAqBc,SAAS;AAEhD,MAAIiB,IAAI;AAGR,SAAOA,IAAIF,QAAQG,QAAQD,KAAK,GAAG;AACjC,UAAME,MAAMrC,SAASsC,eAAeL,QAAQE,CAAC,EAAEI,KAAK;AAEpD,QAAIF,KAAK;AACP,YAAMb,UAAUpB,qBAAqBiC,GAAG,KAAKJ,QAAQE,CAAC,EAAEhB,UAAUA;AAElE,UAAIK,UAAUU,WAAW;AACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,SAAOC,IAAI;AACb;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import withTooltipUtil from "../../hocs/withTooltip.js";
|
|
3
|
+
import { HvTypography } from "../Typography/Typography.js";
|
|
4
|
+
const hideTooltip = (event) => {
|
|
5
|
+
const isOverFlow = event.target.children.length > 1 ? Array.of(...event.target.children).some((child) => child.scrollWidth > child.clientWidth) : event.target.scrollWidth > event.target.clientWidth;
|
|
6
|
+
return !isOverFlow;
|
|
7
|
+
};
|
|
8
|
+
const withTooltip = (label, componentType, tooltipPosition = "top", hideOnOverflow = true) => {
|
|
9
|
+
const component = (props) => /* @__PURE__ */ jsx(HvTypography, {
|
|
10
|
+
component: componentType,
|
|
11
|
+
...props,
|
|
12
|
+
children: props.children
|
|
13
|
+
});
|
|
14
|
+
const hideTooltipFunc = hideOnOverflow ? hideTooltip : void 0;
|
|
15
|
+
return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
withTooltip
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=withTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withTooltip.js","sources":["../../../../src/components/ScrollTo/withTooltip.tsx"],"sourcesContent":["import {\n HvScrollToTooltipPositions,\n HvTypography,\n HvTypographyProps,\n} from \"@core/components\";\nimport { withTooltip as withTooltipUtil } from \"@core/hocs\";\n\nconst hideTooltip = (event: React.MouseEvent<HTMLDivElement>) => {\n const isOverFlow =\n (event.target as HTMLDivElement).children.length > 1\n ? Array.of(...(event.target as HTMLDivElement).children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : (event.target as HTMLDivElement).scrollWidth >\n (event.target as HTMLDivElement).clientWidth;\n return !isOverFlow;\n};\n\nexport const withTooltip = (\n label: string,\n componentType: React.ElementType,\n tooltipPosition: HvScrollToTooltipPositions = \"top\",\n hideOnOverflow: boolean = true\n) => {\n const component = (props: HvTypographyProps) => (\n <HvTypography component={componentType} {...props}>\n {props.children}\n </HvTypography>\n );\n\n const hideTooltipFunc = hideOnOverflow ? hideTooltip : undefined;\n\n return withTooltipUtil(component, label, tooltipPosition, hideTooltipFunc);\n};\n"],"names":["hideTooltip","event","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","withTooltip","label","componentType","tooltipPosition","hideOnOverflow","component","props","_jsx","HvTypography","hideTooltipFunc","undefined","withTooltipUtil"],"mappings":";;;AAOA,MAAMA,cAAcA,CAACC,UAA4C;AACzDC,QAAAA,aACHD,MAAME,OAA0BC,SAASC,SAAS,IAC/CC,MAAMC,GAAG,GAAIN,MAAME,OAA0BC,QAAQ,EAAEI,KACpDC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAEjDV,MAAME,OAA0BO,cAChCT,MAAME,OAA0BQ;AACvC,SAAO,CAACT;AACV;AAEO,MAAMU,cAAcA,CACzBC,OACAC,eACAC,kBAA8C,OAC9CC,iBAA0B,SACvB;AACH,QAAMC,YAAYA,CAACC,UACjBC,oBAACC,cAAY;AAAA,IAACH,WAAWH;AAAAA,IAAc,GAAKI;AAAAA,IAAKd,UAC9Cc,MAAMd;AAAAA,EAAAA,CAEV;AAEKiB,QAAAA,kBAAkBL,iBAAiBhB,cAAcsB;AAEvD,SAAOC,gBAAgBN,WAAWJ,OAAOE,iBAAiBM,eAAe;AAC3E;"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import isEmpty from "lodash/isEmpty";
|
|
3
|
+
import timeAgoClasses from "./timeAgoClasses.js";
|
|
4
|
+
import useTimeAgo from "./useTimeAgo.js";
|
|
5
|
+
import { jsx, Fragment } from "@emotion/react/jsx-runtime";
|
|
6
|
+
import { HvTypography } from "../Typography/Typography.js";
|
|
7
|
+
const HvTimeAgo = ({
|
|
8
|
+
classes,
|
|
9
|
+
timestamp,
|
|
10
|
+
locale: localeProp = "en",
|
|
11
|
+
component: Component = HvTypography,
|
|
12
|
+
emptyElement = "—",
|
|
13
|
+
disableRefresh = false,
|
|
14
|
+
showSeconds = false,
|
|
15
|
+
justText = false,
|
|
16
|
+
...others
|
|
17
|
+
}) => {
|
|
18
|
+
const locale = isEmpty(localeProp) ? "en" : localeProp;
|
|
19
|
+
const timeAgo = useTimeAgo(timestamp, {
|
|
20
|
+
locale,
|
|
21
|
+
disableRefresh,
|
|
22
|
+
showSeconds
|
|
23
|
+
});
|
|
24
|
+
if (justText && timestamp)
|
|
25
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
26
|
+
children: timeAgo
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
29
|
+
className: clsx(classes == null ? void 0 : classes.root, timeAgoClasses.root),
|
|
30
|
+
...others,
|
|
31
|
+
children: !timestamp ? emptyElement : timeAgo
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
HvTimeAgo
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=TimeAgo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeAgo.js","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport isEmpty from \"lodash/isEmpty\";\nimport timeAgoClasses, { HvTimeAgoClasses } from \"./timeAgoClasses\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport interface HvTimeAgoProps extends HvBaseProps<HTMLElement, { children }> {\n /**\n * The timestamp to format, in seconds or milliseconds.\n * Defaults to `emptyElement` if value is null or 0\n */\n timestamp?: number;\n /**\n * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n * @see https://day.js.org/docs/en/i18n/i18n\n */\n locale?: string;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `HvTypography`.\n */\n component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n /**\n * The element to render when the timestamp is null or 0\n * Defaults to `—` (Em Dash)\n */\n emptyElement?: React.ReactNode;\n /**\n * Disables periodic date refreshes\n */\n disableRefresh?: boolean;\n /**\n * Whether to show seconds in the rendered time\n */\n showSeconds?: boolean;\n /**\n * Whether the component should render just the string\n * Consider using `useTimeAgo` instead\n */\n justText?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTimeAgoClasses;\n}\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo = ({\n classes,\n timestamp,\n locale: localeProp = \"en\",\n component: Component = HvTypography,\n emptyElement = \"—\",\n disableRefresh = false,\n showSeconds = false,\n justText = false,\n ...others\n}: HvTimeAgoProps) => {\n const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n const timeAgo = useTimeAgo(timestamp, {\n locale,\n disableRefresh,\n showSeconds,\n });\n\n if (justText && timestamp) return <>{timeAgo}</>;\n\n return (\n <Component className={clsx(classes?.root, timeAgoClasses.root)} {...others}>\n {!timestamp ? emptyElement : timeAgo}\n </Component>\n );\n};\n"],"names":["HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","isEmpty","timeAgo","useTimeAgo","_Fragment","children","className","clsx","root","timeAgoClasses"],"mappings":";;;;;;AAgDO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa;AAAA,EACrBC,WAAWC,YAAYC;AAAAA,EACvBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,WAAW;AAAA,EACX,GAAGC;AACW,MAAM;AACpB,QAAMT,SAASU,QAAQT,UAAU,IAAI,OAAOA;AACtCU,QAAAA,UAAUC,WAAWb,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAED,MAAIC,YAAYT;AAAW,+BAAOc,UAAA;AAAA,MAAAC,UAAGH;AAAAA,IAAAA,CAAW;AAEhD,6BACGR,WAAS;AAAA,IAACY,WAAWC,KAAKlB,mCAASmB,MAAMC,eAAeD,IAAI;AAAA,IAAE,GAAKR;AAAAA,IAAMK,UACvE,CAACf,YAAYM,eAAeM;AAAAA,EAAAA,CACnB;AAEhB;"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
import calendar from "dayjs/plugin/calendar";
|
|
3
|
+
import duration from "dayjs/plugin/duration";
|
|
4
|
+
import localeData from "dayjs/plugin/localeData";
|
|
5
|
+
import localizedFormat from "dayjs/plugin/localizedFormat";
|
|
6
|
+
import relativeTime from "dayjs/plugin/relativeTime";
|
|
7
|
+
import updateLocale from "dayjs/plugin/updateLocale";
|
|
8
|
+
const thresholds = [{
|
|
9
|
+
l: "s",
|
|
10
|
+
r: 119,
|
|
11
|
+
d: "second"
|
|
12
|
+
}, {
|
|
13
|
+
l: "m",
|
|
14
|
+
r: 1
|
|
15
|
+
}, {
|
|
16
|
+
l: "mm",
|
|
17
|
+
r: 59,
|
|
18
|
+
d: "minute"
|
|
19
|
+
}, {
|
|
20
|
+
l: "h",
|
|
21
|
+
r: 1
|
|
22
|
+
}, {
|
|
23
|
+
l: "hh",
|
|
24
|
+
r: 23,
|
|
25
|
+
d: "hour"
|
|
26
|
+
}, {
|
|
27
|
+
l: "d",
|
|
28
|
+
r: 1
|
|
29
|
+
}, {
|
|
30
|
+
l: "dd",
|
|
31
|
+
r: 29,
|
|
32
|
+
d: "day"
|
|
33
|
+
}, {
|
|
34
|
+
l: "M",
|
|
35
|
+
r: 1
|
|
36
|
+
}, {
|
|
37
|
+
l: "MM",
|
|
38
|
+
r: 11,
|
|
39
|
+
d: "month"
|
|
40
|
+
}, {
|
|
41
|
+
l: "y",
|
|
42
|
+
r: 17
|
|
43
|
+
}, {
|
|
44
|
+
l: "yy",
|
|
45
|
+
d: "year"
|
|
46
|
+
}];
|
|
47
|
+
dayjs.extend(localeData);
|
|
48
|
+
dayjs.extend(duration);
|
|
49
|
+
dayjs.extend(calendar);
|
|
50
|
+
dayjs.extend(localizedFormat);
|
|
51
|
+
dayjs.extend(relativeTime, {
|
|
52
|
+
thresholds
|
|
53
|
+
});
|
|
54
|
+
dayjs.extend(updateLocale);
|
|
55
|
+
const secondsUntilNextDay = (date = /* @__PURE__ */ new Date()) => {
|
|
56
|
+
const midnight = new Date(date.getTime());
|
|
57
|
+
midnight.setDate(midnight.getDate() + 1);
|
|
58
|
+
midnight.setHours(0);
|
|
59
|
+
midnight.setMinutes(0);
|
|
60
|
+
midnight.setSeconds(0);
|
|
61
|
+
midnight.setMilliseconds(0);
|
|
62
|
+
return (midnight.getTime() - date.getTime()) / 1e3;
|
|
63
|
+
};
|
|
64
|
+
const secondsUntilNextWeek = (date = /* @__PURE__ */ new Date()) => {
|
|
65
|
+
const firstMonthDayOfWeek = date.getDate() - date.getDay();
|
|
66
|
+
const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7;
|
|
67
|
+
const firstDayNextWeek = new Date(date.getTime());
|
|
68
|
+
firstDayNextWeek.setDate(firstMonthDayOfNextWeek);
|
|
69
|
+
firstDayNextWeek.setHours(0);
|
|
70
|
+
firstDayNextWeek.setMinutes(0);
|
|
71
|
+
firstDayNextWeek.setSeconds(0);
|
|
72
|
+
firstDayNextWeek.setMilliseconds(0);
|
|
73
|
+
return (firstDayNextWeek.getTime() - date.getTime()) / 1e3;
|
|
74
|
+
};
|
|
75
|
+
const formatTimeAgo = (date, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
|
|
76
|
+
const dayReferenceDate = dayjs(referenceDate);
|
|
77
|
+
const dayDate = dayjs(date).locale(locale);
|
|
78
|
+
const dayDiffSeconds = dayReferenceDate.diff(dayDate, "second");
|
|
79
|
+
const formatUseSeconds = showSeconds ? "LTS" : "LT";
|
|
80
|
+
if (date.getTime() > referenceDate.getTime()) {
|
|
81
|
+
return {
|
|
82
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
83
|
+
delay: (date.getTime() - referenceDate.getTime()) / 1e3
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
if (dayDiffSeconds < 120) {
|
|
87
|
+
return {
|
|
88
|
+
timeAgo: dayjs.duration(dayDiffSeconds, "second").locale(locale).humanize(),
|
|
89
|
+
delay: 120 - dayDiffSeconds
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
const dayDiffMinutes = dayReferenceDate.diff(dayDate, "minute");
|
|
93
|
+
if (dayDiffMinutes < 60) {
|
|
94
|
+
return {
|
|
95
|
+
timeAgo: dayjs.duration(-dayDiffMinutes, "minute").locale(locale).humanize(true),
|
|
96
|
+
delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
if (dayReferenceDate.isSame(dayDate, "day")) {
|
|
100
|
+
return {
|
|
101
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
102
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
if (dayReferenceDate.subtract(1, "day").isSame(dayDate, "day")) {
|
|
106
|
+
return {
|
|
107
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
108
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
if (dayDate.isSame(dayReferenceDate, "week")) {
|
|
112
|
+
return {
|
|
113
|
+
timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),
|
|
114
|
+
delay: secondsUntilNextWeek(date)
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
return {
|
|
118
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
119
|
+
delay: 0
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
export {
|
|
123
|
+
formatTimeAgo,
|
|
124
|
+
secondsUntilNextDay
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=formatUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatUtils.js","sources":["../../../../src/components/TimeAgo/formatUtils.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport calendar from \"dayjs/plugin/calendar\";\nimport duration from \"dayjs/plugin/duration\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport updateLocale from \"dayjs/plugin/updateLocale\";\n\n/**\n * Relative time thresholds defined by\n * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}\n *\n * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}\n */\nconst thresholds = [\n { l: \"s\", r: 119, d: \"second\" },\n { l: \"m\", r: 1 },\n { l: \"mm\", r: 59, d: \"minute\" },\n { l: \"h\", r: 1 },\n { l: \"hh\", r: 23, d: \"hour\" },\n { l: \"d\", r: 1 },\n { l: \"dd\", r: 29, d: \"day\" },\n { l: \"M\", r: 1 },\n { l: \"MM\", r: 11, d: \"month\" },\n { l: \"y\", r: 17 },\n { l: \"yy\", d: \"year\" },\n];\n\ndayjs.extend(localeData);\ndayjs.extend(duration);\ndayjs.extend(calendar);\ndayjs.extend(localizedFormat);\ndayjs.extend(relativeTime, { thresholds });\ndayjs.extend(updateLocale);\n\nexport const secondsUntilNextDay = (date = new Date()) => {\n const midnight = new Date(date.getTime());\n\n midnight.setDate(midnight.getDate() + 1);\n midnight.setHours(0);\n midnight.setMinutes(0);\n midnight.setSeconds(0);\n midnight.setMilliseconds(0);\n\n return (midnight.getTime() - date.getTime()) / 1000;\n};\n\nconst secondsUntilNextWeek = (date = new Date()) => {\n const firstMonthDayOfWeek = date.getDate() - date.getDay();\n const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed\n\n const firstDayNextWeek = new Date(date.getTime());\n\n firstDayNextWeek.setDate(firstMonthDayOfNextWeek);\n firstDayNextWeek.setHours(0);\n firstDayNextWeek.setMinutes(0);\n firstDayNextWeek.setSeconds(0);\n firstDayNextWeek.setMilliseconds(0);\n\n return (firstDayNextWeek.getTime() - date.getTime()) / 1000;\n};\n\n/**\n * @typedef {Object} TimeAgo\n * @property {string} timeAgo - the formatted date using the \"time ago format\"\n * @property {number} delay - the time until the date needs to be updated\n */\n\n/**\n * Formats a date to the a relative time format using dayjs.\n *\n * @param {Date} date - date to format.\n * @param {String} locale - locale to use.\n * @param {Boolean} [showSeconds=false] - if seconds should be part of the result.\n * @param {Date} referenceDate - reference date to use when formatting (defaults to current date).\n *\n * @return {TimeAgo} the formatted date using the \"time ago format\" and the time until it needs to be updated\n */\nexport const formatTimeAgo = (\n date,\n locale,\n showSeconds = false,\n referenceDate = new Date()\n) => {\n const dayReferenceDate = dayjs(referenceDate);\n const dayDate = dayjs(date).locale(locale);\n\n const dayDiffSeconds = dayReferenceDate.diff(dayDate, \"second\");\n\n const formatUseSeconds = showSeconds ? \"LTS\" : \"LT\";\n\n // check if the date is after the reference date\n if (date.getTime() > referenceDate.getTime()) {\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: (date.getTime() - referenceDate.getTime()) / 1000,\n };\n }\n\n // just now, until the 2 minutes\n if (dayDiffSeconds < 120) {\n return {\n timeAgo: dayjs\n .duration(dayDiffSeconds, \"second\")\n .locale(locale)\n .humanize(),\n delay: 120 - dayDiffSeconds,\n };\n }\n\n // ago in minutes, until the 1 hour mark\n const dayDiffMinutes = dayReferenceDate.diff(dayDate, \"minute\");\n\n if (dayDiffMinutes < 60) {\n return {\n timeAgo: dayjs\n .duration(-dayDiffMinutes, \"minute\")\n .locale(locale)\n .humanize(true),\n delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds,\n };\n }\n\n // formatted date with text description for today\n if (dayReferenceDate.isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with text description for yesterday\n if (dayReferenceDate.subtract(1, \"day\").isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with week during the current week\n if (dayDate.isSame(dayReferenceDate, \"week\")) {\n return {\n timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),\n delay: secondsUntilNextWeek(date),\n };\n }\n\n // formatted without special gimmicks\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: 0,\n };\n};\n"],"names":["thresholds","l","r","d","dayjs","extend","localeData","duration","calendar","localizedFormat","relativeTime","updateLocale","secondsUntilNextDay","date","Date","midnight","getTime","setDate","getDate","setHours","setMinutes","setSeconds","setMilliseconds","secondsUntilNextWeek","firstMonthDayOfWeek","getDay","firstMonthDayOfNextWeek","firstDayNextWeek","formatTimeAgo","locale","showSeconds","referenceDate","dayReferenceDate","dayDate","dayDiffSeconds","diff","formatUseSeconds","timeAgo","format","delay","humanize","dayDiffMinutes","isSame","subtract"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root"];
|
|
3
|
+
const timeAgoClasses = getClasses(classKeys, "HvTimeAgo");
|
|
4
|
+
const timeAgoClasses$1 = timeAgoClasses;
|
|
5
|
+
export {
|
|
6
|
+
timeAgoClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=timeAgoClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeAgoClasses.js","sources":["../../../../src/components/TimeAgo/timeAgoClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvTimeAgoClasses {\n root?: string;\n}\n\nconst classKeys: string[] = [\"root\"];\n\nconst timeAgoClasses = getClasses<HvTimeAgoClasses>(classKeys, \"HvTimeAgo\");\n\nexport default timeAgoClasses;\n"],"names":["classKeys","timeAgoClasses","getClasses"],"mappings":";AAMA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,iBAAiBC,WAA6BF,WAAW,WAAW;AAE1E,MAAA,mBAAeC;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
import useTimeout from "./useTimeout.js";
|
|
3
|
+
import { formatTimeAgo } from "./formatUtils.js";
|
|
4
|
+
const fmt = (timestamp, locale, showSeconds) => {
|
|
5
|
+
const timestampMs = String(timestamp).length > 11 ? timestamp : timestamp * 1e3;
|
|
6
|
+
return formatTimeAgo(new Date(timestampMs), locale, showSeconds);
|
|
7
|
+
};
|
|
8
|
+
function useTimeAgo(timestamp, options) {
|
|
9
|
+
const {
|
|
10
|
+
locale,
|
|
11
|
+
disableRefresh = false,
|
|
12
|
+
showSeconds = false
|
|
13
|
+
} = options;
|
|
14
|
+
const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));
|
|
15
|
+
const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1e3;
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
18
|
+
setTimeAgo(newTimeAgo);
|
|
19
|
+
}, [timestamp, locale, showSeconds]);
|
|
20
|
+
useTimeout(() => {
|
|
21
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
22
|
+
setTimeAgo(newTimeAgo);
|
|
23
|
+
}, refreshTime);
|
|
24
|
+
return timeAgo.timeAgo;
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
useTimeAgo as default
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=useTimeAgo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeAgo.js","sources":["../../../../src/components/TimeAgo/useTimeAgo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport useTimeout from \"./useTimeout\";\nimport { formatTimeAgo } from \"./formatUtils\";\n\n/**\n * Calls `formatTimeAgo` with timestamp conversion\n */\nconst fmt = (timestamp, locale, showSeconds) => {\n const timestampMs =\n String(timestamp).length > 11 ? timestamp : timestamp * 1000;\n return formatTimeAgo(new Date(timestampMs), locale, showSeconds);\n};\n\nexport default function useTimeAgo(timestamp, options) {\n const { locale, disableRefresh = false, showSeconds = false } = options;\n const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));\n const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1000;\n\n useEffect(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, [timestamp, locale, showSeconds]);\n\n useTimeout(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, refreshTime);\n\n return timeAgo.timeAgo;\n}\n"],"names":["fmt","timestamp","locale","showSeconds","timestampMs","String","length","formatTimeAgo","Date","useTimeAgo","options","disableRefresh","timeAgo","setTimeAgo","useState","refreshTime","delay","useEffect","newTimeAgo","useTimeout"],"mappings":";;;AAOA,MAAMA,MAAMA,CAACC,WAAWC,QAAQC,gBAAgB;AAC9C,QAAMC,cACJC,OAAOJ,SAAS,EAAEK,SAAS,KAAKL,YAAYA,YAAY;AAC1D,SAAOM,cAAc,IAAIC,KAAKJ,WAAW,GAAGF,QAAQC,WAAW;AACjE;AAEwBM,SAAAA,WAAWR,WAAWS,SAAS;AAC/C,QAAA;AAAA,IAAER;AAAAA,IAAQS,iBAAiB;AAAA,IAAOR,cAAc;AAAA,EAAUO,IAAAA;AAC1D,QAAA,CAACE,SAASC,UAAU,IAAIC,SAASd,IAAIC,WAAWC,QAAQC,WAAW,CAAC;AAC1E,QAAMY,cAAcJ,iBAAiB,IAAIC,QAAQI,QAAQ;AAEzDC,YAAU,MAAM;AACd,UAAMC,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,EACpB,GAAA,CAACjB,WAAWC,QAAQC,WAAW,CAAC;AAEnCgB,aAAW,MAAM;AACf,UAAMD,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,KACpBH,WAAW;AAEd,SAAOH,QAAQA;AACjB;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
function useTimeout(callback, delay) {
|
|
3
|
+
const savedCallback = useRef(callback);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
savedCallback.current = callback;
|
|
6
|
+
}, [callback]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (!delay)
|
|
9
|
+
return void 0;
|
|
10
|
+
const id = setTimeout(() => savedCallback.current(), delay);
|
|
11
|
+
return () => clearTimeout(id);
|
|
12
|
+
}, [delay]);
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
useTimeout as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useTimeout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeout.js","sources":["../../../../src/components/TimeAgo/useTimeout.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nexport default function useTimeout(callback, delay) {\n const savedCallback = useRef(callback);\n\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n useEffect(() => {\n if (!delay) return undefined;\n\n const id = setTimeout(() => savedCallback.current(), delay);\n return () => clearTimeout(id);\n }, [delay]);\n}\n"],"names":["useTimeout","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setTimeout","clearTimeout"],"mappings":";AAEwBA,SAAAA,WAAWC,UAAUC,OAAO;AAC5CC,QAAAA,gBAAgBC,OAAOH,QAAQ;AAErCI,YAAU,MAAM;AACdF,kBAAcG,UAAUL;AAAAA,EAAAA,GACvB,CAACA,QAAQ,CAAC;AAEbI,YAAU,MAAM;AACd,QAAI,CAACH;AAAcK,aAAAA;AAEnB,UAAMC,KAAKC,WAAW,MAAMN,cAAcG,QAAAA,GAAWJ,KAAK;AACnD,WAAA,MAAMQ,aAAaF,EAAE;AAAA,EAAA,GAC3B,CAACN,KAAK,CAAC;AACZ;"}
|
|
@@ -15,8 +15,8 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
15
15
|
const title = /* @__PURE__ */ jsx(HvTypography, {
|
|
16
16
|
children: label
|
|
17
17
|
});
|
|
18
|
-
const handleMouseEnter = (
|
|
19
|
-
const isHidden = hideTooltip == null ? void 0 : hideTooltip(
|
|
18
|
+
const handleMouseEnter = (event) => {
|
|
19
|
+
const isHidden = hideTooltip == null ? void 0 : hideTooltip(event);
|
|
20
20
|
setIsHoverDisabled(isHidden);
|
|
21
21
|
setOpen(!isHidden);
|
|
22
22
|
};
|
|
@@ -45,8 +45,8 @@ const withTooltip = (Component, label = "", placement, hideTooltip, tooltipProps
|
|
|
45
45
|
})
|
|
46
46
|
});
|
|
47
47
|
};
|
|
48
|
-
const
|
|
48
|
+
const withTooltipUtil = withTooltip;
|
|
49
49
|
export {
|
|
50
|
-
|
|
50
|
+
withTooltipUtil as default
|
|
51
51
|
};
|
|
52
52
|
//# sourceMappingURL=withTooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n HvTypography,\n HvTooltip,\n HvTooltipPlacementType,\n HvTooltipProps,\n} from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nconst withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: HvTooltipProps,\n tooltipContainerProps?: HvBaseProps\n ) =>\n (props) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n false\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const title = <HvTypography>{label}</HvTypography>;\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={title}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n\nexport default withTooltip;\n"],"names":["styles","truncate","overflow","textOverflow","whiteSpace","withTooltip","Component","label","placement","hideTooltip","tooltipProps","tooltipContainerProps","props","isHoverDisabled","setIsHoverDisabled","useState","open","setOpen","title","HvTypography","children","handleMouseEnter","event","isHidden","handleMouseLeave","HvTooltip","style","disableHoverListener","disableFocusListener","disableTouchListener","onMouseEnter","onMouseLeave"],"mappings":";;;;AASA,MAAMA,SAA4C;AAAA,EAChDC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF;AAEA,MAAMC,cACJA,CACEC,WAEAC,QAAQ,IACRC,WACAC,aACAC,cACAC,0BAEDC,CAAU,UAAA;AACT,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,SAC5C,KAAK;AAEP,QAAM,CAACC,MAAMC,OAAO,IAAIF,SAAkB,KAAK;AAEzCG,QAAAA,4BAASC,cAAY;AAAA,IAAAC,UAAEb;AAAAA,EAAAA,CAAqB;AAE5Cc,QAAAA,mBAAmBA,CAACC,UAA4C;AAC9DC,UAAAA,WAAWd,2CAAca;AAC/BR,uBAAmBS,QAAQ;AAC3BN,YAAQ,CAACM,QAAQ;AAAA,EAAA;AAGnB,QAAMC,mBAAmBA,MAAM;AAC7BV,uBAAmB,KAAK;AACxBG,YAAQ,KAAK;AAAA,EAAA;AAGf,6BACGQ,WAAS;AAAA,IACRC,OAAO;AAAA,MAAE,GAAG1B,OAAOC;AAAAA,IAAS;AAAA,IAC5B0B,sBAAsBd;AAAAA,IACtBe,sBAAoB;AAAA,IACpBC,sBAAoB;AAAA,IACpBX;AAAAA,IACAF;AAAAA,IACAR;AAAAA,IAAqB,GACjBE;AAAAA,IAAYU,8BAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,8BAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,kBAAeP;"}
|