| 1 | {"version":3,"sources":["ProgressBar.tsx"],"names":["React","Animated","Platform","StyleSheet","View","I18nManager","setColor","withTheme","INDETERMINATE_DURATION","INDETERMINATE_MAX_WIDTH","isRTL","ProgressBar","color","indeterminate","style","progress","visible","theme","rest","current","timer","useRef","Value","fade","width","setWidth","useState","prevWidth","setPrevWidth","indeterminateAnimation","scale","animation","startAnimation","useCallback","timing","duration","toValue","useNativeDriver","isInteraction","start","OS","setValue","loop","stopAnimation","stop","useEffect","onLayout","event","nativeEvent","layout","tintColor","colors","primary","trackTintColor","alpha","rgb","string","busy","min","max","now","styles","container","backgroundColor","opacity","progressBar","transform","translateX","interpolate","inputRange","outputRange","scaleX","create","height","overflow","flex"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n Platform,\n StyleSheet,\n View,\n ViewStyle,\n StyleProp,\n LayoutChangeEvent,\n I18nManager,\n} from 'react-native';\nimport setColor from 'color';\nimport { withTheme } from '../core/theming';\n\ntype Props = React.ComponentPropsWithRef<typeof View> & {\n /**\n * Progress value (between 0 and 1).\n */\n progress?: number;\n /**\n * Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop.\n */\n color?: string;\n /**\n * If the progress bar will show indeterminate progress.\n */\n indeterminate?: boolean;\n /**\n * Whether to show the ProgressBar (true, the default) or hide it (false).\n */\n visible?: boolean;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\nconst INDETERMINATE_DURATION = 2000;\nconst INDETERMINATE_MAX_WIDTH = 0.6;\nconst { isRTL } = I18nManager;\n\n/**\n * Progress bar is an indicator used to present progress of some activity in the app.\n *\n * <div class=\"screenshots\">\n * <img src=\"screenshots/progress-bar.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ProgressBar, Colors } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <ProgressBar progress={0.5} color={Colors.red800} />\n * );\n *\n * export default MyComponent;\n * ```\n */\nconst ProgressBar = ({\n color,\n indeterminate,\n style,\n progress = 0,\n visible = true,\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>(new Animated.Value(0));\n const [width, setWidth] = React.useState<number>(0);\n const [prevWidth, setPrevWidth] = React.useState<number>(0);\n\n const indeterminateAnimation =\n React.useRef<Animated.CompositeAnimation | null>(null);\n\n const { scale } = theme.animation;\n\n const startAnimation = React.useCallback(() => {\n // Show progress bar\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 1,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n\n // Animate progress bar\n if (indeterminate) {\n if (!indeterminateAnimation.current) {\n indeterminateAnimation.current = Animated.timing(timer, {\n duration: INDETERMINATE_DURATION,\n toValue: 1,\n // Animated.loop does not work if useNativeDriver is true on web\n useNativeDriver: Platform.OS !== 'web',\n isInteraction: false,\n });\n }\n\n // Reset timer to the beginning\n timer.setValue(0);\n\n Animated.loop(indeterminateAnimation.current).start();\n } else {\n Animated.timing(timer, {\n duration: 200 * scale,\n toValue: progress ? progress : 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n }\n }, [scale, timer, progress, indeterminate, fade]);\n\n const stopAnimation = React.useCallback(() => {\n // Stop indeterminate animation\n if (indeterminateAnimation.current) {\n indeterminateAnimation.current.stop();\n }\n\n Animated.timing(fade, {\n duration: 200 * scale,\n toValue: 0,\n useNativeDriver: true,\n isInteraction: false,\n }).start();\n }, [fade, scale]);\n\n React.useEffect(() => {\n if (visible) startAnimation();\n else stopAnimation();\n }, [visible, startAnimation, stopAnimation]);\n\n React.useEffect(() => {\n // Start animation the very first time when previously the width was unclear\n if (visible && prevWidth === 0) {\n startAnimation();\n }\n }, [prevWidth, startAnimation, visible]);\n\n const onLayout = (event: LayoutChangeEvent) => {\n setPrevWidth(width);\n setWidth(event.nativeEvent.layout.width);\n };\n\n const tintColor = color || theme.colors.primary;\n const trackTintColor = setColor(tintColor).alpha(0.38).rgb().string();\n\n return (\n <View\n onLayout={onLayout}\n {...rest}\n accessible\n accessibilityRole=\"progressbar\"\n accessibilityState={{ busy: visible }}\n accessibilityValue={\n indeterminate ? {} : { min: 0, max: 100, now: progress * 100 }\n }\n >\n <Animated.View\n style={[\n styles.container,\n { backgroundColor: trackTintColor, opacity: fade },\n style,\n ]}\n >\n {width ? (\n <Animated.View\n style={[\n styles.progressBar,\n {\n width,\n backgroundColor: tintColor,\n transform: [\n {\n translateX: timer.interpolate(\n indeterminate\n ? {\n inputRange: [0, 0.5, 1],\n outputRange: [\n (isRTL ? 1 : -1) * 0.5 * width,\n (isRTL ? 1 : -1) *\n 0.5 *\n INDETERMINATE_MAX_WIDTH *\n width,\n (isRTL ? -1 : 1) * 0.7 * width,\n ],\n }\n : {\n inputRange: [0, 1],\n outputRange: [(isRTL ? 1 : -1) * 0.5 * width, 0],\n }\n ),\n },\n {\n // Workaround for workaround for https://github.com/facebook/react-native/issues/6278\n scaleX: timer.interpolate(\n indeterminate\n ? {\n inputRange: [0, 0.5, 1],\n outputRange: [\n 0.0001,\n INDETERMINATE_MAX_WIDTH,\n 0.0001,\n ],\n }\n : {\n inputRange: [0, 1],\n outputRange: [0.0001, 1],\n }\n ),\n },\n ],\n },\n ]}\n />\n ) : null}\n </Animated.View>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n height: 4,\n overflow: 'hidden',\n },\n\n progressBar: {\n flex: 1,\n },\n});\n\nexport default withTheme(ProgressBar);\n"]} |