@0610studio/zs-ui 0.0.1
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/.eslintrc.js +5 -0
- package/README.md +3 -0
- package/android/.gradle/8.9/checksums/checksums.lock +0 -0
- package/android/.gradle/8.9/dependencies-accessors/gc.properties +0 -0
- package/android/.gradle/8.9/fileChanges/last-build.bin +0 -0
- package/android/.gradle/8.9/fileHashes/fileHashes.lock +0 -0
- package/android/.gradle/8.9/gc.properties +0 -0
- package/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock +0 -0
- package/android/.gradle/buildOutputCleanup/cache.properties +2 -0
- package/android/.gradle/vcs-1/gc.properties +0 -0
- package/android/build.gradle +43 -0
- package/android/src/main/AndroidManifest.xml +2 -0
- package/android/src/main/java/kr/co/studio0610/zsui/ZsUiModule.kt +47 -0
- package/android/src/main/java/kr/co/studio0610/zsui/ZsUiView.kt +7 -0
- package/build/ZsUi.types.d.ts +7 -0
- package/build/ZsUi.types.d.ts.map +1 -0
- package/build/ZsUi.types.js +2 -0
- package/build/ZsUi.types.js.map +1 -0
- package/build/ZsUiModule.d.ts +3 -0
- package/build/ZsUiModule.d.ts.map +1 -0
- package/build/ZsUiModule.js +5 -0
- package/build/ZsUiModule.js.map +1 -0
- package/build/ZsUiModule.web.d.ts +7 -0
- package/build/ZsUiModule.web.d.ts.map +1 -0
- package/build/ZsUiModule.web.js +12 -0
- package/build/ZsUiModule.web.js.map +1 -0
- package/build/ZsUiView.d.ts +4 -0
- package/build/ZsUiView.d.ts.map +1 -0
- package/build/ZsUiView.js +7 -0
- package/build/ZsUiView.js.map +1 -0
- package/build/ZsUiView.web.d.ts +4 -0
- package/build/ZsUiView.web.d.ts.map +1 -0
- package/build/ZsUiView.web.js +7 -0
- package/build/ZsUiView.web.js.map +1 -0
- package/build/assets/SvgCheck.d.ts +7 -0
- package/build/assets/SvgCheck.d.ts.map +1 -0
- package/build/assets/SvgCheck.js +8 -0
- package/build/assets/SvgCheck.js.map +1 -0
- package/build/assets/SvgX.d.ts +6 -0
- package/build/assets/SvgX.d.ts.map +1 -0
- package/build/assets/SvgX.js +14 -0
- package/build/assets/SvgX.js.map +1 -0
- package/build/index.d.ts +5 -0
- package/build/index.d.ts.map +1 -0
- package/build/index.js +10 -0
- package/build/index.js.map +1 -0
- package/build/model/types.d.ts +84 -0
- package/build/model/types.d.ts.map +1 -0
- package/build/model/types.js +11 -0
- package/build/model/types.js.map +1 -0
- package/build/model/useNotify.d.ts +5 -0
- package/build/model/useNotify.d.ts.map +1 -0
- package/build/model/useNotify.js +11 -0
- package/build/model/useNotify.js.map +1 -0
- package/build/model/useNotifyProvider.d.ts +3 -0
- package/build/model/useNotifyProvider.d.ts.map +1 -0
- package/build/model/useNotifyProvider.js +165 -0
- package/build/model/useNotifyProvider.js.map +1 -0
- package/build/model/useThemeProvider.d.ts +19 -0
- package/build/model/useThemeProvider.d.ts.map +1 -0
- package/build/model/useThemeProvider.js +73 -0
- package/build/model/useThemeProvider.js.map +1 -0
- package/build/model/utils.d.ts +12 -0
- package/build/model/utils.d.ts.map +1 -0
- package/build/model/utils.js +26 -0
- package/build/model/utils.js.map +1 -0
- package/build/notify/AlertNotify/index.d.ts +5 -0
- package/build/notify/AlertNotify/index.d.ts.map +1 -0
- package/build/notify/AlertNotify/index.js +109 -0
- package/build/notify/AlertNotify/index.js.map +1 -0
- package/build/notify/BottomSheetNotify/index.d.ts +19 -0
- package/build/notify/BottomSheetNotify/index.d.ts.map +1 -0
- package/build/notify/BottomSheetNotify/index.js +90 -0
- package/build/notify/BottomSheetNotify/index.js.map +1 -0
- package/build/notify/BottomSheetNotify/model/useBottomSheetNotify.d.ts +43 -0
- package/build/notify/BottomSheetNotify/model/useBottomSheetNotify.d.ts.map +1 -0
- package/build/notify/BottomSheetNotify/model/useBottomSheetNotify.js +222 -0
- package/build/notify/BottomSheetNotify/model/useBottomSheetNotify.js.map +1 -0
- package/build/notify/BottomSheetNotify/types/index.d.ts +4 -0
- package/build/notify/BottomSheetNotify/types/index.d.ts.map +1 -0
- package/build/notify/BottomSheetNotify/types/index.js +2 -0
- package/build/notify/BottomSheetNotify/types/index.js.map +1 -0
- package/build/notify/BottomSheetNotify/ui/BSTextInput/index.d.ts +4 -0
- package/build/notify/BottomSheetNotify/ui/BSTextInput/index.d.ts.map +1 -0
- package/build/notify/BottomSheetNotify/ui/BSTextInput/index.js +14 -0
- package/build/notify/BottomSheetNotify/ui/BSTextInput/index.js.map +1 -0
- package/build/notify/BottomSheetNotify/ui/ContentsComponent/index.d.ts +19 -0
- package/build/notify/BottomSheetNotify/ui/ContentsComponent/index.d.ts.map +1 -0
- package/build/notify/BottomSheetNotify/ui/ContentsComponent/index.js +33 -0
- package/build/notify/BottomSheetNotify/ui/ContentsComponent/index.js.map +1 -0
- package/build/notify/LoadingNotify/index.d.ts +6 -0
- package/build/notify/LoadingNotify/index.d.ts.map +1 -0
- package/build/notify/LoadingNotify/index.js +28 -0
- package/build/notify/LoadingNotify/index.js.map +1 -0
- package/build/notify/PopOver/PopOverButton.d.ts +11 -0
- package/build/notify/PopOver/PopOverButton.d.ts.map +1 -0
- package/build/notify/PopOver/PopOverButton.js +31 -0
- package/build/notify/PopOver/PopOverButton.js.map +1 -0
- package/build/notify/PopOver/PopOverMenu.d.ts +4 -0
- package/build/notify/PopOver/PopOverMenu.d.ts.map +1 -0
- package/build/notify/PopOver/PopOverMenu.js +69 -0
- package/build/notify/PopOver/PopOverMenu.js.map +1 -0
- package/build/notify/SnackbarNotify/index.d.ts +7 -0
- package/build/notify/SnackbarNotify/index.d.ts.map +1 -0
- package/build/notify/SnackbarNotify/index.js +24 -0
- package/build/notify/SnackbarNotify/index.js.map +1 -0
- package/build/notify/SnackbarNotify/ui/SnackbarItem.d.ts +9 -0
- package/build/notify/SnackbarNotify/ui/SnackbarItem.d.ts.map +1 -0
- package/build/notify/SnackbarNotify/ui/SnackbarItem.js +72 -0
- package/build/notify/SnackbarNotify/ui/SnackbarItem.js.map +1 -0
- package/build/notify/index.d.ts +11 -0
- package/build/notify/index.d.ts.map +1 -0
- package/build/notify/index.js +11 -0
- package/build/notify/index.js.map +1 -0
- package/build/notify/ui/ModalBackground.d.ts +9 -0
- package/build/notify/ui/ModalBackground.d.ts.map +1 -0
- package/build/notify/ui/ModalBackground.js +27 -0
- package/build/notify/ui/ModalBackground.js.map +1 -0
- package/build/theme/index.d.ts +4 -0
- package/build/theme/index.d.ts.map +1 -0
- package/build/theme/index.js +4 -0
- package/build/theme/index.js.map +1 -0
- package/build/theme/palette.d.ts +62 -0
- package/build/theme/palette.d.ts.map +1 -0
- package/build/theme/palette.js +353 -0
- package/build/theme/palette.js.map +1 -0
- package/build/theme/types.d.ts +101 -0
- package/build/theme/types.d.ts.map +1 -0
- package/build/theme/types.js +5 -0
- package/build/theme/types.js.map +1 -0
- package/build/theme/typography.d.ts +5 -0
- package/build/theme/typography.d.ts.map +1 -0
- package/build/theme/typography.js +198 -0
- package/build/theme/typography.js.map +1 -0
- package/build/ui/ThrottleButton/index.d.ts +15 -0
- package/build/ui/ThrottleButton/index.d.ts.map +1 -0
- package/build/ui/ThrottleButton/index.js +74 -0
- package/build/ui/ThrottleButton/index.js.map +1 -0
- package/build/ui/ZSBottomButton/index.d.ts +16 -0
- package/build/ui/ZSBottomButton/index.d.ts.map +1 -0
- package/build/ui/ZSBottomButton/index.js +89 -0
- package/build/ui/ZSBottomButton/index.js.map +1 -0
- package/build/ui/ZSContainer/index.d.ts +19 -0
- package/build/ui/ZSContainer/index.d.ts.map +1 -0
- package/build/ui/ZSContainer/index.js +37 -0
- package/build/ui/ZSContainer/index.js.map +1 -0
- package/build/ui/ZSPressable/index.d.ts +17 -0
- package/build/ui/ZSPressable/index.d.ts.map +1 -0
- package/build/ui/ZSPressable/index.js +35 -0
- package/build/ui/ZSPressable/index.js.map +1 -0
- package/build/ui/ZSRadioGroup/index.d.ts +18 -0
- package/build/ui/ZSRadioGroup/index.d.ts.map +1 -0
- package/build/ui/ZSRadioGroup/index.js +82 -0
- package/build/ui/ZSRadioGroup/index.js.map +1 -0
- package/build/ui/ZSText/index.d.ts +11 -0
- package/build/ui/ZSText/index.d.ts.map +1 -0
- package/build/ui/ZSText/index.js +10 -0
- package/build/ui/ZSText/index.js.map +1 -0
- package/build/ui/ZSTextField/index.d.ts +31 -0
- package/build/ui/ZSTextField/index.d.ts.map +1 -0
- package/build/ui/ZSTextField/index.js +102 -0
- package/build/ui/ZSTextField/index.js.map +1 -0
- package/build/ui/ZSTextField/ui/ButtonClose.d.ts +6 -0
- package/build/ui/ZSTextField/ui/ButtonClose.d.ts.map +1 -0
- package/build/ui/ZSTextField/ui/ButtonClose.js +9 -0
- package/build/ui/ZSTextField/ui/ButtonClose.js.map +1 -0
- package/build/ui/ZSTextField/ui/ErrorComponent.d.ts +7 -0
- package/build/ui/ZSTextField/ui/ErrorComponent.d.ts.map +1 -0
- package/build/ui/ZSTextField/ui/ErrorComponent.js +16 -0
- package/build/ui/ZSTextField/ui/ErrorComponent.js.map +1 -0
- package/build/ui/ZSView/index.d.ts +8 -0
- package/build/ui/ZSView/index.d.ts.map +1 -0
- package/build/ui/ZSView/index.js +17 -0
- package/build/ui/ZSView/index.js.map +1 -0
- package/build/ui/atoms/AnimatedWrapper.d.ts +12 -0
- package/build/ui/atoms/AnimatedWrapper.d.ts.map +1 -0
- package/build/ui/atoms/AnimatedWrapper.js +61 -0
- package/build/ui/atoms/AnimatedWrapper.js.map +1 -0
- package/build/ui/atoms/ScrollViewAtom.d.ts +5 -0
- package/build/ui/atoms/ScrollViewAtom.d.ts.map +1 -0
- package/build/ui/atoms/ScrollViewAtom.js +10 -0
- package/build/ui/atoms/ScrollViewAtom.js.map +1 -0
- package/build/ui/atoms/TextAtom.d.ts +6 -0
- package/build/ui/atoms/TextAtom.d.ts.map +1 -0
- package/build/ui/atoms/TextAtom.js +9 -0
- package/build/ui/atoms/TextAtom.js.map +1 -0
- package/build/ui/atoms/ViewAtom.d.ts +6 -0
- package/build/ui/atoms/ViewAtom.d.ts.map +1 -0
- package/build/ui/atoms/ViewAtom.js +9 -0
- package/build/ui/atoms/ViewAtom.js.map +1 -0
- package/build/ui/index.d.ts +14 -0
- package/build/ui/index.d.ts.map +1 -0
- package/build/ui/index.js +14 -0
- package/build/ui/index.js.map +1 -0
- package/build/ui/types.d.ts +14 -0
- package/build/ui/types.d.ts.map +1 -0
- package/build/ui/types.js +2 -0
- package/build/ui/types.js.map +1 -0
- package/expo-module.config.json +9 -0
- package/ios/ZsUi.podspec +27 -0
- package/ios/ZsUiModule.swift +44 -0
- package/ios/ZsUiView.swift +7 -0
- package/package.json +54 -0
- package/src/ZsUi.types.ts +7 -0
- package/src/ZsUiModule.ts +5 -0
- package/src/ZsUiModule.web.ts +13 -0
- package/src/ZsUiView.tsx +11 -0
- package/src/ZsUiView.web.tsx +11 -0
- package/src/assets/SvgCheck.tsx +16 -0
- package/src/assets/SvgX.tsx +22 -0
- package/src/index.ts +52 -0
- package/src/model/types.ts +102 -0
- package/src/model/useNotify.ts +14 -0
- package/src/model/useNotifyProvider.tsx +251 -0
- package/src/model/useThemeProvider.tsx +99 -0
- package/src/model/utils.ts +31 -0
- package/src/notify/AlertNotify/index.tsx +177 -0
- package/src/notify/BottomSheetNotify/index.tsx +177 -0
- package/src/notify/BottomSheetNotify/model/useBottomSheetNotify.tsx +270 -0
- package/src/notify/BottomSheetNotify/types/index.ts +3 -0
- package/src/notify/BottomSheetNotify/ui/BSTextInput/index.tsx +28 -0
- package/src/notify/BottomSheetNotify/ui/ContentsComponent/index.tsx +76 -0
- package/src/notify/LoadingNotify/index.tsx +46 -0
- package/src/notify/PopOver/PopOverButton.tsx +56 -0
- package/src/notify/PopOver/PopOverMenu.tsx +95 -0
- package/src/notify/SnackbarNotify/index.tsx +43 -0
- package/src/notify/SnackbarNotify/ui/SnackbarItem.tsx +103 -0
- package/src/notify/index.ts +21 -0
- package/src/notify/ui/ModalBackground.tsx +46 -0
- package/src/theme/index.ts +3 -0
- package/src/theme/palette.ts +374 -0
- package/src/theme/types.ts +150 -0
- package/src/theme/typography.ts +199 -0
- package/src/ui/ThrottleButton/index.tsx +119 -0
- package/src/ui/ZSBottomButton/index.tsx +151 -0
- package/src/ui/ZSContainer/index.tsx +92 -0
- package/src/ui/ZSPressable/index.tsx +82 -0
- package/src/ui/ZSRadioGroup/index.tsx +141 -0
- package/src/ui/ZSText/index.tsx +22 -0
- package/src/ui/ZSTextField/index.tsx +200 -0
- package/src/ui/ZSTextField/ui/ButtonClose.tsx +20 -0
- package/src/ui/ZSTextField/ui/ErrorComponent.tsx +25 -0
- package/src/ui/ZSView/index.tsx +30 -0
- package/src/ui/atoms/AnimatedWrapper.tsx +89 -0
- package/src/ui/atoms/ScrollViewAtom.tsx +17 -0
- package/src/ui/atoms/TextAtom.tsx +15 -0
- package/src/ui/atoms/ViewAtom.tsx +15 -0
- package/src/ui/index.ts +27 -0
- package/src/ui/types.ts +12 -0
- package/tsconfig.json +9 -0
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
+
import { BackHandler, Dimensions, Pressable } from "react-native";
|
|
3
|
+
import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
|
|
4
|
+
import { useNotify } from "../../model/useNotify";
|
|
5
|
+
import ModalBackground from "../ui/ModalBackground";
|
|
6
|
+
// 화면 높이 가져오기
|
|
7
|
+
const WINDOW_HEIGHT = Dimensions.get('window').height;
|
|
8
|
+
function PopOverMenu({ px, py, component }) {
|
|
9
|
+
const [isContentVisible, setIsContentVisible] = useState(false);
|
|
10
|
+
const [contentWidth, setContentWidth] = useState(0);
|
|
11
|
+
const [contentHeight, setContentHeight] = useState(0);
|
|
12
|
+
const { popOverVisible, setPopOverVisible } = useNotify();
|
|
13
|
+
const timerRef = useRef(null);
|
|
14
|
+
// 뒤로가기 버튼 처리 핸들러
|
|
15
|
+
const handleBackPress = useCallback(() => {
|
|
16
|
+
if (popOverVisible) {
|
|
17
|
+
setIsContentVisible(false);
|
|
18
|
+
setPopOverVisible(false);
|
|
19
|
+
return true; // 뒤로가기 액션을 막음
|
|
20
|
+
}
|
|
21
|
+
return false; // 기본 동작 허용
|
|
22
|
+
}, [popOverVisible, setPopOverVisible]);
|
|
23
|
+
// 뒤로가기 이벤트 리스너 추가 및 제거
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
|
|
26
|
+
return () => backHandler.remove();
|
|
27
|
+
}, [handleBackPress]);
|
|
28
|
+
// 레이아웃 크기 계산
|
|
29
|
+
const handleLayout = useCallback((event) => {
|
|
30
|
+
setContentWidth(event.nativeEvent.layout.width || 0);
|
|
31
|
+
setContentHeight(event.nativeEvent.layout.height || 0);
|
|
32
|
+
}, []);
|
|
33
|
+
// PopOver가 보일 때 콘텐츠를 딜레이 후 보여줌
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (popOverVisible) {
|
|
36
|
+
if (timerRef.current) {
|
|
37
|
+
clearTimeout(timerRef.current);
|
|
38
|
+
}
|
|
39
|
+
timerRef.current = setTimeout(() => {
|
|
40
|
+
setIsContentVisible(true);
|
|
41
|
+
}, 200);
|
|
42
|
+
}
|
|
43
|
+
return () => {
|
|
44
|
+
if (timerRef.current) {
|
|
45
|
+
clearTimeout(timerRef.current);
|
|
46
|
+
timerRef.current = null;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}, [popOverVisible]);
|
|
50
|
+
// 화면 크기에 따른 위치 조정
|
|
51
|
+
const isVerticalOverflow = WINDOW_HEIGHT < (py + contentHeight);
|
|
52
|
+
const isHorizontalOverflow = Dimensions.get('window').width > (px + contentWidth);
|
|
53
|
+
if (!popOverVisible)
|
|
54
|
+
return null;
|
|
55
|
+
return (<ModalBackground isCenter={false} onPress={() => setPopOverVisible(false)}>
|
|
56
|
+
{isContentVisible && (<Animated.View entering={FadeInUp} exiting={FadeOutUp}>
|
|
57
|
+
{/* PopOver의 위치를 세밀하게 조정 */}
|
|
58
|
+
<Pressable style={{
|
|
59
|
+
position: 'absolute',
|
|
60
|
+
top: py - (isVerticalOverflow ? (contentHeight + 10) : 0),
|
|
61
|
+
left: px - contentWidth + (isHorizontalOverflow ? contentWidth : 0),
|
|
62
|
+
}} onLayout={handleLayout}>
|
|
63
|
+
{component}
|
|
64
|
+
</Pressable>
|
|
65
|
+
</Animated.View>)}
|
|
66
|
+
</ModalBackground>);
|
|
67
|
+
}
|
|
68
|
+
export default PopOverMenu;
|
|
69
|
+
//# sourceMappingURL=PopOverMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/notify/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { BackHandler, Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { useNotify } from \"../../model/useNotify\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\n\n// 화면 높이 가져오기\nconst WINDOW_HEIGHT = Dimensions.get('window').height;\n\nfunction PopOverMenu({\n px,\n py,\n component\n}: PopOverMenuProps): JSX.Element | null {\n const [isContentVisible, setIsContentVisible] = useState<boolean>(false);\n const [contentWidth, setContentWidth] = useState<number>(0);\n const [contentHeight, setContentHeight] = useState<number>(0);\n const { popOverVisible, setPopOverVisible } = useNotify();\n const timerRef = useRef<number | null>(null);\n\n // 뒤로가기 버튼 처리 핸들러\n const handleBackPress = useCallback((): boolean => {\n if (popOverVisible) {\n setIsContentVisible(false);\n setPopOverVisible(false);\n return true; // 뒤로가기 액션을 막음\n }\n return false; // 기본 동작 허용\n }, [popOverVisible, setPopOverVisible]);\n\n // 뒤로가기 이벤트 리스너 추가 및 제거\n useEffect(() => {\n const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);\n\n return () => backHandler.remove();\n }, [handleBackPress]);\n\n // 레이아웃 크기 계산\n const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n setContentWidth(event.nativeEvent.layout.width || 0);\n setContentHeight(event.nativeEvent.layout.height || 0);\n }, []);\n\n // PopOver가 보일 때 콘텐츠를 딜레이 후 보여줌\n useEffect(() => {\n if (popOverVisible) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n\n timerRef.current = setTimeout(() => {\n setIsContentVisible(true);\n }, 200);\n }\n\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [popOverVisible]);\n\n // 화면 크기에 따른 위치 조정\n const isVerticalOverflow = WINDOW_HEIGHT < (py + contentHeight);\n const isHorizontalOverflow = Dimensions.get('window').width > (px + contentWidth);\n\n if (!popOverVisible) return null;\n\n return (\n <ModalBackground isCenter={false} onPress={() => setPopOverVisible(false)}>\n {isContentVisible && (\n <Animated.View\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n {/* PopOver의 위치를 세밀하게 조정 */}\n <Pressable\n style={{\n position: 'absolute',\n top: py - (isVerticalOverflow ? (contentHeight + 10) : 0),\n left: px - contentWidth + (isHorizontalOverflow ? contentWidth : 0),\n }}\n onLayout={handleLayout}\n >\n {component}\n </Pressable>\n </Animated.View>\n )}\n </ModalBackground>\n );\n}\n\nexport default PopOverMenu;\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { CustomSnackbarProps } from "../../model/types";
|
|
3
|
+
declare const SnackbarNotify: ({ customSnackbar }: {
|
|
4
|
+
customSnackbar?: (props: CustomSnackbarProps) => ReactNode;
|
|
5
|
+
}) => React.JSX.Element | null;
|
|
6
|
+
export default SnackbarNotify;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/notify/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxD,QAAA,MAAM,cAAc,uBAEjB;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAA;CAC3D,6BAoBA,CAAC;AAWF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
3
|
+
import { StyleSheet, View } from "react-native";
|
|
4
|
+
import SnackbarItem from "./ui/SnackbarItem";
|
|
5
|
+
import { useNotify } from "../../model/useNotify";
|
|
6
|
+
const SnackbarNotify = ({ customSnackbar }) => {
|
|
7
|
+
const { top } = useSafeAreaInsets();
|
|
8
|
+
const { snackItemStack, hideSnackBar } = useNotify();
|
|
9
|
+
return snackItemStack ? (<View style={[styles.container, { paddingTop: top }]}>
|
|
10
|
+
{snackItemStack.map((snackItem, index) => {
|
|
11
|
+
return (<SnackbarItem key={index} customSnackbar={customSnackbar} snackItem={snackItem} hideSnackBar={hideSnackBar}/>);
|
|
12
|
+
})}
|
|
13
|
+
</View>) : null;
|
|
14
|
+
};
|
|
15
|
+
const styles = StyleSheet.create({
|
|
16
|
+
container: {
|
|
17
|
+
zIndex: 9997,
|
|
18
|
+
width: '100%',
|
|
19
|
+
alignItems: 'center',
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
export default SnackbarNotify;
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/notify/SnackbarNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EAGf,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IAErD,OAAO,cAAc,CAAC,CAAC,CAAC,CACtB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,CACnD;MAAA,CACE,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACtC,OAAO,CACL,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,EAC3B,CACH,CAAC;QACJ,CAAC,CACH,CACF;IAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { StyleSheet, View } from \"react-native\";\nimport { CustomSnackbarProps } from \"../../model/types\";\nimport SnackbarItem from \"./ui/SnackbarItem\";\nimport { useNotify } from \"../../model/useNotify\";\n\nconst SnackbarNotify = ({\n customSnackbar\n}: {\n customSnackbar?: (props: CustomSnackbarProps) => ReactNode\n}) => {\n const { top } = useSafeAreaInsets();\n const { snackItemStack, hideSnackBar } = useNotify();\n\n return snackItemStack ? (\n <View style={[styles.container, { paddingTop: top }]}>\n {\n snackItemStack.map((snackItem, index) => {\n return (\n <SnackbarItem\n key={index}\n customSnackbar={customSnackbar}\n snackItem={snackItem}\n hideSnackBar={hideSnackBar}\n />\n );\n })\n }\n </View>\n ) : null;\n};\n\nconst styles = StyleSheet.create({\n container: {\n zIndex: 9997,\n width: '100%',\n alignItems: 'center',\n position: 'absolute',\n },\n});\n\nexport default SnackbarNotify;\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { CustomSnackbarProps, SnackItem } from "../../../model/types";
|
|
3
|
+
declare const Snackbar: ({ customSnackbar, snackItem, hideSnackBar, }: {
|
|
4
|
+
customSnackbar?: (props: CustomSnackbarProps) => ReactNode;
|
|
5
|
+
snackItem: SnackItem;
|
|
6
|
+
hideSnackBar: (index: number) => void;
|
|
7
|
+
}) => React.JSX.Element;
|
|
8
|
+
export default Snackbar;
|
|
9
|
+
//# sourceMappingURL=SnackbarItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/notify/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ,iDAIX;IACD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,sBA0CA,CAAC;AA4CF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { useEffect, useCallback } from "react";
|
|
2
|
+
import { Platform, StyleSheet, TouchableOpacity } from "react-native";
|
|
3
|
+
import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
|
|
4
|
+
import ViewAtom from "../../../ui/atoms/ViewAtom";
|
|
5
|
+
import { ZSText } from "../../../ui";
|
|
6
|
+
import { useTheme } from "../../../model/useThemeProvider";
|
|
7
|
+
const Snackbar = ({ customSnackbar, snackItem, hideSnackBar, }) => {
|
|
8
|
+
const { type, message, snackbarDuration } = snackItem;
|
|
9
|
+
const { palette } = useTheme();
|
|
10
|
+
const closeSnackbar = useCallback(() => {
|
|
11
|
+
hideSnackBar(snackItem.index);
|
|
12
|
+
}, [hideSnackBar, snackItem.index]);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);
|
|
15
|
+
return () => clearTimeout(closeTimeout);
|
|
16
|
+
}, [snackbarDuration, closeSnackbar]);
|
|
17
|
+
return (<Animated.View style={[styles.container, styles.aosShadow, styles.snackbarWrapper]} entering={FadeInUp} exiting={FadeOutUp}>
|
|
18
|
+
<TouchableOpacity style={[styles.container, styles.iosShadow, styles.touchable]} activeOpacity={1} onPress={closeSnackbar}>
|
|
19
|
+
{customSnackbar ? (customSnackbar({ snackType: type, snackMessage: message })) : (<ViewAtom style={[
|
|
20
|
+
styles.snackBar,
|
|
21
|
+
{ backgroundColor: type === "error" ? palette.background.danger : palette.background.success },
|
|
22
|
+
]}>
|
|
23
|
+
<ViewAtom style={styles.messageContainer}>
|
|
24
|
+
<ZSText>{message}</ZSText>
|
|
25
|
+
</ViewAtom>
|
|
26
|
+
</ViewAtom>)}
|
|
27
|
+
</TouchableOpacity>
|
|
28
|
+
</Animated.View>);
|
|
29
|
+
};
|
|
30
|
+
const styles = StyleSheet.create({
|
|
31
|
+
container: {
|
|
32
|
+
borderRadius: 16,
|
|
33
|
+
backgroundColor: "white",
|
|
34
|
+
},
|
|
35
|
+
iosShadow: {
|
|
36
|
+
...Platform.select({
|
|
37
|
+
ios: {
|
|
38
|
+
shadowColor: "rgb(50, 50, 50)",
|
|
39
|
+
shadowOpacity: 0.12,
|
|
40
|
+
shadowRadius: 5,
|
|
41
|
+
shadowOffset: { height: 3, width: 0 },
|
|
42
|
+
},
|
|
43
|
+
}),
|
|
44
|
+
},
|
|
45
|
+
aosShadow: {
|
|
46
|
+
...Platform.select({
|
|
47
|
+
android: { elevation: 5 },
|
|
48
|
+
}),
|
|
49
|
+
},
|
|
50
|
+
snackbarWrapper: {
|
|
51
|
+
width: "94%",
|
|
52
|
+
marginTop: 10,
|
|
53
|
+
},
|
|
54
|
+
touchable: {
|
|
55
|
+
width: "100%",
|
|
56
|
+
},
|
|
57
|
+
snackBar: {
|
|
58
|
+
borderRadius: 16,
|
|
59
|
+
paddingHorizontal: 10,
|
|
60
|
+
paddingVertical: 18,
|
|
61
|
+
flexDirection: "row",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
width: "100%",
|
|
64
|
+
},
|
|
65
|
+
messageContainer: {
|
|
66
|
+
flex: 1,
|
|
67
|
+
flexDirection: "column",
|
|
68
|
+
marginLeft: 10,
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
export default Snackbar;
|
|
72
|
+
//# sourceMappingURL=SnackbarItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/notify/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { Platform, StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { ZSText } from \"../../../ui\";\nimport { useTheme } from \"../../../model/useThemeProvider\";\n\nconst Snackbar = ({\n customSnackbar,\n snackItem,\n hideSnackBar,\n}: {\n customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n snackItem: SnackItem;\n hideSnackBar: (index: number) => void;\n}) => {\n const { type, message, snackbarDuration } = snackItem;\n const { palette } = useTheme();\n\n const closeSnackbar = useCallback(() => {\n hideSnackBar(snackItem.index);\n }, [hideSnackBar, snackItem.index]);\n\n useEffect(() => {\n const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n\n return () => clearTimeout(closeTimeout);\n }, [snackbarDuration, closeSnackbar]);\n\n return (\n <Animated.View\n style={[styles.container, styles.aosShadow, styles.snackbarWrapper]}\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <TouchableOpacity\n style={[styles.container, styles.iosShadow, styles.touchable]}\n activeOpacity={1}\n onPress={closeSnackbar}\n >\n {customSnackbar ? (\n customSnackbar({ snackType: type, snackMessage: message })\n ) : (\n <ViewAtom\n style={[\n styles.snackBar,\n { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n ]}\n >\n <ViewAtom style={styles.messageContainer}>\n <ZSText>{message}</ZSText>\n </ViewAtom>\n </ViewAtom>\n )}\n </TouchableOpacity>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 16,\n backgroundColor: \"white\",\n },\n iosShadow: {\n ...Platform.select({\n ios: {\n shadowColor: \"rgb(50, 50, 50)\",\n shadowOpacity: 0.12,\n shadowRadius: 5,\n shadowOffset: { height: 3, width: 0 },\n },\n }),\n },\n aosShadow: {\n ...Platform.select({\n android: { elevation: 5 },\n }),\n },\n snackbarWrapper: {\n width: \"94%\",\n marginTop: 10,\n },\n touchable: {\n width: \"100%\",\n },\n snackBar: {\n borderRadius: 16,\n paddingHorizontal: 10,\n paddingVertical: 18,\n flexDirection: \"row\",\n alignItems: \"center\",\n width: \"100%\",\n },\n messageContainer: {\n flex: 1,\n flexDirection: \"column\",\n marginLeft: 10,\n },\n});\n\nexport default Snackbar;\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import AlertNotify from './AlertNotify';
|
|
2
|
+
import BottomSheetNotify from './BottomSheetNotify';
|
|
3
|
+
import SnackbarNotify from './SnackbarNotify';
|
|
4
|
+
import BSTextInput from './BottomSheetNotify/ui/BSTextInput';
|
|
5
|
+
import * as useNotifyProvider from '../model/useNotifyProvider';
|
|
6
|
+
import { useNotify } from '../model/useNotify';
|
|
7
|
+
import PopOverButton from './PopOver/PopOverButton';
|
|
8
|
+
import PopOverMenu from './PopOver/PopOverMenu';
|
|
9
|
+
import * as types from '../model/types';
|
|
10
|
+
export { AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, types, };
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/notify/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,GACN,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import AlertNotify from './AlertNotify';
|
|
2
|
+
import BottomSheetNotify from './BottomSheetNotify';
|
|
3
|
+
import SnackbarNotify from './SnackbarNotify';
|
|
4
|
+
import BSTextInput from './BottomSheetNotify/ui/BSTextInput';
|
|
5
|
+
import * as useNotifyProvider from '../model/useNotifyProvider';
|
|
6
|
+
import { useNotify } from '../model/useNotify';
|
|
7
|
+
import PopOverButton from './PopOver/PopOverButton';
|
|
8
|
+
import PopOverMenu from './PopOver/PopOverMenu';
|
|
9
|
+
import * as types from '../model/types';
|
|
10
|
+
export { AlertNotify, BottomSheetNotify, SnackbarNotify, useNotifyProvider, useNotify, BSTextInput, PopOverButton, PopOverMenu, types, };
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/notify/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,GACN,CAAA","sourcesContent":["import AlertNotify from './AlertNotify';\nimport BottomSheetNotify from './BottomSheetNotify';\nimport SnackbarNotify from './SnackbarNotify';\nimport BSTextInput from './BottomSheetNotify/ui/BSTextInput';\nimport * as useNotifyProvider from '../model/useNotifyProvider';\nimport { useNotify } from '../model/useNotify';\nimport PopOverButton from './PopOver/PopOverButton';\nimport PopOverMenu from './PopOver/PopOverMenu';\nimport * as types from '../model/types';\n\nexport {\n AlertNotify,\n BottomSheetNotify,\n SnackbarNotify,\n useNotifyProvider,\n useNotify,\n BSTextInput,\n PopOverButton,\n PopOverMenu,\n types,\n}"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ModalBackgroundProps {
|
|
3
|
+
isCenter?: boolean;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
onPress?: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare function ModalBackground({ isCenter, children, onPress }: ModalBackgroundProps): React.JSX.Element;
|
|
8
|
+
export default ModalBackground;
|
|
9
|
+
//# sourceMappingURL=ModalBackground.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalBackground.d.ts","sourceRoot":"","sources":["../../../src/notify/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,eAAe,CAAC,EAAE,QAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,qBAkBpF;AAgBD,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { Pressable, StyleSheet } from 'react-native';
|
|
3
|
+
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
|
|
4
|
+
import { useTheme } from '../../model/useThemeProvider';
|
|
5
|
+
function ModalBackground({ isCenter = true, children, onPress }) {
|
|
6
|
+
const { palette: { modalBgColor } } = useTheme();
|
|
7
|
+
const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);
|
|
8
|
+
return (<Animated.View style={styles.modalBg} entering={FadeIn.duration(50)} exiting={FadeOut.duration(50)}>
|
|
9
|
+
<Pressable style={[styles.fullScreen, isCenter && { justifyContent: 'center', alignItems: 'center' }]} onPress={onPress ?? (() => { })}>
|
|
10
|
+
{children}
|
|
11
|
+
</Pressable>
|
|
12
|
+
</Animated.View>);
|
|
13
|
+
}
|
|
14
|
+
// 스타일을 생성하는 함수, 모달 배경 색상 인자로 받음
|
|
15
|
+
const createStyles = (modalBgColor) => StyleSheet.create({
|
|
16
|
+
modalBg: {
|
|
17
|
+
zIndex: 9997,
|
|
18
|
+
backgroundColor: modalBgColor,
|
|
19
|
+
...StyleSheet.absoluteFillObject,
|
|
20
|
+
},
|
|
21
|
+
// 화면 전체를 덮는 Pressable 스타일 추가
|
|
22
|
+
fullScreen: {
|
|
23
|
+
...StyleSheet.absoluteFillObject,
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
export default ModalBackground;
|
|
27
|
+
//# sourceMappingURL=ModalBackground.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/notify/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,SAAS,eAAe,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAwB;IACnF,MAAM,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAE9B;MAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAC3F,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAEhC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,gCAAgC;AAChC,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,kBAAkB;KACjC;IACD,6BAA6B;IAC7B,UAAU,EAAE;QACV,GAAG,UAAU,CAAC,kBAAkB;KACjC;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\nimport { useTheme } from '../../model/useThemeProvider';\n\ninterface ModalBackgroundProps {\n isCenter?: boolean;\n children: React.ReactNode;\n onPress?: () => void;\n}\n\nfunction ModalBackground({ isCenter = true, children, onPress }: ModalBackgroundProps) {\n const { palette: { modalBgColor } } = useTheme();\n const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n return (\n <Animated.View\n style={styles.modalBg}\n entering={FadeIn.duration(50)}\n exiting={FadeOut.duration(50)}\n >\n <Pressable\n style={[styles.fullScreen, isCenter && { justifyContent: 'center', alignItems: 'center' }]}\n onPress={onPress ?? (() => { })}\n >\n {children}\n </Pressable>\n </Animated.View>\n );\n}\n\n// 스타일을 생성하는 함수, 모달 배경 색상 인자로 받음\nconst createStyles = (modalBgColor: string) =>\n StyleSheet.create({\n modalBg: {\n zIndex: 9997,\n backgroundColor: modalBgColor,\n ...StyleSheet.absoluteFillObject,\n },\n // 화면 전체를 덮는 Pressable 스타일 추가\n fullScreen: {\n ...StyleSheet.absoluteFillObject,\n },\n });\n\nexport default ModalBackground;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC","sourcesContent":["export * from './palette';\nexport * from './types';\nexport * from './typography';"]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Theme } from "./types";
|
|
2
|
+
export declare const transparency: {
|
|
3
|
+
'0%': string;
|
|
4
|
+
'2%': string;
|
|
5
|
+
'4%': string;
|
|
6
|
+
'6%': string;
|
|
7
|
+
'8%': string;
|
|
8
|
+
'10%': string;
|
|
9
|
+
'12%': string;
|
|
10
|
+
'14%': string;
|
|
11
|
+
'16%': string;
|
|
12
|
+
'18%': string;
|
|
13
|
+
'20%': string;
|
|
14
|
+
'22%': string;
|
|
15
|
+
'24%': string;
|
|
16
|
+
'26%': string;
|
|
17
|
+
'28%': string;
|
|
18
|
+
'30%': string;
|
|
19
|
+
'32%': string;
|
|
20
|
+
'34%': string;
|
|
21
|
+
'36%': string;
|
|
22
|
+
'38%': string;
|
|
23
|
+
'40%': string;
|
|
24
|
+
'42%': string;
|
|
25
|
+
'44%': string;
|
|
26
|
+
'46%': string;
|
|
27
|
+
'48%': string;
|
|
28
|
+
'50%': string;
|
|
29
|
+
'52%': string;
|
|
30
|
+
'54%': string;
|
|
31
|
+
'56%': string;
|
|
32
|
+
'58%': string;
|
|
33
|
+
'60%': string;
|
|
34
|
+
'62%': string;
|
|
35
|
+
'64%': string;
|
|
36
|
+
'66%': string;
|
|
37
|
+
'68%': string;
|
|
38
|
+
'70%': string;
|
|
39
|
+
'72%': string;
|
|
40
|
+
'74%': string;
|
|
41
|
+
'76%': string;
|
|
42
|
+
'78%': string;
|
|
43
|
+
'80%': string;
|
|
44
|
+
'82%': string;
|
|
45
|
+
'84%': string;
|
|
46
|
+
'86%': string;
|
|
47
|
+
'88%': string;
|
|
48
|
+
'90%': string;
|
|
49
|
+
'92%': string;
|
|
50
|
+
'94%': string;
|
|
51
|
+
'96%': string;
|
|
52
|
+
'98%': string;
|
|
53
|
+
'100%': string;
|
|
54
|
+
};
|
|
55
|
+
export default function palette({ mode, themeColors, }?: {
|
|
56
|
+
mode?: 'light' | 'dark';
|
|
57
|
+
themeColors?: {
|
|
58
|
+
light?: Theme;
|
|
59
|
+
dark?: Theme;
|
|
60
|
+
};
|
|
61
|
+
}): Theme;
|
|
62
|
+
//# sourceMappingURL=palette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC;AAgSF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAc,EACd,WAAgB,GACjB,GAAE;IACD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC;CAC1C,GAAG,KAAK,CAyBb"}
|