@0610studio/zs-ui 0.8.8 → 0.8.10
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/ZSPortal/index.d.ts.map +1 -1
- package/build/overlay/ZSPortal/index.js +2 -1
- package/build/overlay/ZSPortal/index.js.map +1 -1
- package/build/ui/ZSAboveKeyboard/index.d.ts +2 -1
- package/build/ui/ZSAboveKeyboard/index.d.ts.map +1 -1
- package/build/ui/ZSAboveKeyboard/index.js +7 -8
- package/build/ui/ZSAboveKeyboard/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAa,MAAM,OAAO,CAAC;AAWtG,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqCxD,CAAC;AAIF,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqB1C,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
|
|
2
2
|
import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
|
|
3
|
+
import { Z_INDEX_VALUE } from '../../model/utils';
|
|
3
4
|
const PortalContext = createContext(null);
|
|
4
5
|
export const PortalProvider = ({ children }) => {
|
|
5
6
|
const [portals, setPortals] = useState(new Map());
|
|
@@ -27,7 +28,7 @@ export const PortalProvider = ({ children }) => {
|
|
|
27
28
|
}, []);
|
|
28
29
|
return (<PortalContext.Provider value={{ registerPortal, unregisterPortal }}>
|
|
29
30
|
{children}
|
|
30
|
-
{Array.from(portals.entries()).map(([id, element]) => (<Animated.View entering={FadeInDown} exiting={FadeOutDown} key={id} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>
|
|
31
|
+
{Array.from(portals.entries()).map(([id, element]) => (<Animated.View entering={FadeInDown} exiting={FadeOutDown} key={id} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none', zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD }}>
|
|
31
32
|
{element}
|
|
32
33
|
</Animated.View>))}
|
|
33
34
|
</PortalContext.Provider>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACtG,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/ZSPortal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface PortalContextType {\n registerPortal: (id: string, element: ReactNode) => void;\n unregisterPortal: (id: string) => void;\n}\n\nconst PortalContext = createContext<PortalContextType | null>(null);\n\ninterface PortalProviderProps {\n children: ReactNode;\n}\n\nexport const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {\n const [portals, setPortals] = useState<Map<string, ReactNode>>(new Map());\n\n const registerPortal = useCallback((id: string, element: ReactNode) => {\n setPortals(prev => {\n // 동일한 요소가 이미 등록되어 있다면 업데이트하지 않음\n if (prev.get(id) === element) {\n return prev;\n }\n const newMap = new Map(prev);\n newMap.set(id, element);\n return newMap;\n });\n }, []);\n\n const unregisterPortal = useCallback((id: string) => {\n setPortals(prev => {\n // 해당 ID가 존재하지 않으면 상태를 변경하지 않음\n if (!prev.has(id)) {\n return prev;\n }\n const newMap = new Map(prev);\n newMap.delete(id);\n return newMap;\n });\n }, []);\n\n return (\n <PortalContext.Provider value={{ registerPortal, unregisterPortal }}>\n {children}\n {Array.from(portals.entries()).map(([id, element]) => (\n <Animated.View entering={FadeInDown} exiting={FadeOutDown} key={id} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none', zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD }}>\n {element}\n </Animated.View>\n ))}\n </PortalContext.Provider>\n );\n};\n\n// ------------------------------------------------------------------------------------------------\n\ninterface PortalProps {\n children: ReactNode;\n isFocused?: boolean;\n}\n\nexport const ZSPortal: React.FC<PortalProps> = ({ children, isFocused = true }) => {\n const context = useContext(PortalContext);\n const [portalId] = useState(() => `portal_${Date.now()}_${Math.random()}`);\n\n useEffect(() => {\n if (!context) return;\n if (isFocused) {\n context.registerPortal(portalId, children);\n } else {\n context.unregisterPortal(portalId);\n }\n }, [children]);\n\n useEffect(() => {\n return () => {\n if (!context) return;\n context.unregisterPortal(portalId);\n };\n }, []);\n\n return null;\n};\n"]}
|
|
@@ -4,7 +4,8 @@ interface Props {
|
|
|
4
4
|
keyboardHideOffset?: number;
|
|
5
5
|
handleLayoutHeight?: (height: number) => void;
|
|
6
6
|
isFocused?: boolean;
|
|
7
|
+
showOnlyKeyboardVisible?: boolean;
|
|
7
8
|
}
|
|
8
|
-
declare function ZSAboveKeyboard({ keyboardShowOffset, keyboardHideOffset, children, handleLayoutHeight, isFocused, }: Props): import("react").JSX.Element;
|
|
9
|
+
declare function ZSAboveKeyboard({ keyboardShowOffset, keyboardHideOffset, children, handleLayoutHeight, isFocused, showOnlyKeyboardVisible, }: Props): import("react").JSX.Element;
|
|
9
10
|
export default ZSAboveKeyboard;
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,iBAAS,eAAe,CAAC,EACvB,kBAAsB,EACtB,kBAAsB,EACtB,QAAQ,EACR,kBAAkB,EAClB,SAAgB,EAChB,uBAA+B,GAChC,EAAE,KAAK,+BA+BP;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -5,28 +5,27 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
5
5
|
import { ZSPortal } from '../../overlay';
|
|
6
6
|
import useKeyboard from '../../model/useKeyboard';
|
|
7
7
|
const screenHeight = Dimensions.get('window').height;
|
|
8
|
-
|
|
8
|
+
const HIDDEN_BOTTOM_OFFSET = -300;
|
|
9
|
+
function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, isFocused = true, showOnlyKeyboardVisible = false, }) {
|
|
9
10
|
const [topValue, setTopValue] = useState(0);
|
|
10
11
|
const componentHeightRef = useRef(0);
|
|
11
12
|
const { bottom } = useSafeAreaInsets();
|
|
12
13
|
const { isKeyboardVisible, keyboardHeight } = useKeyboard();
|
|
13
14
|
useEffect(() => {
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
// 키보드 바로 위에 위치하도록 계산
|
|
16
|
+
if (keyboardHeight) {
|
|
16
17
|
const topValue = screenHeight - keyboardHeight - componentHeightRef.current - keyboardShowOffset - (Platform.OS === 'android' ? 13 : 0);
|
|
17
18
|
setTopValue(topValue);
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
-
setTopValue(0);
|
|
21
|
-
}
|
|
22
|
-
}, [isKeyboardVisible, keyboardHeight, keyboardShowOffset]);
|
|
20
|
+
}, [keyboardHeight, keyboardShowOffset]);
|
|
23
21
|
const handleLayout = (event) => {
|
|
24
22
|
const { height } = event.nativeEvent.layout;
|
|
25
23
|
componentHeightRef.current = height;
|
|
26
24
|
handleLayoutHeight?.(height);
|
|
27
25
|
};
|
|
26
|
+
const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;
|
|
28
27
|
return (<ZSPortal isFocused={isFocused}>
|
|
29
|
-
<View style={[styles.container, isKeyboardVisible ? { top: topValue } : { bottom: keyboardHideOffset + bottom }]}>
|
|
28
|
+
<View style={[styles.container, !isVisible ? { bottom: HIDDEN_BOTTOM_OFFSET } : isKeyboardVisible ? { top: topValue } : { bottom: keyboardHideOffset + bottom }]}>
|
|
30
29
|
<View onLayout={handleLayout}>
|
|
31
30
|
{children}
|
|
32
31
|
</View>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAqB,MAAM,cAAc,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAElD,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, Dimensions, View, LayoutChangeEvent } from 'react-native';\nimport { Z_INDEX_VALUE } from '../../model/utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { ZSPortal } from '../../overlay';\nimport useKeyboard from '../../model/useKeyboard';\n\nconst screenHeight = Dimensions.get('window').height;\nconst HIDDEN_BOTTOM_OFFSET = -300;\n\ninterface Props {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n isFocused?: boolean;\n showOnlyKeyboardVisible?: boolean;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n isFocused = true,\n showOnlyKeyboardVisible = false,\n}: Props) {\n const [topValue, setTopValue] = useState(0);\n const componentHeightRef = useRef(0);\n const { bottom } = useSafeAreaInsets();\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n\n useEffect(() => {\n // 키보드 바로 위에 위치하도록 계산\n if (keyboardHeight) {\n const topValue = screenHeight - keyboardHeight - componentHeightRef.current - keyboardShowOffset - (Platform.OS === 'android' ? 13 : 0);\n setTopValue(topValue);\n }\n }, [keyboardHeight, keyboardShowOffset]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n componentHeightRef.current = height;\n handleLayoutHeight?.(height);\n };\n\n const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;\n\n return (\n <ZSPortal isFocused={isFocused}>\n <View style={[styles.container, !isVisible ? { bottom: HIDDEN_BOTTOM_OFFSET } : 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"]}
|