@0610studio/zs-ui 0.8.3 → 0.8.4

package/build/ui/atoms/AnimatedWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useRef } 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';\nimport { SubColorOptions, ViewColor, ViewColorOptions } from '../../theme/types';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\nconst IS_IOS = Platform.OS === 'ios';\n\ninterface AnimatedWrapperProps extends ViewProps {\n  isAnimation: boolean;\n  elevationLevel?: ShadowLevel;\n  duration?: number;\n  color?: ViewColorOptions;\n}\n\nfunction AnimatedWrapper({\n  isAnimation = true,\n  elevationLevel = 0,\n  duration = DEFAULT_DURATION,\n  style,\n  children,\n  color,\n  ...props\n}: AnimatedWrapperProps) {\n  const { elevation, palette } = useTheme();\n  const opacity = useRef(useSharedValue(0)).current;\n  \n  const colorConfig = useMemo(() => {\n    if (!color) return { c01: undefined, c02: undefined };\n    const [c01, c02] = color.split('.') as [ViewColor, SubColorOptions];\n    return { c01, c02 };\n  }, [color]);\n  \n  const backgroundColor = useMemo(() => {\n    const { c01, c02 } = colorConfig;\n    if (c02) return palette[c01][c02];\n    if (c01) return palette.background[c01];\n    if (elevationLevel) return palette.background.base;\n    return undefined;\n  }, [colorConfig, palette, elevationLevel]);\n\n  const staticStyle = useMemo(() => {\n    return { ...elevation[elevationLevel] };\n  }, [elevation, elevationLevel]);\n\n  const animationConfig = useMemo(() => {\n    if (IS_IOS) {\n      return {\n        type: 'ios' as const,\n        maxShadowOpacity: IOS_SHADOW[elevationLevel].shadowOpacity,\n      };\n    }\n    return {\n      type: 'android' as const,\n      maxElevation: elevationLevel,\n    };\n  }, [elevationLevel]);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    if (animationConfig.type === 'ios') {\n      return { shadowOpacity: opacity.value * animationConfig.maxShadowOpacity };\n    }\n    return { elevation: opacity.value * animationConfig.maxElevation };\n  }, [animationConfig]);\n\n  const onEntering = useCallback(() => {\n    opacity.value = withTiming(1, { duration: SHADOW_DURATION });\n  }, [opacity]);\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  const nonAnimatedStyle = useMemo(() => [\n    style,\n    backgroundColor && { backgroundColor },\n    { ...elevation[elevationLevel] }\n  ], [style, backgroundColor, elevation, elevationLevel]);\n\n  const animatedStyleArray = useMemo(() => [\n    style,\n    backgroundColor && { backgroundColor },\n    staticStyle,\n    animatedStyle\n  ], [style, backgroundColor, staticStyle, animatedStyle]);\n\n  if (!isAnimation) {\n    return <View style={nonAnimatedStyle} {...props}>{children}</View>;\n  }\n\n  return (\n    <Animated.View\n      style={animatedStyleArray}\n      {...animationProps}\n      {...props}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst arePropsEqual = (\n  prevProps: AnimatedWrapperProps, \n  nextProps: AnimatedWrapperProps\n): boolean => {\n  return (\n    prevProps.isAnimation === nextProps.isAnimation &&\n    prevProps.elevationLevel === nextProps.elevationLevel &&\n    prevProps.duration === nextProps.duration &&\n    prevProps.color === nextProps.color &&\n    prevProps.style === nextProps.style &&\n    prevProps.children === nextProps.children\n  );\n};\n\nexport default React.memo(AnimatedWrapper, arePropsEqual);\n"]}
+{"version":3,"file":"AnimatedWrapper.js","sourceRoot":"","sources":["../../../src/ui/atoms/AnimatedWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { View, ViewProps, Platform } from 'react-native';\nimport Animated, { FadeInDown, FadeOut, useAnimatedStyle, withTiming, useSharedValue, useDerivedValue } from 'react-native-reanimated';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ShadowLevel } from '../types';\nimport { IOS_SHADOW } from '../../theme/elevation';\nimport { SubColorOptions, ViewColor, ViewColorOptions } from '../../theme/types';\n\nconst DEFAULT_DURATION = 200 as const;\nconst SHADOW_DURATION = 50 as const;\nconst IS_IOS = Platform.OS === 'ios';\n\ninterface AnimatedWrapperProps extends ViewProps {\n  isAnimation: boolean;\n  elevationLevel?: ShadowLevel;\n  duration?: number;\n  color?: ViewColorOptions;\n}\n\nfunction AnimatedWrapper({\n  isAnimation = true,\n  elevationLevel = 0,\n  duration = DEFAULT_DURATION,\n  style,\n  children,\n  color,\n  ...props\n}: AnimatedWrapperProps) {\n  const { elevation, palette } = useTheme();\n  const animationFinished = useSharedValue(false);\n  \n  const staticConfigRef = useRef({\n    isIOS: IS_IOS,\n    maxShadowOpacity: IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0,\n    maxElevation: IS_IOS ? 0 : elevationLevel,\n  });\n  \n  if (staticConfigRef.current.maxShadowOpacity !== (IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0) ||\n      staticConfigRef.current.maxElevation !== (IS_IOS ? 0 : elevationLevel)) {\n    staticConfigRef.current = {\n      isIOS: IS_IOS,\n      maxShadowOpacity: IS_IOS ? IOS_SHADOW[elevationLevel].shadowOpacity : 0,\n      maxElevation: IS_IOS ? 0 : elevationLevel,\n    };\n  }\n  \n  const backgroundColor = useMemo(() => {\n    if (!color) {\n      return elevationLevel ? palette.background.base : undefined;\n    }\n    \n    const [c01, c02] = color.split('.') as [ViewColor, SubColorOptions];\n    if (c02) return palette[c01][c02];\n    if (c01) return palette.background[c01];\n    if (elevationLevel) return palette.background.base;\n    return undefined;\n  }, [color, palette, elevationLevel]);\n\n  const staticStyle = elevation[elevationLevel];\n\n  const shadowProgress = useDerivedValue(() => {\n    'worklet';\n    if (animationFinished.value) {\n      return withTiming(1, { duration: SHADOW_DURATION });\n    }\n    return 0;\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    'worklet';\n    const config = staticConfigRef.current;\n    const shadowValue = shadowProgress.value;\n    \n    if (config.isIOS) {\n      return { shadowOpacity: shadowValue * config.maxShadowOpacity };\n    }\n    return { elevation: shadowValue * config.maxElevation };\n  }, []);\n\n  const animationProps = useMemo(() => ({\n    entering: FadeInDown.duration(duration).withCallback((finished) => {\n      'worklet';\n      if (finished) {\n        animationFinished.value = true;\n      }\n    }),\n    exiting: FadeOut.duration(50),\n  }), [duration, animationFinished]);\n\n  const baseStyle = useMemo(() => [\n    style,\n    backgroundColor && { backgroundColor },\n    staticStyle\n  ], [style, backgroundColor, staticStyle]);\n\n  const animatedStyleArray = useMemo(() => [\n    ...baseStyle,\n    animatedStyle\n  ], [baseStyle, animatedStyle]);\n\n  if (!isAnimation) {\n    return <View style={baseStyle} {...props}>{children}</View>;\n  }\n\n  return (\n    <Animated.View\n      style={animatedStyleArray}\n      {...animationProps}\n      {...props}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst arePropsEqual = (\n  prevProps: AnimatedWrapperProps, \n  nextProps: AnimatedWrapperProps\n): boolean => {\n  if (prevProps.children !== nextProps.children) return false;\n  if (prevProps.style !== nextProps.style) return false;\n  if (prevProps.isAnimation !== nextProps.isAnimation) return false;\n  if (prevProps.elevationLevel !== nextProps.elevationLevel) return false;\n  if (prevProps.duration !== nextProps.duration) return false;\n  if (prevProps.color !== nextProps.color) return false;\n  \n  return true;\n};\n\nexport default React.memo(AnimatedWrapper, arePropsEqual);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0610studio/zs-ui",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": false,
   "description": "EXPO ZS-UI",
   "type": "commonjs",