@0610studio/zs-ui 0.7.3 → 0.7.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.
|
@@ -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,+BAwEP;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -1,24 +1,46 @@
|
|
|
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
|
+
useEffect(() => {
|
|
16
|
+
const subscription = Dimensions.addEventListener('change', ({ window }) => {
|
|
17
|
+
setWindowDimensions(window);
|
|
18
|
+
});
|
|
19
|
+
return () => subscription?.remove();
|
|
20
|
+
}, []);
|
|
15
21
|
useEffect(() => {
|
|
16
22
|
const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
|
|
23
|
+
const currentWindowHeight = windowDimensions.height;
|
|
24
|
+
const screenHeight = Dimensions.get('screen').height;
|
|
25
|
+
const systemUIHeight = screenHeight - currentWindowHeight;
|
|
17
26
|
// 키보드 바로 위에 위치하도록 계산
|
|
18
|
-
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
|
|
27
|
+
let calculatedTopValue = currentWindowHeight - event.endCoordinates.height - componentHeight - keyboardShowOffset;
|
|
28
|
+
// Android에서 필요시 StatusBar 높이 조정
|
|
29
|
+
// if (Platform.OS === 'android' && systemUIHeight > 0) {
|
|
30
|
+
// // 시스템 UI가 있는 경우 (구형 기기 또는 특정 설정)
|
|
31
|
+
// calculatedTopValue = calculatedTopValue - (statusBarHeight > 0 ? statusBarHeight : 0);
|
|
32
|
+
// }
|
|
33
|
+
// console.log('=== Keyboard Show Debug ===');
|
|
34
|
+
// console.log('currentWindowHeight:', currentWindowHeight);
|
|
35
|
+
// console.log('screenHeight:', screenHeight);
|
|
36
|
+
// console.log('systemUIHeight:', systemUIHeight);
|
|
37
|
+
// console.log('event.endCoordinates.height:', event.endCoordinates.height);
|
|
38
|
+
// console.log('componentHeight:', componentHeight);
|
|
39
|
+
// console.log('keyboardShowOffset:', keyboardShowOffset);
|
|
40
|
+
// console.log('statusBarHeight:', statusBarHeight);
|
|
41
|
+
// console.log('calculatedTopValue:', calculatedTopValue);
|
|
42
|
+
// console.log('========================');
|
|
43
|
+
setTopValue(calculatedTopValue);
|
|
22
44
|
setIsKeyboardVisible(true);
|
|
23
45
|
});
|
|
24
46
|
const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
|
|
@@ -29,7 +51,7 @@ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, child
|
|
|
29
51
|
keyboardShowSubscription.remove();
|
|
30
52
|
keyboardHideSubscription.remove();
|
|
31
53
|
};
|
|
32
|
-
}, [componentHeight]);
|
|
54
|
+
}, [componentHeight, windowDimensions, keyboardShowOffset, statusBarHeight]);
|
|
33
55
|
const handleLayout = (event) => {
|
|
34
56
|
const { height } = event.nativeEvent.layout;
|
|
35
57
|
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 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 // console.log('=== Keyboard Show Debug ===');\n // console.log('currentWindowHeight:', currentWindowHeight);\n // console.log('screenHeight:', screenHeight);\n // console.log('systemUIHeight:', systemUIHeight);\n // console.log('event.endCoordinates.height:', event.endCoordinates.height);\n // console.log('componentHeight:', componentHeight);\n // console.log('keyboardShowOffset:', keyboardShowOffset);\n // console.log('statusBarHeight:', statusBarHeight);\n // console.log('calculatedTopValue:', calculatedTopValue);\n // console.log('========================');\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"]}
|