@r0b0t3d/react-native-collapsible 1.3.3 → 1.3.5-alpha.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/lib/commonjs/components/CollapsibleContainer.js +1 -3
- package/lib/commonjs/components/CollapsibleContainer.js.map +1 -1
- package/lib/commonjs/components/CollapsibleView.js +15 -5
- package/lib/commonjs/components/CollapsibleView.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js +5 -13
- package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/commonjs/components/header/StickyView.js +2 -1
- package/lib/commonjs/components/header/StickyView.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js +36 -28
- package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js +7 -14
- package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/commonjs/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/commonjs/index.js +0 -9
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/withCollapsibleContext.js +1 -3
- package/lib/commonjs/withCollapsibleContext.js.map +1 -1
- package/lib/module/components/CollapsibleContainer.js +1 -2
- package/lib/module/components/CollapsibleContainer.js.map +1 -1
- package/lib/module/components/CollapsibleView.js +16 -6
- package/lib/module/components/CollapsibleView.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js +1 -1
- package/lib/module/components/header/CollapsibleHeaderConsumer.js.map +1 -1
- package/lib/module/components/header/CollapsibleHeaderContainer.js +6 -13
- package/lib/module/components/header/CollapsibleHeaderContainer.js.map +1 -1
- package/lib/module/components/header/StickyView.js +3 -2
- package/lib/module/components/header/StickyView.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleFlatList.js +36 -26
- package/lib/module/components/scrollable/CollapsibleFlatList.js.map +1 -1
- package/lib/module/components/scrollable/CollapsibleScrollView.js +6 -12
- package/lib/module/components/scrollable/CollapsibleScrollView.js.map +1 -1
- package/lib/module/components/scrollable/useAnimatedScroll.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/withCollapsibleContext.js +1 -2
- package/lib/module/withCollapsibleContext.js.map +1 -1
- package/lib/typescript/components/CollapsibleView.d.ts +2 -1
- package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts +2 -2
- package/lib/typescript/components/scrollable/useAnimatedScroll.d.ts +1 -1
- package/lib/typescript/index.d.ts +0 -1
- package/package.json +1 -1
- package/src/components/CollapsibleContainer.tsx +0 -2
- package/src/components/CollapsibleView.tsx +19 -3
- package/src/components/header/CollapsibleHeaderConsumer.tsx +2 -2
- package/src/components/header/CollapsibleHeaderContainer.tsx +8 -15
- package/src/components/header/StickyView.tsx +2 -1
- package/src/components/scrollable/CollapsibleFlatList.tsx +59 -40
- package/src/components/scrollable/CollapsibleScrollView.tsx +4 -8
- package/src/components/scrollable/useAnimatedScroll.ts +1 -1
- package/src/index.tsx +0 -1
- package/src/withCollapsibleContext.tsx +2 -5
- package/lib/commonjs/components/header/AnimatedTopView.js +0 -29
- package/lib/commonjs/components/header/AnimatedTopView.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js +0 -75
- package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js +0 -35
- package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js +0 -91
- package/lib/commonjs/components/pullToRefresh/RefreshControl.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js +0 -24
- package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js.map +0 -1
- package/lib/commonjs/components/pullToRefresh/utils.js +0 -59
- package/lib/commonjs/components/pullToRefresh/utils.js.map +0 -1
- package/lib/module/components/header/AnimatedTopView.js +0 -14
- package/lib/module/components/header/AnimatedTopView.js.map +0 -1
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js +0 -56
- package/lib/module/components/pullToRefresh/PullToRefreshContainer.js.map +0 -1
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js +0 -21
- package/lib/module/components/pullToRefresh/PullToRefreshProvider.js.map +0 -1
- package/lib/module/components/pullToRefresh/RefreshControl.js +0 -73
- package/lib/module/components/pullToRefresh/RefreshControl.js.map +0 -1
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js +0 -13
- package/lib/module/components/pullToRefresh/usePullToRefreshContext.js.map +0 -1
- package/lib/module/components/pullToRefresh/utils.js +0 -42
- package/lib/module/components/pullToRefresh/utils.js.map +0 -1
- package/lib/typescript/components/header/AnimatedTopView.d.ts +0 -6
- package/lib/typescript/components/pullToRefresh/PullToRefreshContainer.d.ts +0 -8
- package/lib/typescript/components/pullToRefresh/PullToRefreshProvider.d.ts +0 -6
- package/lib/typescript/components/pullToRefresh/RefreshControl.d.ts +0 -9
- package/lib/typescript/components/pullToRefresh/usePullToRefreshContext.d.ts +0 -4
- package/lib/typescript/components/pullToRefresh/utils.d.ts +0 -20
- package/src/components/header/AnimatedTopView.tsx +0 -18
- package/src/components/pullToRefresh/PullToRefreshContainer.tsx +0 -66
- package/src/components/pullToRefresh/PullToRefreshProvider.tsx +0 -27
- package/src/components/pullToRefresh/RefreshControl.tsx +0 -100
- package/src/components/pullToRefresh/usePullToRefreshContext.ts +0 -13
- package/src/components/pullToRefresh/utils.ts +0 -49
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from '
|
|
1
|
+
{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n headerSnappable: boolean;\n scrollTo: (yValue: number, animated?: boolean) => void;\n scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n headerSnappable,\n scrollTo,\n scrollToIndex,\n}: Props) {\n const scrollDirection = useSharedValue('unknown');\n const { scrollY } = useCollapsibleContext();\n const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n useInternalCollapsibleContext();\n\n useEffect(() => {\n if (scrollY.value > 0) {\n requestAnimationFrame(() => scrollTo(scrollY.value, false));\n }\n }, []);\n\n const collapse = useCallback(\n (animated = true) => {\n scrollTo(\n Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),\n animated\n );\n },\n [scrollTo]\n );\n\n const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n useEffect(() => {\n setCollapsibleHandlers({\n collapse,\n expand,\n scrollTo,\n scrollToIndex,\n });\n }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n const scrollHandler = useAnimatedScrollHandler(\n {\n onScroll: (event) => {\n const offset = event.contentOffset.y;\n const diff = scrollY.value - offset;\n scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n scrollY.value = offset;\n },\n onEndDrag: () => {\n if (!headerSnappable) return;\n const maxY =\n firstStickyViewY.value && firstStickyViewY.value > 0\n ? firstStickyViewY.value\n : fixedHeaderHeight.value || 0;\n\n if (scrollY.value < maxY) {\n const delta = Math.abs(scrollY.value - maxY);\n if (delta < wHeight / 2) {\n let yValue = 0;\n if (scrollDirection.value === 'up') {\n yValue = maxY;\n }\n runOnJS(scrollTo)(yValue);\n }\n }\n },\n },\n [scrollTo]\n );\n\n return {\n scrollHandler,\n collapse,\n expand,\n };\n}\n"]}
|
package/lib/module/index.js
CHANGED
|
@@ -5,7 +5,6 @@ export { default as CollapsibleFlatList } from './components/scrollable/Collapsi
|
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
6
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
7
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
-
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
9
8
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
10
9
|
export * from './components/CollapsibleView';
|
|
11
10
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["default","withCollapsibleContext","useCollapsibleContext","CollapsibleContainer","CollapsibleFlatList","CollapsibleScrollView","CollapsibleHeaderContainer","StickyView","CollapsibleView"],"mappings":"AAAA,SAASA,OAAO,IAAIC,sBAApB,QAAkD,0BAAlD;AACA,SAASD,OAAO,IAAIE,qBAApB,QAAiD,+BAAjD;AAEA,SAASF,OAAO,IAAIG,oBAApB,QAAgD,mCAAhD;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,6CAA/C;AACA,SAASJ,OAAO,IAAIK,qBAApB,QAAiD,+CAAjD;AACA,SAASL,OAAO,IAAIM,0BAApB,QAAsD,gDAAtD;AACA,SAASN,OAAO,IAAIO,UAApB,QAAsC,gCAAtC;AACA,SAASP,OAAO,IAAIQ,eAApB,QAA2C,8BAA3C;AACA,cAAc,8BAAd","sourcesContent":["export { default as withCollapsibleContext } from './withCollapsibleContext';\nexport { default as useCollapsibleContext } from './hooks/useCollapsibleContext';\n\nexport { default as CollapsibleContainer } from './components/CollapsibleContainer';\nexport { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';\nexport { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';\nexport { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';\nexport { default as StickyView } from './components/header/StickyView';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport * from './components/CollapsibleView';\n"]}
|
|
@@ -6,7 +6,6 @@ import { CollapsibleContext } from './hooks/useCollapsibleContext';
|
|
|
6
6
|
import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';
|
|
7
7
|
import { useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
8
8
|
import { debounce } from './utils/debounce';
|
|
9
|
-
import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
|
|
10
9
|
import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
|
|
11
10
|
export default function withCollapsibleContext(Component) {
|
|
12
11
|
return props => {
|
|
@@ -157,7 +156,7 @@ export default function withCollapsibleContext(Component) {
|
|
|
157
156
|
value: context
|
|
158
157
|
}, /*#__PURE__*/React.createElement(InternalCollapsibleContext.Provider, {
|
|
159
158
|
value: internalContext
|
|
160
|
-
}, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(
|
|
159
|
+
}, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(Component, props))));
|
|
161
160
|
};
|
|
162
161
|
}
|
|
163
162
|
//# sourceMappingURL=withCollapsibleContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","animated","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\nimport CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n scrollToIndex: (params: any) =>\n collapsibleHandlers.current?.scrollToIndex(params),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <CollapsibleHeaderProvider>\n <PullToRefreshProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </PullToRefreshProvider>\n </CollapsibleHeaderProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","animated","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n return (props: T) => {\n const collapsibleHandlers = useRef<CollapsibleHandles>();\n const headerHeight = useSharedValue(0);\n const scrollY = useSharedValue(0);\n const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n const stickyViewTops = useSharedValue<Record<string, number>>({});\n const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n {}\n );\n const fixedHeaderHeight = useSharedValue(0);\n const stickyHeaderHeight = useSharedValue(0);\n const containerHeight = useSharedValue(0);\n const firstStickyViewY = useSharedValue(1000000);\n const containerRef = useRef<View>(null);\n const scrollViewRef = useRef<View>(null);\n\n const setCollapsibleHandlers = useCallback((handlers) => {\n collapsibleHandlers.current = handlers;\n }, []);\n\n const headerCollapsed = useDerivedValue(() => {\n const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n return scrollY.value >= maxY;\n }, []);\n\n const contentMinHeight = useDerivedValue(() => {\n return (\n containerHeight.value +\n fixedHeaderHeight.value -\n stickyHeaderHeight.value\n );\n }, []);\n\n useAnimatedReaction(\n () => {\n const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n (acc, item) => {\n return acc + stickyViewPositions.value[item].top;\n },\n 0\n );\n return totalHeight - fixedHeaderHeight.value;\n },\n (result, previous) => {\n if (result !== previous) {\n const viewPositions = stickyViewPositions.value;\n const headerHeight = fixedHeaderHeight.value;\n const sortedKeys = Object.keys(viewPositions).sort(\n (a, b) => viewPositions[a].top - viewPositions[b].top\n );\n let totalTop = 0;\n const values: any = {};\n for (let i = 0; i < sortedKeys.length; i++) {\n values[sortedKeys[i]] = totalTop;\n // Try minus 1 make it filled when scrolling up.\n // Otherwise, we can see a small space between the persits views\n totalTop += viewPositions[sortedKeys[i]].height - 1;\n }\n stickyViewTops.value = values;\n firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n const stickyHeader = sortedKeys.reduce((acc, key) => {\n const data = viewPositions[key];\n const isInsideHeader = data.top < headerHeight;\n if (isInsideHeader) {\n return acc + data.height;\n }\n return acc;\n }, 0);\n stickyHeaderHeight.value = stickyHeader;\n }\n }\n );\n\n const handleStickyViewLayout = useCallback(\n (viewKey: string, viewRef?: React.RefObject<View>) => {\n if (viewRef && viewRef.current && containerRef.current) {\n stickyViewRefs.current[viewKey] = viewRef;\n viewRef.current.measureLayout(\n // @ts-ignore\n containerRef.current,\n (left, top, width, height) => {\n stickyViewPositionsRef.current = {\n ...stickyViewPositionsRef.current,\n [viewKey]: { left, top, width, height },\n };\n stickyViewPositions.value = stickyViewPositionsRef.current;\n },\n () => {}\n );\n } else {\n delete stickyViewRefs.current[viewKey];\n delete stickyViewPositionsRef.current[viewKey];\n stickyViewPositions.value = stickyViewPositionsRef.current;\n }\n },\n []\n );\n\n const debounceRefreshStickyPositions = useMemo(() => {\n return debounce(() => {\n Object.keys(stickyViewRefs.current).forEach((key) => {\n const viewRef = stickyViewRefs.current[key];\n if (viewRef) {\n handleStickyViewLayout(key, viewRef);\n }\n });\n }, 200);\n }, []);\n\n const handleHeaderContainerLayout = useCallback((height: number) => {\n headerHeight.value = withTiming(height, {\n duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n });\n fixedHeaderHeight.value = height;\n // Try refresh sticky positions\n debounceRefreshStickyPositions();\n }, []);\n\n const handleContainerHeight = useCallback((height: number) => {\n containerHeight.value = height;\n }, []);\n\n const context = useMemo(() => {\n return {\n collapse: (animated?: boolean) =>\n collapsibleHandlers.current?.collapse(animated),\n expand: () => collapsibleHandlers.current?.expand(),\n scrollTo: (offset: number, animate?: boolean) =>\n collapsibleHandlers.current?.scrollTo(offset, animate),\n scrollToIndex: (params: any) =>\n collapsibleHandlers.current?.scrollToIndex(params),\n headerHeight,\n scrollY,\n headerCollapsed,\n };\n }, [scrollY, headerHeight, headerCollapsed]);\n\n const internalContext = useMemo(\n () => ({\n scrollViewRef,\n containerRef,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n setCollapsibleHandlers,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n }),\n [\n setCollapsibleHandlers,\n handleStickyViewLayout,\n handleHeaderContainerLayout,\n handleContainerHeight,\n firstStickyViewY,\n stickyViewTops,\n stickyViewPositions,\n fixedHeaderHeight,\n contentMinHeight,\n ]\n );\n\n return (\n <CollapsibleContext.Provider value={context}>\n <InternalCollapsibleContext.Provider value={internalContext}>\n <CollapsibleHeaderProvider>\n {/** @ts-ignore */}\n <Component {...props} />\n </CollapsibleHeaderProvider>\n </InternalCollapsibleContext.Provider>\n </CollapsibleContext.Provider>\n );\n };\n}\n"]}
|
|
@@ -14,8 +14,9 @@ declare type Props = {
|
|
|
14
14
|
collapsedBackgroundColor?: string;
|
|
15
15
|
expandedBackgroundColor?: string;
|
|
16
16
|
useDynamicLayout?: boolean;
|
|
17
|
+
onToggle?: (isExpand: boolean) => void;
|
|
17
18
|
};
|
|
18
|
-
export default function CollapsibleView({ initialState, collapseState, renderHeader, children, containerStyle, collapsedBackgroundColor, expandedBackgroundColor, }: Props): JSX.Element;
|
|
19
|
+
export default function CollapsibleView({ initialState, collapseState, renderHeader, children, containerStyle, collapsedBackgroundColor, expandedBackgroundColor, onToggle, }: Props): JSX.Element;
|
|
19
20
|
export declare function CollapsibleHeaderText({ title, collapsed, onToggle, style, titleStyle, icon, iconInitialAngle, children, }: {
|
|
20
21
|
title: string | Element;
|
|
21
22
|
style?: StyleProp<ViewStyle>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
|
-
import { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
declare type Props = {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
containerStyle?: StyleProp<ViewStyle>;
|
|
6
6
|
};
|
|
7
|
-
export default function CollapsibleHeaderContainer({ children }: Props): null;
|
|
7
|
+
export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): null;
|
|
8
8
|
export {};
|
|
@@ -5,6 +5,5 @@ export { default as CollapsibleFlatList } from './components/scrollable/Collapsi
|
|
|
5
5
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
6
6
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
7
7
|
export { default as StickyView } from './components/header/StickyView';
|
|
8
|
-
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
9
8
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
10
9
|
export * from './components/CollapsibleView';
|
package/package.json
CHANGED
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
|
|
12
12
|
import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
|
|
13
13
|
import useCollapsibleContext from '../hooks/useCollapsibleContext';
|
|
14
|
-
import CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';
|
|
15
14
|
|
|
16
15
|
type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
|
|
17
16
|
children: Element;
|
|
@@ -76,7 +75,6 @@ export default function CollapsibleContainer({
|
|
|
76
75
|
collapsable={false}
|
|
77
76
|
>
|
|
78
77
|
{children}
|
|
79
|
-
<CollapsibleHeaderConsumer />
|
|
80
78
|
</View>
|
|
81
79
|
</KeyboardAvoidingView>
|
|
82
80
|
);
|
|
@@ -17,6 +17,8 @@ import Animated, {
|
|
|
17
17
|
withSpring,
|
|
18
18
|
interpolateColor,
|
|
19
19
|
interpolate,
|
|
20
|
+
useAnimatedReaction,
|
|
21
|
+
runOnJS,
|
|
20
22
|
} from 'react-native-reanimated';
|
|
21
23
|
|
|
22
24
|
export type CollapsibleHeaderProps = {
|
|
@@ -33,6 +35,7 @@ type Props = {
|
|
|
33
35
|
collapsedBackgroundColor?: string;
|
|
34
36
|
expandedBackgroundColor?: string;
|
|
35
37
|
useDynamicLayout?: boolean;
|
|
38
|
+
onToggle?: (isExpand: boolean) => void;
|
|
36
39
|
};
|
|
37
40
|
|
|
38
41
|
let key = 0;
|
|
@@ -44,6 +47,7 @@ export default function CollapsibleView({
|
|
|
44
47
|
containerStyle,
|
|
45
48
|
collapsedBackgroundColor,
|
|
46
49
|
expandedBackgroundColor,
|
|
50
|
+
onToggle,
|
|
47
51
|
}: Props) {
|
|
48
52
|
const actualHeight = useSharedValue(11110);
|
|
49
53
|
const contentKey = useMemo(() => `collapsible-view-${key++}`, []);
|
|
@@ -56,7 +60,7 @@ export default function CollapsibleView({
|
|
|
56
60
|
collapseState.value = newValue;
|
|
57
61
|
}, [initialState]);
|
|
58
62
|
|
|
59
|
-
const
|
|
63
|
+
const handleToggle = useCallback(() => {
|
|
60
64
|
collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {
|
|
61
65
|
overshootClamping: true,
|
|
62
66
|
});
|
|
@@ -86,6 +90,18 @@ export default function CollapsibleView({
|
|
|
86
90
|
[actualHeight, contentKey]
|
|
87
91
|
);
|
|
88
92
|
|
|
93
|
+
useAnimatedReaction(
|
|
94
|
+
() => (collapseState.value === 0 ? 0 : collapseState.value === 1 ? 1 : 0),
|
|
95
|
+
(result, prev) => {
|
|
96
|
+
if (result === prev) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
if (onToggle) {
|
|
100
|
+
runOnJS(onToggle)(result === 1);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
|
|
89
105
|
// @ts-ignore
|
|
90
106
|
const containerAnimatedStyle = useAnimatedStyle(() => {
|
|
91
107
|
if (collapsedBackgroundColor && expandedBackgroundColor) {
|
|
@@ -101,8 +117,8 @@ export default function CollapsibleView({
|
|
|
101
117
|
}, []);
|
|
102
118
|
|
|
103
119
|
const headerProps = useMemo(
|
|
104
|
-
() => ({ onToggle, collapsed: collapseState }),
|
|
105
|
-
[
|
|
120
|
+
() => ({ onToggle: handleToggle, collapsed: collapseState }),
|
|
121
|
+
[handleToggle, collapseState]
|
|
106
122
|
);
|
|
107
123
|
|
|
108
124
|
return (
|
|
@@ -19,8 +19,8 @@ export default function CollapsibleHeaderConsumer() {
|
|
|
19
19
|
interpolate(
|
|
20
20
|
scrollY.value,
|
|
21
21
|
// FIXME: can improve by geting maxY value of header and sticky views
|
|
22
|
-
[-
|
|
23
|
-
[
|
|
22
|
+
[-1000, 0, 100000],
|
|
23
|
+
[-1000, 0, -100000],
|
|
24
24
|
Animated.Extrapolate.CLAMP
|
|
25
25
|
),
|
|
26
26
|
[]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import React, { Fragment, ReactNode, useEffect, useMemo } from 'react';
|
|
4
4
|
import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
|
|
5
5
|
|
|
6
6
|
type Props = {
|
|
@@ -10,23 +10,16 @@ type Props = {
|
|
|
10
10
|
|
|
11
11
|
let key = 0;
|
|
12
12
|
|
|
13
|
-
export default function CollapsibleHeaderContainer({
|
|
13
|
+
export default function CollapsibleHeaderContainer({
|
|
14
|
+
children,
|
|
15
|
+
containerStyle,
|
|
16
|
+
}: Props) {
|
|
14
17
|
const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
|
|
15
18
|
const { mount, unmount, update } = useCollapsibleHeaderContext();
|
|
16
19
|
|
|
17
|
-
const internalStyle = useMemo(() => {
|
|
18
|
-
return {
|
|
19
|
-
zIndex: 100000 - key,
|
|
20
|
-
};
|
|
21
|
-
}, []);
|
|
22
|
-
|
|
23
20
|
const content = useMemo(() => {
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
{children}
|
|
27
|
-
</View>
|
|
28
|
-
);
|
|
29
|
-
}, [children]);
|
|
21
|
+
return <Fragment key={contentKey}>{children}</Fragment>;
|
|
22
|
+
}, [children, containerStyle]);
|
|
30
23
|
|
|
31
24
|
useEffect(() => {
|
|
32
25
|
mount(contentKey, content);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
3
|
-
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
|
|
3
|
+
import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
|
|
4
4
|
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
5
5
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
6
6
|
import Animated, {
|
|
@@ -72,5 +72,6 @@ const styles = StyleSheet.create({
|
|
|
72
72
|
container: {
|
|
73
73
|
backgroundColor: 'white',
|
|
74
74
|
zIndex: 10,
|
|
75
|
+
marginTop: Platform.OS === 'android' ? -1 : 0,
|
|
75
76
|
},
|
|
76
77
|
});
|
|
@@ -11,12 +11,10 @@ import Animated, {
|
|
|
11
11
|
runOnJS,
|
|
12
12
|
useAnimatedReaction,
|
|
13
13
|
} from 'react-native-reanimated';
|
|
14
|
-
import AnimatedTopView from '../header/AnimatedTopView';
|
|
15
14
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
16
|
-
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
17
15
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
18
16
|
import type { CollapsibleProps } from '../../types';
|
|
19
|
-
import
|
|
17
|
+
import CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
|
|
20
18
|
|
|
21
19
|
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
22
20
|
|
|
@@ -27,10 +25,15 @@ export default function CollapsibleFlatList<Data>({
|
|
|
27
25
|
headerSnappable = true,
|
|
28
26
|
...props
|
|
29
27
|
}: Props<Data>) {
|
|
30
|
-
const {
|
|
31
|
-
|
|
28
|
+
const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
|
|
29
|
+
useInternalCollapsibleContext();
|
|
32
30
|
const mounted = useRef(true);
|
|
33
31
|
const contentHeight = useRef(0);
|
|
32
|
+
const [internalContentMinHeight, setInternalContentMinHeight] = useState(
|
|
33
|
+
contentMinHeight.value
|
|
34
|
+
);
|
|
35
|
+
const [internalProgressViewOffset, setInternalProgressViewOffset] =
|
|
36
|
+
useState(0);
|
|
34
37
|
|
|
35
38
|
useEffect(() => {
|
|
36
39
|
return () => {
|
|
@@ -49,21 +52,23 @@ export default function CollapsibleFlatList<Data>({
|
|
|
49
52
|
scrollViewRef.current?.scrollToIndex(params);
|
|
50
53
|
}, []);
|
|
51
54
|
|
|
52
|
-
const handleInternalContentHeight = useCallback((value: number) => {
|
|
53
|
-
if (mounted.current) {
|
|
54
|
-
setInternalContentMinHeight(value);
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
|
|
58
55
|
const { scrollHandler } = useAnimatedScroll({
|
|
59
56
|
headerSnappable,
|
|
60
57
|
scrollTo,
|
|
61
58
|
scrollToIndex,
|
|
62
59
|
});
|
|
63
60
|
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
const handleInternalContentHeight = useCallback((value: number) => {
|
|
62
|
+
if (mounted.current) {
|
|
63
|
+
setInternalContentMinHeight(value);
|
|
64
|
+
}
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
67
|
+
const handleInternalProgressViewOffset = useCallback((value: number) => {
|
|
68
|
+
if (mounted.current) {
|
|
69
|
+
setInternalProgressViewOffset(value);
|
|
70
|
+
}
|
|
71
|
+
}, []);
|
|
67
72
|
|
|
68
73
|
useAnimatedReaction(
|
|
69
74
|
() => {
|
|
@@ -72,15 +77,26 @@ export default function CollapsibleFlatList<Data>({
|
|
|
72
77
|
(result, previous) => {
|
|
73
78
|
if (result !== previous) {
|
|
74
79
|
if (
|
|
75
|
-
contentHeight.current <
|
|
76
|
-
internalContentMinHeight !==
|
|
80
|
+
contentHeight.current < result &&
|
|
81
|
+
internalContentMinHeight !== result
|
|
77
82
|
) {
|
|
78
|
-
runOnJS(handleInternalContentHeight)(
|
|
83
|
+
runOnJS(handleInternalContentHeight)(result);
|
|
79
84
|
}
|
|
80
85
|
}
|
|
81
86
|
}
|
|
82
87
|
);
|
|
83
88
|
|
|
89
|
+
useAnimatedReaction(
|
|
90
|
+
() => {
|
|
91
|
+
return fixedHeaderHeight.value;
|
|
92
|
+
},
|
|
93
|
+
(result, previous) => {
|
|
94
|
+
if (result !== previous) {
|
|
95
|
+
runOnJS(handleInternalProgressViewOffset)(result);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
|
|
84
100
|
const contentContainerStyle = useMemo(
|
|
85
101
|
() => [
|
|
86
102
|
styles.contentContainer,
|
|
@@ -96,31 +112,34 @@ export default function CollapsibleFlatList<Data>({
|
|
|
96
112
|
|
|
97
113
|
const handleScrollToIndexFailed = useCallback(() => {}, []);
|
|
98
114
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
115
|
+
function renderListHeader() {
|
|
116
|
+
return (
|
|
117
|
+
<View>
|
|
118
|
+
<CollapsibleHeaderConsumer />
|
|
119
|
+
{props.ListHeaderComponent}
|
|
120
|
+
</View>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
105
123
|
|
|
106
124
|
return (
|
|
107
|
-
<
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
125
|
+
<AnimatedFlatList
|
|
126
|
+
ref={scrollViewRef}
|
|
127
|
+
// bounces={false}
|
|
128
|
+
keyboardDismissMode="on-drag"
|
|
129
|
+
keyboardShouldPersistTaps="handled"
|
|
130
|
+
scrollEventThrottle={1}
|
|
131
|
+
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
132
|
+
{...props}
|
|
133
|
+
style={[styles.container, props.style]}
|
|
134
|
+
contentContainerStyle={contentContainerStyle}
|
|
135
|
+
onScroll={scrollHandler}
|
|
136
|
+
ListHeaderComponent={renderListHeader()}
|
|
137
|
+
onContentSizeChange={handleContentSizeChange}
|
|
138
|
+
//@ts-ignore
|
|
139
|
+
simultaneousHandlers={[]}
|
|
140
|
+
stickyHeaderIndices={[0]}
|
|
141
|
+
progressViewOffset={internalProgressViewOffset}
|
|
142
|
+
/>
|
|
124
143
|
);
|
|
125
144
|
}
|
|
126
145
|
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
|
-
import AnimatedTopView from '../header/AnimatedTopView';
|
|
3
2
|
import useAnimatedScroll from './useAnimatedScroll';
|
|
4
3
|
import React, { ReactNode, useCallback, useMemo } from 'react';
|
|
5
4
|
import { ScrollViewProps, StyleSheet } from 'react-native';
|
|
6
5
|
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
7
6
|
import type { CollapsibleProps } from '../../types';
|
|
8
|
-
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
9
7
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
8
|
+
import CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
|
|
10
9
|
|
|
11
10
|
type Props = ScrollViewProps &
|
|
12
11
|
CollapsibleProps & {
|
|
@@ -19,7 +18,6 @@ export default function CollapsibleScrollView({
|
|
|
19
18
|
...props
|
|
20
19
|
}: Props) {
|
|
21
20
|
const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();
|
|
22
|
-
const { headerHeight } = useCollapsibleContext();
|
|
23
21
|
|
|
24
22
|
const scrollTo = useCallback((yValue: number, animated = true) => {
|
|
25
23
|
scrollViewRef.current?.scrollTo({ y: yValue, animated });
|
|
@@ -49,7 +47,6 @@ export default function CollapsibleScrollView({
|
|
|
49
47
|
return (
|
|
50
48
|
<Animated.ScrollView
|
|
51
49
|
ref={scrollViewRef}
|
|
52
|
-
bounces={false}
|
|
53
50
|
{...props}
|
|
54
51
|
style={[styles.container, props.style]}
|
|
55
52
|
contentContainerStyle={contentContainerStyle}
|
|
@@ -57,11 +54,10 @@ export default function CollapsibleScrollView({
|
|
|
57
54
|
keyboardDismissMode="on-drag"
|
|
58
55
|
keyboardShouldPersistTaps="handled"
|
|
59
56
|
scrollEventThrottle={1}
|
|
57
|
+
stickyHeaderIndices={[0]}
|
|
60
58
|
>
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
{children}
|
|
64
|
-
</Animated.View>
|
|
59
|
+
<CollapsibleHeaderConsumer />
|
|
60
|
+
<Animated.View style={animatedStyle}>{children}</Animated.View>
|
|
65
61
|
</Animated.ScrollView>
|
|
66
62
|
);
|
|
67
63
|
}
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useAnimatedScrollHandler,
|
|
7
7
|
useSharedValue,
|
|
8
8
|
} from 'react-native-reanimated';
|
|
9
|
-
import type { ScrollToIndexParams } from '
|
|
9
|
+
import type { ScrollToIndexParams } from '../../types';
|
|
10
10
|
import useCollapsibleContext from '../../hooks/useCollapsibleContext';
|
|
11
11
|
import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
|
|
12
12
|
|
package/src/index.tsx
CHANGED
|
@@ -6,6 +6,5 @@ export { default as CollapsibleFlatList } from './components/scrollable/Collapsi
|
|
|
6
6
|
export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
|
|
7
7
|
export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
|
|
8
8
|
export { default as StickyView } from './components/header/StickyView';
|
|
9
|
-
export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
|
|
10
9
|
export { default as CollapsibleView } from './components/CollapsibleView';
|
|
11
10
|
export * from './components/CollapsibleView';
|
|
@@ -12,7 +12,6 @@ import {
|
|
|
12
12
|
} from 'react-native-reanimated';
|
|
13
13
|
import type { View } from 'react-native';
|
|
14
14
|
import { debounce } from './utils/debounce';
|
|
15
|
-
import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
|
|
16
15
|
import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
|
|
17
16
|
|
|
18
17
|
export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
@@ -185,10 +184,8 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
|
|
|
185
184
|
<CollapsibleContext.Provider value={context}>
|
|
186
185
|
<InternalCollapsibleContext.Provider value={internalContext}>
|
|
187
186
|
<CollapsibleHeaderProvider>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<Component {...props} />
|
|
191
|
-
</PullToRefreshProvider>
|
|
187
|
+
{/** @ts-ignore */}
|
|
188
|
+
<Component {...props} />
|
|
192
189
|
</CollapsibleHeaderProvider>
|
|
193
190
|
</InternalCollapsibleContext.Provider>
|
|
194
191
|
</CollapsibleContext.Provider>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = AnimatedTopView;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
11
|
-
|
|
12
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
|
|
14
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
|
-
function AnimatedTopView({
|
|
19
|
-
height
|
|
20
|
-
}) {
|
|
21
|
-
const contentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
22
|
-
paddingTop: height.value,
|
|
23
|
-
backgroundColor: 'white'
|
|
24
|
-
}), []);
|
|
25
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
26
|
-
style: contentStyle
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=AnimatedTopView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["AnimatedTopView.tsx"],"names":["AnimatedTopView","height","contentStyle","paddingTop","value","backgroundColor"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAMe,SAASA,eAAT,CAAyB;AAAEC,EAAAA;AAAF,CAAzB,EAA4C;AACzD,QAAMC,YAAY,GAAG,6CACnB,OAAO;AACLC,IAAAA,UAAU,EAAEF,MAAM,CAACG,KADd;AAELC,IAAAA,eAAe,EAAE;AAFZ,GAAP,CADmB,EAKnB,EALmB,CAArB;AAQA,sBAAO,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEH;AAAtB,IAAP;AACD","sourcesContent":["import React from 'react';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\ntype Props = {\n height: Animated.SharedValue<number>;\n};\n\nexport default function AnimatedTopView({ height }: Props) {\n const contentStyle = useAnimatedStyle(\n () => ({\n paddingTop: height.value,\n backgroundColor: 'white',\n }),\n []\n );\n\n return <Animated.View style={contentStyle} />;\n}\n"]}
|