@0610studio/zs-ui 0.0.26 → 0.0.28
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 +2 -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 +18 -0
- package/build/theme/elevation.d.ts.map +1 -0
- package/build/theme/elevation.js +49 -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,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Theme, ThemeFonts, TypographyVariantsProps } from '../theme/types';
|
|
3
|
+
import { ElevationStyles } from '../theme/elevation';
|
|
3
4
|
export interface ThemeProviderProps {
|
|
4
5
|
themeFonts?: ThemeFonts;
|
|
5
6
|
children: React.ReactNode;
|
|
@@ -7,6 +8,7 @@ export interface ThemeProviderProps {
|
|
|
7
8
|
export interface ThemeProps {
|
|
8
9
|
palette: Palette;
|
|
9
10
|
typography: TypographyVariantsProps;
|
|
11
|
+
elevation: ElevationStyles;
|
|
10
12
|
}
|
|
11
13
|
export interface Palette extends Theme {
|
|
12
14
|
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,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE,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,eAAe,CAAC;CAC9B;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: elevation(palette({ mode }))
|
|
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, { ElevationStyles } from '../theme/elevation';\n\nexport interface ThemeProviderProps {\n themeFonts?: ThemeFonts;\n children: React.ReactNode;\n}\n\nexport interface ThemeProps {\n palette: Palette;\n typography: TypographyVariantsProps;\n elevation: ElevationStyles;\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: elevation(palette({ mode }))\n }), [mode, isUsingSystemColorScheme, typography, themeFonts]);\n\n return (\n <ThemeContext.Provider value={themeValue}>\n {children}\n </ThemeContext.Provider>\n );\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ShadowLevel, ShadowStyle } from "../ui/types";
|
|
2
|
+
import { Theme } from "./types";
|
|
3
|
+
export declare const IOS_SHADOW: readonly ShadowStyle[];
|
|
4
|
+
export interface ElevationProps {
|
|
5
|
+
shadowColor?: string;
|
|
6
|
+
shadowOffset?: {
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
};
|
|
10
|
+
shadowOpacity?: number;
|
|
11
|
+
shadowRadius?: number;
|
|
12
|
+
elevation?: number;
|
|
13
|
+
}
|
|
14
|
+
export type ElevationStyles = {
|
|
15
|
+
[key in ShadowLevel]: ElevationProps;
|
|
16
|
+
};
|
|
17
|
+
export default function elevation(palette: Theme): ElevationStyles;
|
|
18
|
+
//# 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;AAEvD,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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Platform } from "react-native";
|
|
2
|
+
export const IOS_SHADOW = [
|
|
3
|
+
{ shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0, shadowRadius: 0 },
|
|
4
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.0 },
|
|
5
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41 },
|
|
6
|
+
{ shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 2.22 },
|
|
7
|
+
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2.62 },
|
|
8
|
+
{ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3.84 },
|
|
9
|
+
{ shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.2, shadowRadius: 4.65 },
|
|
10
|
+
{ shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4.65 },
|
|
11
|
+
{ shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.25, shadowRadius: 4.65 },
|
|
12
|
+
{ shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 5.8 },
|
|
13
|
+
{ shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.25, shadowRadius: 6.5 },
|
|
14
|
+
];
|
|
15
|
+
export default function elevation(palette) {
|
|
16
|
+
return {
|
|
17
|
+
0: Platform.OS === 'ios'
|
|
18
|
+
? { ...IOS_SHADOW[0], shadowColor: palette.elevationShadow[0] }
|
|
19
|
+
: { elevation: 0, shadowColor: palette.elevationShadow[0] },
|
|
20
|
+
1: Platform.OS === 'ios'
|
|
21
|
+
? { ...IOS_SHADOW[1], shadowColor: palette.elevationShadow[1] }
|
|
22
|
+
: { elevation: 1, shadowColor: palette.elevationShadow[1] },
|
|
23
|
+
2: Platform.OS === 'ios'
|
|
24
|
+
? { ...IOS_SHADOW[2], shadowColor: palette.elevationShadow[2] }
|
|
25
|
+
: { elevation: 2, shadowColor: palette.elevationShadow[2] },
|
|
26
|
+
3: Platform.OS === 'ios'
|
|
27
|
+
? { ...IOS_SHADOW[3], shadowColor: palette.elevationShadow[3] }
|
|
28
|
+
: { elevation: 3, shadowColor: palette.elevationShadow[3] },
|
|
29
|
+
4: Platform.OS === 'ios'
|
|
30
|
+
? { ...IOS_SHADOW[4], shadowColor: palette.elevationShadow[4] }
|
|
31
|
+
: { elevation: 4, shadowColor: palette.elevationShadow[4] },
|
|
32
|
+
5: Platform.OS === 'ios'
|
|
33
|
+
? { ...IOS_SHADOW[5], shadowColor: palette.elevationShadow[5] }
|
|
34
|
+
: { elevation: 5, shadowColor: palette.elevationShadow[5] },
|
|
35
|
+
6: Platform.OS === 'ios'
|
|
36
|
+
? { ...IOS_SHADOW[6], shadowColor: palette.elevationShadow[6] }
|
|
37
|
+
: { elevation: 6, shadowColor: palette.elevationShadow[6] },
|
|
38
|
+
7: Platform.OS === 'ios'
|
|
39
|
+
? { ...IOS_SHADOW[7], shadowColor: palette.elevationShadow[7] }
|
|
40
|
+
: { elevation: 7, shadowColor: palette.elevationShadow[7] },
|
|
41
|
+
8: Platform.OS === 'ios'
|
|
42
|
+
? { ...IOS_SHADOW[8], shadowColor: palette.elevationShadow[8] }
|
|
43
|
+
: { elevation: 8, shadowColor: palette.elevationShadow[8] },
|
|
44
|
+
9: Platform.OS === 'ios'
|
|
45
|
+
? { ...IOS_SHADOW[9], shadowColor: palette.elevationShadow[9] }
|
|
46
|
+
: { elevation: 9, shadowColor: palette.elevationShadow[9] },
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=elevation.js.map
|
|
@@ -0,0 +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 \"../ui/types\";\nimport { useTheme } from \"../model\";\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"]}
|
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.28",
|
|
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
|
"---------------------------------------------------------------------------": "",
|