1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { View, Animated, Platform, } from 'react-native';
|
14 | import Color from 'color';
|
15 | const LinearProgress = (_a) => {
|
16 | var _b, _c;
|
17 | var { value = 0, variant = 'indeterminate', color = 'secondary', style, theme, trackColor } = _a, props = __rest(_a, ["value", "variant", "color", "style", "theme", "trackColor"]);
|
18 | const [width, setWidth] = React.useState(0);
|
19 | const { current: animation } = React.useRef(new Animated.Value(0));
|
20 | const intermediate = React.useRef();
|
21 | const startAnimation = React.useCallback(() => {
|
22 | if (variant === 'indeterminate') {
|
23 | intermediate.current = Animated.timing(animation, {
|
24 | duration: 2000,
|
25 | toValue: 1,
|
26 | useNativeDriver: true,
|
27 | isInteraction: false,
|
28 | });
|
29 | animation.setValue(0);
|
30 | Animated.loop(intermediate.current).start();
|
31 | }
|
32 | else {
|
33 | Animated.timing(animation, {
|
34 | duration: 1000,
|
35 | toValue: value || 0,
|
36 | useNativeDriver: Platform.OS !== 'web',
|
37 | isInteraction: false,
|
38 | }).start();
|
39 | }
|
40 | }, [animation, variant, value]);
|
41 | const tintColor = color === 'secondary' || color === 'primary'
|
42 | ? (_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);
|
43 | const trackTintColor = trackColor || Color(tintColor).alpha(0.4).rgb().string();
|
44 | React.useEffect(() => {
|
45 | startAnimation();
|
46 | }, [startAnimation, value]);
|
47 | return (<View accessible accessibilityRole="progressbar" accessibilityValue={{
|
48 | now: value,
|
49 | min: 0,
|
50 | max: 1,
|
51 | }} {...props} onLayout={(e) => {
|
52 | setWidth(e.nativeEvent.layout.width);
|
53 | }} style={[
|
54 | {
|
55 | height: 4,
|
56 | overflow: 'hidden',
|
57 | width: '100%',
|
58 | backgroundColor: trackTintColor,
|
59 | },
|
60 | style,
|
61 | ]}>
|
62 | <Animated.View style={{
|
63 | transform: [
|
64 | {
|
65 | translateX: animation.interpolate(variant === 'indeterminate'
|
66 | ? {
|
67 | inputRange: [0, 1],
|
68 | outputRange: [-width, 0.5 * width],
|
69 | }
|
70 | : {
|
71 | inputRange: [0, 1],
|
72 | outputRange: [-0.5 * width, 0],
|
73 | }),
|
74 | },
|
75 | {
|
76 | scaleX: animation.interpolate(variant === 'indeterminate'
|
77 | ? {
|
78 | inputRange: [0, 0.5, 1],
|
79 | outputRange: [0.0001, 1, 0.001],
|
80 | }
|
81 | : {
|
82 | inputRange: [0, 1],
|
83 | outputRange: [0.0001, 1],
|
84 | }),
|
85 | },
|
86 | ],
|
87 | backgroundColor: tintColor,
|
88 | flex: 1,
|
89 | }}/>
|
90 | </View>);
|
91 | };
|
92 | export default LinearProgress;
|
93 |
|
\ | No newline at end of file |