@0610studio/zs-ui 0.0.34 → 0.0.35
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
2
|
import { Dimensions, View } from 'react-native';
|
|
3
3
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
@@ -8,23 +8,21 @@ const ANDROID_STATUS_BAR_HEIGHT = 0;
|
|
|
8
8
|
// 화살표 함수 대신 일반 함수 사용
|
|
9
9
|
function ContentsComponent({ HANDLE_HEIGHT, panGestureRef, listScrollPosition, openPosition, marginBottomBS, screenHeight, bottomSheetComponent, bottomSheetPadding, maxHeight, isScrollView, showsVerticalScrollIndicator, headerComponent, paddingHorizontal }) {
|
|
10
10
|
const { bottom } = useSafeAreaInsets();
|
|
11
|
-
const [headerLazyLoading, setHeaderLazyLoading] = useState(false);
|
|
12
11
|
const onLayout = useCallback((event) => {
|
|
13
12
|
const { height } = event.nativeEvent.layout;
|
|
14
13
|
const contentMaxHeight = maxHeight + HANDLE_HEIGHT;
|
|
15
14
|
const resultHeight = Math.min(height, contentMaxHeight);
|
|
16
15
|
screenHeight.value = resultHeight + HANDLE_HEIGHT;
|
|
17
16
|
openPosition.value = Dimensions.get('window').height - resultHeight - marginBottomBS - bottom - ANDROID_STATUS_BAR_HEIGHT - HANDLE_HEIGHT;
|
|
18
|
-
setTimeout(() => {
|
|
19
|
-
setHeaderLazyLoading(true);
|
|
20
|
-
}, 500);
|
|
21
17
|
}, [maxHeight, HANDLE_HEIGHT, screenHeight, openPosition, marginBottomBS, bottom]);
|
|
22
18
|
// 현재 스크롤 위치
|
|
23
19
|
const handleScroll = useCallback((event) => {
|
|
24
20
|
listScrollPosition.value = event.nativeEvent.contentOffset.y;
|
|
25
21
|
}, [listScrollPosition]);
|
|
26
22
|
return (<ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding, maxHeight }} onLayout={onLayout}>
|
|
27
|
-
{headerComponent &&
|
|
23
|
+
{headerComponent && (<View style={{ paddingHorizontal }}>
|
|
24
|
+
{headerComponent}
|
|
25
|
+
</View>)}
|
|
28
26
|
|
|
29
27
|
{isScrollView ? (<ScrollView simultaneousHandlers={[panGestureRef]} onScroll={handleScroll} style={{ maxHeight }} keyboardShouldPersistTaps="handled" bounces={false} bouncesZoom={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} scrollEventThrottle={16} contentContainerStyle={{ paddingHorizontal }}>
|
|
30
28
|
{bottomSheetComponent}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/notify/BottomSheetNotify/ui/ContentsComponent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/notify/BottomSheetNotify/ui/ContentsComponent/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Dimensions, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { GestureType, ScrollView } from 'react-native-gesture-handler';\nimport { SharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { ZSView } from '../../../../ui';\n\n// const ANDROID_STATUS_BAR_HEIGHT = Platform.OS === 'android' ? 25 : 0;\nconst ANDROID_STATUS_BAR_HEIGHT = 0;\n\ninterface Props {\n HANDLE_HEIGHT: number;\n panGestureRef: React.MutableRefObject<GestureType>;\n listScrollPosition: SharedValue<number>;\n openPosition: SharedValue<number>;\n marginBottomBS: number;\n screenHeight: SharedValue<number>;\n bottomSheetComponent: React.ReactNode;\n bottomSheetPadding: number;\n maxHeight: number;\n isScrollView: boolean;\n showsVerticalScrollIndicator: boolean;\n headerComponent?: React.ReactNode;\n paddingHorizontal?: number;\n}\n\n// 화살표 함수 대신 일반 함수 사용\nfunction ContentsComponent({\n HANDLE_HEIGHT,\n panGestureRef,\n listScrollPosition,\n openPosition,\n marginBottomBS,\n screenHeight,\n bottomSheetComponent,\n bottomSheetPadding,\n maxHeight,\n isScrollView,\n showsVerticalScrollIndicator,\n headerComponent,\n paddingHorizontal\n}: Props) {\n const { bottom } = useSafeAreaInsets();\n\n const onLayout = useCallback((event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n const contentMaxHeight = maxHeight + HANDLE_HEIGHT;\n const resultHeight = Math.min(height, contentMaxHeight);\n\n screenHeight.value = resultHeight + HANDLE_HEIGHT;\n openPosition.value = Dimensions.get('window').height - resultHeight - marginBottomBS - bottom - ANDROID_STATUS_BAR_HEIGHT - HANDLE_HEIGHT;\n }, [maxHeight, HANDLE_HEIGHT, screenHeight, openPosition, marginBottomBS, bottom]);\n\n // 현재 스크롤 위치\n const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n listScrollPosition.value = event.nativeEvent.contentOffset.y;\n }, [listScrollPosition]);\n\n return (\n <ZSView style={{ width: '100%', minHeight: 1, paddingBottom: bottomSheetPadding, maxHeight }} onLayout={onLayout}>\n {headerComponent && (\n <View style={{ paddingHorizontal }}>\n {headerComponent}\n </View>\n )}\n\n {\n isScrollView ? (\n <ScrollView\n simultaneousHandlers={[panGestureRef]}\n onScroll={handleScroll}\n style={{ maxHeight }}\n keyboardShouldPersistTaps=\"handled\"\n bounces={false}\n bouncesZoom={false}\n overScrollMode=\"never\"\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n scrollEventThrottle={16}\n contentContainerStyle={{ paddingHorizontal }}\n >\n {bottomSheetComponent}\n </ScrollView>\n ) : (\n <View style={{ paddingHorizontal }}>\n {bottomSheetComponent}\n </View>\n )\n }\n </ZSView>\n );\n}\n\nexport default React.memo(ContentsComponent);\n"]}
|