Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 1x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x | /**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type { ColorValue } from '../../types';
import type { ViewProps } from '../View';
import * as React from 'react';
import StyleSheet from '../StyleSheet';
import View from '../View';
type ProgressBarProps = {
...ViewProps,
color?: ColorValue,
indeterminate?: boolean,
progress?: number,
trackColor?: ColorValue
};
const ProgressBar: React.AbstractComponent<
ProgressBarProps,
React.ElementRef<typeof View>
> = React.forwardRef((props, ref) => {
const {
color = '#1976D2',
indeterminate = false,
progress = 0,
trackColor = 'transparent',
style,
...other
} = props;
const percentageProgress = progress * 100;
const progressRef = React.useRef(null);
React.useEffect(() => {
const width = indeterminate ? '25%' : `${percentageProgress}%`;
Eif (progressRef.current != null) {
progressRef.current.setNativeProps({
style: { width }
});
}
}, [indeterminate, percentageProgress, progressRef]);
return (
<View
{...other}
accessibilityRole="progressbar"
accessibilityValue={{
max: 100,
min: 0,
now: indeterminate ? null : percentageProgress
}}
ref={ref}
style={[styles.track, style, { backgroundColor: trackColor }]}
>
<View
ref={progressRef}
style={[styles.progress, indeterminate && styles.animation, { backgroundColor: color }]}
/>
</View>
);
});
ProgressBar.displayName = 'ProgressBar';
const styles = StyleSheet.create({
track: {
forcedColorAdjust: 'none',
height: 5,
overflow: 'hidden',
userSelect: 'none',
zIndex: 0
},
progress: {
forcedColorAdjust: 'none',
height: '100%',
zIndex: -1
},
animation: {
animationDuration: '1s',
animationKeyframes: [
{
'0%': { transform: [{ translateX: '-100%' }] },
'100%': { transform: [{ translateX: '400%' }] }
}
],
animationTimingFunction: 'linear',
animationIterationCount: 'infinite'
}
});
export default ProgressBar;
|