dce-reactkit 3.5.10 → 3.5.11
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/index.js +19 -16
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +19 -16
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AutoscrollToBottomContainer.tsx +24 -18
package/dist/cjs/index.js
CHANGED
|
@@ -40851,7 +40851,7 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40851
40851
|
// Initialize refs
|
|
40852
40852
|
const lastItemIds = React.useRef([]);
|
|
40853
40853
|
const container = React.useRef(null);
|
|
40854
|
-
const
|
|
40854
|
+
const wasLastScrolledToBottom = React.useRef(true);
|
|
40855
40855
|
/*------------------------------------------------------------------------*/
|
|
40856
40856
|
/* ------------------------- Component Functions ------------------------ */
|
|
40857
40857
|
/*------------------------------------------------------------------------*/
|
|
@@ -40874,7 +40874,10 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40874
40874
|
const rootFontSizePx = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10);
|
|
40875
40875
|
const distanceToBottomRems = Math.abs((scrollTop + clientHeight - scrollHeight) / rootFontSizePx);
|
|
40876
40876
|
// Figure out if we're scrolled to the bottom
|
|
40877
|
-
|
|
40877
|
+
const atBottom = (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
|
|
40878
|
+
// Remember if we scrolled to the bottom
|
|
40879
|
+
wasLastScrolledToBottom.current = atBottom;
|
|
40880
|
+
return atBottom;
|
|
40878
40881
|
};
|
|
40879
40882
|
/**
|
|
40880
40883
|
* Scroll the user to the bottom of the container
|
|
@@ -40890,7 +40893,10 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40890
40893
|
type: ActionType.HideJumpToBottomButton,
|
|
40891
40894
|
});
|
|
40892
40895
|
// Scroll to bottom
|
|
40893
|
-
container.current.scrollTop = container.current.scrollHeight
|
|
40896
|
+
container.current.scrollTop = (container.current.scrollHeight
|
|
40897
|
+
- container.current.clientHeight);
|
|
40898
|
+
// Remember that we scrolled to the bottom
|
|
40899
|
+
wasLastScrolledToBottom.current = true;
|
|
40894
40900
|
};
|
|
40895
40901
|
/*----------------------------------------*/
|
|
40896
40902
|
/* -------------- Handlers -------------- */
|
|
@@ -40904,8 +40910,9 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40904
40910
|
if (!container.current) {
|
|
40905
40911
|
return;
|
|
40906
40912
|
}
|
|
40907
|
-
// If scrolled to bottom, hide the button
|
|
40913
|
+
// If scrolled to bottom, hide the button and remember position
|
|
40908
40914
|
if (isScrolledToBottom()) {
|
|
40915
|
+
// Hide button
|
|
40909
40916
|
dispatch({
|
|
40910
40917
|
type: ActionType.HideJumpToBottomButton,
|
|
40911
40918
|
});
|
|
@@ -40930,17 +40937,19 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40930
40937
|
// Check if new content appeared
|
|
40931
40938
|
const currentItemIds = getItemIds(items);
|
|
40932
40939
|
// Check if new content appeared at bottom
|
|
40933
|
-
const newContentAppeared = (
|
|
40934
|
-
|
|
40935
|
-
|
|
40936
|
-
|
|
40937
|
-
|
|
40940
|
+
const newContentAppeared = (
|
|
40941
|
+
// There are items
|
|
40942
|
+
currentItemIds.length > 0
|
|
40943
|
+
// The last item is new
|
|
40944
|
+
&& !lastItemIds.current.includes(currentItemIds[currentItemIds.length - 1]));
|
|
40945
|
+
// Update last item ids
|
|
40946
|
+
lastItemIds.current = currentItemIds;
|
|
40938
40947
|
// Do nothing if no new content
|
|
40939
40948
|
if (!newContentAppeared) {
|
|
40940
40949
|
return;
|
|
40941
40950
|
}
|
|
40942
40951
|
// Check if used to be scrolled to the bottom
|
|
40943
|
-
if (
|
|
40952
|
+
if (wasLastScrolledToBottom.current) {
|
|
40944
40953
|
// Was scrolled to the bottom! Autoscroll.
|
|
40945
40954
|
scrollToBottom();
|
|
40946
40955
|
}
|
|
@@ -40950,12 +40959,6 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40950
40959
|
type: ActionType.ShowJumpToBottomButton,
|
|
40951
40960
|
});
|
|
40952
40961
|
}
|
|
40953
|
-
// Update last item ids
|
|
40954
|
-
lastItemIds.current = currentItemIds;
|
|
40955
|
-
// Remember if we were scrolled to the bottom before the update
|
|
40956
|
-
return () => {
|
|
40957
|
-
wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
|
|
40958
|
-
};
|
|
40959
40962
|
}, [items]);
|
|
40960
40963
|
/*------------------------------------------------------------------------*/
|
|
40961
40964
|
/* ------------------------------- Render ------------------------------- */
|