@0610studio/zs-ui 0.1.3 → 0.1.5
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/build/overlay/AlertOverlay/index.js +1 -0
- package/build/overlay/AlertOverlay/index.js.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.js +1 -0
- package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
- package/build/ui/ZSContainer/index.d.ts +20 -2
- package/build/ui/ZSContainer/index.d.ts.map +1 -1
- package/build/ui/ZSContainer/index.js +43 -21
- package/build/ui/ZSContainer/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport { ZSText } from '../../ui';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\nconst modalWidth = Dimensions.get('window').width - 60;\n\nfunction AlertOverlay({\n actions,\n title,\n informative,\n isBackgroundTouchClose,\n titleStyle,\n informativeStyle,\n secondaryButtonStyle,\n primaryButtonStyle,\n secondaryButtonTextStyle,\n primaryButtonTextStyle,\n singleButtonTextStyle,\n}: ShowAlertProps) {\n const { alertVisible, setAlertVisible } = useAlert();\n const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n const styles = useMemo(() => createStyles({ background }), [background]);\n\n const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n if (onPressFunction) onPressFunction();\n setAlertVisible(false);\n }, [setAlertVisible]);\n\n const content = useMemo(() => {\n const { primary, secondary } = actions || {} as AlertActions;\n\n return (\n <Animated.View\n entering={FadeInDown.duration(300)}\n exiting={FadeOutDown.duration(100)}\n style={[styles.contentContainer, { width: modalWidth }]}\n >\n {title && (\n <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n )}\n {informative && (\n <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n )}\n {actions && (\n <ViewAtom style={styles.buttonContainer}>\n {secondary ? (\n <>\n <TouchableOpacity\n style={[\n styles.button,\n { backgroundColor: background.neutral, marginRight: 8 },\n secondaryButtonStyle\n ]}\n onPress={handleButtonPress(secondary?.onPress)}\n >\n <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n </TouchableOpacity>\n\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n </>\n ) : (\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n )}\n </ViewAtom>\n )}\n </Animated.View>\n );\n }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n return (\n !alertVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.ALERT}\n key={alertVisible ? 'visibleao' : 'hiddenao'}\n modalBgColor={modalBgColor}\n onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n >\n {content}\n </ModalBackground>\n )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n StyleSheet.create({\n title: {\n marginBottom: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n informative: {\n marginTop: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n buttonContainer: {\n flexDirection: 'row',\n width: '100%',\n marginTop: 24,\n alignItems: 'center',\n justifyContent: 'flex-end',\n },\n button: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n paddingVertical: 14,\n borderRadius: 12,\n },\n avoidingView: {\n flex: 1,\n justifyContent: 'center'\n },\n contentContainer: {\n alignItems: 'center',\n backgroundColor: background.base,\n borderRadius: 22,\n paddingBottom: 18,\n paddingTop: 24,\n paddingHorizontal: 20,\n maxWidth: 500,\n },\n });\n\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAKzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAsJtB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAKzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BAsJtB;AA2BD,eAAe,kBAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\nconst { width, height: windowHeight } = Dimensions.get('window');\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n}: ShowBottomSheetProps) {\n const {\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n const translateY = useSharedValue(maxHeight);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const { palette } = useTheme();\n const { bottom } = useSafeAreaInsets();\n const startX = useRef(0);\n const startY = useRef(0);\n const [localVisible, setLocalVisible] = useState(false);\n\n // ** 소프트 키보드 핸들링\n useEffect(() => {\n const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n });\n\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n translateY.value = withTiming(0, { duration: 200 });\n });\n\n return () => {\n keyboardShowSubscription.remove();\n keyboardHideSubscription.remove();\n };\n }, []);\n\n useEffect(() => {\n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n });\n } else {\n translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n setTimeout(() => {\n setLocalVisible(false);\n }, 200);\n }\n }, [bottomSheetVisible]);\n\n const animatedStyles = useAnimatedStyle(() => {\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n });\n\n const panResponder = useRef(\n PanResponder.create({\n onStartShouldSetPanResponder: () => true,\n onMoveShouldSetPanResponder: () => true,\n onPanResponderGrant: () => {\n Keyboard.dismiss();\n startX.current = translateX.value;\n startY.current = translateY.value;\n scale.value = withTiming(0.985, { duration: 200 });\n\n },\n onPanResponderMove: (_, gestureState) => {\n const newTranslateX = (startX.current + gestureState.dx) / 18;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.current + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / 18;\n } else {\n translateY.value = newTranslateY / 1.5;\n }\n },\n onPanResponderRelease: (_, gestureState) => {\n translateX.value = withTiming(0, { duration: 100 });\n\n // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n setBottomSheetVisible(false);\n } else {\n translateY.value = withTiming(0, { duration: 150 });\n }\n\n // 사이즈 원래대로 복귀\n scale.value = withSpring(1, {\n damping: 15,\n stiffness: 300\n });\n },\n })\n ).current;\n\n return (\n !localVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }}\n >\n <Animated.View\n style={[\n styles.container,\n {\n width: width - marginHorizontal * 2,\n height: maxHeight,\n marginHorizontal,\n bottom: marginBottom + bottom,\n backgroundColor: palette.background.base,\n },\n animatedStyles,\n ]}\n >\n <View\n style={[\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ]}\n >\n <View {...panResponder.panHandlers}>\n <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { Dimensions, StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\nconst { width, height: windowHeight } = Dimensions.get('window');\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n}: ShowBottomSheetProps) {\n const {\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n const translateY = useSharedValue(maxHeight);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const { palette } = useTheme();\n const { bottom } = useSafeAreaInsets();\n const startX = useRef(0);\n const startY = useRef(0);\n const [localVisible, setLocalVisible] = useState(false);\n\n // ** 소프트 키보드 핸들링\n useEffect(() => {\n const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n });\n\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n translateY.value = withTiming(0, { duration: 200 });\n });\n\n return () => {\n keyboardShowSubscription.remove();\n keyboardHideSubscription.remove();\n };\n }, []);\n\n useEffect(() => {\n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n });\n } else {\n translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n setTimeout(() => {\n setLocalVisible(false);\n }, 200);\n }\n }, [bottomSheetVisible]);\n\n const animatedStyles = useAnimatedStyle(() => {\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n });\n\n const panResponder = useRef(\n PanResponder.create({\n onStartShouldSetPanResponder: () => true,\n onMoveShouldSetPanResponder: () => true,\n onPanResponderGrant: () => {\n Keyboard.dismiss();\n startX.current = translateX.value;\n startY.current = translateY.value;\n scale.value = withTiming(0.985, { duration: 200 });\n\n },\n onPanResponderMove: (_, gestureState) => {\n const newTranslateX = (startX.current + gestureState.dx) / 18;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.current + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / 18;\n } else {\n translateY.value = newTranslateY / 1.5;\n }\n },\n onPanResponderRelease: (_, gestureState) => {\n translateX.value = withTiming(0, { duration: 100 });\n\n // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n setBottomSheetVisible(false);\n } else {\n translateY.value = withTiming(0, { duration: 150 });\n }\n\n // 사이즈 원래대로 복귀\n scale.value = withSpring(1, {\n damping: 15,\n stiffness: 300\n });\n },\n })\n ).current;\n\n return (\n !localVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }}\n >\n <Animated.View\n style={[\n styles.container,\n {\n width: width - marginHorizontal * 2,\n height: maxHeight,\n marginHorizontal,\n bottom: marginBottom + bottom,\n backgroundColor: palette.background.base,\n },\n animatedStyles,\n ]}\n >\n <View\n style={[\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ]}\n >\n <View {...panResponder.panHandlers}>\n <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n maxWidth: 600,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
|
|
@@ -6,15 +6,24 @@ export type ZSContainerProps = ViewProps & {
|
|
|
6
6
|
statusBarColor?: string;
|
|
7
7
|
barStyle?: 'light-content' | 'dark-content';
|
|
8
8
|
edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
|
|
9
|
-
|
|
9
|
+
scrollViewDisabled?: boolean;
|
|
10
10
|
topComponent?: ReactNode;
|
|
11
11
|
bottomComponent?: ReactNode;
|
|
12
|
+
rightComponent?: ReactNode;
|
|
12
13
|
showsVerticalScrollIndicator?: boolean;
|
|
13
14
|
loadingComponent?: React.ReactNode;
|
|
14
15
|
keyboardVerticalOffset?: number;
|
|
15
16
|
behavior?: 'padding' | 'height' | 'position';
|
|
16
17
|
automaticallyAdjustKeyboardInsets?: boolean;
|
|
17
18
|
keyboardScrollExtraOffset?: number;
|
|
19
|
+
/**
|
|
20
|
+
* 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)
|
|
21
|
+
* - 일반 스마트폰: ~430dp
|
|
22
|
+
* - 폴더블 (펼쳤을 때): ~717dp
|
|
23
|
+
* - 태블릿: 600dp ~ 1024dp
|
|
24
|
+
*/
|
|
25
|
+
splitBreakpoint?: number;
|
|
26
|
+
splitRatio?: number;
|
|
18
27
|
};
|
|
19
28
|
export type ZSContainerRef = ScrollView;
|
|
20
29
|
declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
@@ -23,15 +32,24 @@ declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
23
32
|
statusBarColor?: string;
|
|
24
33
|
barStyle?: "light-content" | "dark-content";
|
|
25
34
|
edges?: Array<"top" | "right" | "bottom" | "left">;
|
|
26
|
-
|
|
35
|
+
scrollViewDisabled?: boolean;
|
|
27
36
|
topComponent?: ReactNode;
|
|
28
37
|
bottomComponent?: ReactNode;
|
|
38
|
+
rightComponent?: ReactNode;
|
|
29
39
|
showsVerticalScrollIndicator?: boolean;
|
|
30
40
|
loadingComponent?: React.ReactNode;
|
|
31
41
|
keyboardVerticalOffset?: number;
|
|
32
42
|
behavior?: "padding" | "height" | "position";
|
|
33
43
|
automaticallyAdjustKeyboardInsets?: boolean;
|
|
34
44
|
keyboardScrollExtraOffset?: number;
|
|
45
|
+
/**
|
|
46
|
+
* 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)
|
|
47
|
+
* - 일반 스마트폰: ~430dp
|
|
48
|
+
* - 폴더블 (펼쳤을 때): ~717dp
|
|
49
|
+
* - 태블릿: 600dp ~ 1024dp
|
|
50
|
+
*/
|
|
51
|
+
splitBreakpoint?: number;
|
|
52
|
+
splitRatio?: number;
|
|
35
53
|
} & React.RefAttributes<ScrollView>>;
|
|
36
54
|
export default ZSContainer;
|
|
37
55
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAA8E,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAA8E,UAAU,EAAgF,MAAM,cAAc,CAAC;AAK/M,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBA3BG,MAAM;eACb,OAAO;qBACD,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;uBACnB,KAAK,CAAC,SAAS;6BACT,MAAM;eACpB,SAAS,GAAG,QAAQ,GAAG,UAAU;wCACR,OAAO;gCACf,MAAM;IAClC;;;;;OAKG;sBACe,MAAM;iBACX,MAAM;oCAoJnB,CAAC;AAmBH,eAAe,WAAW,CAAC"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
|
|
2
|
-
import { KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Keyboard } from 'react-native';
|
|
2
|
+
import { KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Keyboard, useWindowDimensions, View } from 'react-native';
|
|
3
3
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
4
|
-
import ViewAtom from '../atoms/ViewAtom';
|
|
5
4
|
import ScrollViewAtom from '../atoms/ScrollViewAtom';
|
|
6
5
|
import { useTheme } from '../../model/useThemeProvider';
|
|
7
|
-
const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'],
|
|
6
|
+
const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent = <View style={{ flex: 1, backgroundColor: 'red' }}></View>, splitBreakpoint = 700, splitRatio = 0.5, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior, automaticallyAdjustKeyboardInsets = true, keyboardScrollExtraOffset, ...props }, forwardedRef) {
|
|
8
7
|
const { palette } = useTheme();
|
|
8
|
+
const { width: windowWidth } = useWindowDimensions();
|
|
9
9
|
const [isDelayed, setIsDelayed] = useState(true);
|
|
10
10
|
const positionRef = useRef(0);
|
|
11
11
|
const scrollViewRef = useRef(null);
|
|
12
12
|
const lastTouchY = useRef(0);
|
|
13
|
+
const isSplitView = (windowWidth >= splitBreakpoint) && rightComponent;
|
|
13
14
|
useImperativeHandle(forwardedRef, () => scrollViewRef.current, []);
|
|
14
15
|
useEffect(() => {
|
|
15
16
|
const timer = setTimeout(() => {
|
|
@@ -24,9 +25,12 @@ const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader
|
|
|
24
25
|
const keyboardHeight = e.endCoordinates.height;
|
|
25
26
|
const safeAreaBottom = 0;
|
|
26
27
|
const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;
|
|
27
|
-
|
|
28
|
+
// 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
|
|
29
|
+
const currentScrollPosition = positionRef.current || 0;
|
|
30
|
+
const touchPosition = lastTouchY.current || 0;
|
|
31
|
+
const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
|
|
28
32
|
scrollViewRef.current.scrollTo({
|
|
29
|
-
y:
|
|
33
|
+
y: currentScrollPosition + scrollOffset,
|
|
30
34
|
animated: true,
|
|
31
35
|
});
|
|
32
36
|
}
|
|
@@ -45,25 +49,36 @@ const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader
|
|
|
45
49
|
if (keyboardScrollExtraOffset)
|
|
46
50
|
lastTouchY.current = evt.nativeEvent.pageY;
|
|
47
51
|
};
|
|
52
|
+
const renderContent = () => {
|
|
53
|
+
if (isLoader)
|
|
54
|
+
return loadingComponent;
|
|
55
|
+
const leftWidth = isSplitView ? windowWidth * splitRatio : windowWidth;
|
|
56
|
+
const rightWidth = windowWidth * (1 - splitRatio);
|
|
57
|
+
return (<View style={[styles.splitContainer]}>
|
|
58
|
+
{scrollViewDisabled ? (<View style={[styles.flex1, props.style, { width: leftWidth }]}>
|
|
59
|
+
{props.children}
|
|
60
|
+
</View>) : (<ScrollViewAtom ref={scrollViewRef} style={[styles.flex1, { width: leftWidth }]} contentContainerStyle={styles.scrollContainerStyle} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets} onScroll={handleScroll} onTouchStart={handleTouch}>
|
|
61
|
+
<View style={[styles.splitView, props.style, { width: leftWidth }]}>
|
|
62
|
+
{props.children}
|
|
63
|
+
</View>
|
|
64
|
+
</ScrollViewAtom>)}
|
|
65
|
+
|
|
66
|
+
{rightComponent && (<View style={[styles.splitView, { width: rightWidth }]}>
|
|
67
|
+
{rightComponent}
|
|
68
|
+
</View>)}
|
|
69
|
+
</View>);
|
|
70
|
+
};
|
|
48
71
|
return (<SafeAreaView style={[
|
|
49
72
|
{ backgroundColor: backgroundColor || palette.background.base },
|
|
50
73
|
styles.flex1,
|
|
51
74
|
styles.fullWidth,
|
|
52
|
-
]} edges={edges}>
|
|
53
|
-
{!isDelayed && (<KeyboardAvoidingView style={[styles.flex1, styles.fullWidth]} behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset}>
|
|
54
|
-
{topComponent && topComponent}
|
|
55
|
-
|
|
56
|
-
{isLoader
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</ViewAtom>
|
|
60
|
-
</ScrollViewAtom>) : (<ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>
|
|
61
|
-
{props.children}
|
|
62
|
-
</ViewAtom>)}
|
|
63
|
-
|
|
64
|
-
{!isLoader && bottomComponent && bottomComponent}
|
|
65
|
-
</KeyboardAvoidingView>)}
|
|
66
|
-
<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base}/>
|
|
75
|
+
]} edges={edges}>
|
|
76
|
+
{!isDelayed && (<KeyboardAvoidingView style={[styles.flex1, styles.fullWidth]} behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset}>
|
|
77
|
+
{topComponent && topComponent}
|
|
78
|
+
{renderContent()}
|
|
79
|
+
{!isLoader && bottomComponent && bottomComponent}
|
|
80
|
+
</KeyboardAvoidingView>)}
|
|
81
|
+
<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base}/>
|
|
67
82
|
</SafeAreaView>);
|
|
68
83
|
});
|
|
69
84
|
const styles = StyleSheet.create({
|
|
@@ -72,7 +87,14 @@ const styles = StyleSheet.create({
|
|
|
72
87
|
scrollContainerStyle: {
|
|
73
88
|
flexGrow: 1,
|
|
74
89
|
alignItems: 'center',
|
|
75
|
-
|
|
90
|
+
},
|
|
91
|
+
splitContainer: {
|
|
92
|
+
flex: 1,
|
|
93
|
+
flexDirection: 'row',
|
|
94
|
+
width: '100%',
|
|
95
|
+
},
|
|
96
|
+
splitView: {
|
|
97
|
+
minHeight: '100%',
|
|
76
98
|
},
|
|
77
99
|
});
|
|
78
100
|
export default ZSContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\nimport { useTheme } from '../../model/useThemeProvider';\n\nexport type ZSContainerProps = ViewProps & {\n backgroundColor?: string;\n isLoader?: boolean;\n statusBarColor?: string;\n barStyle?: 'light-content' | 'dark-content';\n edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n isScrollView?: boolean;\n topComponent?: ReactNode;\n bottomComponent?: ReactNode;\n showsVerticalScrollIndicator?: boolean;\n loadingComponent?: React.ReactNode;\n keyboardVerticalOffset?: number;\n behavior?: 'padding' | 'height' | 'position';\n automaticallyAdjustKeyboardInsets?: boolean;\n keyboardScrollExtraOffset?: number;\n};\n\nexport type ZSContainerRef = ScrollView;\n\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\n {\n backgroundColor,\n isLoader = false,\n statusBarColor,\n barStyle = 'dark-content',\n edges = ['top', 'bottom'],\n isScrollView = true,\n topComponent,\n bottomComponent,\n showsVerticalScrollIndicator = true,\n loadingComponent = <ActivityIndicator />,\n keyboardVerticalOffset,\n behavior,\n automaticallyAdjustKeyboardInsets = true,\n keyboardScrollExtraOffset = 100,\n ...props\n },\n forwardedRef\n) {\n const { palette } = useTheme();\n const [isDelayed, setIsDelayed] = useState(true);\n const positionRef = useRef<number | null>(0);\n const scrollViewRef = useRef<ScrollView>(null);\n const lastTouchY = useRef<number | null>(0);\n\n useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsDelayed(false);\n }, 200);\n return () => clearTimeout(timer);\n }, []);\n\n useEffect(() => {\n const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {\n if (scrollViewRef.current && keyboardScrollExtraOffset) {\n const screenHeight = Dimensions.get('window').height;\n const keyboardHeight = e.endCoordinates.height;\n const safeAreaBottom = 0;\n const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\n const delta = (lastTouchY?.current || 0) + keyboardScrollExtraOffset - availableScreenHeight;\n\n scrollViewRef.current.scrollTo({\n y: (positionRef.current ?? 0) + delta,\n animated: true,\n });\n }\n });\n\n return () => {\n positionRef.current = null;\n lastTouchY.current = null;\n keyboardShowSubscription.remove();\n };\n }, [keyboardScrollExtraOffset]);\n\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n if (keyboardScrollExtraOffset) positionRef.current = event.nativeEvent.contentOffset.y;\n };\n\n const handleTouch = (evt: any) => {\n if (keyboardScrollExtraOffset) lastTouchY.current = evt.nativeEvent.pageY;\n };\n\n return (\n <SafeAreaView\n style={[\n { backgroundColor: backgroundColor || palette.background.base },\n styles.flex1,\n styles.fullWidth,\n ]}\n edges={edges}\n >\n {!isDelayed && (\n <KeyboardAvoidingView\n style={[styles.flex1, styles.fullWidth]}\n behavior={behavior}\n keyboardVerticalOffset={keyboardVerticalOffset}\n >\n {topComponent && topComponent}\n\n {isLoader ? (\n loadingComponent\n ) : isScrollView ? (\n <ScrollViewAtom\n ref={scrollViewRef}\n style={[styles.flex1, styles.fullWidth]}\n bounces={false}\n overScrollMode=\"never\"\n contentContainerStyle={styles.scrollContainerStyle}\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n keyboardShouldPersistTaps=\"handled\"\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\n onScroll={handleScroll}\n onTouchStart={handleTouch}\n >\n <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>\n {props.children}\n </ViewAtom>\n </ScrollViewAtom>\n ) : (\n <ViewAtom style={[styles.flex1, styles.fullWidth, props.style]}>\n {props.children}\n </ViewAtom>\n )}\n\n {!isLoader && bottomComponent && bottomComponent}\n </KeyboardAvoidingView>\n )}\n <StatusBar\n barStyle={barStyle}\n backgroundColor={statusBarColor || palette.background.base}\n />\n </SafeAreaView>\n );\n});\n\nconst styles = StyleSheet.create({\n flex1: { flex: 1 },\n fullWidth: { width: Dimensions.get('window').width },\n scrollContainerStyle: {\n flexGrow: 1,\n alignItems: 'center',\n width: Dimensions.get('window').width,\n },\n});\n\nexport default ZSContainer;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,SAAS,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAa,oBAAoB,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAuD,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC/M,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,cAAc,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AA8BxD,MAAM,WAAW,GAAG,UAAU,CAAmC,SAAS,WAAW,CACnF,EACE,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,KAAK,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,EACzB,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,eAAe,EACf,cAAc,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAC1E,eAAe,GAAG,GAAG,EACrB,UAAU,GAAG,GAAG,EAChB,4BAA4B,GAAG,IAAI,EACnC,gBAAgB,GAAG,CAAC,iBAAiB,CAAC,AAAD,EAAG,EACxC,sBAAsB,EACtB,QAAQ,EACR,iCAAiC,GAAG,IAAI,EACxC,yBAAyB,EACzB,GAAG,KAAK,EACT,EACD,YAAY;IAEZ,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,MAAM,CAAgB,CAAC,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAgB,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,eAAe,CAAC,IAAI,cAAc,CAAC;IAEvE,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAqB,EAAE,EAAE,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,wBAAwB,GAAG,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE;YAC7E,IAAI,aAAa,CAAC,OAAO,IAAI,yBAAyB,EAAE,CAAC;gBACvD,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;gBACrD,MAAM,cAAc,GAAG,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC;gBAC/C,MAAM,cAAc,GAAG,CAAC,CAAC;gBACzB,MAAM,qBAAqB,GAAG,YAAY,GAAG,cAAc,GAAG,cAAc,CAAC;gBAE7E,uCAAuC;gBACvC,MAAM,qBAAqB,GAAG,WAAW,CAAC,OAAO,IAAI,CAAC,CAAC;gBACvD,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;gBAE9C,MAAM,YAAY,GAAG,aAAa,GAAG,qBAAqB,GAAG,yBAAyB,CAAC;gBACvF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;oBAC7B,CAAC,EAAE,qBAAqB,GAAG,YAAY;oBACvC,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,wBAAwB,CAAC,MAAM,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEhC,MAAM,YAAY,GAAG,CAAC,KAA8C,EAAE,EAAE;QACtE,IAAI,yBAAyB;YAAE,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACzF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAQ,EAAE,EAAE;QAC/B,IAAI,yBAAyB;YAAE,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO,gBAAgB,CAAC;QAEtC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QACvE,MAAM,UAAU,GAAG,WAAW,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;QAElD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CACnC;QAAA,CACE,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAC7D;cAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,aAAa,CAAC,CACnB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAC5C,qBAAqB,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACnD,OAAO,CAAC,CAAC,KAAK,CAAC,CACf,cAAc,CAAC,OAAO,CACtB,4BAA4B,CAAC,CAAC,4BAA4B,CAAC,CAC3D,yBAAyB,CAAC,SAAS,CACnC,iCAAiC,CAAC,CAAC,iCAAiC,CAAC,CACrE,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,YAAY,CAAC,CAAC,WAAW,CAAC,CAE1B;cAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CACjE;gBAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;cAAA,EAAE,IAAI,CACR;YAAA,EAAE,cAAc,CAAC,CAErB,CAEA;;QAAA,CAAC,cAAc,IAAI,CACjB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CACrD;YAAA,CAAC,cAAc,CACjB;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC;YACL,EAAE,eAAe,EAAE,eAAe,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,EAAE;YAC/D,MAAM,CAAC,KAAK;YACZ,MAAM,CAAC,SAAS;SACjB,CAAC,CACF,KAAK,CAAC,CAAC,KAAK,CAAC,CAEb;MAAA,CAAC,CAAC,SAAS,IAAI,CACb,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CACxC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAE/C;UAAA,CAAC,YAAY,IAAI,YAAY,CAC7B;UAAA,CAAC,aAAa,EAAE,CAChB;UAAA,CAAC,CAAC,QAAQ,IAAI,eAAe,IAAI,eAAe,CAClD;QAAA,EAAE,oBAAoB,CAAC,CACxB,CACD;MAAA,CAAC,SAAS,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,eAAe,CAAC,CAAC,cAAc,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAE/D;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IAClB,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;IACpD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,QAAQ;KACrB;IACD,cAAc,EAAE;QACd,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import React, { ReactNode, useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';\r\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, useWindowDimensions, View } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n backgroundColor?: string;\r\n isLoader?: boolean;\r\n statusBarColor?: string;\r\n barStyle?: 'light-content' | 'dark-content';\r\n edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n scrollViewDisabled?: boolean;\r\n topComponent?: ReactNode;\r\n bottomComponent?: ReactNode;\r\n rightComponent?: ReactNode;\r\n showsVerticalScrollIndicator?: boolean;\r\n loadingComponent?: React.ReactNode;\r\n keyboardVerticalOffset?: number;\r\n behavior?: 'padding' | 'height' | 'position';\r\n automaticallyAdjustKeyboardInsets?: boolean;\r\n keyboardScrollExtraOffset?: number;\r\n /**\r\n * 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)\r\n * - 일반 스마트폰: ~430dp\r\n * - 폴더블 (펼쳤을 때): ~717dp\r\n * - 태블릿: 600dp ~ 1024dp\r\n */\r\n splitBreakpoint?: number;\r\n splitRatio?: number;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n {\r\n backgroundColor,\r\n isLoader = false,\r\n statusBarColor,\r\n barStyle = 'dark-content',\r\n edges = ['top', 'bottom'],\r\n scrollViewDisabled = false,\r\n topComponent,\r\n bottomComponent,\r\n rightComponent = <View style={{ flex: 1, backgroundColor: 'red' }}></View>,\r\n splitBreakpoint = 700,\r\n splitRatio = 0.5,\r\n showsVerticalScrollIndicator = true,\r\n loadingComponent = <ActivityIndicator />,\r\n keyboardVerticalOffset,\r\n behavior,\r\n automaticallyAdjustKeyboardInsets = true,\r\n keyboardScrollExtraOffset,\r\n ...props\r\n },\r\n forwardedRef\r\n) {\r\n const { palette } = useTheme();\r\n const { width: windowWidth } = useWindowDimensions();\r\n const [isDelayed, setIsDelayed] = useState(true);\r\n const positionRef = useRef<number | null>(0);\r\n const scrollViewRef = useRef<ScrollView>(null);\r\n const lastTouchY = useRef<number | null>(0);\r\n const isSplitView = (windowWidth >= splitBreakpoint) && rightComponent;\r\n\r\n useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsDelayed(false);\r\n }, 200);\r\n return () => clearTimeout(timer);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {\r\n if (scrollViewRef.current && keyboardScrollExtraOffset) {\r\n const screenHeight = Dimensions.get('window').height;\r\n const keyboardHeight = e.endCoordinates.height;\r\n const safeAreaBottom = 0;\r\n const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\r\n\r\n // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n const currentScrollPosition = positionRef.current || 0;\r\n const touchPosition = lastTouchY.current || 0;\r\n\r\n const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n scrollViewRef.current.scrollTo({\r\n y: currentScrollPosition + scrollOffset,\r\n animated: true,\r\n });\r\n }\r\n });\r\n\r\n return () => {\r\n positionRef.current = null;\r\n lastTouchY.current = null;\r\n keyboardShowSubscription.remove();\r\n };\r\n }, [keyboardScrollExtraOffset]);\r\n\r\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n if (keyboardScrollExtraOffset) positionRef.current = event.nativeEvent.contentOffset.y;\r\n };\r\n\r\n const handleTouch = (evt: any) => {\r\n if (keyboardScrollExtraOffset) lastTouchY.current = evt.nativeEvent.pageY;\r\n };\r\n\r\n const renderContent = () => {\r\n if (isLoader) return loadingComponent;\r\n\r\n const leftWidth = isSplitView ? windowWidth * splitRatio : windowWidth;\r\n const rightWidth = windowWidth * (1 - splitRatio);\r\n\r\n return (\r\n <View style={[styles.splitContainer]}>\r\n {\r\n scrollViewDisabled ? (\r\n <View style={[styles.flex1, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n ) : (\r\n <ScrollViewAtom\r\n ref={scrollViewRef}\r\n style={[styles.flex1, { width: leftWidth }]}\r\n contentContainerStyle={styles.scrollContainerStyle}\r\n bounces={false}\r\n overScrollMode=\"never\"\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n keyboardShouldPersistTaps=\"handled\"\r\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\r\n onScroll={handleScroll}\r\n onTouchStart={handleTouch}\r\n >\r\n <View style={[styles.splitView, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n </ScrollViewAtom>\r\n )\r\n }\r\n\r\n {rightComponent && (\r\n <View style={[styles.splitView, { width: rightWidth }]}>\r\n {rightComponent}\r\n </View>\r\n )}\r\n </View>\r\n );\r\n };\r\n\r\n return (\r\n <SafeAreaView\r\n style={[\r\n { backgroundColor: backgroundColor || palette.background.base },\r\n styles.flex1,\r\n styles.fullWidth,\r\n ]}\r\n edges={edges}\r\n >\r\n {!isDelayed && (\r\n <KeyboardAvoidingView\r\n style={[styles.flex1, styles.fullWidth]}\r\n behavior={behavior}\r\n keyboardVerticalOffset={keyboardVerticalOffset}\r\n >\r\n {topComponent && topComponent}\r\n {renderContent()}\r\n {!isLoader && bottomComponent && bottomComponent}\r\n </KeyboardAvoidingView>\r\n )}\r\n <StatusBar\r\n barStyle={barStyle}\r\n backgroundColor={statusBarColor || palette.background.base}\r\n />\r\n </SafeAreaView>\r\n );\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n flex1: { flex: 1 },\r\n fullWidth: { width: Dimensions.get('window').width },\r\n scrollContainerStyle: {\r\n flexGrow: 1,\r\n alignItems: 'center',\r\n },\r\n splitContainer: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n splitView: {\r\n minHeight: '100%',\r\n },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
|