@0610studio/zs-ui 0.12.2 → 0.12.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.
- package/android/build/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties +1 -1
- package/android/build/intermediates/incremental/debug/packageDebugResources/merger.xml +1 -1
- package/android/build/intermediates/incremental/mergeDebugJniLibFolders/merger.xml +1 -1
- package/android/build/intermediates/incremental/mergeDebugShaders/merger.xml +1 -1
- package/android/build/intermediates/incremental/packageDebugAssets/merger.xml +1 -1
- package/android/build/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab +0 -0
- package/android/build/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.keystream +0 -0
- package/android/build/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.values.at +0 -0
- package/android/build/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab_i +0 -0
- package/android/build/kotlin/compileDebugKotlin/cacheable/last-build.bin +0 -0
- package/android/build/outputs/logs/manifest-merger-debug-report.txt +8 -8
- package/build/{model/useOverlayProvider.d.ts → context/OverlayContext.d.ts} +2 -2
- package/build/context/OverlayContext.d.ts.map +1 -0
- package/build/{model/useOverlayProvider.js → context/OverlayContext.js} +3 -3
- package/build/context/OverlayContext.js.map +1 -0
- package/build/{model/useThemeProvider.d.ts → context/ThemeContext.d.ts} +1 -13
- package/build/context/ThemeContext.d.ts.map +1 -0
- package/build/{model/useThemeProvider.js → context/ThemeContext.js} +3 -16
- package/build/context/ThemeContext.js.map +1 -0
- package/build/index.d.ts +9 -7
- package/build/index.d.ts.map +1 -1
- package/build/index.js +6 -4
- package/build/index.js.map +1 -1
- package/build/model/index.d.ts +1 -3
- package/build/model/index.d.ts.map +1 -1
- package/build/model/index.js +1 -3
- package/build/model/index.js.map +1 -1
- package/build/model/useKeyboard.d.ts +1 -5
- package/build/model/useKeyboard.d.ts.map +1 -1
- package/build/model/useKeyboard.js.map +1 -1
- package/build/model/useStyleSheetCreate.js +1 -1
- package/build/model/useStyleSheetCreate.js.map +1 -1
- package/build/overlay/AlertOverlay/index.d.ts.map +1 -1
- package/build/overlay/AlertOverlay/index.js +4 -3
- package/build/overlay/AlertOverlay/index.js.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.js +16 -13
- package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
- package/build/overlay/LoadingNotify/index.js +1 -1
- package/build/overlay/LoadingNotify/index.js.map +1 -1
- package/build/overlay/Modality/index.d.ts.map +1 -1
- package/build/overlay/Modality/index.js +4 -3
- package/build/overlay/Modality/index.js.map +1 -1
- package/build/overlay/PopOver/PopOverMenu.d.ts.map +1 -1
- package/build/overlay/PopOver/PopOverMenu.js +4 -3
- package/build/overlay/PopOver/PopOverMenu.js.map +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map +1 -1
- package/build/overlay/index.d.ts +1 -2
- package/build/overlay/index.d.ts.map +1 -1
- package/build/overlay/index.js +1 -2
- package/build/overlay/index.js.map +1 -1
- package/build/theme/elevation.d.ts +1 -1
- package/build/theme/elevation.d.ts.map +1 -1
- package/build/theme/elevation.js.map +1 -1
- package/build/theme/palette.d.ts.map +1 -1
- package/build/theme/palette.js +0 -78
- package/build/theme/palette.js.map +1 -1
- package/build/theme/types.d.ts +9 -16
- package/build/theme/types.d.ts.map +1 -1
- package/build/theme/types.js.map +1 -1
- package/build/ui/ZSContainer/index.d.ts.map +1 -1
- package/build/ui/ZSContainer/index.js +4 -3
- package/build/ui/ZSContainer/index.js.map +1 -1
- package/build/ui/ZSPressable/index.d.ts +1 -2
- package/build/ui/ZSPressable/index.d.ts.map +1 -1
- package/build/ui/ZSPressable/index.js.map +1 -1
- package/build/ui/ZSRadioGroup/index.js +1 -1
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/build/ui/ZSText/index.js +1 -1
- package/build/ui/ZSText/index.js.map +1 -1
- package/build/ui/ZSTextField/index.d.ts +1 -1
- package/build/ui/ZSTextField/index.d.ts.map +1 -1
- package/build/ui/ZSTextField/index.js +1 -1
- package/build/ui/ZSTextField/index.js.map +1 -1
- package/build/ui/ZSView/index.d.ts +1 -2
- package/build/ui/ZSView/index.d.ts.map +1 -1
- package/build/ui/ZSView/index.js +1 -1
- package/build/ui/ZSView/index.js.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.d.ts +1 -1
- package/build/ui/atoms/AnimatedWrapper.d.ts.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.js +1 -1
- package/build/ui/atoms/AnimatedWrapper.js.map +1 -1
- package/build/ui/types.d.ts +0 -9
- package/build/ui/types.d.ts.map +1 -1
- package/build/ui/types.js.map +1 -1
- package/package.json +5 -1
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/results.bin +0 -1
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/BuildConfig.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/DimensionsHelper.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/FoldingStateResult.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule$definition$1$2$1.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule$definition$lambda$2$$inlined$AsyncFunctionWithoutArgs$1.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule$definition$lambda$2$$inlined$View$1.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule$definition$lambda$2$lambda$1$$inlined$Prop$1.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule$getCurrentFoldingState$layoutInfo$1.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiModule.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/bundleLibRuntimeToDirDebug_dex/kr/co/studio0610/zsui/ZsUiView.dex +0 -0
- package/android/build/.transforms/72fe95eacb1b8a3c1a46f43e324e9fdd/transformed/bundleLibRuntimeToDirDebug/desugar_graph.bin +0 -0
- package/android/build/.transforms/f9f5d8b7acc46fb51e4010de68729346/results.bin +0 -1
- package/android/build/.transforms/f9f5d8b7acc46fb51e4010de68729346/transformed/classes/classes_dex/classes.dex +0 -0
- package/build/model/useOverlayProvider.d.ts.map +0 -1
- package/build/model/useOverlayProvider.js.map +0 -1
- package/build/model/useThemeProvider.d.ts.map +0 -1
- package/build/model/useThemeProvider.js.map +0 -1
- package/build/theme/index.d.ts +0 -5
- package/build/theme/index.d.ts.map +0 -1
- package/build/theme/index.js +0 -5
- package/build/theme/index.js.map +0 -1
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import React, { useEffect, useState, useCallback, useMemo } from 'react';
|
|
2
|
-
import { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';
|
|
2
|
+
import { StyleSheet, View, PanResponder, Keyboard, Platform, Dimensions } from 'react-native';
|
|
3
3
|
import { useBottomSheet } from '../../model/useOverlay';
|
|
4
4
|
import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
|
|
5
5
|
import ModalBackground from '../ui/ModalBackground';
|
|
6
|
-
import { useTheme } from '../../
|
|
6
|
+
import { useTheme } from '../../context/ThemeContext';
|
|
7
7
|
import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
|
|
8
8
|
import { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
|
|
9
9
|
import useKeyboard from '../../model/useKeyboard';
|
|
10
10
|
import useFoldingState from '../../model/useFoldingState';
|
|
11
|
+
const windowHeight = Dimensions.get('window').height;
|
|
11
12
|
const IS_IOS = Platform.OS === 'ios';
|
|
12
13
|
const ANIMATION_CONFIG = {
|
|
13
14
|
keyboard: {
|
|
14
|
-
show: { duration:
|
|
15
|
-
hide: { duration:
|
|
15
|
+
show: { duration: 250 },
|
|
16
|
+
hide: { duration: 150 },
|
|
16
17
|
},
|
|
17
18
|
spring: {
|
|
18
19
|
damping: 50,
|
|
@@ -40,9 +41,9 @@ const GESTURE_CONSTANTS = {
|
|
|
40
41
|
function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
|
|
41
42
|
const { foldableSingleScreen = false, isBackgroundTouchClose = true, marginHorizontal = 10, marginBottom = 10, padding = 14, } = options;
|
|
42
43
|
const { width: windowWidth } = useFoldingState();
|
|
43
|
-
const { palette
|
|
44
|
+
const { palette } = useTheme();
|
|
44
45
|
const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();
|
|
45
|
-
const { bottom } = useSafeAreaInsets();
|
|
46
|
+
const { bottom: bottomInsets } = useSafeAreaInsets();
|
|
46
47
|
// 화면의 크기보다 높이가 높으면 화면의 크기로 제한
|
|
47
48
|
const maxHeight = useMemo(() => Math.min(windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0), height), [windowHeight, height]);
|
|
48
49
|
const translateY = useSharedValue(0);
|
|
@@ -52,17 +53,19 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
|
|
|
52
53
|
const startY = useSharedValue(0);
|
|
53
54
|
const isGesturing = useSharedValue(false);
|
|
54
55
|
const [localVisible, setLocalVisible] = useState(false);
|
|
55
|
-
const handleKeyboardShow = (event) => {
|
|
56
|
+
const handleKeyboardShow = useCallback((event) => {
|
|
57
|
+
'worklet';
|
|
56
58
|
if (!isGesturing.value) {
|
|
57
|
-
const targetY =
|
|
59
|
+
const targetY = -event.endCoordinates.height + (IS_IOS ? bottomInsets : 0);
|
|
58
60
|
translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);
|
|
59
61
|
}
|
|
60
|
-
};
|
|
61
|
-
const handleKeyboardHide = () => {
|
|
62
|
+
}, []);
|
|
63
|
+
const handleKeyboardHide = useCallback(() => {
|
|
64
|
+
'worklet';
|
|
62
65
|
if (!isGesturing.value) {
|
|
63
66
|
translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);
|
|
64
67
|
}
|
|
65
|
-
};
|
|
68
|
+
}, []);
|
|
66
69
|
useKeyboard({
|
|
67
70
|
handleKeyboardShow,
|
|
68
71
|
handleKeyboardHide,
|
|
@@ -150,7 +153,7 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
|
|
|
150
153
|
maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',
|
|
151
154
|
height: maxHeight,
|
|
152
155
|
marginHorizontal,
|
|
153
|
-
bottom: marginBottom +
|
|
156
|
+
bottom: marginBottom + bottomInsets,
|
|
154
157
|
backgroundColor: palette.background.base,
|
|
155
158
|
},
|
|
156
159
|
animatedStyles,
|
|
@@ -165,7 +168,7 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
|
|
|
165
168
|
];
|
|
166
169
|
const gestureBarStyle = [
|
|
167
170
|
styles.gestureBar,
|
|
168
|
-
{ backgroundColor: palette.
|
|
171
|
+
{ backgroundColor: palette.grey[60] }
|
|
169
172
|
];
|
|
170
173
|
if (!localVisible) {
|
|
171
174
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,QAAQ,EAAE,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7G,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEzF,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAE1D,MAAM,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AAErC,MAAM,gBAAgB,GAAG;IACvB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE;QACtC,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE;KACvC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,GAAG;QACd,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,GAAG;QACb,yBAAyB,EAAE,GAAG;KAC/B;IACD,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;IACxB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;IACxB,YAAY,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,GAAG;KACf;CACO,CAAC;AAEX,MAAM,iBAAiB,GAAG;IACxB,WAAW,EAAE,KAAK;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,EAAE;IACrB,mBAAmB,EAAE,GAAG;IACxB,sBAAsB,EAAE,GAAG;IAC3B,kBAAkB,EAAE,CAAC,GAAG,CAAC;IACzB,SAAS,EAAE,GAAG;CACN,CAAC;AAEX,SAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAO,GAAG,EAAE,GACS;IACrB,MAAM,EACJ,oBAAoB,GAAG,KAAK,EAC5B,sBAAsB,GAAG,IAAI,EAC7B,gBAAgB,GAAG,EAAE,EACrB,YAAY,GAAG,EAAE,EACjB,OAAO,GAAG,EAAE,GACb,GAAG,OAAO,CAAC;IACZ,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IACjD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrE,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/E,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEvC,+BAA+B;IAC/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAC7B,IAAI,CAAC,GAAG,CACN,YAAY,GAAG,EAAE,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EACxG,MAAM,CACP,EACD,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAC;IAEF,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,CAAC,KAAU,EAAE,EAAE;QACxC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACvB,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACnE,CAAC;IACH,CAAC,CAAC;IAEF,WAAW,CAAC;QACV,kBAAkB;QAClB,kBAAkB;KACnB,CAAC,CAAC;IAEH,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,EAAE,CAAC;YACvB,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC5D,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,GAAG,GAAG,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACvE,UAAU,CAAC,GAAG,EAAE;gBACd,eAAe,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAG,gBAAgB,CAAC,GAAG,EAAE;QAC3C,SAAS,CAAC;QACV,OAAO;YACL,SAAS,EAAE;gBACT,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE;gBAChC,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE;gBAChC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;aACvB;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,eAAe,EAAE,CAAC;QAClB,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,iBAAiB,CAAC,WAAW,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAClF,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAElF,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE;QAC7D,MAAM,aAAa,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,EAAE,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC;QAC7F,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC;QAEjC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,EAAE,CAAC;QACrD,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACtB,UAAU,CAAC,KAAK,GAAG,aAAa,GAAG,iBAAiB,CAAC,iBAAiB,CAAC;QACzE,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,KAAK,GAAG,aAAa,GAAG,iBAAiB,CAAC,mBAAmB,CAAC;QAC3E,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7C,MAAM,yBAAyB,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE;QAChE,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;QAC1B,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEpD,4CAA4C;QAC5C,MAAM,WAAW,GAAG,YAAY,CAAC,EAAE,GAAG,iBAAiB,CAAC,sBAAsB;YAC5D,UAAU,CAAC,KAAK,GAAG,SAAS,GAAG,iBAAiB,CAAC,kBAAkB,CAAC;QAEtF,IAAI,WAAW,EAAE,CAAC;YAChB,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,SAAS,GAAG,GAAG,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACvE,gBAAgB,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;QAED,cAAc;QACd,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC;QACxB,4BAA4B,EAAE,GAAG,EAAE,CAAC,IAAI;QACxC,2BAA2B,EAAE,GAAG,EAAE,CAAC,IAAI;QACvC,mBAAmB,EAAE,uBAAuB;QAC5C,kBAAkB,EAAE,sBAAsB;QAC1C,qBAAqB,EAAE,yBAAyB;KACjD,CAAC,EACF,CAAC,uBAAuB,EAAE,sBAAsB,EAAE,yBAAyB,CAAC,CAC7E,CAAC;IAEF,YAAY;IACZ,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,sBAAsB;YAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC3D,CAAC,EAAE,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG;QACrB,MAAM,CAAC,SAAS;QAChB;YACE,KAAK,EAAE,WAAW,GAAG,gBAAgB,GAAG,CAAC;YACzC,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAe;YAC5E,MAAM,EAAE,SAAS;YACjB,gBAAgB;YAChB,MAAM,EAAE,YAAY,GAAG,MAAM;YAC7B,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI;SACzC;QACD,cAAc;KACf,CAAC;IAEF,MAAM,kBAAkB,GAAG;QACzB,MAAM,CAAC,aAAa;QACpB,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE;KACvD,CAAC;IAEF,MAAM,wBAAwB,GAAG;QAC/B,MAAM,CAAC,mBAAmB;QAC1B,EAAE,aAAa,EAAE,OAAO,EAAE;KAC3B,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,MAAM,CAAC,UAAU;QACjB,EAAE,eAAe,EAAE,OAAO,CAAC,OAAO,EAAE;KACrC,CAAC;IAEF,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CACd,MAAM,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,CACpC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAC7C,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CACnC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAE/B;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CACnC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC9B;UAAA,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,CACjC;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,CACpC;cAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,EAC/B;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,eAAe,CAClB;UAAA,EAAE,IAAI,CAEN;;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,EAAE;QAChB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,aAAa,CAAC,aAAa;KACpC;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,EAAE;QACd,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;QACT,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAC;AAEH,eAAe,kBAAkB,CAAC","sourcesContent":["import React, { useEffect, useState, useCallback, useMemo } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\n\nconst IS_IOS = Platform.OS === 'ios';\n\nconst ANIMATION_CONFIG = {\n keyboard: {\n show: { duration: IS_IOS ? 250 : 300 },\n hide: { duration: IS_IOS ? 150 : 200 },\n },\n spring: {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n },\n close: { duration: 150 },\n scale: { duration: 200 },\n scaleRestore: {\n damping: 15,\n stiffness: 300,\n },\n} as const;\n\nconst GESTURE_CONSTANTS = {\n scaleAmount: 0.985,\n horizontalDamping: 18,\n verticalUpDamping: 18,\n verticalDownDamping: 1.5,\n closeVelocityThreshold: 0.5,\n closeDistanceRatio: 1 / 3,\n hideDelay: 200,\n} as const;\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n}: ShowBottomSheetProps) {\n const {\n foldableSingleScreen = false,\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { width: windowWidth } = useFoldingState();\n const { palette, dimensions: { height: windowHeight } } = useTheme();\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n const { bottom } = useSafeAreaInsets();\n \n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 \n const maxHeight = useMemo(() => \n Math.min(\n windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0),\n height\n ),\n [windowHeight, height]\n );\n \n const translateY = useSharedValue(0);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const startX = useSharedValue(0);\n const startY = useSharedValue(0);\n const isGesturing = useSharedValue(false);\n \n const [localVisible, setLocalVisible] = useState(false);\n\n const handleKeyboardShow = (event: any) => {\n if (!isGesturing.value) {\n const targetY = IS_IOS ? (-event.endCoordinates.height + bottom) : 0;\n translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);\n }\n };\n\n const handleKeyboardHide = () => {\n if (!isGesturing.value) {\n translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);\n }\n };\n\n useKeyboard({\n handleKeyboardShow,\n handleKeyboardHide,\n });\n\n // BottomSheet 표시/숨김 애니메이션 처리\n useEffect(() => {\n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, ANIMATION_CONFIG.spring);\n } else {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n setTimeout(() => {\n setLocalVisible(false);\n }, GESTURE_CONSTANTS.hideDelay);\n }\n }, [bottomSheetVisible, translateY, maxHeight]);\n\n const animatedStyles = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n }, [translateY, translateX, scale]);\n\n const dismissKeyboard = useCallback(() => {\n Keyboard.dismiss();\n }, []);\n\n const closeBottomSheet = useCallback(() => {\n setBottomSheetVisible(false);\n }, [setBottomSheetVisible]);\n\n const handlePanResponderGrant = useCallback(() => {\n dismissKeyboard();\n isGesturing.value = true;\n startX.value = translateX.value;\n startY.value = translateY.value;\n scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);\n }, [translateX, translateY, scale, startX, startY, isGesturing, dismissKeyboard]);\n\n const handlePanResponderMove = useCallback((_, gestureState) => {\n const newTranslateX = (startX.value + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.value + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;\n } else {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;\n }\n }, [translateX, translateY, startX, startY]);\n\n const handlePanResponderRelease = useCallback((_, gestureState) => {\n isGesturing.value = false;\n translateX.value = withTiming(0, { duration: 100 });\n\n // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold || \n translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;\n \n if (shouldClose) {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n closeBottomSheet();\n } else {\n translateY.value = withTiming(0, ANIMATION_CONFIG.close);\n }\n\n // 사이즈 원래대로 복귀\n scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);\n }, [translateX, translateY, scale, maxHeight, isGesturing, closeBottomSheet]);\n\n const panResponder = useMemo(\n () => PanResponder.create({\n onStartShouldSetPanResponder: () => true,\n onMoveShouldSetPanResponder: () => true,\n onPanResponderGrant: handlePanResponderGrant,\n onPanResponderMove: handlePanResponderMove,\n onPanResponderRelease: handlePanResponderRelease,\n }),\n [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]\n );\n\n // 배경 터치 핸들러\n const handleBackgroundPress = useCallback(() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }, [isBackgroundTouchClose, setBottomSheetVisible]);\n\n const containerStyle = [\n styles.container,\n {\n width: windowWidth - marginHorizontal * 2,\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' as const,\n height: maxHeight,\n marginHorizontal,\n bottom: marginBottom + bottom,\n backgroundColor: palette.background.base,\n },\n animatedStyles,\n ];\n\n const pressableViewStyle = [\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ];\n\n const gestureBarContainerStyle = [\n styles.gestureBarContainer,\n { paddingBottom: padding }\n ];\n\n const gestureBarStyle = [\n styles.gestureBar,\n { backgroundColor: palette.divider }\n ];\n\n if (!localVisible) {\n return null;\n }\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={handleBackgroundPress}\n >\n <Animated.View style={containerStyle}>\n <View style={pressableViewStyle}>\n <View {...panResponder.panHandlers}>\n <View style={gestureBarContainerStyle}>\n <View style={gestureBarStyle} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useCallback, useMemo } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform, type KeyboardEvent, Dimensions } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../context/ThemeContext';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\n\nconst windowHeight = Dimensions.get('window').height;\n\nconst IS_IOS = Platform.OS === 'ios';\n\nconst ANIMATION_CONFIG = {\n keyboard: {\n show: { duration: 250 },\n hide: { duration: 150 },\n },\n spring: {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n },\n close: { duration: 150 },\n scale: { duration: 200 },\n scaleRestore: {\n damping: 15,\n stiffness: 300,\n },\n} as const;\n\nconst GESTURE_CONSTANTS = {\n scaleAmount: 0.985,\n horizontalDamping: 18,\n verticalUpDamping: 18,\n verticalDownDamping: 1.5,\n closeVelocityThreshold: 0.5,\n closeDistanceRatio: 1 / 3,\n hideDelay: 200,\n} as const;\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n}: ShowBottomSheetProps) {\n const {\n foldableSingleScreen = false,\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { width: windowWidth } = useFoldingState();\n const { palette } = useTheme();\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n const { bottom: bottomInsets } = useSafeAreaInsets();\n\n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 \n const maxHeight = useMemo(() =>\n Math.min(\n windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0),\n height\n ),\n [windowHeight, height]\n );\n\n const translateY = useSharedValue(0);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const startX = useSharedValue(0);\n const startY = useSharedValue(0);\n const isGesturing = useSharedValue(false);\n\n const [localVisible, setLocalVisible] = useState(false);\n\n const handleKeyboardShow = useCallback((event: KeyboardEvent) => {\n 'worklet';\n if (!isGesturing.value) {\n const targetY = -event.endCoordinates.height + (IS_IOS ? bottomInsets : 0);\n translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);\n }\n }, []);\n\n const handleKeyboardHide = useCallback(() => {\n 'worklet';\n if (!isGesturing.value) {\n translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);\n }\n }, []);\n\n useKeyboard({\n handleKeyboardShow,\n handleKeyboardHide,\n });\n\n // BottomSheet 표시/숨김 애니메이션 처리\n useEffect(() => {\n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, ANIMATION_CONFIG.spring);\n } else {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n setTimeout(() => {\n setLocalVisible(false);\n }, GESTURE_CONSTANTS.hideDelay);\n }\n }, [bottomSheetVisible, translateY, maxHeight]);\n\n const animatedStyles = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n }, [translateY, translateX, scale]);\n\n const dismissKeyboard = useCallback(() => {\n Keyboard.dismiss();\n }, []);\n\n const closeBottomSheet = useCallback(() => {\n setBottomSheetVisible(false);\n }, [setBottomSheetVisible]);\n\n const handlePanResponderGrant = useCallback(() => {\n dismissKeyboard();\n isGesturing.value = true;\n startX.value = translateX.value;\n startY.value = translateY.value;\n scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);\n }, [translateX, translateY, scale, startX, startY, isGesturing, dismissKeyboard]);\n\n const handlePanResponderMove = useCallback((_, gestureState) => {\n const newTranslateX = (startX.value + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.value + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;\n } else {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;\n }\n }, [translateX, translateY, startX, startY]);\n\n const handlePanResponderRelease = useCallback((_, gestureState) => {\n isGesturing.value = false;\n translateX.value = withTiming(0, { duration: 100 });\n\n // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold ||\n translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;\n\n if (shouldClose) {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n closeBottomSheet();\n } else {\n translateY.value = withTiming(0, ANIMATION_CONFIG.close);\n }\n\n // 사이즈 원래대로 복귀\n scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);\n }, [translateX, translateY, scale, maxHeight, isGesturing, closeBottomSheet]);\n\n const panResponder = useMemo(\n () => PanResponder.create({\n onStartShouldSetPanResponder: () => true,\n onMoveShouldSetPanResponder: () => true,\n onPanResponderGrant: handlePanResponderGrant,\n onPanResponderMove: handlePanResponderMove,\n onPanResponderRelease: handlePanResponderRelease,\n }),\n [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]\n );\n\n // 배경 터치 핸들러\n const handleBackgroundPress = useCallback(() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }, [isBackgroundTouchClose, setBottomSheetVisible]);\n\n const containerStyle = [\n styles.container,\n {\n width: windowWidth - marginHorizontal * 2,\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' as const,\n height: maxHeight,\n marginHorizontal,\n bottom: marginBottom + bottomInsets,\n backgroundColor: palette.background.base,\n },\n animatedStyles,\n ];\n\n const pressableViewStyle = [\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ];\n\n const gestureBarContainerStyle = [\n styles.gestureBarContainer,\n { paddingBottom: padding }\n ];\n\n const gestureBarStyle = [\n styles.gestureBar,\n { backgroundColor: palette.grey[60] }\n ];\n\n if (!localVisible) {\n return null;\n }\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={handleBackgroundPress}\n >\n <Animated.View style={containerStyle}>\n <View style={pressableViewStyle}>\n <View {...panResponder.panHandlers}>\n <View style={gestureBarContainerStyle}>\n <View style={gestureBarStyle} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
|
|
@@ -2,7 +2,7 @@ import { ActivityIndicator } from "react-native";
|
|
|
2
2
|
import React, { useCallback } from "react";
|
|
3
3
|
import { useLoader } from "../../model/useOverlay";
|
|
4
4
|
import ModalBackground from "../ui/ModalBackground";
|
|
5
|
-
import { useTheme } from "../../
|
|
5
|
+
import { useTheme } from "../../context/ThemeContext";
|
|
6
6
|
import { Z_INDEX_VALUE } from "../../model/utils";
|
|
7
7
|
function LoadingNotify({ loaderComponent, }) {
|
|
8
8
|
const { loaderVisible } = useLoader();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,SAAS,aAAa,CAAC,EACrB,eAAe,GAGhB;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAe,EAAE,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAG,CAChD,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACL,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAChI;MAAA,CAAC,YAAY,EAAE,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import { ActivityIndicator } from \"react-native\";\nimport React, { ReactNode, useCallback } from \"react\";\nimport { useLoader } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nfunction LoadingNotify({\n loaderComponent,\n}: {\n loaderComponent?: () => ReactNode;\n}) {\n const { loaderVisible } = useLoader();\n const { palette } = useTheme();\n\n const renderLoader = useCallback(() => {\n return loaderComponent ? (\n loaderComponent()\n ) : (\n <ActivityIndicator size=\"large\" color=\"#fff\" />\n );\n }, [loaderComponent]);\n\n if (!loaderVisible) return null;\n\n return (\n <ModalBackground zIndex={Z_INDEX_VALUE.LOADING} key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor}>\n {renderLoader()}\n </ModalBackground>\n )\n}\n\nexport default LoadingNotify;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,iBAAS,QAAQ,CAAC,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,EAAE;IACD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,oBAAoB,EAAE,OAAO,CAAC;CAC/B,4BA6GA;AA6BD,eAAe,QAAQ,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import { StatusBar, StyleSheet } from 'react-native';
|
|
2
|
+
import { Dimensions, StatusBar, StyleSheet } from 'react-native';
|
|
3
3
|
import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
|
|
4
4
|
import Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { useModality } from '../../model/useOverlay';
|
|
6
|
-
import { useTheme } from '../../model';
|
|
7
6
|
import { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
|
|
8
7
|
import ZSView from '../../ui/ZSView';
|
|
8
|
+
import { useTheme } from '../../context/ThemeContext';
|
|
9
|
+
const windowHeight = Dimensions.get('window').height;
|
|
9
10
|
function Modality({ foldableSingleScreen, modalityComponent, }) {
|
|
10
|
-
const { palette
|
|
11
|
+
const { palette } = useTheme();
|
|
11
12
|
const [localVisible, setLocalVisible] = useState(false);
|
|
12
13
|
const { modalityVisible } = useModality();
|
|
13
14
|
const insets = useSafeAreaInsets();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { useTheme } from '../../model';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\n\nfunction Modality({\n foldableSingleScreen,\n modalityComponent,\n}: {\n modalityComponent: React.ReactNode;\n foldableSingleScreen: boolean;\n}) {\n const { palette, dimensions: { height: windowHeight } } = useTheme();\n const [localVisible, setLocalVisible] = useState(false);\n const { modalityVisible } = useModality();\n const insets = useSafeAreaInsets();\n const backScale = useSharedValue(1);\n const backTranslateY = useSharedValue(0);\n const backBorderRadius = useSharedValue(0);\n const mainTranslateY = useSharedValue(windowHeight);\n const backgroundOpacity = useSharedValue(1);\n const overrideMargin = 10;\n const mainScreenMargin = insets.top;\n const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n // 애니메이션 트리거\n useEffect(() => {\n if (modalityVisible) {\n // 모달이 열리는 애니메이션\n setLocalVisible(true);\n backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n backgroundOpacity.value = withTiming(1, { duration: 500 });\n } else {\n // 모달이 닫히는 애니메이션 (역순)\n backScale.value = withTiming(1, { duration: 100 });\n backTranslateY.value = withTiming(0, { duration: 100 });\n backBorderRadius.value = withTiming(0, { duration: 100 });\n mainTranslateY.value = withTiming(windowHeight, { duration: 200 });\n backgroundOpacity.value = withTiming(0, { duration: 300 });\n setTimeout(() => {\n setLocalVisible(false);\n }, 500);\n }\n }, [modalityVisible]);\n\n // 부모 스크린\n const backScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { scaleX: backScale.value },\n { translateY: backTranslateY.value }\n ],\n borderTopLeftRadius: backBorderRadius.value,\n borderTopRightRadius: backBorderRadius.value,\n };\n });\n\n // 아래에서 등장하는 Modality 화면\n const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n opacity: backgroundOpacity.value\n };\n });\n\n return (\n !localVisible ? null :\n <Animated.View\n key={localVisible ? 'visiblemd' : 'hiddenmd'}\n style={[\n styles.animatedBackground,\n { backgroundColor: palette.background.neutral },\n backgroundAnimatedStyle\n ]}\n >\n <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n <Animated.View\n exiting={FadeOut.duration(300)}\n style={[\n styles.backScreen,\n { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight, maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' },\n backScreenAnimatedStyle\n ]}\n />\n\n <Animated.View\n style={[\n {\n height: windowHeight - mainScreenMargin,\n paddingBottom: mainScrrenPadding,\n backgroundColor: palette.background.base,\n width: '100%',\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n alignSelf: 'center',\n },\n styles.mainScreen,\n mainScreenAnimatedStyle\n ]}\n >\n <ZSView style={[styles.contents, { width: '100%'}]}>\n {modalityComponent}\n </ZSView>\n </Animated.View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n contents: {\n flex: 1,\n paddingTop: 10,\n zIndex: Z_INDEX_VALUE.MODAL4,\n },\n animatedBackground: {\n ...StyleSheet.absoluteFillObject,\n zIndex: Z_INDEX_VALUE.MODAL1,\n alignSelf: 'center',\n },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'center',\n zIndex: Z_INDEX_VALUE.MODAL2,\n },\n mainScreen: {\n position: 'absolute',\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n zIndex: Z_INDEX_VALUE.MODAL3,\n overflow: 'hidden',\n },\n});\n\nexport default Modality;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions, StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\nimport { useTheme } from '../../context/ThemeContext';\n\nconst windowHeight = Dimensions.get('window').height;\n\nfunction Modality({\n foldableSingleScreen,\n modalityComponent,\n}: {\n modalityComponent: React.ReactNode;\n foldableSingleScreen: boolean;\n}) {\n const { palette } = useTheme();\n const [localVisible, setLocalVisible] = useState(false);\n const { modalityVisible } = useModality();\n const insets = useSafeAreaInsets();\n const backScale = useSharedValue(1);\n const backTranslateY = useSharedValue(0);\n const backBorderRadius = useSharedValue(0);\n const mainTranslateY = useSharedValue(windowHeight);\n const backgroundOpacity = useSharedValue(1);\n const overrideMargin = 10;\n const mainScreenMargin = insets.top;\n const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n // 애니메이션 트리거\n useEffect(() => {\n if (modalityVisible) {\n // 모달이 열리는 애니메이션\n setLocalVisible(true);\n backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n backgroundOpacity.value = withTiming(1, { duration: 500 });\n } else {\n // 모달이 닫히는 애니메이션 (역순)\n backScale.value = withTiming(1, { duration: 100 });\n backTranslateY.value = withTiming(0, { duration: 100 });\n backBorderRadius.value = withTiming(0, { duration: 100 });\n mainTranslateY.value = withTiming(windowHeight, { duration: 200 });\n backgroundOpacity.value = withTiming(0, { duration: 300 });\n setTimeout(() => {\n setLocalVisible(false);\n }, 500);\n }\n }, [modalityVisible]);\n\n // 부모 스크린\n const backScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { scaleX: backScale.value },\n { translateY: backTranslateY.value }\n ],\n borderTopLeftRadius: backBorderRadius.value,\n borderTopRightRadius: backBorderRadius.value,\n };\n });\n\n // 아래에서 등장하는 Modality 화면\n const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n opacity: backgroundOpacity.value\n };\n });\n\n return (\n !localVisible ? null :\n <Animated.View\n key={localVisible ? 'visiblemd' : 'hiddenmd'}\n style={[\n styles.animatedBackground,\n { backgroundColor: palette.background.neutral },\n backgroundAnimatedStyle\n ]}\n >\n <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n <Animated.View\n exiting={FadeOut.duration(300)}\n style={[\n styles.backScreen,\n { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight, maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' },\n backScreenAnimatedStyle\n ]}\n />\n\n <Animated.View\n style={[\n {\n height: windowHeight - mainScreenMargin,\n paddingBottom: mainScrrenPadding,\n backgroundColor: palette.background.base,\n width: '100%',\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n alignSelf: 'center',\n },\n styles.mainScreen,\n mainScreenAnimatedStyle\n ]}\n >\n <ZSView style={[styles.contents, { width: '100%'}]}>\n {modalityComponent}\n </ZSView>\n </Animated.View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n contents: {\n flex: 1,\n paddingTop: 10,\n zIndex: Z_INDEX_VALUE.MODAL4,\n },\n animatedBackground: {\n ...StyleSheet.absoluteFillObject,\n zIndex: Z_INDEX_VALUE.MODAL1,\n alignSelf: 'center',\n },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'center',\n zIndex: Z_INDEX_VALUE.MODAL2,\n },\n mainScreen: {\n position: 'absolute',\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n zIndex: Z_INDEX_VALUE.MODAL3,\n overflow: 'hidden',\n },\n});\n\nexport default Modality;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAOrD,iBAAS,WAAW,CAAC,EACnB,EAAE,EACF,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAuFvC;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
import { Pressable } from "react-native";
|
|
2
|
+
import { Dimensions, Pressable } from "react-native";
|
|
3
3
|
import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
|
|
4
4
|
import { usePopOver } from "../../model/useOverlay";
|
|
5
5
|
import ModalBackground from "../ui/ModalBackground";
|
|
6
|
-
import { useTheme } from "../../
|
|
6
|
+
import { useTheme } from "../../context/ThemeContext";
|
|
7
7
|
import { Z_INDEX_VALUE } from "../../model/utils";
|
|
8
8
|
const MINIMUM_OFFSET = 10;
|
|
9
|
+
const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
|
|
9
10
|
function PopOverMenu({ px, py, component }) {
|
|
10
|
-
const { palette
|
|
11
|
+
const { palette } = useTheme();
|
|
11
12
|
const [isContentVisible, setIsContentVisible] = useState(false);
|
|
12
13
|
const [contentWidth, setContentWidth] = useState(0);
|
|
13
14
|
const [contentHeight, setContentHeight] = useState(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAqB,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { usePopOver } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nconst MINIMUM_OFFSET = 10;\nconst { width: windowWidth, height: windowHeight } = Dimensions.get('window');\n\nfunction PopOverMenu({\n px,\n py,\n component\n}: PopOverMenuProps): JSX.Element | null {\n const { palette } = useTheme();\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 } = usePopOver();\n const timerRef = useRef<number | null>(null);\n\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 const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n setContentWidth(event.nativeEvent.layout.width || 0);\n setContentHeight(event.nativeEvent.layout.height || 0);\n }, []);\n\n // 화면 경계를 벗어나는지 확인하고 위치 조정\n const getAdjustedPosition = () => {\n let adjustedX = px - contentWidth;\n let adjustedY = py;\n\n // 수평 방향 조정\n if (adjustedX > windowWidth) {\n adjustedX = windowWidth - MINIMUM_OFFSET;\n }\n if (adjustedX < 0) {\n adjustedX = MINIMUM_OFFSET;\n }\n\n // 수직 방향 조정\n if (py + contentHeight > windowHeight) {\n adjustedY = py - (contentHeight * 1.5); // 위쪽으로 표시\n }\n if (adjustedY < 0) {\n adjustedY = MINIMUM_OFFSET;\n }\n\n return { adjustedX, adjustedY };\n };\n\n if (!popOverVisible) return null;\n\n const { adjustedX, adjustedY } = getAdjustedPosition();\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.POPOVER}\n key={popOverVisible ? 'visiblepo' : 'hiddenpo'}\n modalBgColor={palette.modalBgColor}\n position='pop'\n onPress={() => setPopOverVisible(false)}\n >\n {isContentVisible && (\n <Animated.View\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <Pressable\n style={{\n position: 'absolute',\n left: adjustedX,\n top: adjustedY,\n }}\n onLayout={handleLayout}\n >\n {component}\n </Pressable>\n </Animated.View>\n )}\n </ModalBackground>\n );\n}\n\nexport default PopOverMenu;"]}
|
|
@@ -2,7 +2,7 @@ import React, { useEffect, useCallback } from "react";
|
|
|
2
2
|
import { StyleSheet, TouchableOpacity } from "react-native";
|
|
3
3
|
import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
|
|
4
4
|
import ViewAtom from "../../../ui/atoms/ViewAtom";
|
|
5
|
-
import { useTheme } from "../../../
|
|
5
|
+
import { useTheme } from "../../../context/ThemeContext";
|
|
6
6
|
import ZSText from "../../../ui/ZSText";
|
|
7
7
|
const Snackbar = ({ customSnackbar, snackItem, hideSnackBar, }) => {
|
|
8
8
|
const { type, message, snackbarDuration } = snackItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { 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 { useTheme } from \"../../../context/ThemeContext\";\nimport ZSText from \"../../../ui/ZSText\";\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 return () => clearTimeout(closeTimeout);\n }, []);\n\n return (\n <Animated.View\n style={[styles.snackbarWrapper]}\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <TouchableOpacity\n style={[styles.container]}\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 width: \"100%\",\n },\n snackbarWrapper: {\n width: \"96%\",\n marginTop: 8,\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"]}
|
package/build/overlay/index.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import AlertOverlay from './AlertOverlay';
|
|
2
2
|
import BottomSheetOverlay from './BottomSheetOverlay';
|
|
3
3
|
import SnackbarNotify from './SnackbarNotify';
|
|
4
|
-
import * as useOverlayProvider from '../model/useOverlayProvider';
|
|
5
4
|
import { useOverlay } from '../model/useOverlay';
|
|
6
5
|
import PopOverButton from './PopOver/PopOverButton';
|
|
7
6
|
import PopOverMenu from './PopOver/PopOverMenu';
|
|
8
7
|
import { ZSPortal } from './ZSPortal';
|
|
9
8
|
import * as types from '../model/types';
|
|
10
|
-
export { AlertOverlay, BottomSheetOverlay, SnackbarNotify,
|
|
9
|
+
export { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal, types, };
|
|
11
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ,EACR,KAAK,GACN,CAAA"}
|
package/build/overlay/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import AlertOverlay from './AlertOverlay';
|
|
2
2
|
import BottomSheetOverlay from './BottomSheetOverlay';
|
|
3
3
|
import SnackbarNotify from './SnackbarNotify';
|
|
4
|
-
import * as useOverlayProvider from '../model/useOverlayProvider';
|
|
5
4
|
import { useOverlay } from '../model/useOverlay';
|
|
6
5
|
import PopOverButton from './PopOver/PopOverButton';
|
|
7
6
|
import PopOverMenu from './PopOver/PopOverMenu';
|
|
8
7
|
import { ZSPortal } from './ZSPortal';
|
|
9
8
|
import * as types from '../model/types';
|
|
10
|
-
export { AlertOverlay, BottomSheetOverlay, SnackbarNotify,
|
|
9
|
+
export { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlay, PopOverButton, PopOverMenu, ZSPortal, types, };
|
|
11
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,QAAQ,EACR,KAAK,GACN,CAAA","sourcesContent":["import AlertOverlay from './AlertOverlay';\nimport BottomSheetOverlay from './BottomSheetOverlay';\nimport SnackbarNotify from './SnackbarNotify';\nimport { useOverlay } from '../model/useOverlay';\nimport PopOverButton from './PopOver/PopOverButton';\nimport PopOverMenu from './PopOver/PopOverMenu';\nimport { ZSPortal } from './ZSPortal';\nimport * as types from '../model/types';\n\nexport {\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n ZSPortal,\n types,\n}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,UAAU,EAAE,SAAS,WAAW,EAYnC,CAAC;AAEX,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,WAAW,GAAG,cAAc;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,OAAO,EAAE,KAAK,GAAG,eAAe,CAkCjE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform } from \"react-native\";\nimport { ShadowLevel, ShadowStyle } from \"
|
|
1
|
+
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform } from \"react-native\";\nimport { ShadowLevel, ShadowStyle } from \"./types\";\nimport { Theme } from \"./types\";\n\nexport const IOS_SHADOW: readonly ShadowStyle[] = [\n { shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.0 },\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41 },\n { shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2.22 },\n { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2.62 },\n { shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3.84 },\n { shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.25, shadowRadius: 4.65 },\n { shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },\n { shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },\n] as const;\n\nexport interface ElevationProps {\n shadowColor?: string;\n shadowOffset?: { width: number; height: number };\n shadowOpacity?: number;\n shadowRadius?: number;\n elevation?: number;\n}\n\nexport type ElevationStyles = {\n [key in ShadowLevel]: ElevationProps;\n};\n\nexport default function elevation(palette: Theme): ElevationStyles {\n\n return {\n 0: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[0], shadowColor: palette.elevationShadow[0] }\n : { elevation: 0, shadowColor: palette.elevationShadow[0] },\n 1: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[1], shadowColor: palette.elevationShadow[1] }\n : { elevation: 1, shadowColor: palette.elevationShadow[1] },\n 2: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[2], shadowColor: palette.elevationShadow[2] }\n : { elevation: 2, shadowColor: palette.elevationShadow[2] },\n 3: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[3], shadowColor: palette.elevationShadow[3] }\n : { elevation: 3, shadowColor: palette.elevationShadow[3] },\n 4: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[4], shadowColor: palette.elevationShadow[4] }\n : { elevation: 4, shadowColor: palette.elevationShadow[4] },\n 5: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[5], shadowColor: palette.elevationShadow[5] }\n : { elevation: 5, shadowColor: palette.elevationShadow[5] },\n 6: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[6], shadowColor: palette.elevationShadow[6] }\n : { elevation: 6, shadowColor: palette.elevationShadow[6] },\n 7: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[7], shadowColor: palette.elevationShadow[7] }\n : { elevation: 7, shadowColor: palette.elevationShadow[7] },\n 8: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[8], shadowColor: palette.elevationShadow[8] }\n : { elevation: 8, shadowColor: palette.elevationShadow[8] },\n 9: Platform.OS === 'ios'\n ? { ...IOS_SHADOW[9], shadowColor: palette.elevationShadow[9] }\n : { elevation: 9, shadowColor: palette.elevationShadow[9] },\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC;
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC;AAsQF,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,GAAE,kBAAuB,IA0C5B,yBAG3B;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,KAAG,KAAK,CAiGf;AAED,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,CAsBb"}
|
package/build/theme/palette.js
CHANGED
|
@@ -279,26 +279,6 @@ const TEXT_COLORS = {
|
|
|
279
279
|
black: '#000000',
|
|
280
280
|
},
|
|
281
281
|
};
|
|
282
|
-
const BORDER_COLORS = {
|
|
283
|
-
light: {
|
|
284
|
-
box: LIGHT_COLORS.grey[20],
|
|
285
|
-
active: LIGHT_COLORS.primary[50],
|
|
286
|
-
base: LIGHT_COLORS.grey[60],
|
|
287
|
-
danger: LIGHT_COLORS.danger[10],
|
|
288
|
-
warning: LIGHT_COLORS.warning[10],
|
|
289
|
-
success: LIGHT_COLORS.success[10],
|
|
290
|
-
information: LIGHT_COLORS.information[10],
|
|
291
|
-
},
|
|
292
|
-
dark: {
|
|
293
|
-
box: DARK_COLORS.grey[30],
|
|
294
|
-
active: DARK_COLORS.primary[50],
|
|
295
|
-
base: DARK_COLORS.grey[60],
|
|
296
|
-
danger: DARK_COLORS.danger[70],
|
|
297
|
-
warning: DARK_COLORS.warning[70],
|
|
298
|
-
success: DARK_COLORS.success[70],
|
|
299
|
-
information: DARK_COLORS.information[70],
|
|
300
|
-
},
|
|
301
|
-
};
|
|
302
282
|
const BACKGROUND_COLORS = {
|
|
303
283
|
light: {
|
|
304
284
|
primary: LIGHT_COLORS.primary.main,
|
|
@@ -323,22 +303,6 @@ const BACKGROUND_COLORS = {
|
|
|
323
303
|
information: DARK_COLORS.information[80],
|
|
324
304
|
},
|
|
325
305
|
};
|
|
326
|
-
const ACTION_COLORS = {
|
|
327
|
-
light: {
|
|
328
|
-
hover: LIGHT_COLORS.primary[60],
|
|
329
|
-
pressed: LIGHT_COLORS.primary[70],
|
|
330
|
-
disable: LIGHT_COLORS.grey[20],
|
|
331
|
-
},
|
|
332
|
-
dark: {
|
|
333
|
-
hover: DARK_COLORS.primary[60],
|
|
334
|
-
pressed: DARK_COLORS.primary[70],
|
|
335
|
-
disable: DARK_COLORS.grey[30],
|
|
336
|
-
},
|
|
337
|
-
};
|
|
338
|
-
const DIVIDER_COLOR = {
|
|
339
|
-
light: LIGHT_COLORS.grey[50] + transparency['20%'],
|
|
340
|
-
dark: DARK_COLORS.grey[50] + transparency['20%'],
|
|
341
|
-
};
|
|
342
306
|
/**
|
|
343
307
|
* 테마 팩토리 함수 - LIGHT_COLORS와 DARK_COLORS를 재정의할 수 있는 기능을 제공합니다.
|
|
344
308
|
* @param config - 라이트/다크 모드별로 색상을 재정의할 수 있는 설정 객체
|
|
@@ -408,26 +372,6 @@ export function themeFactory(config = {}) {
|
|
|
408
372
|
black: '#000000',
|
|
409
373
|
},
|
|
410
374
|
};
|
|
411
|
-
const customBorderColors = {
|
|
412
|
-
light: {
|
|
413
|
-
box: colors.grey[20],
|
|
414
|
-
active: colors.primary[50],
|
|
415
|
-
base: colors.grey[60],
|
|
416
|
-
danger: colors.danger[10],
|
|
417
|
-
warning: colors.warning[10],
|
|
418
|
-
success: colors.success[10],
|
|
419
|
-
information: colors.information[10],
|
|
420
|
-
},
|
|
421
|
-
dark: {
|
|
422
|
-
box: colors.grey[30],
|
|
423
|
-
active: colors.primary[50],
|
|
424
|
-
base: colors.grey[60],
|
|
425
|
-
danger: colors.danger[70],
|
|
426
|
-
warning: colors.warning[70],
|
|
427
|
-
success: colors.success[70],
|
|
428
|
-
information: colors.information[70],
|
|
429
|
-
},
|
|
430
|
-
};
|
|
431
375
|
const customBackgroundColors = {
|
|
432
376
|
light: {
|
|
433
377
|
primary: colors.primary.main,
|
|
@@ -452,22 +396,6 @@ export function themeFactory(config = {}) {
|
|
|
452
396
|
information: colors.information[80],
|
|
453
397
|
},
|
|
454
398
|
};
|
|
455
|
-
const customActionColors = {
|
|
456
|
-
light: {
|
|
457
|
-
hover: colors.primary[60],
|
|
458
|
-
pressed: colors.primary[70],
|
|
459
|
-
disable: colors.grey[20],
|
|
460
|
-
},
|
|
461
|
-
dark: {
|
|
462
|
-
hover: colors.primary[60],
|
|
463
|
-
pressed: colors.primary[70],
|
|
464
|
-
disable: colors.grey[30],
|
|
465
|
-
},
|
|
466
|
-
};
|
|
467
|
-
const customDividerColor = {
|
|
468
|
-
light: colors.grey[50] + transparency['20%'],
|
|
469
|
-
dark: colors.grey[50] + transparency['20%'],
|
|
470
|
-
};
|
|
471
399
|
const customMainColors = {
|
|
472
400
|
light: {
|
|
473
401
|
primary: colors.primary.main,
|
|
@@ -492,10 +420,7 @@ export function themeFactory(config = {}) {
|
|
|
492
420
|
mode,
|
|
493
421
|
...colors,
|
|
494
422
|
text: customTextColors[mode],
|
|
495
|
-
border: customBorderColors[mode],
|
|
496
423
|
background: customBackgroundColors[mode],
|
|
497
|
-
action: customActionColors[mode],
|
|
498
|
-
divider: customDividerColor[mode],
|
|
499
424
|
elevationShadow: SHADOW_COLORS[mode],
|
|
500
425
|
modalBgColor: MODAL_BG_COLOR[mode],
|
|
501
426
|
mainColor: customMainColors[mode]
|
|
@@ -516,10 +441,7 @@ export default function palette({ mode = 'light', themeColors = {}, } = {}) {
|
|
|
516
441
|
mode,
|
|
517
442
|
...colors,
|
|
518
443
|
text: TEXT_COLORS[mode],
|
|
519
|
-
border: BORDER_COLORS[mode],
|
|
520
444
|
background: BACKGROUND_COLORS[mode],
|
|
521
|
-
action: ACTION_COLORS[mode],
|
|
522
|
-
divider: DIVIDER_COLOR[mode],
|
|
523
445
|
elevationShadow: SHADOW_COLORS[mode],
|
|
524
446
|
modalBgColor: MODAL_BG_COLOR[mode],
|
|
525
447
|
mainColor: MAIN_COLORS[mode]
|