{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var React=_interopRequireWildcard(require(\"react\"));var _Animated=_interopRequireDefault(require(\"react-native-web/dist/exports/Animated\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _Icon=_interopRequireWildcard(require(\"./Icon\"));var _theming=require(\"../core/theming\");var _jsxFileName=\"/Users/satya/Workspace/Callstack/react-native-paper/src/components/CrossFadeIcon.tsx\";var CrossFadeIcon=function(_React$Component){(0,_inherits2.default)(CrossFadeIcon,_React$Component);function CrossFadeIcon(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,CrossFadeIcon);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(CrossFadeIcon)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={currentIcon:_this.props.source,previousIcon:null,fade:new _Animated.default.Value(1)};return _this;}(0,_createClass2.default)(CrossFadeIcon,[{key:\"componentDidUpdate\",value:function componentDidUpdate(_,prevState){var previousIcon=this.state.previousIcon;var scale=this.props.theme.animation.scale;if(!(0,_Icon.isValidIcon)(previousIcon)||(0,_Icon.isEqualIcon)(previousIcon,prevState.previousIcon)){return;}this.state.fade.setValue(1);_Animated.default.timing(this.state.fade,{duration:scale*200,toValue:0}).start();}},{key:\"render\",value:function render(){var _this$props=this.props,color=_this$props.color,size=_this$props.size;var opacityPrev=this.state.fade;var opacityNext=this.state.previousIcon?this.state.fade.interpolate({inputRange:[0,1],outputRange:[1,0]}):1;var rotatePrev=this.state.fade.interpolate({inputRange:[0,1],outputRange:['-90deg','0deg']});var rotateNext=this.state.previousIcon?this.state.fade.interpolate({inputRange:[0,1],outputRange:['0deg','-180deg']}):'0deg';return React.createElement(_View.default,{style:[styles.content,{height:size,width:size}],__source:{fileName:_jsxFileName,lineNumber:97}},this.state.previousIcon?React.createElement(_Animated.default.View,{style:[styles.icon,{opacity:opacityPrev,transform:[{rotate:rotatePrev}]}],__source:{fileName:_jsxFileName,lineNumber:107}},React.createElement(_Icon.default,{source:this.state.previousIcon,size:size,color:color,__source:{fileName:_jsxFileName,lineNumber:116}})):null,React.createElement(_Animated.default.View,{style:[styles.icon,{opacity:opacityNext,transform:[{rotate:rotateNext}]}],__source:{fileName:_jsxFileName,lineNumber:119}},React.createElement(_Icon.default,{source:this.state.currentIcon,size:size,color:color,__source:{fileName:_jsxFileName,lineNumber:128}})));}}],[{key:\"getDerivedStateFromProps\",value:function getDerivedStateFromProps(nextProps,nextState){if(nextState.currentIcon===nextProps.source){return null;}return{currentIcon:nextProps.source,previousIcon:nextState.currentIcon};}}]);return CrossFadeIcon;}(React.Component);var _default=(0,_theming.withTheme)(CrossFadeIcon);exports.default=_default;var styles=_StyleSheet.default.create({content:{alignItems:'center',justifyContent:'center'},icon:{position:'absolute',top:0,left:0,right:0,bottom:0}});","map":{"version":3,"sources":["CrossFadeIcon.tsx"],"names":["CrossFadeIcon","React","Component","nextProps","nextState","currentIcon","previousIcon","state","fade","Animated","_","prevState","scale","isValidIcon","isEqualIcon","duration","toValue","color","size","opacityPrev","opacityNext","inputRange","outputRange","rotatePrev","rotateNext","styles","height","width","opacity","transform","rotate","withTheme","StyleSheet","content","alignItems","justifyContent","icon","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, isEqualIcon, IconSource } from './Icon';\n\nimport { withTheme } from '../core/theming';\nimport { Theme } from '../types';\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: Theme;\n};\n\ntype State = {\n  currentIcon: IconSource;\n  previousIcon: IconSource | null;\n  fade: Animated.Value;\n};\n\nclass CrossFadeIcon extends React.Component<Props, State> {\n  static getDerivedStateFromProps(nextProps: Props, nextState: State) {\n    if (nextState.currentIcon === nextProps.source) {\n      return null;\n    }\n\n    return {\n      currentIcon: nextProps.source,\n      previousIcon: nextState.currentIcon,\n    };\n  }\n\n  state: State = {\n    currentIcon: this.props.source,\n    previousIcon: null,\n    fade: new Animated.Value(1),\n  };\n\n  componentDidUpdate(_: Props, prevState: State) {\n    const { previousIcon } = this.state;\n    const {\n      theme: {\n        animation: { scale },\n      },\n    } = this.props;\n\n    if (\n      !isValidIcon(previousIcon) ||\n      isEqualIcon(previousIcon, prevState.previousIcon)\n    ) {\n      return;\n    }\n\n    this.state.fade.setValue(1);\n\n    Animated.timing(this.state.fade, {\n      duration: scale * 200,\n      toValue: 0,\n    }).start();\n  }\n\n  render() {\n    const { color, size } = this.props;\n    const opacityPrev = this.state.fade;\n    const opacityNext = this.state.previousIcon\n      ? this.state.fade.interpolate({\n          inputRange: [0, 1],\n          outputRange: [1, 0],\n        })\n      : 1;\n\n    const rotatePrev = this.state.fade.interpolate({\n      inputRange: [0, 1],\n      outputRange: ['-90deg', '0deg'],\n    });\n\n    const rotateNext = this.state.previousIcon\n      ? this.state.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        {this.state.previousIcon ? (\n          <Animated.View\n            style={[\n              styles.icon,\n              {\n                opacity: opacityPrev,\n                transform: [{ rotate: rotatePrev }],\n              },\n            ]}\n          >\n            <Icon source={this.state.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={this.state.currentIcon} size={size} color={color} />\n        </Animated.View>\n      </View>\n    );\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"]},"metadata":{},"sourceType":"script"}