2dfe59cd35386c2d853804a0f542399e.json
20.3 KB
{"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 _objectSpread2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectSpread\"));var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));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 _Easing=_interopRequireDefault(require(\"react-native-web/dist/exports/Easing\"));var _Platform=_interopRequireDefault(require(\"react-native-web/dist/exports/Platform\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _theming=require(\"../core/theming\");var _jsxFileName=\"/Users/satya/Workspace/Callstack/react-native-paper/src/components/ActivityIndicator.tsx\";var DURATION=2400;var ActivityIndicator=function(_React$Component){(0,_inherits2.default)(ActivityIndicator,_React$Component);function ActivityIndicator(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ActivityIndicator);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)(ActivityIndicator)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={timer:new _Animated.default.Value(0),fade:new _Animated.default.Value(!_this.props.animating&&_this.props.hidesWhenStopped?0:1)};_this.rotation=undefined;_this.startRotation=function(){var _this$state=_this.state,fade=_this$state.fade,timer=_this$state.timer;_Animated.default.timing(fade,{duration:200,toValue:1,isInteraction:false,useNativeDriver:true}).start();if(_this.rotation){timer.setValue(0);_Animated.default.loop(_this.rotation).start();}};_this.stopRotation=function(){if(_this.rotation){_this.rotation.stop();}};return _this;}(0,_createClass2.default)(ActivityIndicator,[{key:\"componentDidMount\",value:function componentDidMount(){var animating=this.props.animating;var timer=this.state.timer;this.rotation=_Animated.default.timing(timer,{duration:DURATION,easing:_Easing.default.linear,useNativeDriver:_Platform.default.OS!=='web',toValue:1,isInteraction:false});if(animating){this.startRotation();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props=this.props,animating=_this$props.animating,hidesWhenStopped=_this$props.hidesWhenStopped;var fade=this.state.fade;if(animating!==prevProps.animating){if(animating){this.startRotation();}else if(hidesWhenStopped){_Animated.default.timing(fade,{duration:200,toValue:0,useNativeDriver:true,isInteraction:false}).start(this.stopRotation.bind(this));}else{this.stopRotation();}}}},{key:\"render\",value:function render(){var _this$state2=this.state,fade=_this$state2.fade,timer=_this$state2.timer;var _this$props2=this.props,animating=_this$props2.animating,indicatorColor=_this$props2.color,hidesWhenStopped=_this$props2.hidesWhenStopped,indicatorSize=_this$props2.size,style=_this$props2.style,theme=_this$props2.theme,rest=(0,_objectWithoutProperties2.default)(_this$props2,[\"animating\",\"color\",\"hidesWhenStopped\",\"size\",\"style\",\"theme\"]);var color=indicatorColor||theme.colors.primary;var size=typeof indicatorSize==='string'?indicatorSize==='small'?24:48:indicatorSize?indicatorSize:24;var frames=60*DURATION/1000;var easing=_Easing.default.bezier(0.4,0.0,0.7,1.0);var containerStyle={width:size,height:size/2,overflow:'hidden'};return React.createElement(_View.default,(0,_extends2.default)({style:[styles.container,style]},rest,{__source:{fileName:_jsxFileName,lineNumber:178}}),React.createElement(_Animated.default.View,{style:[{width:size,height:size,opacity:fade}],__source:{fileName:_jsxFileName,lineNumber:179}},[0,1].map(function(index){var inputRange=Array.from(new Array(frames),function(_,frameIndex){return frameIndex/(frames-1);});var outputRange=Array.from(new Array(frames),function(_,frameIndex){var progress=2*frameIndex/(frames-1);var rotation=index?+(360-15):-(180-15);if(progress>1.0){progress=2.0-progress;}var direction=index?-1:+1;return direction*(180-30)*easing(progress)+rotation+\"deg\";});var layerStyle={width:size,height:size,transform:[{rotate:timer.interpolate({inputRange:[0,1],outputRange:[0+30+15+\"deg\",2*360+30+15+\"deg\"]})}]};var viewportStyle={width:size,height:size,transform:[{translateY:index?-size/2:0},{rotate:timer.interpolate({inputRange:inputRange,outputRange:outputRange})}]};var offsetStyle=index?{top:size/2}:null;var lineStyle={width:size,height:size,borderColor:color,borderWidth:size/10,borderRadius:size/2};return React.createElement(_Animated.default.View,{key:index,style:[styles.layer],__source:{fileName:_jsxFileName,lineNumber:243}},React.createElement(_Animated.default.View,{style:layerStyle,__source:{fileName:_jsxFileName,lineNumber:244}},React.createElement(_Animated.default.View,{style:[containerStyle,offsetStyle],collapsable:false,__source:{fileName:_jsxFileName,lineNumber:245}},React.createElement(_Animated.default.View,{style:viewportStyle,__source:{fileName:_jsxFileName,lineNumber:249}},React.createElement(_Animated.default.View,{style:containerStyle,collapsable:false,__source:{fileName:_jsxFileName,lineNumber:250}},React.createElement(_Animated.default.View,{style:lineStyle,__source:{fileName:_jsxFileName,lineNumber:251}}))))));})));}}]);return ActivityIndicator;}(React.Component);ActivityIndicator.defaultProps={animating:true,size:'small',hidesWhenStopped:true};var styles=_StyleSheet.default.create({container:{justifyContent:'center',alignItems:'center'},layer:(0,_objectSpread2.default)({},_StyleSheet.default.absoluteFillObject,{justifyContent:'center',alignItems:'center'})});var _default=(0,_theming.withTheme)(ActivityIndicator);exports.default=_default;","map":{"version":3,"sources":["ActivityIndicator.tsx"],"names":["DURATION","ActivityIndicator","React","Component","defaultProps","animating","size","hidesWhenStopped","state","timer","Animated","fade","rotation","undefined","duration","easing","Easing","useNativeDriver","Platform","toValue","isInteraction","prevProps","startRotation","stopRotation","indicatorColor","indicatorSize","style","theme","rest","color","frames","containerStyle","width","height","overflow","styles","opacity","inputRange","Array","frameIndex","outputRange","progress","index","direction","layerStyle","transform","rotate","viewportStyle","translateY","offsetStyle","top","lineStyle","borderColor","borderWidth","borderRadius","StyleSheet","container","justifyContent","alignItems","layer","withTheme"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n Easing,\n Platform,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\nimport { withTheme } from '../core/theming';\nimport { Theme } from '../types';\n\ntype Props = React.ComponentProps<typeof View> & {\n /**\n * Whether to show the indicator or hide it.\n */\n animating?: boolean;\n /**\n * The color of the spinner.\n */\n color?: string;\n /**\n * Size of the indicator.\n */\n size?: 'small' | 'large' | number;\n /**\n * Whether the indicator should hide when not animating.\n */\n hidesWhenStopped?: boolean;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: Theme;\n};\n\ntype State = {\n timer: Animated.Value;\n fade: Animated.Value;\n};\n\nconst DURATION = 2400;\n\n/**\n * Activity indicator is used to present progress of some activity in the app.\n * It can be used as a drop-in for the ActivityIndicator shipped with React Native.\n *\n * <div class=\"screenshots\">\n * <img src=\"screenshots/activity-indicator.gif\" style=\"width: 100px;\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ActivityIndicator, Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <ActivityIndicator animating={true} color={Colors.red800} />\n * );\n *\n * export default MyComponent;\n * ```\n */\nclass ActivityIndicator extends React.Component<Props, State> {\n static defaultProps: Partial<Props> = {\n animating: true,\n size: 'small',\n hidesWhenStopped: true,\n };\n\n state = {\n timer: new Animated.Value(0),\n fade: new Animated.Value(\n !this.props.animating && this.props.hidesWhenStopped ? 0 : 1\n ),\n };\n\n rotation: Animated.CompositeAnimation | undefined = undefined;\n\n componentDidMount() {\n const { animating } = this.props;\n const { timer } = this.state;\n\n // Circular animation in loop\n this.rotation = Animated.timing(timer, {\n duration: DURATION,\n easing: Easing.linear,\n // Animated.loop does not work if useNativeDriver is true on web\n useNativeDriver: Platform.OS !== 'web',\n toValue: 1,\n isInteraction: false,\n });\n\n if (animating) {\n this.startRotation();\n }\n }\n\n componentDidUpdate(prevProps: Props) {\n const { animating, hidesWhenStopped } = this.props;\n const { fade } = this.state;\n\n if (animating !== prevProps.animating) {\n if (animating) {\n this.startRotation();\n } else if (hidesWhenStopped) {\n // Hide indicator first and then stop rotation\n Animated.timing(fade, {\n duration: 200,\n toValue: 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start(this.stopRotation.bind(this));\n } else {\n this.stopRotation();\n }\n }\n }\n\n private startRotation = () => {\n const { fade, timer } = this.state;\n\n // Show indicator\n Animated.timing(fade, {\n duration: 200,\n toValue: 1,\n isInteraction: false,\n useNativeDriver: true,\n }).start();\n\n // Circular animation in loop\n if (this.rotation) {\n timer.setValue(0);\n // $FlowFixMe\n Animated.loop(this.rotation).start();\n }\n };\n\n private stopRotation = () => {\n if (this.rotation) {\n this.rotation.stop();\n }\n };\n\n render() {\n const { fade, timer } = this.state;\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n animating,\n color: indicatorColor,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n hidesWhenStopped,\n size: indicatorSize,\n style,\n theme,\n ...rest\n } = this.props;\n const color = indicatorColor || theme.colors.primary;\n const size =\n typeof indicatorSize === 'string'\n ? indicatorSize === 'small'\n ? 24\n : 48\n : indicatorSize\n ? indicatorSize\n : 24;\n\n const frames = (60 * DURATION) / 1000;\n const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);\n const containerStyle = {\n width: size,\n height: size / 2,\n overflow: 'hidden',\n };\n\n return (\n <View style={[styles.container, style]} {...rest}>\n <Animated.View style={[{ width: size, height: size, opacity: fade }]}>\n {[0, 1].map(index => {\n // Thanks to https://github.com/n4kz/react-native-indicators for the great work\n const inputRange = Array.from(\n new Array(frames),\n (_, frameIndex) => frameIndex / (frames - 1)\n );\n const outputRange = Array.from(\n new Array(frames),\n (_, frameIndex) => {\n let progress = (2 * frameIndex) / (frames - 1);\n const rotation = index ? +(360 - 15) : -(180 - 15);\n\n if (progress > 1.0) {\n progress = 2.0 - progress;\n }\n\n const direction = index ? -1 : +1;\n\n return `${direction * (180 - 30) * easing(progress) +\n rotation}deg`;\n }\n );\n\n const layerStyle = {\n width: size,\n height: size,\n transform: [\n {\n rotate: timer.interpolate({\n inputRange: [0, 1],\n outputRange: [\n `${0 + 30 + 15}deg`,\n `${2 * 360 + 30 + 15}deg`,\n ],\n }),\n },\n ],\n };\n\n const viewportStyle = {\n width: size,\n height: size,\n transform: [\n {\n translateY: index ? -size / 2 : 0,\n },\n {\n rotate: timer.interpolate({ inputRange, outputRange }),\n },\n ],\n };\n\n const offsetStyle = index ? { top: size / 2 } : null;\n\n const lineStyle = {\n width: size,\n height: size,\n borderColor: color,\n borderWidth: size / 10,\n borderRadius: size / 2,\n };\n\n return (\n <Animated.View key={index} style={[styles.layer]}>\n <Animated.View style={layerStyle}>\n <Animated.View\n style={[containerStyle, offsetStyle]}\n collapsable={false}\n >\n <Animated.View style={viewportStyle}>\n <Animated.View style={containerStyle} collapsable={false}>\n <Animated.View style={lineStyle} />\n </Animated.View>\n </Animated.View>\n </Animated.View>\n </Animated.View>\n </Animated.View>\n );\n })}\n </Animated.View>\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n\n layer: {\n ...StyleSheet.absoluteFillObject,\n\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n\nexport default withTheme(ActivityIndicator);\n"]},"metadata":{},"sourceType":"script"}