1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
4 |
|
5 | var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
6 |
|
7 | import * as React from 'react';
|
8 | import PropTypes from 'prop-types';
|
9 | import clsx from 'clsx';
|
10 | import { chainPropTypes } from '@mui/utils';
|
11 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
12 | import { keyframes, css } from '@mui/system';
|
13 | import capitalize from '../utils/capitalize';
|
14 | import useThemeProps from '../styles/useThemeProps';
|
15 | import styled from '../styles/styled';
|
16 | import { getCircularProgressUtilityClass } from './circularProgressClasses';
|
17 | import { jsx as _jsx } from "react/jsx-runtime";
|
18 | var SIZE = 44;
|
19 | var circularRotateKeyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
20 | var circularDashKeyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"])));
|
21 |
|
22 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
23 | var classes = ownerState.classes,
|
24 | variant = ownerState.variant,
|
25 | color = ownerState.color,
|
26 | disableShrink = ownerState.disableShrink;
|
27 | var slots = {
|
28 | root: ['root', variant, "color".concat(capitalize(color))],
|
29 | svg: ['svg'],
|
30 | circle: ['circle', "circle".concat(capitalize(variant)), disableShrink && 'circleDisableShrink']
|
31 | };
|
32 | return composeClasses(slots, getCircularProgressUtilityClass, classes);
|
33 | };
|
34 |
|
35 | var CircularProgressRoot = styled('span', {
|
36 | name: 'MuiCircularProgress',
|
37 | slot: 'Root',
|
38 | overridesResolver: function overridesResolver(props, styles) {
|
39 | var ownerState = props.ownerState;
|
40 | return [styles.root, styles[ownerState.variant], styles["color".concat(capitalize(ownerState.color))]];
|
41 | }
|
42 | })(function (_ref) {
|
43 | var ownerState = _ref.ownerState,
|
44 | theme = _ref.theme;
|
45 | return _extends({
|
46 | display: 'inline-block'
|
47 | }, ownerState.variant === 'determinate' && {
|
48 | transition: theme.transitions.create('transform')
|
49 | }, ownerState.color !== 'inherit' && {
|
50 | color: (theme.vars || theme).palette[ownerState.color].main
|
51 | });
|
52 | }, function (_ref2) {
|
53 | var ownerState = _ref2.ownerState;
|
54 | return ownerState.variant === 'indeterminate' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 1.4s linear infinite;\n "])), circularRotateKeyframe);
|
55 | });
|
56 | var CircularProgressSVG = styled('svg', {
|
57 | name: 'MuiCircularProgress',
|
58 | slot: 'Svg',
|
59 | overridesResolver: function overridesResolver(props, styles) {
|
60 | return styles.svg;
|
61 | }
|
62 | })({
|
63 | display: 'block'
|
64 |
|
65 | });
|
66 | var CircularProgressCircle = styled('circle', {
|
67 | name: 'MuiCircularProgress',
|
68 | slot: 'Circle',
|
69 | overridesResolver: function overridesResolver(props, styles) {
|
70 | var ownerState = props.ownerState;
|
71 | return [styles.circle, styles["circle".concat(capitalize(ownerState.variant))], ownerState.disableShrink && styles.circleDisableShrink];
|
72 | }
|
73 | })(function (_ref3) {
|
74 | var ownerState = _ref3.ownerState,
|
75 | theme = _ref3.theme;
|
76 | return _extends({
|
77 | stroke: 'currentColor'
|
78 | }, ownerState.variant === 'determinate' && {
|
79 | transition: theme.transitions.create('stroke-dashoffset')
|
80 | }, ownerState.variant === 'indeterminate' && {
|
81 |
|
82 | strokeDasharray: '80px, 200px',
|
83 | strokeDashoffset: 0
|
84 |
|
85 | });
|
86 | }, function (_ref4) {
|
87 | var ownerState = _ref4.ownerState;
|
88 | return ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 1.4s ease-in-out infinite;\n "])), circularDashKeyframe);
|
89 | });
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | var CircularProgress = React.forwardRef(function CircularProgress(inProps, ref) {
|
99 | var props = useThemeProps({
|
100 | props: inProps,
|
101 | name: 'MuiCircularProgress'
|
102 | });
|
103 |
|
104 | var className = props.className,
|
105 | _props$color = props.color,
|
106 | color = _props$color === void 0 ? 'primary' : _props$color,
|
107 | _props$disableShrink = props.disableShrink,
|
108 | disableShrink = _props$disableShrink === void 0 ? false : _props$disableShrink,
|
109 | _props$size = props.size,
|
110 | size = _props$size === void 0 ? 40 : _props$size,
|
111 | style = props.style,
|
112 | _props$thickness = props.thickness,
|
113 | thickness = _props$thickness === void 0 ? 3.6 : _props$thickness,
|
114 | _props$value = props.value,
|
115 | value = _props$value === void 0 ? 0 : _props$value,
|
116 | _props$variant = props.variant,
|
117 | variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
|
118 | other = _objectWithoutProperties(props, ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"]);
|
119 |
|
120 | var ownerState = _extends({}, props, {
|
121 | color: color,
|
122 | disableShrink: disableShrink,
|
123 | size: size,
|
124 | thickness: thickness,
|
125 | value: value,
|
126 | variant: variant
|
127 | });
|
128 |
|
129 | var classes = useUtilityClasses(ownerState);
|
130 | var circleStyle = {};
|
131 | var rootStyle = {};
|
132 | var rootProps = {};
|
133 |
|
134 | if (variant === 'determinate') {
|
135 | var circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
|
136 | circleStyle.strokeDasharray = circumference.toFixed(3);
|
137 | rootProps['aria-valuenow'] = Math.round(value);
|
138 | circleStyle.strokeDashoffset = "".concat(((100 - value) / 100 * circumference).toFixed(3), "px");
|
139 | rootStyle.transform = 'rotate(-90deg)';
|
140 | }
|
141 |
|
142 | return _jsx(CircularProgressRoot, _extends({
|
143 | className: clsx(classes.root, className),
|
144 | style: _extends({
|
145 | width: size,
|
146 | height: size
|
147 | }, rootStyle, style),
|
148 | ownerState: ownerState,
|
149 | ref: ref,
|
150 | role: "progressbar"
|
151 | }, rootProps, other, {
|
152 | children: _jsx(CircularProgressSVG, {
|
153 | className: classes.svg,
|
154 | ownerState: ownerState,
|
155 | viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE),
|
156 | children: _jsx(CircularProgressCircle, {
|
157 | className: classes.circle,
|
158 | style: circleStyle,
|
159 | ownerState: ownerState,
|
160 | cx: SIZE,
|
161 | cy: SIZE,
|
162 | r: (SIZE - thickness) / 2,
|
163 | fill: "none",
|
164 | strokeWidth: thickness
|
165 | })
|
166 | })
|
167 | }));
|
168 | });
|
169 | process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
|
170 |
|
171 | = {
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 | |
178 |
|
179 |
|
180 | classes: PropTypes.object,
|
181 |
|
182 | |
183 |
|
184 |
|
185 | className: PropTypes.string,
|
186 |
|
187 | |
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | color: PropTypes
|
194 |
|
195 | .oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
196 |
|
197 | |
198 |
|
199 |
|
200 |
|
201 |
|
202 | disableShrink: chainPropTypes(PropTypes.bool, function (props) {
|
203 | if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
|
204 | return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
|
205 | }
|
206 |
|
207 | return null;
|
208 | }),
|
209 |
|
210 | |
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
217 |
|
218 | |
219 |
|
220 |
|
221 | style: PropTypes.object,
|
222 |
|
223 | |
224 |
|
225 |
|
226 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
227 |
|
228 | |
229 |
|
230 |
|
231 |
|
232 | thickness: PropTypes.number,
|
233 |
|
234 | |
235 |
|
236 |
|
237 |
|
238 |
|
239 | value: PropTypes.number,
|
240 |
|
241 | |
242 |
|
243 |
|
244 |
|
245 |
|
246 | variant: PropTypes.oneOf(['determinate', 'indeterminate'])
|
247 | } : void 0;
|
248 | export default CircularProgress; |
\ | No newline at end of file |