@0610studio/zs-ui 0.7.3 → 0.7.4
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,iBAAS,eAAe,CAAC,EACvB,kBAAsB,EACtB,kBAAsB,EACtB,QAAQ,EACR,kBAAkB,GACnB,EAAE,KAAK,+BA8DP;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -1,24 +1,37 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
|
-
import { Keyboard, Platform, StyleSheet, Dimensions, View } from 'react-native';
|
|
2
|
+
import { Keyboard, Platform, StyleSheet, Dimensions, View, StatusBar } from 'react-native';
|
|
3
3
|
import { Z_INDEX_VALUE } from '../../model/utils';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { ZSPortal } from '../../overlay';
|
|
6
|
-
const windowHeight = Dimensions.get('window').height;
|
|
7
6
|
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
|
8
7
|
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
|
9
8
|
function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, }) {
|
|
10
9
|
const [topValue, setTopValue] = useState(0);
|
|
11
10
|
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
|
|
12
11
|
const [componentHeight, setComponentHeight] = useState(0);
|
|
12
|
+
const [windowDimensions, setWindowDimensions] = useState(() => Dimensions.get('window'));
|
|
13
13
|
const { bottom } = useSafeAreaInsets();
|
|
14
|
-
|
|
14
|
+
const statusBarHeight = StatusBar.currentHeight || 0;
|
|
15
|
+
// Dimensions 변경 감지를 위한 useEffect
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
const subscription = Dimensions.addEventListener('change', ({ window }) => {
|
|
18
|
+
setWindowDimensions(window);
|
|
19
|
+
});
|
|
20
|
+
return () => subscription?.remove();
|
|
21
|
+
}, []);
|
|
15
22
|
useEffect(() => {
|
|
16
23
|
const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
|
|
24
|
+
const currentWindowHeight = windowDimensions.height;
|
|
25
|
+
const screenHeight = Dimensions.get('screen').height;
|
|
26
|
+
const systemUIHeight = screenHeight - currentWindowHeight;
|
|
17
27
|
// 키보드 바로 위에 위치하도록 계산
|
|
18
|
-
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
|
|
28
|
+
let calculatedTopValue = currentWindowHeight - event.endCoordinates.height - componentHeight - keyboardShowOffset;
|
|
29
|
+
// Android에서 필요시 StatusBar 높이 조정
|
|
30
|
+
// if (Platform.OS === 'android' && systemUIHeight > 0) {
|
|
31
|
+
// // 시스템 UI가 있는 경우 (구형 기기 또는 특정 설정)
|
|
32
|
+
// calculatedTopValue = calculatedTopValue - (statusBarHeight > 0 ? statusBarHeight : 0);
|
|
33
|
+
// }
|
|
34
|
+
setTopValue(calculatedTopValue);
|
|
22
35
|
setIsKeyboardVisible(true);
|
|
23
36
|
});
|
|
24
37
|
const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
|
|
@@ -29,7 +42,7 @@ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, child
|
|
|
29
42
|
keyboardShowSubscription.remove();
|
|
30
43
|
keyboardHideSubscription.remove();
|
|
31
44
|
};
|
|
32
|
-
}, [componentHeight]);
|
|
45
|
+
}, [componentHeight, windowDimensions, keyboardShowOffset, statusBarHeight]);
|
|
33
46
|
const handleLayout = (event) => {
|
|
34
47
|
const { height } = event.nativeEvent.layout;
|
|
35
48
|
setComponentHeight(height);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { Keyboard, Platform, StyleSheet, Dimensions, View, StatusBar, LayoutChangeEvent } from 'react-native';\nimport { Z_INDEX_VALUE } from '../../model/utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { ZSPortal } from '../../overlay';\nconst showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\nconst hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\ninterface Props {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n}: Props) {\n const [topValue, setTopValue] = useState(0);\n const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);\n const [componentHeight, setComponentHeight] = useState(0);\n const [windowDimensions, setWindowDimensions] = useState(() => Dimensions.get('window'));\n const { bottom } = useSafeAreaInsets();\n const statusBarHeight = StatusBar.currentHeight || 0;\n\n // Dimensions 변경 감지를 위한 useEffect\n useEffect(() => {\n const subscription = Dimensions.addEventListener('change', ({ window }) => {\n setWindowDimensions(window);\n });\n\n return () => subscription?.remove();\n }, []);\n\n useEffect(() => {\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n const currentWindowHeight = windowDimensions.height;\n const screenHeight = Dimensions.get('screen').height;\n const systemUIHeight = screenHeight - currentWindowHeight;\n \n // 키보드 바로 위에 위치하도록 계산\n let calculatedTopValue = currentWindowHeight - event.endCoordinates.height - componentHeight - keyboardShowOffset;\n \n // Android에서 필요시 StatusBar 높이 조정\n // if (Platform.OS === 'android' && systemUIHeight > 0) {\n // // 시스템 UI가 있는 경우 (구형 기기 또는 특정 설정)\n // calculatedTopValue = calculatedTopValue - (statusBarHeight > 0 ? statusBarHeight : 0);\n // }\n\n setTopValue(calculatedTopValue);\n setIsKeyboardVisible(true);\n });\n\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n setTopValue(0);\n setIsKeyboardVisible(false);\n });\n\n return () => {\n keyboardShowSubscription.remove();\n keyboardHideSubscription.remove();\n };\n }, [componentHeight, windowDimensions, keyboardShowOffset, statusBarHeight]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setComponentHeight(height);\n handleLayoutHeight?.(height);\n };\n\n return (\n <ZSPortal>\n <View style={[styles.container, isKeyboardVisible ? { top: topValue } : { bottom: keyboardHideOffset + bottom }]}>\n <View onLayout={handleLayout}>\n {children}\n </View>\n </View>\n </ZSPortal>\n );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n width: '100%',\n },\n});\n"]}
|