@0610studio/zs-ui 0.0.26 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/model/useThemeProvider.d.ts +3 -0
- package/build/model/useThemeProvider.d.ts.map +1 -1
- package/build/model/useThemeProvider.js +2 -0
- package/build/model/useThemeProvider.js.map +1 -1
- package/build/theme/elevation.d.ts +14 -0
- package/build/theme/elevation.d.ts.map +1 -0
- package/build/theme/elevation.js +32 -0
- package/build/theme/elevation.js.map +1 -0
- package/build/theme/index.d.ts +1 -0
- package/build/theme/index.d.ts.map +1 -1
- package/build/theme/index.js +1 -0
- package/build/theme/index.js.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.d.ts.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.js +1 -13
- package/build/ui/atoms/AnimatedWrapper.js.map +1 -1
- package/package.json +2 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
|
|
3
|
+
import { ElevationProps } from '../theme/elevation';
|
|
4
|
+
import { ShadowLevel } from '../ui/types';
|
|
3
5
|
export interface ThemeProviderProps {
|
|
4
6
|
themeFonts?: ThemeFonts;
|
|
5
7
|
children: React.ReactNode;
|
|
@@ -7,6 +9,7 @@ export interface ThemeProviderProps {
|
|
|
7
9
|
export interface ThemeProps {
|
|
8
10
|
palette: Palette;
|
|
9
11
|
typography: TypographyVariantsProps;
|
|
12
|
+
elevation: (elevationLevel: ShadowLevel) => ElevationProps;
|
|
10
13
|
}
|
|
11
14
|
export interface Palette extends Theme {
|
|
12
15
|
mode: 'light' | 'dark';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeProvider.d.ts","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAkB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;IACpC,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,cAAc,CAAC;CAC9D;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IAClC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AAID,eAAO,MAAM,QAAQ,kBAMpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiEtD,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { useColorScheme } from 'react-native';
|
|
|
3
3
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
4
4
|
import palette from '../theme/palette';
|
|
5
5
|
import typography from '../theme/typography';
|
|
6
|
+
import elevation from '../theme/elevation';
|
|
6
7
|
const ThemeContext = createContext(null);
|
|
7
8
|
export const useTheme = () => {
|
|
8
9
|
const context = useContext(ThemeContext);
|
|
@@ -65,6 +66,7 @@ export const ThemeProvider = ({ themeFonts, children }) => {
|
|
|
65
66
|
...palette({ mode }), // 선택된 모드에 따른 팔레트 적용
|
|
66
67
|
},
|
|
67
68
|
typography: typography({ themeFonts }),
|
|
69
|
+
elevation
|
|
68
70
|
}), [mode, isUsingSystemColorScheme, typography, themeFonts]);
|
|
69
71
|
return (<ThemeContext.Provider value={themeValue}>
|
|
70
72
|
{children}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,YAAY,MAAM,2CAA2C,CAAC;AACrE,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC,OAAO,UAAU,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeProvider.js","sourceRoot":"","sources":["../../src/model/useThemeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';\nimport { useColorScheme } from 'react-native';\nimport AsyncStorage from '@react-native-async-storage/async-storage';\nimport palette from '../theme/palette';\nimport { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';\nimport typography from '../theme/typography';\nimport elevation, { ElevationProps } from '../theme/elevation';\nimport { ShadowLevel } from '../ui/types';\n\nexport interface ThemeProviderProps {\n themeFonts?: ThemeFonts;\n children: React.ReactNode;\n}\n\nexport interface ThemeProps {\n palette: Palette;\n typography: TypographyVariantsProps;\n elevation: (elevationLevel: ShadowLevel) => ElevationProps;\n}\n\nexport interface Palette extends Theme {\n mode: 'light' | 'dark';\n isUsingSystemColorScheme: boolean;\n setUseSystemColorScheme: (useSystem: boolean) => void;\n toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeProps | null>(null);\n\nexport const useTheme = () => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ themeFonts, children }) => {\n const systemColorScheme = useColorScheme(); // 시스템 다크 모드 감지\n const [isUsingSystemColorScheme, setUseSystemColorScheme] = useState(true);\n const [mode, setMode] = useState<'light' | 'dark'>(systemColorScheme === 'dark' ? 'dark' : 'light');\n\n // AsyncStorage에서 시스템 모드 사용 설정 값 로드\n useEffect(() => {\n const loadSettings = async () => {\n try {\n const storedUseSystemColorScheme = await AsyncStorage.getItem('useSystemColorScheme');\n if (storedUseSystemColorScheme !== null) {\n setUseSystemColorScheme(storedUseSystemColorScheme === 'true');\n }\n const storedMode = await AsyncStorage.getItem('themeMode');\n if (storedMode) {\n setMode(storedMode === 'dark' ? 'dark' : 'light');\n } else {\n setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n }\n } catch (error) {\n console.error('Failed to load theme settings', error);\n }\n };\n loadSettings();\n }, [systemColorScheme]);\n\n // 시스템 다크 모드 변경에 따른 효과 적용\n useEffect(() => {\n if (isUsingSystemColorScheme) {\n setMode(systemColorScheme === 'dark' ? 'dark' : 'light');\n }\n }, [systemColorScheme, isUsingSystemColorScheme]);\n\n // 테마 토글 함수\n const toggleTheme = async () => {\n setUseSystemColorScheme(false); // 사용자 지정 모드로 전환\n setMode((prevMode) => {\n const newMode = prevMode === 'light' ? 'dark' : 'light';\n AsyncStorage.setItem('themeMode', newMode); // 로컬스토리지에 저장\n return newMode;\n });\n };\n\n // 시스템 모드 사용 설정 변경 함수\n const handleSetUseSystemColorScheme = async (useSystem: boolean) => {\n setUseSystemColorScheme(useSystem);\n await AsyncStorage.setItem('useSystemColorScheme', useSystem.toString());\n };\n\n const themeValue = useMemo(() => ({\n palette: {\n isUsingSystemColorScheme,\n setUseSystemColorScheme: handleSetUseSystemColorScheme,\n toggleTheme,\n ...palette({ mode }), // 선택된 모드에 따른 팔레트 적용\n },\n typography: typography({ themeFonts }),\n elevation\n }), [mode, isUsingSystemColorScheme, typography, themeFonts]);\n\n return (\n <ThemeContext.Provider value={themeValue}>\n {children}\n </ThemeContext.Provider>\n );\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ShadowLevel, ShadowStyle } from "../ui/types";
|
|
2
|
+
export declare const IOS_SHADOW: readonly ShadowStyle[];
|
|
3
|
+
export interface ElevationProps {
|
|
4
|
+
shadowColor?: string;
|
|
5
|
+
shadowOffset?: {
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
shadowOpacity?: number;
|
|
10
|
+
shadowRadius?: number;
|
|
11
|
+
elevation?: number;
|
|
12
|
+
}
|
|
13
|
+
export default function elevation(elevationLevel: ShadowLevel): ElevationProps;
|
|
14
|
+
//# sourceMappingURL=elevation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAKvD,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,CAAC,OAAO,UAAU,SAAS,CAAC,cAAc,EAAE,WAAW,GAAG,cAAc,CAmB7E"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Platform } from "react-native";
|
|
2
|
+
import { useTheme } from "../model";
|
|
3
|
+
const MAX_ELEVATION_LEVEL = 9;
|
|
4
|
+
export const IOS_SHADOW = [
|
|
5
|
+
{ shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },
|
|
6
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.00 },
|
|
7
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41 },
|
|
8
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2.22 },
|
|
9
|
+
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2.62 },
|
|
10
|
+
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3.84 },
|
|
11
|
+
{ shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4.65 },
|
|
12
|
+
{ shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4.65 },
|
|
13
|
+
{ shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.25, shadowRadius: 4.65 },
|
|
14
|
+
{ shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },
|
|
15
|
+
{ shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },
|
|
16
|
+
];
|
|
17
|
+
export default function elevation(elevationLevel) {
|
|
18
|
+
const { palette } = useTheme();
|
|
19
|
+
const safeElevationLevel = Math.min(Math.max(elevationLevel, 0), MAX_ELEVATION_LEVEL);
|
|
20
|
+
if (Platform.OS === 'ios') {
|
|
21
|
+
const { ...rest } = IOS_SHADOW[safeElevationLevel];
|
|
22
|
+
return {
|
|
23
|
+
shadowColor: palette.elevationShadow[safeElevationLevel],
|
|
24
|
+
...rest
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
shadowColor: palette.elevationShadow[safeElevationLevel],
|
|
29
|
+
elevation: safeElevationLevel
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=elevation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/theme/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,CAAC,MAAM,UAAU,GAA2B;IAChD,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE;IAC5E,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;IAClF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;IAClF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE;IACjF,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE;CAC1E,CAAC;AAUX,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,cAA2B;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CACjC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,EAC3B,mBAAmB,CACpB,CAAC;IAEF,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;QACnD,OAAO;YACL,WAAW,EAAE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;YACxD,GAAG,IAAI;SACR,CAAC;IACJ,CAAC;IACD,OAAO;QACL,WAAW,EAAE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;QACxD,SAAS,EAAE,kBAAkB;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["import { Platform } from \"react-native\";\nimport { ShadowLevel, ShadowStyle } from \"../ui/types\";\nimport { useTheme } from \"../model\";\n\nconst MAX_ELEVATION_LEVEL = 9;\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.00 },\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 default function elevation(elevationLevel: ShadowLevel): ElevationProps {\n const { palette } = useTheme();\n\n const safeElevationLevel = Math.min(\n Math.max(elevationLevel, 0),\n MAX_ELEVATION_LEVEL\n );\n\n if (Platform.OS === 'ios') {\n const { ...rest } = IOS_SHADOW[safeElevationLevel];\n return {\n shadowColor: palette.elevationShadow[safeElevationLevel],\n ...rest\n };\n }\n return {\n shadowColor: palette.elevationShadow[safeElevationLevel],\n elevation: safeElevationLevel\n };\n}"]}
|
package/build/theme/index.d.ts
CHANGED
|
@@ -1 +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"}
|
|
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;AAC7B,cAAc,aAAa,CAAC"}
|
package/build/theme/index.js
CHANGED
package/build/theme/index.js.map
CHANGED
|
@@ -1 +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';"]}
|
|
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;AAC7B,cAAc,aAAa,CAAC","sourcesContent":["export * from './palette';\nexport * from './types';\nexport * from './typography';\nexport * from './elevation';"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAMvC,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAoDtB;;AAED,wBAA2C"}
|
|
@@ -2,21 +2,9 @@ import React, { useMemo, useCallback } from 'react';
|
|
|
2
2
|
import { View, Platform } from 'react-native';
|
|
3
3
|
import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
|
|
4
4
|
import { useTheme } from '../../model/useThemeProvider';
|
|
5
|
+
import { IOS_SHADOW } from '../../theme/elevation';
|
|
5
6
|
const DEFAULT_DURATION = 200;
|
|
6
7
|
const SHADOW_DURATION = 50;
|
|
7
|
-
const IOS_SHADOW = [
|
|
8
|
-
{ shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },
|
|
9
|
-
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.00 },
|
|
10
|
-
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 1.41 },
|
|
11
|
-
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 1, shadowRadius: 2.22 },
|
|
12
|
-
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 2.62 },
|
|
13
|
-
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 1, shadowRadius: 3.84 },
|
|
14
|
-
{ shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },
|
|
15
|
-
{ shadowOffset: { width: 0, height: 3 }, shadowOpacity: 1, shadowRadius: 4.65 },
|
|
16
|
-
{ shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 4.65 },
|
|
17
|
-
{ shadowOffset: { width: 0, height: 4 }, shadowOpacity: 1, shadowRadius: 5.46 },
|
|
18
|
-
{ shadowOffset: { width: 0, height: 5 }, shadowOpacity: 1, shadowRadius: 6.27 },
|
|
19
|
-
];
|
|
20
8
|
function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DEFAULT_DURATION, style, children, ...props }) {
|
|
21
9
|
const { palette } = useTheme();
|
|
22
10
|
const opacity = useSharedValue(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC/H,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback } from 'react';\nimport { View, ViewProps, Platform } from 'react-native';\nimport Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ShadowLevel } from '../types';\nimport { IOS_SHADOW } from '../../theme/elevation';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\n\ninterface AnimatedWrapperProps extends ViewProps {\n isAnimation: boolean;\n elevationLevel?: ShadowLevel;\n duration?: number;\n}\n\nfunction AnimatedWrapper({\n isAnimation = true,\n elevationLevel = 0,\n duration = DEFAULT_DURATION,\n style,\n children,\n ...props\n}: AnimatedWrapperProps) {\n const { palette } = useTheme();\n const opacity = useSharedValue(0);\n\n // 그림자 및 기타 스타일을 플랫폼에 맞게 미리 계산\n const staticStyle = useMemo(() => {\n if (Platform.OS === 'ios') {\n const { shadowOpacity, ...rest } = IOS_SHADOW[elevationLevel];\n return { shadowColor: palette.elevationShadow[elevationLevel], ...rest };\n }\n return { shadowColor: palette.elevationShadow[elevationLevel] };\n }, [elevationLevel, palette]);\n\n // 애니메이션 스타일 정의 (iOS 그림자 및 Android elevation 처리)\n const animatedStyle = useAnimatedStyle(() => {\n if (Platform.OS === 'ios') {\n return { shadowOpacity: opacity.value * IOS_SHADOW[elevationLevel].shadowOpacity };\n }\n return { elevation: opacity.value * elevationLevel };\n }, [elevationLevel]);\n\n // 컴포넌트가 등장할 때 애니메이션 핸들링\n const onEntering = useCallback(() => {\n opacity.value = withTiming(1, { duration: SHADOW_DURATION });\n }, [opacity]);\n\n // 애니메이션 속성 메모이제이션\n const animationProps = useMemo(() => ({\n entering: FadeInDown.duration(duration).withCallback((finished) => {\n 'worklet';\n if (finished) {\n runOnJS(onEntering)();\n }\n }),\n exiting: FadeOut.duration(50),\n }), [duration, onEntering]);\n\n // 애니메이션이 비활성화된 경우 기본 View로 렌더링\n if (!isAnimation) {\n return <View style={[style, staticStyle]} {...props}>{children}</View>;\n }\n\n // 애니메이션이 적용된 View로 렌더링\n return (\n <Animated.View\n style={[style, staticStyle, animatedStyle]}\n {...animationProps}\n {...props}\n >\n {children}\n </Animated.View>\n );\n}\n\nexport default React.memo(AnimatedWrapper);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0610studio/zs-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.27",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "EXPO ZS-UI",
|
|
6
6
|
"type": "module",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
],
|
|
14
14
|
"scripts": {
|
|
15
15
|
"start:android": "cd example && yarn install && npx expo run:android",
|
|
16
|
+
"start:ios": "cd example && yarn install && npx expo run:ios -d 'iPhone 14'",
|
|
16
17
|
"build": "expo-module build",
|
|
17
18
|
"prepare": "expo-module prepare",
|
|
18
19
|
"---------------------------------------------------------------------------": "",
|