@0610studio/zs-ui 0.8.3 → 0.8.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.
Files changed (26) hide show
  1. package/build/model/types.d.ts +0 -2
  2. package/build/model/types.d.ts.map +1 -1
  3. package/build/model/types.js.map +1 -1
  4. package/build/model/useOverlayProvider.d.ts.map +1 -1
  5. package/build/model/useOverlayProvider.js +2 -6
  6. package/build/model/useOverlayProvider.js.map +1 -1
  7. package/build/overlay/AlertOverlay/index.d.ts +1 -1
  8. package/build/overlay/AlertOverlay/index.d.ts.map +1 -1
  9. package/build/overlay/AlertOverlay/index.js +20 -23
  10. package/build/overlay/AlertOverlay/index.js.map +1 -1
  11. package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
  12. package/build/overlay/BottomSheetOverlay/index.js +48 -30
  13. package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
  14. package/build/overlay/Modality/index.d.ts.map +1 -1
  15. package/build/overlay/Modality/index.js +3 -0
  16. package/build/overlay/Modality/index.js.map +1 -1
  17. package/build/ui/ZSPressable/index.d.ts.map +1 -1
  18. package/build/ui/ZSPressable/index.js +21 -20
  19. package/build/ui/ZSPressable/index.js.map +1 -1
  20. package/build/ui/ZSTextField/index.d.ts.map +1 -1
  21. package/build/ui/ZSTextField/index.js +69 -41
  22. package/build/ui/ZSTextField/index.js.map +1 -1
  23. package/build/ui/atoms/AnimatedWrapper.d.ts.map +1 -1
  24. package/build/ui/atoms/AnimatedWrapper.js +56 -48
  25. package/build/ui/atoms/AnimatedWrapper.js.map +1 -1
  26. package/package.json +1 -1
package/build/overlay/Modality/index.js.map CHANGED
@@ -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 { Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\n\nfunction Modality({\n modalityComponent,\n}: {\n modalityComponent?: React.ReactNode;\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 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 return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\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 },\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 },\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 },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: '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 { 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 { Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\n\nfunction Modality({\n modalityComponent,\n}: {\n modalityComponent?: React.ReactNode;\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 },\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 },\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 },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: '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"]}
package/build/ui/ZSPressable/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAkElB;;AAoBD,wBAAsD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA8DlB;;AAoBD,wBAAsD"}
package/build/ui/ZSPressable/index.js CHANGED
@@ -1,37 +1,38 @@
1
- import React, { useCallback, useMemo, useRef } from "react";
1
+ import React from "react";
2
2
  import { Pressable, View } from "react-native";
3
3
  import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
4
4
  import AnimatedWrapper from "../atoms/AnimatedWrapper";
5
5
  const DEFAULT_DURATION = { duration: 100 };
6
6
  const SCALE_VALUES = [1, 0.96];
7
7
  function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, ...props }) {
8
- const isButtonPress = useRef(useSharedValue(0)).current;
8
+ const isButtonPress = useSharedValue(0);
9
9
  const boxAnimation = useAnimatedStyle(() => {
10
+ 'worklet';
10
11
  const scale = interpolate(isButtonPress.value, [0, 1], SCALE_VALUES, 'clamp');
11
12
  return {
12
13
  transform: [{ scale }],
13
14
  };
14
15
  }, []);
15
- const handlePressIn = useCallback(() => {
16
+ const handlePressIn = () => {
17
+ 'worklet';
16
18
  isButtonPress.value = withTiming(1, DEFAULT_DURATION);
17
- }, [isButtonPress]);
18
- const handlePressOut = useCallback(() => {
19
+ };
20
+ const handlePressOut = () => {
21
+ 'worklet';
19
22
  isButtonPress.value = withTiming(0, DEFAULT_DURATION);
20
- }, [isButtonPress]);
21
- const pressedStyle = useMemo(() => ({
22
- backgroundColor: pressedBackgroundColor,
23
- borderRadius: pressedBackgroundBorderRadius,
24
- }), [pressedBackgroundColor, pressedBackgroundBorderRadius]);
25
- const unpressedStyle = useMemo(() => ({
26
- backgroundColor: 'transparent',
27
- borderRadius: pressedBackgroundBorderRadius,
28
- }), [pressedBackgroundBorderRadius]);
29
- const handlePressStyle = useCallback((pressed) => {
30
- return pressed ? pressedStyle : unpressedStyle;
31
- }, [pressedStyle, unpressedStyle]);
32
- const containerStyle = useMemo(() => ({
33
- width: fullWidth ? '100%' : undefined
34
- }), [fullWidth]);
23
+ };
24
+ const handlePressStyle = (pressed) => {
25
+ return pressed
26
+ ? {
27
+ backgroundColor: pressedBackgroundColor,
28
+ borderRadius: pressedBackgroundBorderRadius,
29
+ }
30
+ : {
31
+ backgroundColor: 'transparent',
32
+ borderRadius: pressedBackgroundBorderRadius,
33
+ };
34
+ };
35
+ const containerStyle = fullWidth ? { width: '100%' } : undefined;
35
36
  return (<View style={containerStyle}>
36
37
  <Pressable onPress={onPress} onLongPress={onLongPress} onPressIn={handlePressIn} onPressOut={handlePressOut} style={({ pressed }) => handlePressStyle(pressed)}>
37
38
  <Animated.View style={boxAnimation}>
package/build/ui/ZSPressable/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel } from \"../types\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\n\ninterface ZSPressableProps extends ViewProps {\n onPress?: (value?: any) => void;\n onLongPress?: (value?: any) => void;\n pressedBackgroundColor?: string;\n pressedBackgroundBorderRadius?: number;\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n fullWidth?: boolean;\n color?: ViewColorOptions;\n}\n\nfunction ZSPressable({\n onPress,\n onLongPress,\n isAnimation = true,\n pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n pressedBackgroundBorderRadius = 16,\n elevationLevel,\n fullWidth = false,\n color,\n ...props\n}: ZSPressableProps) {\n const isButtonPress = useRef(useSharedValue(0)).current;\n\n const boxAnimation = useAnimatedStyle(() => {\n const scale = interpolate(\n isButtonPress.value,\n [0, 1],\n SCALE_VALUES,\n 'clamp'\n );\n return {\n transform: [{ scale }],\n };\n }, []);\n \n const handlePressIn = useCallback(() => {\n isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n }, [isButtonPress]);\n \n const handlePressOut = useCallback(() => {\n isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n }, [isButtonPress]);\n\n const pressedStyle = useMemo(() => ({\n backgroundColor: pressedBackgroundColor,\n borderRadius: pressedBackgroundBorderRadius,\n }), [pressedBackgroundColor, pressedBackgroundBorderRadius]);\n \n const unpressedStyle = useMemo(() => ({\n backgroundColor: 'transparent',\n borderRadius: pressedBackgroundBorderRadius,\n }), [pressedBackgroundBorderRadius]);\n \n const handlePressStyle = useCallback(\n (pressed: boolean) => {\n return pressed ? pressedStyle : unpressedStyle;\n },\n [pressedStyle, unpressedStyle]\n );\n\n const containerStyle = useMemo(() => ({\n width: fullWidth ? '100%' as const : undefined\n }), [fullWidth]);\n\n return (\n <View style={containerStyle}>\n <Pressable\n onPress={onPress}\n onLongPress={onLongPress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={({ pressed }) => handlePressStyle(pressed)}\n >\n <Animated.View style={boxAnimation}>\n <AnimatedWrapper\n color={color}\n isAnimation={isAnimation}\n elevationLevel={elevationLevel}\n style={props.style}\n >\n {props.children}\n </AnimatedWrapper>\n </Animated.View>\n </Pressable>\n </View>\n );\n}\n\nconst arePropsEqual = (\n prevProps: ZSPressableProps, \n nextProps: ZSPressableProps\n): boolean => {\n return (\n prevProps.onPress === nextProps.onPress &&\n prevProps.onLongPress === nextProps.onLongPress &&\n prevProps.isAnimation === nextProps.isAnimation &&\n prevProps.pressedBackgroundColor === nextProps.pressedBackgroundColor &&\n prevProps.pressedBackgroundBorderRadius === nextProps.pressedBackgroundBorderRadius &&\n prevProps.elevationLevel === nextProps.elevationLevel &&\n prevProps.fullWidth === nextProps.fullWidth &&\n prevProps.color === nextProps.color &&\n prevProps.style === nextProps.style &&\n prevProps.children === nextProps.children\n );\n};\n\nexport default React.memo(ZSPressable, arePropsEqual);\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel } from \"../types\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\n\ninterface ZSPressableProps extends ViewProps {\n onPress?: (value?: any) => void;\n onLongPress?: (value?: any) => void;\n pressedBackgroundColor?: string;\n pressedBackgroundBorderRadius?: number;\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n fullWidth?: boolean;\n color?: ViewColorOptions;\n}\n\nfunction ZSPressable({\n onPress,\n onLongPress,\n isAnimation = true,\n pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n pressedBackgroundBorderRadius = 16,\n elevationLevel,\n fullWidth = false,\n color,\n ...props\n}: ZSPressableProps) {\n const isButtonPress = useSharedValue(0);\n\n const boxAnimation = useAnimatedStyle(() => {\n 'worklet';\n const scale = interpolate(\n isButtonPress.value,\n [0, 1],\n SCALE_VALUES,\n 'clamp'\n );\n return {\n transform: [{ scale }],\n };\n }, []);\n \n const handlePressIn = () => {\n 'worklet';\n isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n };\n \n const handlePressOut = () => {\n 'worklet';\n isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n };\n\n const handlePressStyle = (pressed: boolean) => {\n return pressed \n ? {\n backgroundColor: pressedBackgroundColor,\n borderRadius: pressedBackgroundBorderRadius,\n }\n : {\n backgroundColor: 'transparent',\n borderRadius: pressedBackgroundBorderRadius,\n };\n };\n\n const containerStyle = fullWidth ? { width: '100%' as const } : undefined;\n\n return (\n <View style={containerStyle}>\n <Pressable\n onPress={onPress}\n onLongPress={onLongPress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={({ pressed }) => handlePressStyle(pressed)}\n >\n <Animated.View style={boxAnimation}>\n <AnimatedWrapper\n color={color}\n isAnimation={isAnimation}\n elevationLevel={elevationLevel}\n style={props.style}\n >\n {props.children}\n </AnimatedWrapper>\n </Animated.View>\n </Pressable>\n </View>\n );\n}\n\nconst arePropsEqual = (\n prevProps: ZSPressableProps, \n nextProps: ZSPressableProps\n): boolean => {\n return (\n prevProps.onPress === nextProps.onPress &&\n prevProps.onLongPress === nextProps.onLongPress &&\n prevProps.isAnimation === nextProps.isAnimation &&\n prevProps.pressedBackgroundColor === nextProps.pressedBackgroundColor &&\n prevProps.pressedBackgroundBorderRadius === nextProps.pressedBackgroundBorderRadius &&\n prevProps.elevationLevel === nextProps.elevationLevel &&\n prevProps.fullWidth === nextProps.fullWidth &&\n prevProps.color === nextProps.color &&\n prevProps.style === nextProps.style &&\n prevProps.children === nextProps.children\n );\n};\n\nexport default React.memo(ZSPressable, arePropsEqual);\n"]}
package/build/ui/ZSTextField/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAoN9B;;AAoBD,wBAAsD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAwP9B;;AAoBD,wBAAsD"}
package/build/ui/ZSTextField/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
1
+ import React, { useMemo, useCallback, useState, useEffect } from 'react';
2
2
  import { Platform, TextInput } from 'react-native';
3
- import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
3
+ import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnUI, useDerivedValue } from 'react-native-reanimated';
4
4
  import ButtonClose from './ui/ButtonClose';
5
5
  import ErrorComponent from './ui/ErrorComponent';
6
6
  import { extractStyle } from '../../model/utils';
@@ -9,33 +9,50 @@ import ViewAtom from '../atoms/ViewAtom';
9
9
  const iosOffset = Platform.OS === 'ios' ? 8 : 4;
10
10
  function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth = 1.2, borderColor, focusColor, errorColor, borderRadius = 14, paddingHorizontal = 15, errorMessage, textInputProps, boxStyle = 'outline', innerBoxStyle, disabled = false, allowFontScaling = true, isTextArea = false, }) {
11
11
  const { typography, palette } = useTheme();
12
- const typoConfig = useMemo(() => {
13
- const [primaryStyle, subStyle] = typo.split('.');
14
- return { primaryStyle, subStyle };
15
- }, [typo]);
16
- const fErrorColor = useMemo(() => errorColor || palette.danger.main, [errorColor, palette.danger.main]);
12
+ const [primaryStyle, subStyle] = typo.split('.');
13
+ const fErrorColor = errorColor || palette.danger.main;
17
14
  const fontSize = useMemo(() => {
18
- return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontSize') || 17;
19
- }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);
15
+ return extractStyle(typography[primaryStyle][subStyle], 'fontSize') || 17;
16
+ }, [typography, primaryStyle, subStyle]);
20
17
  const fontFamily = useMemo(() => {
21
- return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontFamily') || '';
22
- }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);
18
+ return extractStyle(typography[primaryStyle][subStyle], 'fontFamily') || '';
19
+ }, [typography, primaryStyle, subStyle]);
23
20
  const [isFocused, setIsFocused] = useState(false);
24
- const labelAnimationValue = useRef(useSharedValue(0)).current;
25
- const boxHeightValue = useRef(useSharedValue(0)).current;
26
- // 포커스 및 값 변경 시 라벨 애니메이션 트리거
21
+ const boxHeightValue = useSharedValue(0);
22
+ const isFocusedValue = useSharedValue(false);
23
+ const hasValueState = useSharedValue(false);
24
+ const errorState = useSharedValue(false);
25
+ const labelAnimationValue = useDerivedValue(() => {
26
+ 'worklet';
27
+ const shouldShow = hasValueState.value || isFocusedValue.value;
28
+ return withTiming(shouldShow ? 1 : 0, { duration: 100 });
29
+ }, []);
30
+ const focusAnimationValue = useDerivedValue(() => {
31
+ 'worklet';
32
+ return withTiming(isFocusedValue.value ? 1 : 0, { duration: 150 });
33
+ }, []);
34
+ const errorAnimationValue = useDerivedValue(() => {
35
+ 'worklet';
36
+ return withTiming(errorState.value ? 1 : 0, { duration: 150 });
37
+ }, []);
38
+ // 상태 동기화를 위한 useEffect
27
39
  useEffect(() => {
28
- labelAnimationValue.value = withTiming(value !== '' || isFocused ? 1 : 0, { duration: 100 });
29
- }, [value, isFocused, labelAnimationValue]);
30
- // 애니메이션 관련 상수
31
- const animationConstants = useMemo(() => ({
40
+ runOnUI(() => {
41
+ 'worklet';
42
+ isFocusedValue.value = isFocused;
43
+ hasValueState.value = value !== '';
44
+ errorState.value = status === 'error';
45
+ })();
46
+ }, [value, isFocused, status, isFocusedValue, hasValueState, errorState]);
47
+ const animationConstants = {
32
48
  baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),
33
49
  targetFontSize: boxStyle === 'inbox' ? 10 : 11,
34
50
  baseTop: isTextArea ? 12 : 0,
35
51
  targetTopOffset: boxStyle === 'inbox' ? 17 : 2,
36
- }), [fontSize, boxStyle, isTextArea]);
52
+ };
37
53
  // 라벨 애니메이션 스타일
38
54
  const animatedLabelStyle = useAnimatedStyle(() => {
55
+ 'worklet';
39
56
  const labelFontSize = interpolate(labelAnimationValue.value, [0, 1], [animationConstants.baseFontSize, animationConstants.targetFontSize], 'clamp');
40
57
  const labelTop = interpolate(labelAnimationValue.value, [0, 1], [
41
58
  animationConstants.baseTop,
@@ -48,6 +65,7 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
48
65
  }, [animationConstants.baseFontSize, animationConstants.targetFontSize, animationConstants.baseTop, animationConstants.targetTopOffset, isTextArea]);
49
66
  // 레이아웃 핸들러
50
67
  const handleLayout = useCallback((event) => {
68
+ 'worklet';
51
69
  const { height } = event.nativeEvent.layout;
52
70
  if (boxHeightValue.value !== height)
53
71
  boxHeightValue.value = height;
@@ -60,25 +78,35 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
60
78
  defaultBorderColor: borderColor || palette.grey[30],
61
79
  defaultLabelColor: labelColor || palette.text.secondary,
62
80
  placeholderColor: placeHolderColor || palette.grey[40],
63
- }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor]);
64
- // 상태에 따른 테두리 색상 설정
65
- const computedBorderColor = useMemo(() => {
66
- if (status === 'error')
67
- return fErrorColor;
68
- if (isFocused)
69
- return colorConfig.primaryColor;
70
- return colorConfig.defaultBorderColor;
71
- }, [status, fErrorColor, isFocused, colorConfig.primaryColor, colorConfig.defaultBorderColor]);
72
- // 상태에 따른 라벨 색상 설정
73
- const computedLabelColor = useMemo(() => {
74
- if (status === 'error')
75
- return fErrorColor;
76
- if (isFocused)
77
- return colorConfig.primaryColor;
78
- if (value)
79
- return colorConfig.defaultLabelColor;
80
- return colorConfig.placeholderColor;
81
- }, [status, fErrorColor, isFocused, value, colorConfig.primaryColor, colorConfig.defaultLabelColor, colorConfig.placeholderColor]);
81
+ errorColor: fErrorColor,
82
+ }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);
83
+ // 애니메이션된 색상 스타일
84
+ const animatedColorStyle = useAnimatedStyle(() => {
85
+ 'worklet';
86
+ const borderColor = errorAnimationValue.value > 0
87
+ ? colorConfig.errorColor
88
+ : focusAnimationValue.value > 0
89
+ ? colorConfig.primaryColor
90
+ : colorConfig.defaultBorderColor;
91
+ return {
92
+ borderColor,
93
+ };
94
+ }, [colorConfig, errorAnimationValue, focusAnimationValue]);
95
+ // 애니메이션된 라벨 색상 스타일
96
+ const animatedLabelColorStyle = useAnimatedStyle(() => {
97
+ 'worklet';
98
+ const hasValueAnimation = hasValueState.value ? 1 : 0;
99
+ const labelColor = errorAnimationValue.value > 0
100
+ ? colorConfig.errorColor
101
+ : focusAnimationValue.value > 0
102
+ ? colorConfig.primaryColor
103
+ : hasValueAnimation > 0
104
+ ? colorConfig.defaultLabelColor
105
+ : colorConfig.placeholderColor;
106
+ return {
107
+ color: labelColor,
108
+ };
109
+ }, [colorConfig, errorAnimationValue, focusAnimationValue]);
82
110
  const styleConfig = useMemo(() => {
83
111
  const baseStyle = {
84
112
  width: '100%',
@@ -155,17 +183,17 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
155
183
  const shouldShowCloseButton = value && isFocused;
156
184
  const shouldShowError = status === 'error' && errorMessage;
157
185
  return (<ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>
158
- <ViewAtom style={[containerStyle, { borderColor: computedBorderColor }]} onLayout={handleLayout} pointerEvents={disabled ? 'none' : 'auto'}>
186
+ <Animated.View style={[containerStyle, animatedColorStyle]} onLayout={handleLayout} pointerEvents={disabled ? 'none' : 'auto'}>
159
187
  <TextInput {...textInputProps} style={textInputStyle} value={value} onFocus={handleFocus} onBlur={handleBlur} onChangeText={handleTextChange} allowFontScaling={allowFontScaling} selectionColor={palette.grey[50]} autoCorrect={false} spellCheck={false}/>
160
188
 
161
189
  <ViewAtom pointerEvents="none" style={{ position: 'absolute' }}>
162
- <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>
190
+ <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, animatedLabelColorStyle]}>
163
191
  {label}
164
192
  </Animated.Text>
165
193
  </ViewAtom>
166
194
 
167
195
  {shouldShowCloseButton && (<ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText}/>)}
168
- </ViewAtom>
196
+ </Animated.View>
169
197
 
170
198
  {shouldShowError && (<ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor}/>)}
171
199
  </ViewAtom>);
package/build/ui/ZSTextField/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../model/useThemeProvider';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\n\ninterface TextFieldProps {\n typo?: TypoOptions;\n status?: 'default' | 'error';\n value: string;\n onChangeText?: (text: string) => void;\n inputBgColor?: string;\n labelBgColor?: string;\n label?: string;\n labelColor?: string;\n placeHolderColor?: string;\n fontSize?: number;\n borderColor?: string;\n borderRadius?: number;\n focusColor?: string;\n errorColor?: string;\n paddingHorizontal?: number;\n borderWidth?: number;\n errorMessage?: string;\n textInputProps?: TextInputProps;\n boxStyle?: BoxStyle;\n innerBoxStyle?: 'top' | 'middle' | 'bottom';\n disabled?: boolean;\n allowFontScaling?: boolean;\n isTextArea?: boolean;\n}\n\nfunction ZSTextField({\n typo = 'body.2',\n status = 'default',\n value,\n onChangeText,\n label = 'Placeholder',\n labelColor,\n placeHolderColor,\n inputBgColor,\n labelBgColor,\n borderWidth = 1.2,\n borderColor,\n focusColor,\n errorColor,\n borderRadius = 14,\n paddingHorizontal = 15,\n errorMessage,\n textInputProps,\n boxStyle = 'outline',\n innerBoxStyle,\n disabled = false,\n allowFontScaling = true,\n isTextArea = false,\n}: TextFieldProps): JSX.Element {\n const { typography, palette } = useTheme();\n \n const typoConfig = useMemo(() => {\n const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n return { primaryStyle, subStyle };\n }, [typo]);\n \n const fErrorColor = useMemo(() => errorColor || palette.danger.main, [errorColor, palette.danger.main]);\n\n const fontSize = useMemo(() => {\n return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontSize') as number || 17;\n }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);\n \n const fontFamily = useMemo(() => {\n return extractStyle(typography[typoConfig.primaryStyle][typoConfig.subStyle], 'fontFamily') as string || '';\n }, [typography, typoConfig.primaryStyle, typoConfig.subStyle]);\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n \n const labelAnimationValue = useRef(useSharedValue(0)).current;\n const boxHeightValue = useRef(useSharedValue(0)).current;\n\n // 포커스 및 값 변경 시 라벨 애니메이션 트리거\n useEffect(() => {\n labelAnimationValue.value = withTiming(\n value !== '' || isFocused ? 1 : 0,\n { duration: 100 }\n );\n }, [value, isFocused, labelAnimationValue]);\n\n // 애니메이션 관련 상수\n const animationConstants = useMemo(() => ({\n baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),\n targetFontSize: boxStyle === 'inbox' ? 10 : 11,\n baseTop: isTextArea ? 12 : 0,\n targetTopOffset: boxStyle === 'inbox' ? 17 : 2,\n }), [fontSize, boxStyle, isTextArea]);\n\n // 라벨 애니메이션 스타일\n const animatedLabelStyle = useAnimatedStyle(() => {\n const labelFontSize = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [animationConstants.baseFontSize, animationConstants.targetFontSize],\n 'clamp'\n );\n\n const labelTop = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [\n animationConstants.baseTop,\n isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset,\n ],\n 'clamp'\n );\n\n return {\n top: labelTop,\n fontSize: labelFontSize,\n };\n }, [animationConstants.baseFontSize, animationConstants.targetFontSize, animationConstants.baseTop, animationConstants.targetTopOffset, isTextArea]);\n\n // 레이아웃 핸들러\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n if (boxHeightValue.value !== height) boxHeightValue.value = height;\n }, [boxHeightValue]);\n\n // 포커스 및 블러 핸들러\n const handleFocus = useCallback(() => setIsFocused(true), []);\n const handleBlur = useCallback(() => setIsFocused(false), []);\n\n const colorConfig = useMemo(() => ({\n primaryColor: focusColor || palette.primary.main,\n defaultBorderColor: borderColor || palette.grey[30],\n defaultLabelColor: labelColor || palette.text.secondary,\n placeholderColor: placeHolderColor || palette.grey[40],\n }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor]);\n\n // 상태에 따른 테두리 색상 설정\n const computedBorderColor = useMemo(() => {\n if (status === 'error') return fErrorColor;\n if (isFocused) return colorConfig.primaryColor;\n return colorConfig.defaultBorderColor;\n }, [status, fErrorColor, isFocused, colorConfig.primaryColor, colorConfig.defaultBorderColor]);\n\n // 상태에 따른 라벨 색상 설정 \n const computedLabelColor = useMemo(() => {\n if (status === 'error') return fErrorColor;\n if (isFocused) return colorConfig.primaryColor;\n if (value) return colorConfig.defaultLabelColor;\n return colorConfig.placeholderColor;\n }, [status, fErrorColor, isFocused, value, colorConfig.primaryColor, colorConfig.defaultLabelColor, colorConfig.placeholderColor]);\n\n const styleConfig = useMemo(() => {\n const baseStyle = {\n width: '100%' as const,\n justifyContent: isTextArea ? 'flex-start' as const : 'center' as const,\n borderRadius,\n paddingHorizontal,\n backgroundColor: inputBgColor || palette.background.base,\n paddingTop: boxStyle === 'inbox' ? 13 : 0,\n };\n\n // 박스 스타일에 따른 테두리 설정\n let borderStyle = {};\n if (boxStyle === 'outline' || boxStyle === 'inbox') {\n borderStyle = { borderWidth };\n } else if (boxStyle === 'underline') {\n borderStyle = { borderBottomWidth: borderWidth };\n }\n\n // innerBoxStyle에 따른 스타일 설정\n let innerStyle = {};\n if (innerBoxStyle === 'top') {\n innerStyle = { \n borderBottomLeftRadius: 0, \n borderBottomRightRadius: 0, \n borderBottomWidth: borderWidth / 2 \n };\n } else if (innerBoxStyle === 'middle') {\n innerStyle = { \n borderRadius: 0, \n borderTopWidth: borderWidth / 2, \n borderBottomWidth: borderWidth / 2 \n };\n } else if (innerBoxStyle === 'bottom') {\n innerStyle = { \n borderTopLeftRadius: 0, \n borderTopRightRadius: 0, \n borderTopWidth: borderWidth / 2 \n };\n }\n\n return { ...baseStyle, ...borderStyle, ...innerStyle };\n }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);\n\n // 컨테이너 스타일 정의\n const containerStyle: StyleProp<ViewStyle> = styleConfig;\n\n // 라벨 스타일 정의\n const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n fontSize,\n left: paddingHorizontal,\n backgroundColor: labelBgColor || palette.background.base,\n paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n paddingVertical: 2,\n textAlignVertical: 'center',\n fontFamily,\n borderRadius: boxStyle === 'outline' ? 5 : 0,\n overflow: 'hidden',\n }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette.background.base]);\n\n // 텍스트 변경 핸들러\n const handleTextChange = useCallback((text: string) => {\n if (onChangeText) onChangeText(text);\n }, [onChangeText]);\n\n const textInputStyle = useMemo(() => [\n { \n paddingTop: 7 + iosOffset, \n paddingBottom: 5 + iosOffset, \n color: palette.text.base,\n fontSize, \n width: '100%' as const, \n paddingRight: 25, \n fontFamily \n },\n textInputProps?.style,\n ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);\n\n const shouldShowCloseButton = value && isFocused;\n const shouldShowError = status === 'error' && errorMessage;\n\n return (\n <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n <ViewAtom\n style={[containerStyle, { borderColor: computedBorderColor }]}\n onLayout={handleLayout}\n pointerEvents={disabled ? 'none' : 'auto'}\n >\n <TextInput\n {...textInputProps}\n style={textInputStyle}\n value={value}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={handleTextChange}\n allowFontScaling={allowFontScaling}\n selectionColor={palette.grey[50]}\n autoCorrect={false}\n spellCheck={false}\n />\n\n <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>\n {label}\n </Animated.Text>\n </ViewAtom>\n\n {shouldShowCloseButton && (\n <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n )}\n </ViewAtom>\n\n {shouldShowError && (\n <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n )}\n </ViewAtom>\n );\n}\n\nconst arePropsEqual = (prevProps: TextFieldProps, nextProps: TextFieldProps): boolean => {\n return (\n prevProps.value === nextProps.value &&\n prevProps.status === nextProps.status &&\n prevProps.disabled === nextProps.disabled &&\n prevProps.errorMessage === nextProps.errorMessage &&\n prevProps.typo === nextProps.typo &&\n prevProps.boxStyle === nextProps.boxStyle &&\n prevProps.innerBoxStyle === nextProps.innerBoxStyle &&\n prevProps.isTextArea === nextProps.isTextArea &&\n prevProps.label === nextProps.label &&\n prevProps.focusColor === nextProps.focusColor &&\n prevProps.borderColor === nextProps.borderColor &&\n prevProps.labelColor === nextProps.labelColor &&\n prevProps.onChangeText === nextProps.onChangeText\n );\n};\n\nexport default React.memo(ZSTextField, arePropsEqual);\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useState, useEffect } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnUI, useDerivedValue } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../model/useThemeProvider';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\n\ninterface TextFieldProps {\n typo?: TypoOptions;\n status?: 'default' | 'error';\n value: string;\n onChangeText?: (text: string) => void;\n inputBgColor?: string;\n labelBgColor?: string;\n label?: string;\n labelColor?: string;\n placeHolderColor?: string;\n fontSize?: number;\n borderColor?: string;\n borderRadius?: number;\n focusColor?: string;\n errorColor?: string;\n paddingHorizontal?: number;\n borderWidth?: number;\n errorMessage?: string;\n textInputProps?: TextInputProps;\n boxStyle?: BoxStyle;\n innerBoxStyle?: 'top' | 'middle' | 'bottom';\n disabled?: boolean;\n allowFontScaling?: boolean;\n isTextArea?: boolean;\n}\n\nfunction ZSTextField({\n typo = 'body.2',\n status = 'default',\n value,\n onChangeText,\n label = 'Placeholder',\n labelColor,\n placeHolderColor,\n inputBgColor,\n labelBgColor,\n borderWidth = 1.2,\n borderColor,\n focusColor,\n errorColor,\n borderRadius = 14,\n paddingHorizontal = 15,\n errorMessage,\n textInputProps,\n boxStyle = 'outline',\n innerBoxStyle,\n disabled = false,\n allowFontScaling = true,\n isTextArea = false,\n}: TextFieldProps): JSX.Element {\n const { typography, palette } = useTheme();\n const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n const fErrorColor = errorColor || palette.danger.main;\n\n const fontSize = useMemo(() => {\n return extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17;\n }, [typography, primaryStyle, subStyle]);\n \n const fontFamily = useMemo(() => {\n return extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '';\n }, [typography, primaryStyle, subStyle]);\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const boxHeightValue = useSharedValue(0);\n const isFocusedValue = useSharedValue(false);\n const hasValueState = useSharedValue(false);\n const errorState = useSharedValue(false);\n\n const labelAnimationValue = useDerivedValue(() => {\n 'worklet';\n const shouldShow = hasValueState.value || isFocusedValue.value;\n return withTiming(shouldShow ? 1 : 0, { duration: 100 });\n }, []);\n\n const focusAnimationValue = useDerivedValue(() => {\n 'worklet';\n return withTiming(isFocusedValue.value ? 1 : 0, { duration: 150 });\n }, []);\n\n const errorAnimationValue = useDerivedValue(() => {\n 'worklet';\n return withTiming(errorState.value ? 1 : 0, { duration: 150 });\n }, []);\n\n // 상태 동기화를 위한 useEffect\n useEffect(() => {\n runOnUI(() => {\n 'worklet';\n isFocusedValue.value = isFocused;\n hasValueState.value = value !== '';\n errorState.value = status === 'error';\n })();\n }, [value, isFocused, status, isFocusedValue, hasValueState, errorState]);\n\n const animationConstants = {\n baseFontSize: fontSize + (boxStyle === 'inbox' ? 1 : 0),\n targetFontSize: boxStyle === 'inbox' ? 10 : 11,\n baseTop: isTextArea ? 12 : 0,\n targetTopOffset: boxStyle === 'inbox' ? 17 : 2,\n };\n\n // 라벨 애니메이션 스타일\n const animatedLabelStyle = useAnimatedStyle(() => {\n 'worklet';\n\n const labelFontSize = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [animationConstants.baseFontSize, animationConstants.targetFontSize],\n 'clamp'\n );\n\n const labelTop = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [\n animationConstants.baseTop,\n isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + animationConstants.targetTopOffset,\n ],\n 'clamp'\n );\n\n return {\n top: labelTop,\n fontSize: labelFontSize,\n };\n }, [animationConstants.baseFontSize, animationConstants.targetFontSize, animationConstants.baseTop, animationConstants.targetTopOffset, isTextArea]);\n\n // 레이아웃 핸들러\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n 'worklet';\n \n const { height } = event.nativeEvent.layout;\n if (boxHeightValue.value !== height) boxHeightValue.value = height;\n }, [boxHeightValue]);\n\n // 포커스 및 블러 핸들러\n const handleFocus = useCallback(() => setIsFocused(true), []);\n const handleBlur = useCallback(() => setIsFocused(false), []);\n\n const colorConfig = useMemo(() => ({\n primaryColor: focusColor || palette.primary.main,\n defaultBorderColor: borderColor || palette.grey[30],\n defaultLabelColor: labelColor || palette.text.secondary,\n placeholderColor: placeHolderColor || palette.grey[40],\n errorColor: fErrorColor,\n }), [focusColor, palette.primary.main, borderColor, palette.grey, labelColor, palette.text.secondary, placeHolderColor, fErrorColor]);\n\n // 애니메이션된 색상 스타일\n const animatedColorStyle = useAnimatedStyle(() => {\n 'worklet';\n \n const borderColor = errorAnimationValue.value > 0 \n ? colorConfig.errorColor\n : focusAnimationValue.value > 0\n ? colorConfig.primaryColor\n : colorConfig.defaultBorderColor;\n \n return {\n borderColor,\n };\n }, [colorConfig, errorAnimationValue, focusAnimationValue]);\n\n // 애니메이션된 라벨 색상 스타일\n const animatedLabelColorStyle = useAnimatedStyle(() => {\n 'worklet';\n \n const hasValueAnimation = hasValueState.value ? 1 : 0;\n const labelColor = errorAnimationValue.value > 0\n ? colorConfig.errorColor\n : focusAnimationValue.value > 0\n ? colorConfig.primaryColor\n : hasValueAnimation > 0\n ? colorConfig.defaultLabelColor\n : colorConfig.placeholderColor;\n \n return {\n color: labelColor,\n };\n }, [colorConfig, errorAnimationValue, focusAnimationValue]);\n\n const styleConfig = useMemo(() => {\n const baseStyle = {\n width: '100%' as const,\n justifyContent: isTextArea ? 'flex-start' as const : 'center' as const,\n borderRadius,\n paddingHorizontal,\n backgroundColor: inputBgColor || palette.background.base,\n paddingTop: boxStyle === 'inbox' ? 13 : 0,\n };\n\n // 박스 스타일에 따른 테두리 설정\n let borderStyle = {};\n if (boxStyle === 'outline' || boxStyle === 'inbox') {\n borderStyle = { borderWidth };\n } else if (boxStyle === 'underline') {\n borderStyle = { borderBottomWidth: borderWidth };\n }\n\n // innerBoxStyle에 따른 스타일 설정\n let innerStyle = {};\n if (innerBoxStyle === 'top') {\n innerStyle = { \n borderBottomLeftRadius: 0, \n borderBottomRightRadius: 0, \n borderBottomWidth: borderWidth / 2 \n };\n } else if (innerBoxStyle === 'middle') {\n innerStyle = { \n borderRadius: 0, \n borderTopWidth: borderWidth / 2, \n borderBottomWidth: borderWidth / 2 \n };\n } else if (innerBoxStyle === 'bottom') {\n innerStyle = { \n borderTopLeftRadius: 0, \n borderTopRightRadius: 0, \n borderTopWidth: borderWidth / 2 \n };\n }\n\n return { ...baseStyle, ...borderStyle, ...innerStyle };\n }, [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette.background.base]);\n\n // 컨테이너 스타일 정의\n const containerStyle: StyleProp<ViewStyle> = styleConfig;\n\n // 라벨 스타일 정의\n const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n fontSize,\n left: paddingHorizontal,\n backgroundColor: labelBgColor || palette.background.base,\n paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n paddingVertical: 2,\n textAlignVertical: 'center',\n fontFamily,\n borderRadius: boxStyle === 'outline' ? 5 : 0,\n overflow: 'hidden',\n }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette.background.base]);\n\n // 텍스트 변경 핸들러\n const handleTextChange = useCallback((text: string) => {\n if (onChangeText) onChangeText(text);\n }, [onChangeText]);\n\n const textInputStyle = useMemo(() => [\n { \n paddingTop: 7 + iosOffset, \n paddingBottom: 5 + iosOffset, \n color: palette.text.base,\n fontSize, \n width: '100%' as const, \n paddingRight: 25, \n fontFamily \n },\n textInputProps?.style,\n ], [palette.text.base, fontSize, fontFamily, textInputProps?.style]);\n\n const shouldShowCloseButton = value && isFocused;\n const shouldShowError = status === 'error' && errorMessage;\n\n return (\n <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n <Animated.View\n style={[containerStyle, animatedColorStyle]}\n onLayout={handleLayout}\n pointerEvents={disabled ? 'none' : 'auto'}\n >\n <TextInput\n {...textInputProps}\n style={textInputStyle}\n value={value}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={handleTextChange}\n allowFontScaling={allowFontScaling}\n selectionColor={palette.grey[50]}\n autoCorrect={false}\n spellCheck={false}\n />\n\n <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, animatedLabelColorStyle]}>\n {label}\n </Animated.Text>\n </ViewAtom>\n\n {shouldShowCloseButton && (\n <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n )}\n </Animated.View>\n\n {shouldShowError && (\n <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n )}\n </ViewAtom>\n );\n}\n\nconst arePropsEqual = (prevProps: TextFieldProps, nextProps: TextFieldProps): boolean => {\n return (\n prevProps.value === nextProps.value &&\n prevProps.status === nextProps.status &&\n prevProps.disabled === nextProps.disabled &&\n prevProps.errorMessage === nextProps.errorMessage &&\n prevProps.typo === nextProps.typo &&\n prevProps.boxStyle === nextProps.boxStyle &&\n prevProps.innerBoxStyle === nextProps.innerBoxStyle &&\n prevProps.isTextArea === nextProps.isTextArea &&\n prevProps.label === nextProps.label &&\n prevProps.focusColor === nextProps.focusColor &&\n prevProps.borderColor === nextProps.borderColor &&\n prevProps.labelColor === nextProps.labelColor &&\n prevProps.onChangeText === nextProps.onChangeText\n );\n};\n\nexport default React.memo(ZSTextField, arePropsEqual);\n"]}
package/build/ui/atoms/AnimatedWrapper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAA8B,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMjF,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkFtB;;AAgBD,wBAA0D"}
1
+ {"version":3,"file":"AnimatedWrapper.d.ts","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAQ,SAAS,EAAY,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAA8B,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMjF,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,WAAkB,EAClB,cAAkB,EAClB,QAA2B,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAsFtB;;AAgBD,wBAA0D"}
package/build/ui/atoms/AnimatedWrapper.js CHANGED
@@ -1,6 +1,6 @@
1
- import React, { useMemo, useCallback, useRef } from 'react';
1
+ import React, { useMemo, useRef } from 'react';
2
2
  import { View, Platform } from 'react-native';
3
- import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
3
+ import Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, useDerivedValue } from 'react-native-reanimated';
4
4
  import { useTheme } from '../../model/useThemeProvider';
5
5
  import { IOS_SHADOW } from '../../theme/elevation';
6
6
  const DEFAULT_DURATION = 200;
@@ -8,15 +8,25 @@ const SHADOW_DURATION = 50;
8
8
  const IS_IOS = Platform.OS === 'ios';
9
9
  function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DEFAULT_DURATION, style, children, color, ...props }) {
10
10
  const { elevation, palette } = useTheme();
11
- const opacity = useRef(useSharedValue(0)).current;
12
- const colorConfig = useMemo(() => {
13
- if (!color)
14
- return { c01: undefined, c02: undefined };
15
- const [c01, c02] = color.split('.');
16
- return { c01, c02 };
17
- }, [color]);
11
+ const animationFinished = useSharedValue(false);
12
+ const staticConfigRef = useRef({
13
+ isIOS: IS_IOS,
14
+ maxShadowOpacity: IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0,
15
+ maxElevation: IS_IOS ? 0 : elevationLevel,
16
+ });
17
+ if (staticConfigRef.current.maxShadowOpacity !== (IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0) ||
18
+ staticConfigRef.current.maxElevation !== (IS_IOS ? 0 : elevationLevel)) {
19
+ staticConfigRef.current = {
20
+ isIOS: IS_IOS,
21
+ maxShadowOpacity: IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0,
22
+ maxElevation: IS_IOS ? 0 : elevationLevel,
23
+ };
24
+ }
18
25
  const backgroundColor = useMemo(() => {
19
- const { c01, c02 } = colorConfig;
26
+ if (!color) {
27
+ return elevationLevel ? palette.background.base : undefined;
28
+ }
29
+ const [c01, c02] = color.split('.');
20
30
  if (c02)
21
31
  return palette[c01][c02];
22
32
  if (c01)
@@ -24,65 +34,63 @@ function AnimatedWrapper({ isAnimation = true, elevationLevel = 0, duration = DE
24
34
  if (elevationLevel)
25
35
  return palette.background.base;
26
36
  return undefined;
27
- }, [colorConfig, palette, elevationLevel]);
28
- const staticStyle = useMemo(() => {
29
- return { ...elevation[elevationLevel] };
30
- }, [elevation, elevationLevel]);
31
- const animationConfig = useMemo(() => {
32
- if (IS_IOS) {
33
- return {
34
- type: 'ios',
35
- maxShadowOpacity: IOS_SHADOW[elevationLevel].shadowOpacity,
36
- };
37
+ }, [color, palette, elevationLevel]);
38
+ const staticStyle = elevation[elevationLevel];
39
+ const shadowProgress = useDerivedValue(() => {
40
+ 'worklet';
41
+ if (animationFinished.value) {
42
+ return withTiming(1, { duration: SHADOW_DURATION });
37
43
  }
38
- return {
39
- type: 'android',
40
- maxElevation: elevationLevel,
41
- };
42
- }, [elevationLevel]);
44
+ return 0;
45
+ }, []);
43
46
  const animatedStyle = useAnimatedStyle(() => {
44
- if (animationConfig.type === 'ios') {
45
- return { shadowOpacity: opacity.value * animationConfig.maxShadowOpacity };
47
+ 'worklet';
48
+ const config = staticConfigRef.current;
49
+ const shadowValue = shadowProgress.value;
50
+ if (config.isIOS) {
51
+ return { shadowOpacity: shadowValue * config.maxShadowOpacity };
46
52
  }
47
- return { elevation: opacity.value * animationConfig.maxElevation };
48
- }, [animationConfig]);
49
- const onEntering = useCallback(() => {
50
- opacity.value = withTiming(1, { duration: SHADOW_DURATION });
51
- }, [opacity]);
53
+ return { elevation: shadowValue * config.maxElevation };
54
+ }, []);
52
55
  const animationProps = useMemo(() => ({
53
56
  entering: FadeInDown.duration(duration).withCallback((finished) => {
54
57
  'worklet';
55
58
  if (finished) {
56
- runOnJS(onEntering)();
59
+ animationFinished.value = true;
57
60
  }
58
61
  }),
59
62
  exiting: FadeOut.duration(50),
60
- }), [duration, onEntering]);
61
- const nonAnimatedStyle = useMemo(() => [
63
+ }), [duration, animationFinished]);
64
+ const baseStyle = useMemo(() => [
62
65
  style,
63
66
  backgroundColor && { backgroundColor },
64
- { ...elevation[elevationLevel] }
65
- ], [style, backgroundColor, elevation, elevationLevel]);
67
+ staticStyle
68
+ ], [style, backgroundColor, staticStyle]);
66
69
  const animatedStyleArray = useMemo(() => [
67
- style,
68
- backgroundColor && { backgroundColor },
69
- staticStyle,
70
+ ...baseStyle,
70
71
  animatedStyle
71
- ], [style, backgroundColor, staticStyle, animatedStyle]);
72
+ ], [baseStyle, animatedStyle]);
72
73
  if (!isAnimation) {
73
- return <View style={nonAnimatedStyle} {...props}>{children}</View>;
74
+ return <View style={baseStyle} {...props}>{children}</View>;
74
75
  }
75
76
  return (<Animated.View style={animatedStyleArray} {...animationProps} {...props}>
76
77
  {children}
77
78
  </Animated.View>);
78
79
  }
79
80
  const arePropsEqual = (prevProps, nextProps) => {
80
- return (prevProps.isAnimation === nextProps.isAnimation &&
81
- prevProps.elevationLevel === nextProps.elevationLevel &&
82
- prevProps.duration === nextProps.duration &&
83
- prevProps.color === nextProps.color &&
84
- prevProps.style === nextProps.style &&
85
- prevProps.children === nextProps.children);
81
+ if (prevProps.children !== nextProps.children)
82
+ return false;
83
+ if (prevProps.style !== nextProps.style)
84
+ return false;
85
+ if (prevProps.isAnimation !== nextProps.isAnimation)
86
+ return false;
87
+ if (prevProps.elevationLevel !== nextProps.elevationLevel)
88
+ return false;
89
+ if (prevProps.duration !== nextProps.duration)
90
+ return false;
91
+ if (prevProps.color !== nextProps.color)
92
+ return false;
93
+ return true;
86
94
  };
87
95
  export default React.memo(AnimatedWrapper, arePropsEqual);
88
96
  //# sourceMappingURL=AnimatedWrapper.js.map