| 1 | {"version":3,"sources":["CrossFadeIcon.tsx"],"names":["React","Animated","StyleSheet","View","Icon","isValidIcon","isEqualIcon","withTheme","CrossFadeIcon","color","size","source","theme","currentIcon","setCurrentIcon","useState","previousIcon","setPreviousIcon","current","fade","useRef","Value","scale","animation","useEffect","setValue","timing","duration","toValue","useNativeDriver","start","opacityPrev","opacityNext","interpolate","inputRange","outputRange","rotatePrev","rotateNext","styles","content","height","width","icon","opacity","transform","rotate","create","alignItems","justifyContent","position","top","left","right","bottom"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, StyleSheet, View } from 'react-native';\nimport Icon, { isValidIcon, IconSource, isEqualIcon } from './Icon';\n\nimport { withTheme } from '../core/theming';\n\ntype Props = {\n /**\n * Icon to display for the `CrossFadeIcon`.\n */\n source: IconSource;\n /**\n * Color of the icon.\n */\n color: string;\n /**\n * Size of the icon.\n */\n size: number;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\nconst CrossFadeIcon = ({ color, size, source, theme }: Props) => {\n const [currentIcon, setCurrentIcon] = React.useState<IconSource>(\n () => source\n );\n const [previousIcon, setPreviousIcon] = React.useState<IconSource | null>(\n null\n );\n const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(1));\n\n const { scale } = theme.animation;\n\n if (currentIcon !== source) {\n setPreviousIcon(() => currentIcon);\n setCurrentIcon(() => source);\n }\n\n React.useEffect(() => {\n if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {\n fade.setValue(1);\n\n Animated.timing(fade, {\n duration: scale * 200,\n toValue: 0,\n useNativeDriver: true,\n }).start();\n }\n }, [currentIcon, previousIcon, fade, scale]);\n\n const opacityPrev = fade;\n const opacityNext = previousIcon\n ? fade.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0],\n })\n : 1;\n\n const rotatePrev = fade.interpolate({\n inputRange: [0, 1],\n outputRange: ['-90deg', '0deg'],\n });\n\n const rotateNext = previousIcon\n ? fade.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '-180deg'],\n })\n : '0deg';\n\n return (\n <View\n style={[\n styles.content,\n {\n height: size,\n width: size,\n },\n ]}\n >\n {previousIcon ? (\n <Animated.View\n style={[\n styles.icon,\n {\n opacity: opacityPrev,\n transform: [{ rotate: rotatePrev }],\n },\n ]}\n >\n <Icon source={previousIcon} size={size} color={color} />\n </Animated.View>\n ) : null}\n <Animated.View\n style={[\n styles.icon,\n {\n opacity: opacityNext,\n transform: [{ rotate: rotateNext }],\n },\n ]}\n >\n <Icon source={currentIcon} size={size} color={color} />\n </Animated.View>\n </View>\n );\n};\n\nexport default withTheme(CrossFadeIcon);\n\nconst styles = StyleSheet.create({\n content: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n icon: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n});\n"]} |