Completely updated React, fixed #11, (hopefully)
This commit is contained in:
223
goTorrentWebUI/node_modules/material-ui/Progress/CircularProgress.js
generated
vendored
223
goTorrentWebUI/node_modules/material-ui/Progress/CircularProgress.js
generated
vendored
@@ -5,24 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
||||
});
|
||||
exports.styles = undefined;
|
||||
|
||||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||||
|
||||
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||||
|
||||
var _extends2 = require('babel-runtime/helpers/extends');
|
||||
|
||||
var _extends3 = _interopRequireDefault(_extends2);
|
||||
|
||||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||||
|
||||
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||||
|
||||
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
||||
|
||||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||||
|
||||
var _ref;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
@@ -31,6 +33,8 @@ var _withStyles = require('../styles/withStyles');
|
||||
|
||||
var _withStyles2 = _interopRequireDefault(_withStyles);
|
||||
|
||||
var _helpers = require('../utils/helpers');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var SIZE = 50;
|
||||
@@ -40,23 +44,32 @@ function getRelativeValue(value, min, max) {
|
||||
return (clampedValue - min) / (max - min);
|
||||
}
|
||||
|
||||
function easeOut(t) {
|
||||
t = getRelativeValue(t, 0, 1);
|
||||
// https://gist.github.com/gre/1650294
|
||||
t = (t -= 1) * t * t + 1;
|
||||
return t;
|
||||
}
|
||||
|
||||
function easeIn(t) {
|
||||
return t * t;
|
||||
}
|
||||
|
||||
var styles = exports.styles = function styles(theme) {
|
||||
return {
|
||||
root: {
|
||||
display: 'inline-block'
|
||||
},
|
||||
primaryColor: {
|
||||
color: theme.palette.primary[500]
|
||||
colorPrimary: {
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
accentColor: {
|
||||
color: theme.palette.secondary.A200
|
||||
colorSecondary: {
|
||||
color: theme.palette.secondary.main
|
||||
},
|
||||
svg: {},
|
||||
svgIndeterminate: {
|
||||
animation: 'mui-progress-circular-rotate 1.4s linear infinite'
|
||||
},
|
||||
svgDeterminate: {
|
||||
transform: 'rotate(-90deg)'
|
||||
},
|
||||
circle: {
|
||||
stroke: 'currentColor',
|
||||
strokeLinecap: 'round'
|
||||
@@ -64,8 +77,8 @@ var styles = exports.styles = function styles(theme) {
|
||||
circleIndeterminate: {
|
||||
animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite',
|
||||
// Some default value that looks fine waiting for the animation to kicks in.
|
||||
strokeDasharray: '80,200',
|
||||
strokeDashoffset: 0
|
||||
strokeDasharray: '80px, 200px',
|
||||
strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.
|
||||
},
|
||||
'@keyframes mui-progress-circular-rotate': {
|
||||
'100%': {
|
||||
@@ -74,126 +87,78 @@ var styles = exports.styles = function styles(theme) {
|
||||
},
|
||||
'@keyframes mui-progress-circular-dash': {
|
||||
'0%': {
|
||||
strokeDasharray: '1,200',
|
||||
strokeDashoffset: 0
|
||||
strokeDasharray: '1px, 200px',
|
||||
strokeDashoffset: '0px'
|
||||
},
|
||||
'50%': {
|
||||
strokeDasharray: '100,200',
|
||||
strokeDashoffset: -15
|
||||
strokeDasharray: '100px, 200px',
|
||||
strokeDashoffset: '-15px'
|
||||
},
|
||||
'100%': {
|
||||
strokeDasharray: '100,200',
|
||||
strokeDashoffset: -120
|
||||
strokeDasharray: '100px, 200px',
|
||||
strokeDashoffset: '-120px'
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Color = require('prop-types').oneOf(['primary', 'accent', 'inherit']);
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Mode = require('prop-types').oneOf(['determinate', 'indeterminate']);
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Props = {
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* The color of the component. It's using the theme palette when that makes sense.
|
||||
*/
|
||||
color: require('prop-types').oneOf(['primary', 'accent', 'inherit']),
|
||||
|
||||
/**
|
||||
* The max value of progress in determinate mode.
|
||||
*/
|
||||
max: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* The min value of progress in determinate mode.
|
||||
*/
|
||||
min: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* The mode of show your progress. Indeterminate
|
||||
* for when there is no value for progress.
|
||||
* Determinate for controlled progress value.
|
||||
*/
|
||||
mode: require('prop-types').oneOf(['determinate', 'indeterminate']),
|
||||
|
||||
/**
|
||||
* The size of the circle.
|
||||
*/
|
||||
size: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
style: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* The thickness of the circle.
|
||||
*/
|
||||
thickness: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* The value of progress in determinate mode.
|
||||
*/
|
||||
value: require('prop-types').number
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* ## ARIA
|
||||
*
|
||||
* If the progress bar is describing the loading progress of a particular region of a page,
|
||||
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
|
||||
* attribute to `true` on that region until it has finished loading.
|
||||
*/
|
||||
function CircularProgress(props) {
|
||||
var _classNames;
|
||||
var _classNames2;
|
||||
|
||||
var classes = props.classes,
|
||||
className = props.className,
|
||||
color = props.color,
|
||||
max = props.max,
|
||||
min = props.min,
|
||||
size = props.size,
|
||||
style = props.style,
|
||||
thickness = props.thickness,
|
||||
mode = props.mode,
|
||||
value = props.value,
|
||||
min = props.min,
|
||||
max = props.max,
|
||||
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'size', 'style', 'thickness', 'mode', 'value', 'min', 'max']);
|
||||
variant = props.variant,
|
||||
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
|
||||
|
||||
|
||||
var rootProps = {};
|
||||
|
||||
var circleStyle = {};
|
||||
if (mode === 'determinate') {
|
||||
var rootStyle = {};
|
||||
var rootProps = {};
|
||||
|
||||
if (variant === 'determinate' || variant === 'static') {
|
||||
var relVal = getRelativeValue(value, min, max) * 100;
|
||||
var circumference = 2 * Math.PI * (SIZE / 2 - 5);
|
||||
circleStyle.strokeDasharray = circumference.toFixed(3);
|
||||
rootProps['aria-valuenow'] = Math.round(relVal);
|
||||
|
||||
circleStyle.strokeDashoffset = Math.round((100 - relVal) / 100 * circumference * 1000) / 1000 + 'px';
|
||||
circleStyle.strokeDasharray = Math.round(circumference * 1000) / 1000;
|
||||
|
||||
rootProps['aria-valuenow'] = value;
|
||||
rootProps['aria-valuemin'] = min;
|
||||
rootProps['aria-valuemax'] = max;
|
||||
if (variant === 'static') {
|
||||
circleStyle.strokeDashoffset = ((100 - relVal) / 100 * circumference).toFixed(3) + 'px';
|
||||
rootStyle.transform = 'rotate(-90deg)';
|
||||
} else {
|
||||
circleStyle.strokeDashoffset = (easeIn((100 - relVal) / 100) * circumference).toFixed(3) + 'px';
|
||||
rootStyle.transform = 'rotate(' + (easeOut(relVal / 70) * 270).toFixed(3) + 'deg)';
|
||||
}
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
(0, _extends3.default)({
|
||||
className: (0, _classnames2.default)(classes.root, color !== 'inherit' && classes[color + 'Color'], className),
|
||||
style: (0, _extends3.default)({ width: size, height: size }, style),
|
||||
className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalize)(color)], color !== 'inherit'), className),
|
||||
style: (0, _extends3.default)({ width: size, height: size }, rootStyle, style),
|
||||
role: 'progressbar'
|
||||
}, rootProps, other),
|
||||
_react2.default.createElement(
|
||||
'svg',
|
||||
{
|
||||
className: (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.svgIndeterminate, mode === 'indeterminate'), (0, _defineProperty3.default)(_classNames, classes.svgDeterminate, mode === 'determinate'), _classNames)),
|
||||
className: (0, _classnames2.default)(classes.svg, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.svgIndeterminate, variant === 'indeterminate'), (0, _defineProperty3.default)(_classNames2, classes.svgStatic, variant === 'static'), _classNames2)),
|
||||
viewBox: '0 0 ' + SIZE + ' ' + SIZE
|
||||
},
|
||||
_react2.default.createElement('circle', {
|
||||
className: (0, _classnames2.default)(classes.circle, (0, _defineProperty3.default)({}, classes.circleIndeterminate, mode === 'indeterminate')),
|
||||
className: (0, _classnames2.default)(classes.circle, (0, _defineProperty3.default)({}, classes.circleIndeterminate, variant === 'indeterminate')),
|
||||
style: circleStyle,
|
||||
cx: SIZE / 2,
|
||||
cy: SIZE / 2,
|
||||
@@ -205,23 +170,59 @@ function CircularProgress(props) {
|
||||
);
|
||||
}
|
||||
|
||||
CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
|
||||
classes: require('prop-types').object.isRequired,
|
||||
color: require('prop-types').oneOf(['primary', 'accent', 'inherit']).isRequired,
|
||||
size: require('prop-types').number.isRequired,
|
||||
mode: require('prop-types').oneOf(['determinate', 'indeterminate']).isRequired,
|
||||
value: require('prop-types').number.isRequired,
|
||||
min: require('prop-types').number.isRequired,
|
||||
max: require('prop-types').number.isRequired
|
||||
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOf(['primary', 'accent', 'inherit'])), (0, _defineProperty3.default)(_ref, 'max', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'min', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'mode', require('prop-types').oneOf(['determinate', 'indeterminate'])), (0, _defineProperty3.default)(_ref, 'size', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'style', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'thickness', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'value', require('prop-types').number), _ref) : {};
|
||||
CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? {
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: _propTypes2.default.object.isRequired,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: _propTypes2.default.string,
|
||||
/**
|
||||
* The color of the component. It supports those theme colors that make sense for this component.
|
||||
*/
|
||||
color: _propTypes2.default.oneOf(['primary', 'secondary', 'inherit']),
|
||||
/**
|
||||
* The max value of progress in determinate variant.
|
||||
*/
|
||||
max: _propTypes2.default.number,
|
||||
/**
|
||||
* The min value of progress in determinate variant.
|
||||
*/
|
||||
min: _propTypes2.default.number,
|
||||
/**
|
||||
* The size of the circle.
|
||||
*/
|
||||
size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
style: _propTypes2.default.object,
|
||||
/**
|
||||
* The thickness of the circle.
|
||||
*/
|
||||
thickness: _propTypes2.default.number,
|
||||
/**
|
||||
* The value of the progress indicator for the determinate and static variants.
|
||||
* Value between 0 and 100.
|
||||
*/
|
||||
value: _propTypes2.default.number,
|
||||
/**
|
||||
* The variant of progress indicator. Use indeterminate
|
||||
* when there is no progress value.
|
||||
*/
|
||||
variant: _propTypes2.default.oneOf(['determinate', 'indeterminate', 'static'])
|
||||
} : {};
|
||||
|
||||
CircularProgress.defaultProps = {
|
||||
color: 'primary',
|
||||
max: 100,
|
||||
min: 0,
|
||||
size: 40,
|
||||
thickness: 3.6,
|
||||
mode: 'indeterminate',
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100
|
||||
variant: 'indeterminate'
|
||||
};
|
||||
|
||||
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCircularProgress' })(CircularProgress);
|
||||
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);
|
||||
Reference in New Issue
Block a user