You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.7 KiB
94 lines
3.7 KiB
var __rest = (this && this.__rest) || function (s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
import React from 'react';
|
|
import { View, Animated, Platform, } from 'react-native';
|
|
import Color from 'color';
|
|
const LinearProgress = (_a) => {
|
|
var _b, _c;
|
|
var { value = 0, variant = 'indeterminate', color = 'secondary', style, theme, trackColor } = _a, props = __rest(_a, ["value", "variant", "color", "style", "theme", "trackColor"]);
|
|
const [width, setWidth] = React.useState(0);
|
|
const { current: animation } = React.useRef(new Animated.Value(0));
|
|
const intermediate = React.useRef();
|
|
const startAnimation = React.useCallback(() => {
|
|
if (variant === 'indeterminate') {
|
|
intermediate.current = Animated.timing(animation, {
|
|
duration: 2000,
|
|
toValue: 1,
|
|
useNativeDriver: true,
|
|
isInteraction: false,
|
|
});
|
|
animation.setValue(0);
|
|
Animated.loop(intermediate.current).start();
|
|
}
|
|
else {
|
|
Animated.timing(animation, {
|
|
duration: 1000,
|
|
toValue: value || 0,
|
|
useNativeDriver: Platform.OS !== 'web',
|
|
isInteraction: false,
|
|
}).start();
|
|
}
|
|
}, [animation, variant, value]);
|
|
const tintColor = color === 'secondary' || color === 'primary'
|
|
? (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b[color]
|
|
: Color(color).rgb().string() || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary);
|
|
const trackTintColor = trackColor || Color(tintColor).alpha(0.4).rgb().string();
|
|
React.useEffect(() => {
|
|
startAnimation();
|
|
}, [startAnimation, value]);
|
|
return (<View accessible accessibilityRole="progressbar" accessibilityValue={{
|
|
now: value,
|
|
min: 0,
|
|
max: 1,
|
|
}} {...props} onLayout={(e) => {
|
|
setWidth(e.nativeEvent.layout.width);
|
|
}} style={[
|
|
{
|
|
height: 4,
|
|
overflow: 'hidden',
|
|
width: '100%',
|
|
backgroundColor: trackTintColor,
|
|
},
|
|
style,
|
|
]}>
|
|
<Animated.View style={{
|
|
transform: [
|
|
{
|
|
translateX: animation.interpolate(variant === 'indeterminate'
|
|
? {
|
|
inputRange: [0, 1],
|
|
outputRange: [-width, 0.5 * width],
|
|
}
|
|
: {
|
|
inputRange: [0, 1],
|
|
outputRange: [-0.5 * width, 0],
|
|
}),
|
|
},
|
|
{
|
|
scaleX: animation.interpolate(variant === 'indeterminate'
|
|
? {
|
|
inputRange: [0, 0.5, 1],
|
|
outputRange: [0.0001, 1, 0.001],
|
|
}
|
|
: {
|
|
inputRange: [0, 1],
|
|
outputRange: [0.0001, 1],
|
|
}),
|
|
},
|
|
],
|
|
backgroundColor: tintColor,
|
|
flex: 1,
|
|
}}/>
|
|
</View>);
|
|
};
|
|
export default LinearProgress;
|