1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import capitalize from '../utils/capitalize';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import { darken, lighten } from '../styles/colorManipulator';
|
9 | import useTheme from '../styles/useTheme';
|
10 | const TRANSITION_DURATION = 4;
|
11 |
|
12 | export const styles = theme => {
|
13 | const getColor = color => theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5);
|
14 |
|
15 | const backgroundPrimary = getColor(theme.palette.primary.main);
|
16 | const backgroundSecondary = getColor(theme.palette.secondary.main);
|
17 | return {
|
18 |
|
19 | root: {
|
20 | position: 'relative',
|
21 | overflow: 'hidden',
|
22 | height: 4,
|
23 | '@media print': {
|
24 | colorAdjust: 'exact'
|
25 | }
|
26 | },
|
27 |
|
28 |
|
29 | colorPrimary: {
|
30 | backgroundColor: backgroundPrimary
|
31 | },
|
32 |
|
33 |
|
34 | colorSecondary: {
|
35 | backgroundColor: backgroundSecondary
|
36 | },
|
37 |
|
38 |
|
39 | determinate: {},
|
40 |
|
41 |
|
42 | indeterminate: {},
|
43 |
|
44 |
|
45 | buffer: {
|
46 | backgroundColor: 'transparent'
|
47 | },
|
48 |
|
49 |
|
50 | query: {
|
51 | transform: 'rotate(180deg)'
|
52 | },
|
53 |
|
54 |
|
55 | dashed: {
|
56 | position: 'absolute',
|
57 | marginTop: 0,
|
58 | height: '100%',
|
59 | width: '100%',
|
60 | animation: '$buffer 3s infinite linear'
|
61 | },
|
62 |
|
63 |
|
64 | dashedColorPrimary: {
|
65 | backgroundImage: `radial-gradient(${backgroundPrimary} 0%, ${backgroundPrimary} 16%, transparent 42%)`,
|
66 | backgroundSize: '10px 10px',
|
67 | backgroundPosition: '0 -23px'
|
68 | },
|
69 |
|
70 |
|
71 | dashedColorSecondary: {
|
72 | backgroundImage: `radial-gradient(${backgroundSecondary} 0%, ${backgroundSecondary} 16%, transparent 42%)`,
|
73 | backgroundSize: '10px 10px',
|
74 | backgroundPosition: '0 -23px'
|
75 | },
|
76 |
|
77 |
|
78 | bar: {
|
79 | width: '100%',
|
80 | position: 'absolute',
|
81 | left: 0,
|
82 | bottom: 0,
|
83 | top: 0,
|
84 | transition: 'transform 0.2s linear',
|
85 | transformOrigin: 'left'
|
86 | },
|
87 |
|
88 |
|
89 | barColorPrimary: {
|
90 | backgroundColor: theme.palette.primary.main
|
91 | },
|
92 |
|
93 |
|
94 | barColorSecondary: {
|
95 | backgroundColor: theme.palette.secondary.main
|
96 | },
|
97 |
|
98 |
|
99 | bar1Indeterminate: {
|
100 | width: 'auto',
|
101 | animation: '$indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
|
102 | },
|
103 |
|
104 |
|
105 | bar1Determinate: {
|
106 | transition: `transform .${TRANSITION_DURATION}s linear`
|
107 | },
|
108 |
|
109 |
|
110 | bar1Buffer: {
|
111 | zIndex: 1,
|
112 | transition: `transform .${TRANSITION_DURATION}s linear`
|
113 | },
|
114 |
|
115 |
|
116 | bar2Indeterminate: {
|
117 | width: 'auto',
|
118 | animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite'
|
119 | },
|
120 |
|
121 |
|
122 | bar2Buffer: {
|
123 | transition: `transform .${TRANSITION_DURATION}s linear`
|
124 | },
|
125 |
|
126 |
|
127 |
|
128 |
|
129 | '@keyframes indeterminate1': {
|
130 |
|
131 | '0%': {
|
132 | left: '-35%',
|
133 | right: '100%'
|
134 | },
|
135 |
|
136 | '60%': {
|
137 | left: '100%',
|
138 | right: '-90%'
|
139 | },
|
140 | '100%': {
|
141 | left: '100%',
|
142 | right: '-90%'
|
143 | }
|
144 | },
|
145 | '@keyframes indeterminate2': {
|
146 |
|
147 | '0%': {
|
148 | left: '-200%',
|
149 | right: '100%'
|
150 | },
|
151 |
|
152 | '60%': {
|
153 | left: '107%',
|
154 | right: '-8%'
|
155 | },
|
156 | '100%': {
|
157 | left: '107%',
|
158 | right: '-8%'
|
159 | }
|
160 | },
|
161 | '@keyframes buffer': {
|
162 | '0%': {
|
163 | opacity: 1,
|
164 | backgroundPosition: '0 -23px'
|
165 | },
|
166 | '50%': {
|
167 | opacity: 0,
|
168 | backgroundPosition: '0 -23px'
|
169 | },
|
170 | '100%': {
|
171 | opacity: 1,
|
172 | backgroundPosition: '-200px -23px'
|
173 | }
|
174 | }
|
175 | };
|
176 | };
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 | const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
|
186 | const {
|
187 | classes,
|
188 | className,
|
189 | color = 'primary',
|
190 | value,
|
191 | valueBuffer,
|
192 | variant = 'indeterminate'
|
193 | } = props,
|
194 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);
|
195 |
|
196 | const theme = useTheme();
|
197 | const rootProps = {};
|
198 | const inlineStyles = {
|
199 | bar1: {},
|
200 | bar2: {}
|
201 | };
|
202 |
|
203 | if (variant === 'determinate' || variant === 'buffer') {
|
204 | if (value !== undefined) {
|
205 | rootProps['aria-valuenow'] = Math.round(value);
|
206 | rootProps['aria-valuemin'] = 0;
|
207 | rootProps['aria-valuemax'] = 100;
|
208 | let transform = value - 100;
|
209 |
|
210 | if (theme.direction === 'rtl') {
|
211 | transform = -transform;
|
212 | }
|
213 |
|
214 | inlineStyles.bar1.transform = `translateX(${transform}%)`;
|
215 | } else if (process.env.NODE_ENV !== 'production') {
|
216 | console.error('Material-UI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
|
217 | }
|
218 | }
|
219 |
|
220 | if (variant === 'buffer') {
|
221 | if (valueBuffer !== undefined) {
|
222 | let transform = (valueBuffer || 0) - 100;
|
223 |
|
224 | if (theme.direction === 'rtl') {
|
225 | transform = -transform;
|
226 | }
|
227 |
|
228 | inlineStyles.bar2.transform = `translateX(${transform}%)`;
|
229 | } else if (process.env.NODE_ENV !== 'production') {
|
230 | console.error('Material-UI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
|
231 | }
|
232 | }
|
233 |
|
234 | return React.createElement("div", _extends({
|
235 | className: clsx(classes.root, classes[`color${capitalize(color)}`], className, {
|
236 | 'determinate': classes.determinate,
|
237 | 'indeterminate': classes.indeterminate,
|
238 | 'buffer': classes.buffer,
|
239 | 'query': classes.query
|
240 | }[variant]),
|
241 | role: "progressbar"
|
242 | }, rootProps, {
|
243 | ref: ref
|
244 | }, other), variant === 'buffer' ? React.createElement("div", {
|
245 | className: clsx(classes.dashed, classes[`dashedColor${capitalize(color)}`])
|
246 | }) : null, React.createElement("div", {
|
247 | className: clsx(classes.bar, classes[`barColor${capitalize(color)}`], (variant === 'indeterminate' || variant === 'query') && classes.bar1Indeterminate, {
|
248 | 'determinate': classes.bar1Determinate,
|
249 | 'buffer': classes.bar1Buffer
|
250 | }[variant]),
|
251 | style: inlineStyles.bar1
|
252 | }), variant === 'determinate' ? null : React.createElement("div", {
|
253 | className: clsx(classes.bar, (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate, variant === 'buffer' ? [classes[`color${capitalize(color)}`], classes.bar2Buffer] : classes[`barColor${capitalize(color)}`]),
|
254 | style: inlineStyles.bar2
|
255 | }));
|
256 | });
|
257 | process.env.NODE_ENV !== "production" ? LinearProgress.propTypes = {
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 | |
264 |
|
265 |
|
266 |
|
267 | classes: PropTypes.object,
|
268 |
|
269 | |
270 |
|
271 |
|
272 | className: PropTypes.string,
|
273 |
|
274 | |
275 |
|
276 |
|
277 | color: PropTypes.oneOf(['primary', 'secondary']),
|
278 |
|
279 | |
280 |
|
281 |
|
282 |
|
283 | value: PropTypes.number,
|
284 |
|
285 | |
286 |
|
287 |
|
288 |
|
289 | valueBuffer: PropTypes.number,
|
290 |
|
291 | |
292 |
|
293 |
|
294 |
|
295 | variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])
|
296 | } : void 0;
|
297 | export default withStyles(styles, {
|
298 | name: 'MuiLinearProgress'
|
299 | })(LinearProgress); |
\ | No newline at end of file |