@0610studio/zs-ui 0.0.29 → 0.0.31
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/ui/ZSView/index.d.ts +2 -0
- package/build/ui/ZSView/index.d.ts.map +1 -1
- package/build/ui/ZSView/index.js +2 -2
- package/build/ui/ZSView/index.js.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.d.ts.map +1 -1
- package/build/ui/atoms/AnimatedWrapper.js +3 -7
- package/build/ui/atoms/AnimatedWrapper.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
|
+
import { ShadowLevel } from '../types';
|
|
3
4
|
type Props = ViewProps & {
|
|
4
5
|
isAnimation?: boolean;
|
|
6
|
+
elevationLevel?: ShadowLevel;
|
|
5
7
|
};
|
|
6
8
|
declare const _default: React.NamedExoticComponent<Props>;
|
|
7
9
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;CAC9B,CAAC;;AAsBF,wBAA4B"}
|
package/build/ui/ZSView/index.js
CHANGED
|
@@ -2,14 +2,14 @@ import React, { memo, useMemo } from 'react';
|
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
3
|
import { useTheme } from '../../model/useThemeProvider';
|
|
4
4
|
import AnimatedWrapper from '../atoms/AnimatedWrapper';
|
|
5
|
-
const ZSView = ({ isAnimation = false, style, children, ...rest }) => {
|
|
5
|
+
const ZSView = ({ isAnimation = false, elevationLevel = 0, style, children, ...rest }) => {
|
|
6
6
|
const { palette } = useTheme();
|
|
7
7
|
const styles = useMemo(() => StyleSheet.create({
|
|
8
8
|
container: {
|
|
9
9
|
backgroundColor: palette.background.base,
|
|
10
10
|
},
|
|
11
11
|
}), [palette.background.base]);
|
|
12
|
-
return (<AnimatedWrapper isAnimation={isAnimation} style={[styles.container, style]} {...rest}>
|
|
12
|
+
return (<AnimatedWrapper isAnimation={isAnimation} elevationLevel={elevationLevel} style={[styles.container, style]} {...rest}>
|
|
13
13
|
{children}
|
|
14
14
|
</AnimatedWrapper>);
|
|
15
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,eAAe,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAQvD,MAAM,MAAM,GAAoB,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACxG,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,UAAU,CAAC,MAAM,CAAC;QAChB,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI;SACzC;KACF,CAAC,EACJ,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1B,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CACpH;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import React, { memo, useMemo } from 'react';\nimport { ViewProps, StyleSheet } from 'react-native';\nimport { useTheme } from '../../model/useThemeProvider';\nimport AnimatedWrapper from '../atoms/AnimatedWrapper';\nimport { ShadowLevel } from '../types';\n\ntype Props = ViewProps & {\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n};\n\nconst ZSView: React.FC<Props> = ({ isAnimation = false, elevationLevel = 0, style, children, ...rest }) => {\n const { palette } = useTheme();\n\n const styles = useMemo(\n () =>\n StyleSheet.create({\n container: {\n backgroundColor: palette.background.base,\n },\n }),\n [palette.background.base],\n );\n\n return (\n <AnimatedWrapper isAnimation={isAnimation} elevationLevel={elevationLevel} style={[styles.container, style]} {...rest}>\n {children}\n </AnimatedWrapper>\n );\n};\n\nexport default memo(ZSView);\n"]}
|
|
@@ -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,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,
|
|
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,qBAgDtB;;AAED,wBAA2C"}
|
|
@@ -6,16 +6,12 @@ import { IOS_SHADOW } from '../../theme/elevation';
|
|
|
6
6
|
const DEFAULT_DURATION = 200;
|
|
7
7
|
const SHADOW_DURATION = 50;
|
|
8
8
|
function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DEFAULT_DURATION, style, children, ...props }) {
|
|
9
|
-
const {
|
|
9
|
+
const { elevation } = useTheme();
|
|
10
10
|
const opacity = useSharedValue(0);
|
|
11
11
|
// 그림자 및 기타 스타일을 플랫폼에 맞게 미리 계산
|
|
12
12
|
const staticStyle = useMemo(() => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return { shadowColor: palette.elevationShadow[elevationLevel], ...rest };
|
|
16
|
-
}
|
|
17
|
-
return { shadowColor: palette.elevationShadow[elevationLevel] };
|
|
18
|
-
}, [elevationLevel, palette]);
|
|
13
|
+
return { ...elevation[elevationLevel] };
|
|
14
|
+
}, [elevation]);
|
|
19
15
|
// 애니메이션 스타일 정의 (iOS 그림자 및 Android elevation 처리)
|
|
20
16
|
const animatedStyle = useAnimatedStyle(() => {
|
|
21
17
|
if (Platform.OS === 'ios') {
|
|
@@ -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;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,gBAAgB,GAAG,GAAY,CAAC;AACtC,MAAM,eAAe,GAAG,EAAW,CAAC;AAQpC,SAAS,eAAe,CAAC,EACvB,WAAW,GAAG,IAAI,EAClB,cAAc,GAAG,CAAC,EAClB,QAAQ,GAAG,gBAAgB,EAC3B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,
|
|
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 { elevation } = useTheme();\n const opacity = useSharedValue(0);\n\n // 그림자 및 기타 스타일을 플랫폼에 맞게 미리 계산\n const staticStyle = useMemo(() => {\n return { ...elevation[elevationLevel] };\n }, [elevation]);\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"]}
|