@0610studio/zs-ui 0.7.4 → 0.7.6
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":"AAUA,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,+BAyCP;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -3,35 +3,20 @@ import { Keyboard, Platform, StyleSheet, Dimensions, View, StatusBar } from 'rea
|
|
|
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 screenHeight = Dimensions.get('window').height;
|
|
6
7
|
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
|
7
8
|
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
|
8
9
|
function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, }) {
|
|
9
10
|
const [topValue, setTopValue] = useState(0);
|
|
10
11
|
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
|
|
11
12
|
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
|
-
}, []);
|
|
22
15
|
useEffect(() => {
|
|
23
16
|
const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
|
|
24
|
-
const currentWindowHeight = windowDimensions.height;
|
|
25
|
-
const screenHeight = Dimensions.get('screen').height;
|
|
26
|
-
const systemUIHeight = screenHeight - currentWindowHeight;
|
|
27
17
|
// 키보드 바로 위에 위치하도록 계산
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// if (Platform.OS === 'android' && systemUIHeight > 0) {
|
|
31
|
-
// // 시스템 UI가 있는 경우 (구형 기기 또는 특정 설정)
|
|
32
|
-
// calculatedTopValue = calculatedTopValue - (statusBarHeight > 0 ? statusBarHeight : 0);
|
|
33
|
-
// }
|
|
34
|
-
setTopValue(calculatedTopValue);
|
|
18
|
+
const topValue = screenHeight - event.endCoordinates.height - componentHeight - keyboardShowOffset - 0;
|
|
19
|
+
setTopValue(topValue);
|
|
35
20
|
setIsKeyboardVisible(true);
|
|
36
21
|
});
|
|
37
22
|
const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
|
|
@@ -42,7 +27,7 @@ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, child
|
|
|
42
27
|
keyboardShowSubscription.remove();
|
|
43
28
|
keyboardHideSubscription.remove();
|
|
44
29
|
};
|
|
45
|
-
}, [componentHeight
|
|
30
|
+
}, [componentHeight]);
|
|
46
31
|
const handleLayout = (event) => {
|
|
47
32
|
const { height } = event.nativeEvent.layout;
|
|
48
33
|
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,EAAE,SAAS,EAAqB,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
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';\n\nconst screenHeight = Dimensions.get('window').height;\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 { bottom } = useSafeAreaInsets();\n const statusBarHeight = StatusBar.currentHeight || 0;\n\n useEffect(() => {\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n // 키보드 바로 위에 위치하도록 계산\n const topValue = screenHeight - event.endCoordinates.height - componentHeight - keyboardShowOffset - 0;\n setTopValue(topValue);\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]);\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"]}
|