create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
99 lines (88 loc) • 2.23 kB
JavaScript
/**
* 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}%`;
if (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;