| 1 | {"version":3,"sources":["ActivityIndicator.tsx"],"names":["DURATION","ActivityIndicator","animating","color","indicatorColor","hidesWhenStopped","size","indicatorSize","style","theme","rest","current","timer","React","useRef","Animated","Value","fade","rotation","undefined","animation","scale","startRotation","useCallback","timing","duration","toValue","isInteraction","useNativeDriver","start","setValue","loop","stopRotation","stop","useEffect","easing","Easing","linear","Platform","OS","colors","primary","frames","bezier","containerStyle","width","height","overflow","styles","container","busy","opacity","map","index","inputRange","Array","from","_","frameIndex","outputRange","progress","direction","layerStyle","transform","rotate","interpolate","viewportStyle","translateY","offsetStyle","top","lineStyle","borderColor","borderWidth","borderRadius","layer","StyleSheet","create","justifyContent","alignItems","absoluteFillObject"],"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';\n\ntype Props = React.ComponentPropsWithRef<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: ReactNativePaper.Theme;\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 */\nconst ActivityIndicator = ({\n animating = true,\n color: indicatorColor,\n hidesWhenStopped = true,\n size: indicatorSize = 'small',\n style,\n theme,\n ...rest\n}: Props) => {\n const { current: timer } = React.useRef<Animated.Value>(\n new Animated.Value(0)\n );\n const { current: fade } = React.useRef<Animated.Value>(\n new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)\n );\n\n const rotation = React.useRef<Animated.CompositeAnimation | undefined>(\n undefined\n );\n\n const {\n animation: { scale },\n } = theme;\n\n const startRotation = React.useCallback(() => {\n // Show indicator\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 1,\n isInteraction: false,\n useNativeDriver: true,\n }).start();\n\n // Circular animation in loop\n if (rotation.current) {\n timer.setValue(0);\n // $FlowFixMe\n Animated.loop(rotation.current).start();\n }\n }, [scale, fade, timer]);\n\n const stopRotation = () => {\n if (rotation.current) {\n rotation.current.stop();\n }\n };\n\n React.useEffect(() => {\n if (rotation.current === undefined) {\n // Circular animation in loop\n rotation.current = 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\n if (animating) {\n startRotation();\n } else if (hidesWhenStopped) {\n // Hide indicator first and then stop rotation\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start(stopRotation);\n } else {\n stopRotation();\n }\n }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);\n\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' as const,\n };\n\n return (\n <View\n style={[styles.container, style]}\n {...rest}\n accessible\n accessibilityRole=\"progressbar\"\n accessibilityState={{ busy: animating }}\n >\n <Animated.View\n style={[{ width: size, height: size, opacity: fade }]}\n collapsable={false}\n >\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(new Array(frames), (_, 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) + rotation}deg`;\n });\n\n const layerStyle = {\n width: size,\n height: size,\n transform: [\n {\n rotate: timer.interpolate({\n inputRange: [0, 1],\n outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],\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\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"]} |