dce-reactkit 3.5.8 → 3.5.9
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 +18 -24
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +18 -24
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AutoscrollToBottomContainer.tsx +21 -22
package/dist/esm/index.js
CHANGED
|
@@ -40778,10 +40778,10 @@ const getItemIds = (items) => {
|
|
|
40778
40778
|
// Types of actions
|
|
40779
40779
|
var ActionType;
|
|
40780
40780
|
(function (ActionType) {
|
|
40781
|
-
//
|
|
40782
|
-
ActionType["
|
|
40783
|
-
//
|
|
40784
|
-
ActionType["
|
|
40781
|
+
// Hide the "jump to bottom" button
|
|
40782
|
+
ActionType["HideJumpToBottomButton"] = "HideJumpToBottomButton";
|
|
40783
|
+
// Show the "jump to bottom" button
|
|
40784
|
+
ActionType["ShowJumpToBottomButton"] = "ShowJumpToBottomButton";
|
|
40785
40785
|
})(ActionType || (ActionType = {}));
|
|
40786
40786
|
/**
|
|
40787
40787
|
* Reducer that executes actions
|
|
@@ -40791,15 +40791,11 @@ var ActionType;
|
|
|
40791
40791
|
*/
|
|
40792
40792
|
const reducer = (state, action) => {
|
|
40793
40793
|
switch (action.type) {
|
|
40794
|
-
case ActionType.
|
|
40795
|
-
return Object.assign(Object.assign({}, state), {
|
|
40796
|
-
// Hide the "jump to bottom" button
|
|
40797
|
-
jumpToBottomButtonVisible: false });
|
|
40794
|
+
case ActionType.HideJumpToBottomButton: {
|
|
40795
|
+
return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: false });
|
|
40798
40796
|
}
|
|
40799
|
-
case ActionType.
|
|
40800
|
-
return Object.assign(Object.assign({}, state), {
|
|
40801
|
-
// Show the "jump to bottom" button
|
|
40802
|
-
jumpToBottomButtonVisible: true });
|
|
40797
|
+
case ActionType.ShowJumpToBottomButton: {
|
|
40798
|
+
return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: true });
|
|
40803
40799
|
}
|
|
40804
40800
|
default: {
|
|
40805
40801
|
return state;
|
|
@@ -40847,10 +40843,10 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40847
40843
|
return true;
|
|
40848
40844
|
}
|
|
40849
40845
|
// Get info about container
|
|
40850
|
-
const { scrollTop, } = container.current;
|
|
40846
|
+
const { scrollTop, scrollHeight, clientHeight, } = container.current;
|
|
40851
40847
|
// Distance to bottom
|
|
40852
40848
|
const rootFontSizePx = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10);
|
|
40853
|
-
const distanceToBottomRems = Math.abs(scrollTop / rootFontSizePx);
|
|
40849
|
+
const distanceToBottomRems = Math.abs((scrollTop + clientHeight - scrollHeight) / rootFontSizePx);
|
|
40854
40850
|
// Figure out if we're scrolled to the bottom
|
|
40855
40851
|
return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
|
|
40856
40852
|
};
|
|
@@ -40865,10 +40861,10 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40865
40861
|
}
|
|
40866
40862
|
// Update state
|
|
40867
40863
|
dispatch({
|
|
40868
|
-
type: ActionType.
|
|
40864
|
+
type: ActionType.HideJumpToBottomButton,
|
|
40869
40865
|
});
|
|
40870
40866
|
// Scroll to bottom
|
|
40871
|
-
container.current.scrollTop =
|
|
40867
|
+
container.current.scrollTop = container.current.scrollHeight;
|
|
40872
40868
|
};
|
|
40873
40869
|
/*----------------------------------------*/
|
|
40874
40870
|
/* -------------- Handlers -------------- */
|
|
@@ -40882,12 +40878,10 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40882
40878
|
if (!container.current) {
|
|
40883
40879
|
return;
|
|
40884
40880
|
}
|
|
40885
|
-
//
|
|
40886
|
-
|
|
40887
|
-
// Remember if now no longer scrolled to bottom
|
|
40888
|
-
if (nowScrolledToBottom) {
|
|
40881
|
+
// If scrolled to bottom, hide the button
|
|
40882
|
+
if (isScrolledToBottom()) {
|
|
40889
40883
|
dispatch({
|
|
40890
|
-
type: ActionType.
|
|
40884
|
+
type: ActionType.HideJumpToBottomButton,
|
|
40891
40885
|
});
|
|
40892
40886
|
}
|
|
40893
40887
|
};
|
|
@@ -40910,11 +40904,11 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40910
40904
|
// Check if new content appeared
|
|
40911
40905
|
const currentItemIds = getItemIds(items);
|
|
40912
40906
|
// Check if new content appeared at bottom
|
|
40913
|
-
const
|
|
40907
|
+
const newContentAppeared = (currentItemIds.length > 0
|
|
40914
40908
|
&& (currentItemIds[currentItemIds.length - 1]
|
|
40915
40909
|
!== lastItemIds.current[lastItemIds.current.length - 1]));
|
|
40916
40910
|
// Do nothing if no new content
|
|
40917
|
-
if (!
|
|
40911
|
+
if (!newContentAppeared) {
|
|
40918
40912
|
return;
|
|
40919
40913
|
}
|
|
40920
40914
|
// Check if used to be scrolled to the bottom
|
|
@@ -40925,7 +40919,7 @@ const AutoscrollToBottomContainer = (props) => {
|
|
|
40925
40919
|
else {
|
|
40926
40920
|
// Not scrolled to bottom. Show "jump to bottom" button.
|
|
40927
40921
|
dispatch({
|
|
40928
|
-
type: ActionType.
|
|
40922
|
+
type: ActionType.ShowJumpToBottomButton,
|
|
40929
40923
|
});
|
|
40930
40924
|
}
|
|
40931
40925
|
// Update last item ids
|