From 71d6458ddced9e25e8503cb1cb8d59f0031835c2 Mon Sep 17 00:00:00 2001 From: vishtree Date: Wed, 3 Mar 2021 12:22:37 +0100 Subject: [PATCH 1/5] Adding debouncer to enable & disable mvcp --- package.json | 4 ++++ src/FlatList.tsx | 52 ++++++++++++++++++++++++++++++++++-------------- yarn.lock | 10 ++++++++++ 3 files changed, 51 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index d5cc041..3eb84a6 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@release-it/conventional-changelog": "^1.1.4", "@types/jest": "^26.0.0", + "@types/lodash": "^4.14.168", "@types/react": "^16.9.19", "@types/react-native": "0.63.50", "commitlint": "^8.3.5", @@ -139,5 +140,8 @@ "module", "typescript" ] + }, + "dependencies": { + "lodash.debounce": "^4.0.8" } } diff --git a/src/FlatList.tsx b/src/FlatList.tsx index f9b6b01..6798899 100644 --- a/src/FlatList.tsx +++ b/src/FlatList.tsx @@ -1,8 +1,40 @@ import React, { MutableRefObject, useRef } from 'react'; import { FlatList, FlatListProps, NativeModules, Platform } from 'react-native'; - +import debounce from 'lodash/debounce'; export const MvcpScrollViewManager = NativeModules.MvcpScrollViewManager; +const debouncedEnable = debounce( + ( + cleanupPromiseRef: MutableRefObject | null>, + viewTag: any, + autoscrollToTopThreshold: number, + minIndexForVisible: number + ) => { + cleanupPromiseRef.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition( + viewTag, + autoscrollToTopThreshold || -Number.MAX_SAFE_INTEGER, + minIndexForVisible || 1 + ); + }, + 100, + { + trailing: true, + } +); + +const debouncedDisable = debounce( + (cleanupPromiseRef: MutableRefObject | null>) => { + cleanupPromiseRef.current && + cleanupPromiseRef.current?.then((handle) => { + MvcpScrollViewManager.disableMaintainVisibleContentPosition(handle); + }); + }, + 50, + { + trailing: true, + } +); + export default (React.forwardRef( ( props: FlatListProps, @@ -16,30 +48,21 @@ export default (React.forwardRef( const autoscrollToTopThreshold = useRef(); const minIndexForVisible = useRef(); - const cleanupPromiseRef = useRef>(); + const cleanupPromiseRef = useRef | null>(null); const resetMvcpIfNeeded = (): void => { if (!mvcp || Platform.OS !== 'android' || !flRef.current) { return; } - if ( - autoscrollToTopThreshold.current === mvcp?.autoscrollToTopThreshold && - minIndexForVisible.current === mvcp?.minIndexForVisible - ) { - // Don't do anythinig if the values haven't changed - return; - } - cleanupPromiseRef.current && - cleanupPromiseRef.current?.then((handle) => { - MvcpScrollViewManager.disableMaintainVisibleContentPosition(handle); - }); + debouncedDisable(cleanupPromiseRef); autoscrollToTopThreshold.current = mvcp?.autoscrollToTopThreshold; minIndexForVisible.current = mvcp?.minIndexForVisible; const viewTag = flRef.current.getScrollableNode(); - cleanupPromiseRef.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition( + debouncedEnable( + cleanupPromiseRef, viewTag, autoscrollToTopThreshold.current || -Number.MAX_SAFE_INTEGER, minIndexForVisible.current || 1 @@ -53,7 +76,6 @@ export default (React.forwardRef( flRef.current = ref; resetMvcpIfNeeded(); - if (typeof forwardedRef === 'function') { forwardedRef(ref); } else if (forwardedRef?.current) { diff --git a/yarn.lock b/yarn.lock index f55e3db..015e68b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1864,6 +1864,11 @@ dependencies: "@types/node" "*" +"@types/lodash@^4.14.168": + version "4.14.168" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" + integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== + "@types/minimist@^1.2.0": version "1.2.1" resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256" @@ -6385,6 +6390,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.find@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1" From 5877130aa81d72476b6ea4835e6a698a26dbafc7 Mon Sep 17 00:00:00 2001 From: vishtree Date: Wed, 3 Mar 2021 12:23:19 +0100 Subject: [PATCH 2/5] 0.0.9-dev.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3eb84a6..07cd265 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@stream-io/flat-list-mvcp", - "version": "0.0.8", + "version": "0.0.9-dev.0", "description": "`maintainVisibleContentPosition` support for Android react-native", "main": "lib/commonjs/index", "module": "lib/module/index", From 2b31d42d4a2706d4a8205544565ad2803e1910a0 Mon Sep 17 00:00:00 2001 From: vishtree Date: Wed, 3 Mar 2021 15:05:46 +0100 Subject: [PATCH 3/5] Executing disable and enable in sequence --- src/FlatList.tsx | 48 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/src/FlatList.tsx b/src/FlatList.tsx index 6798899..d8f5dff 100644 --- a/src/FlatList.tsx +++ b/src/FlatList.tsx @@ -1,20 +1,32 @@ import React, { MutableRefObject, useRef } from 'react'; import { FlatList, FlatListProps, NativeModules, Platform } from 'react-native'; import debounce from 'lodash/debounce'; + export const MvcpScrollViewManager = NativeModules.MvcpScrollViewManager; const debouncedEnable = debounce( ( - cleanupPromiseRef: MutableRefObject | null>, + enableMvcpPromise: MutableRefObject | null>, + disableMvcpPromise: MutableRefObject | null>, viewTag: any, autoscrollToTopThreshold: number, minIndexForVisible: number ) => { - cleanupPromiseRef.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition( - viewTag, - autoscrollToTopThreshold || -Number.MAX_SAFE_INTEGER, - minIndexForVisible || 1 - ); + if (disableMvcpPromise.current) { + disableMvcpPromise.current.then(() => { + enableMvcpPromise.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition( + viewTag, + autoscrollToTopThreshold, + minIndexForVisible + ); + }); + } else { + enableMvcpPromise.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition( + viewTag, + autoscrollToTopThreshold, + minIndexForVisible + ); + } }, 100, { @@ -23,11 +35,15 @@ const debouncedEnable = debounce( ); const debouncedDisable = debounce( - (cleanupPromiseRef: MutableRefObject | null>) => { - cleanupPromiseRef.current && - cleanupPromiseRef.current?.then((handle) => { - MvcpScrollViewManager.disableMaintainVisibleContentPosition(handle); - }); + ( + enableMvcpPromise: MutableRefObject | null>, + disableMvcpPromise: MutableRefObject | null> + ) => { + enableMvcpPromise.current?.then((handle) => { + disableMvcpPromise.current = MvcpScrollViewManager.disableMaintainVisibleContentPosition( + handle + ); + }); }, 50, { @@ -48,21 +64,25 @@ export default (React.forwardRef( const autoscrollToTopThreshold = useRef(); const minIndexForVisible = useRef(); - const cleanupPromiseRef = useRef | null>(null); + const enableMvcpPromise = useRef | null>(null); + const disableMvcpPromise = useRef | null>(null); const resetMvcpIfNeeded = (): void => { if (!mvcp || Platform.OS !== 'android' || !flRef.current) { return; } - debouncedDisable(cleanupPromiseRef); + enableMvcpPromise && + enableMvcpPromise.current && + debouncedDisable(enableMvcpPromise, disableMvcpPromise); autoscrollToTopThreshold.current = mvcp?.autoscrollToTopThreshold; minIndexForVisible.current = mvcp?.minIndexForVisible; const viewTag = flRef.current.getScrollableNode(); debouncedEnable( - cleanupPromiseRef, + enableMvcpPromise, + disableMvcpPromise, viewTag, autoscrollToTopThreshold.current || -Number.MAX_SAFE_INTEGER, minIndexForVisible.current || 1 From aa54b9ec1eb219e9b32b812a3ab4444cfa30796f Mon Sep 17 00:00:00 2001 From: vishtree Date: Wed, 3 Mar 2021 15:06:12 +0100 Subject: [PATCH 4/5] 0.0.9-dev.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 07cd265..ae4ce0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@stream-io/flat-list-mvcp", - "version": "0.0.9-dev.0", + "version": "0.0.9-dev.1", "description": "`maintainVisibleContentPosition` support for Android react-native", "main": "lib/commonjs/index", "module": "lib/module/index", From 824af3b1aa6ac1782e680a339fb932f6358c7163 Mon Sep 17 00:00:00 2001 From: vishtree Date: Wed, 3 Mar 2021 16:03:16 +0100 Subject: [PATCH 5/5] 0.0.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ae4ce0e..037c467 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@stream-io/flat-list-mvcp", - "version": "0.0.9-dev.1", + "version": "0.0.9", "description": "`maintainVisibleContentPosition` support for Android react-native", "main": "lib/commonjs/index", "module": "lib/module/index",