From 95c1ab1418c94b8a8121a8fa6b1a8867944390e7 Mon Sep 17 00:00:00 2001 From: "changgi.lee" Date: Tue, 12 Jan 2021 16:26:08 +0900 Subject: [PATCH 1/5] Add whether scrolling is possible --- packages/ui/useScroll/useScroll.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ui/useScroll/useScroll.js b/packages/ui/useScroll/useScroll.js index 7f0201e6d5..0339ffda1b 100644 --- a/packages/ui/useScroll/useScroll.js +++ b/packages/ui/useScroll/useScroll.js @@ -146,6 +146,8 @@ const useScrollBase = (props) => { const [isHorizontalScrollbarVisible, setIsHorizontalScrollbarVisible] = useState(horizontalScrollbar === 'visible'); const [isVerticalScrollbarVisible, setIsVerticalScrollbarVisible] = useState(verticalScrollbar === 'visible'); + const [isScrollVertically, setIsScrollVertically] = useState(false); + const [isScrollHorizontally, setIsScrollHorizontally] = useState(false); const mutableRef = useRef({ overscrollEnabled: !!(props.applyOverscrollEffect), @@ -343,6 +345,13 @@ const useScrollBase = (props) => { }; }); + useEffect(() => { + const bounds = getScrollBounds(); + setIsScrollVertically(canScrollVertically(bounds)); + setIsScrollHorizontally(canScrollHorizontally(bounds)); + }, []) + + // scrollMode 'translate' [[ // TODO: consider replacing forceUpdate() by storing bounds in state rather than a non- // state member. @@ -1561,7 +1570,9 @@ const useScrollBase = (props) => { return { scrollContentWrapper: noScrollByDrag ? 'div' : TouchableDiv, isHorizontalScrollbarVisible, - isVerticalScrollbarVisible + isVerticalScrollbarVisible, + isScrollVertically, + isScrollHorizontally }; }; @@ -1611,7 +1622,9 @@ const useScroll = (props) => { const { scrollContentWrapper, isHorizontalScrollbarVisible, - isVerticalScrollbarVisible + isVerticalScrollbarVisible, + isScrollVertically, + isScrollHorizontally } = useScrollBase({ ...props, assignProperties, @@ -1637,7 +1650,10 @@ const useScroll = (props) => { scrollContentWrapper, scrollContentHandle, isHorizontalScrollbarVisible, - isVerticalScrollbarVisible + isVerticalScrollbarVisible, + checkScrollVertically, + isScrollVertically, + isScrollHorizontally }; }; From f65335d124a32cd592b0d45cf682256a10091517 Mon Sep 17 00:00:00 2001 From: Chang Gi Lee Date: Wed, 13 Jan 2021 13:32:19 +0900 Subject: [PATCH 2/5] Remove useless func --- packages/ui/useScroll/useScroll.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/useScroll/useScroll.js b/packages/ui/useScroll/useScroll.js index 0339ffda1b..f0bab16d1b 100644 --- a/packages/ui/useScroll/useScroll.js +++ b/packages/ui/useScroll/useScroll.js @@ -1651,7 +1651,6 @@ const useScroll = (props) => { scrollContentHandle, isHorizontalScrollbarVisible, isVerticalScrollbarVisible, - checkScrollVertically, isScrollVertically, isScrollHorizontally }; From c4bb3165f3f0dbac7f9c2b85b545ed849c99e2c9 Mon Sep 17 00:00:00 2001 From: Chang Gi Lee Date: Wed, 13 Jan 2021 15:24:05 +0900 Subject: [PATCH 3/5] Fix lint error --- packages/ui/useScroll/useScroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/useScroll/useScroll.js b/packages/ui/useScroll/useScroll.js index f0bab16d1b..d9c27c7401 100644 --- a/packages/ui/useScroll/useScroll.js +++ b/packages/ui/useScroll/useScroll.js @@ -349,7 +349,7 @@ const useScrollBase = (props) => { const bounds = getScrollBounds(); setIsScrollVertically(canScrollVertically(bounds)); setIsScrollHorizontally(canScrollHorizontally(bounds)); - }, []) + }, [getScrollBounds, canScrollVertically, canScrollHorizontally]); // scrollMode 'translate' [[ From e668672ac8f549b284eb3e8b04b0ea1a1cc56164 Mon Sep 17 00:00:00 2001 From: Chang Gi Lee Date: Wed, 13 Jan 2021 15:34:25 +0900 Subject: [PATCH 4/5] Fix lint error --- packages/ui/useScroll/useScroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/useScroll/useScroll.js b/packages/ui/useScroll/useScroll.js index d9c27c7401..5979ea61a3 100644 --- a/packages/ui/useScroll/useScroll.js +++ b/packages/ui/useScroll/useScroll.js @@ -349,7 +349,7 @@ const useScrollBase = (props) => { const bounds = getScrollBounds(); setIsScrollVertically(canScrollVertically(bounds)); setIsScrollHorizontally(canScrollHorizontally(bounds)); - }, [getScrollBounds, canScrollVertically, canScrollHorizontally]); + }, []); // eslint-disable-line react-hooks/exhaustive-deps // scrollMode 'translate' [[ From 342259f14d759980b9a1238343f9fe29c0f19c41 Mon Sep 17 00:00:00 2001 From: Chang Gi Lee Date: Thu, 14 Jan 2021 14:47:25 +0900 Subject: [PATCH 5/5] Modify CHANGELOG.md --- packages/ui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 76a1acdecb..3568b66416 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -7,6 +7,7 @@ The following is a curated list of changes in the Enact ui module, newest change ### Changed - `ui/Transition` prop `duration` to support any valid CSS value for `slide` and `fade` `type` +- `ui/useScroll` to manage internal state `isScrollVertically` and `isScrollHorizontally` ## [3.4.11] - 2020-12-11