Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@zendeskgarden/react-loaders

Package Overview
Dependencies
Maintainers
1
Versions
226
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zendeskgarden/react-loaders - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

## [0.2.5](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-loaders@0.2.4...@zendeskgarden/react-loaders@0.2.5) (2018-12-04)
**Note:** Version bump only for package @zendeskgarden/react-loaders
## [0.2.4](https://github.com/zendeskgarden/react-components/compare/@zendeskgarden/react-loaders@0.2.3...@zendeskgarden/react-loaders@0.2.4) (2018-11-30)

@@ -8,0 +16,0 @@

1040

dist/index.js

@@ -97,3 +97,3 @@ /*!

module.exports = require("react");
module.exports = require("prop-types");

@@ -104,42 +104,174 @@ /***/ }),

module.exports = require("prop-types");
module.exports = require("react");
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
module.exports = require("styled-components");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("@zendeskgarden/react-theming");
/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(1);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LoadingPlaceholder = exports.StyledSVG = exports.SpinnerCircle = exports.DotsCircle = undefined;
// EXTERNAL MODULE: external "prop-types"
var external_prop_types_ = __webpack_require__(0);
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// CONCATENATED MODULE: ./src/utils/animations.js
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var _react = __webpack_require__(0);
/**
* Accelerating from zero velocity
* @param {Number} time Time
*/
function easeInCubic(time) {
return time * time * time;
}
/**
* Decelerating to zero velocity
* @param {Number} time Time
*/
var _react2 = _interopRequireDefault(_react);
function easeOutCubic(time) {
var value = time - 1;
return value * value * value + 1;
}
/**
* Acceleration until halfway, then deceleration
* @param {Number} time Time
*/
var _propTypes = __webpack_require__(1);
function easeInOutCubic(time) {
return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1;
}
// CONCATENATED MODULE: ./src/utils/dot-coordinates.js
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var _propTypes2 = _interopRequireDefault(_propTypes);
var KEYFRAME_1 = 0.166666667;
var KEYFRAME_2 = 0.55;
var KEYFRAME_3 = 1.166666667;
var KEYFRAME_4 = 1.333333333;
var KEYFRAME_5 = 1.533333333;
var KEYFRAME_MAX = 1.766666667;
var dot_coordinates_WIDTH = 80;
var dot_coordinates_HEIGHT = dot_coordinates_WIDTH * 0.9;
var CIRCLE_RADIUS = dot_coordinates_WIDTH * 0.1125;
var MID_X = dot_coordinates_WIDTH / 2 - CIRCLE_RADIUS;
var MID_Y = dot_coordinates_HEIGHT / 2 - CIRCLE_RADIUS;
var BOTTOM = MID_Y + 5;
/**
* Retrieve the X coordinate value
* @param {Number} frame The current frame
*/
var _styledComponents = __webpack_require__(8);
function retrieveXCoordinate(frame) {
var retVal;
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _frame = frame % KEYFRAME_MAX;
var _reactTheming = __webpack_require__(9);
if (_frame < KEYFRAME_1) {
return MID_X;
} else if (_frame < KEYFRAME_2) {
var frameValue = _frame - KEYFRAME_1;
var frameMaximum = KEYFRAME_2 - KEYFRAME_1;
var easeValue = easeInOutCubic(frameValue / frameMaximum);
retVal = MID_X - easeValue * MID_X;
} else if (_frame < KEYFRAME_4) {
retVal = 0;
} else {
var _frameValue = _frame - KEYFRAME_4;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _frameMaximum = KEYFRAME_MAX - KEYFRAME_4;
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
retVal = MID_X * (_frameValue / _frameMaximum);
}
var DotsCircle = exports.DotsCircle = _styledComponents2.default.circle.attrs({
if (frame >= KEYFRAME_MAX) {
retVal = MID_X * 2 - retVal;
}
return retVal;
}
/**
* Retrieve the Y coordinate value
* @param {Number} frame The current frame
*/
function retrieveYCoordinate(frame) {
var _frame = frame % KEYFRAME_MAX;
if (_frame < KEYFRAME_1) {
return _frame / KEYFRAME_1 * -1 * (BOTTOM - MID_Y) + BOTTOM;
} else if (_frame < KEYFRAME_3) {
return MID_Y;
} else if (_frame < KEYFRAME_4) {
var _frameValue2 = _frame - KEYFRAME_3;
var _frameMaximum2 = KEYFRAME_4 - KEYFRAME_3;
return _frameValue2 / _frameMaximum2 * (BOTTOM - MID_Y) + MID_Y;
} else if (_frame < KEYFRAME_5) {
var _frameValue3 = _frame - KEYFRAME_4;
var _frameMaximum3 = KEYFRAME_5 - KEYFRAME_4;
var _easeValue = easeOutCubic(_frameValue3 / _frameMaximum3);
return BOTTOM - _easeValue * BOTTOM;
}
var frameValue = _frame - KEYFRAME_5;
var frameMaximum = KEYFRAME_MAX - KEYFRAME_5;
var easeValue = easeInCubic(frameValue / frameMaximum);
return easeValue * BOTTOM;
}
// EXTERNAL MODULE: external "styled-components"
var external_styled_components_ = __webpack_require__(2);
var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
// EXTERNAL MODULE: external "@zendeskgarden/react-theming"
var react_theming_ = __webpack_require__(3);
// CONCATENATED MODULE: ./src/styled-elements.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var DotsCircle = external_styled_components_default.a.circle.attrs({
cx: 9,

@@ -152,11 +284,9 @@ cy: 9,

}).withConfig({
displayName: 'styled-elements__DotsCircle',
componentId: 'sc-19dhio6-0'
})(['']);
displayName: "styled-elements__DotsCircle",
componentId: "sc-19dhio6-0"
})([""]);
DotsCircle.propTypes = {
transform: _propTypes2.default.string
transform: external_prop_types_default.a.string
};
var SpinnerCircle = exports.SpinnerCircle = _styledComponents2.default.circle.attrs({
var SpinnerCircle = external_styled_components_default.a.circle.attrs({
cx: 40,

@@ -174,3 +304,3 @@ cy: 40,

var dasharrayValue = _ref2.dasharrayValue;
return dasharrayValue + ' 250';
return "".concat(dasharrayValue, " 250");
},

@@ -181,13 +311,11 @@ transform: function transform(props) {

}).withConfig({
displayName: 'styled-elements__SpinnerCircle',
componentId: 'sc-19dhio6-1'
})(['']);
displayName: "styled-elements__SpinnerCircle",
componentId: "sc-19dhio6-1"
})([""]);
SpinnerCircle.propTypes = {
dasharrayValue: _propTypes2.default.string,
strokeWidthValue: _propTypes2.default.string,
transform: _propTypes2.default.string
dasharrayValue: external_prop_types_default.a.string,
strokeWidthValue: external_prop_types_default.a.string,
transform: external_prop_types_default.a.string
};
var StyledSvg = _styledComponents2.default.svg.attrs({
var StyledSvg = external_styled_components_default.a.svg.attrs({
'data-garden-id': function dataGardenId(_ref3) {

@@ -197,3 +325,3 @@ var _dataGardenId = _ref3.dataGardenId;

},
'data-garden-version': "0.2.4",
'data-garden-version': "0.2.5",
xmlns: 'http://www.w3.org/2000/svg',

@@ -212,9 +340,9 @@ width: function width(_ref4) {

height = _ref6.height;
return '0 0 ' + width + ' ' + height;
return "0 0 ".concat(width, " ").concat(height);
},
role: 'progressbar'
}).withConfig({
displayName: 'styled-elements__StyledSvg',
componentId: 'sc-19dhio6-2'
})(['width:1em;height:0.9em;color:', ';font-size:', ';', ';'], function (props) {
displayName: "styled-elements__StyledSvg",
componentId: "sc-19dhio6-2"
})(["width:1em;height:0.9em;color:", ";font-size:", ";", ";"], function (props) {
return props.color || 'inherit';

@@ -224,11 +352,9 @@ }, function (props) {

}, function (props) {
return (0, _reactTheming.retrieveTheme)(props.dataGardenId, props);
return Object(react_theming_["retrieveTheme"])(props.dataGardenId, props);
});
StyledSvg.propTypes = {
color: _propTypes2.default.string,
fontSize: _propTypes2.default.any
color: external_prop_types_default.a.string,
fontSize: external_prop_types_default.a.any
};
var StyledSVG = function StyledSVG(_ref7) {
var styled_elements_StyledSVG = function StyledSVG(_ref7) {
var children = _ref7.children,

@@ -238,76 +364,69 @@ fontSize = _ref7.fontSize,

height = _ref7.height,
other = _objectWithoutProperties(_ref7, ['children', 'fontSize', 'width', 'height']);
other = _objectWithoutProperties(_ref7, ["children", "fontSize", "width", "height"]);
return _react2.default.createElement(
StyledSvg,
_extends({ fontSize: fontSize, width: width, height: height }, other),
children
);
return external_react_default.a.createElement(StyledSvg, _extends({
fontSize: fontSize,
width: width,
height: height
}, other), children);
};
exports.StyledSVG = StyledSVG;
StyledSVG.propTypes = {
children: _propTypes2.default.node,
fontSize: _propTypes2.default.any,
height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
styled_elements_StyledSVG.propTypes = {
children: external_prop_types_default.a.node,
fontSize: external_prop_types_default.a.any,
height: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
width: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number])
};
var LoadingPlaceholder = exports.LoadingPlaceholder = _styledComponents2.default.div.attrs({
var LoadingPlaceholder = external_styled_components_default.a.div.attrs({
role: 'progressbar'
}).withConfig({
displayName: 'styled-elements__LoadingPlaceholder',
componentId: 'sc-19dhio6-3'
})(['display:inline;width:1em;height:0.9em;font-size:', ';'], function (props) {
displayName: "styled-elements__LoadingPlaceholder",
componentId: "sc-19dhio6-3"
})(["display:inline;width:1em;height:0.9em;font-size:", ";"], function (props) {
return props.fontSize;
});
LoadingPlaceholder.propTypes = {
fontSize: _propTypes2.default.any
fontSize: external_prop_types_default.a.any
};
// CONCATENATED MODULE: ./src/containers/ScheduleContainer.js
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
"use strict";
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
Object.defineProperty(exports, "__esModule", {
value: true
});
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var _react = __webpack_require__(0);
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var _react2 = _interopRequireDefault(_react);
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
var _propTypes = __webpack_require__(1);
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var _propTypes2 = _interopRequireDefault(_propTypes);
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _styledElements = __webpack_require__(2);
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var ScheduleContainer = function (_Component) {
var ScheduleContainer_ScheduleContainer =
/*#__PURE__*/
function (_Component) {
_inherits(ScheduleContainer, _Component);
function ScheduleContainer(props) {
var _this;
_classCallCheck(this, ScheduleContainer);
var _this = _possibleConstructorReturn(this, (ScheduleContainer.__proto__ || Object.getPrototypeOf(ScheduleContainer)).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(ScheduleContainer).call(this, props));
_this.state = {

@@ -320,3 +439,3 @@ delayComplete: false

_createClass(ScheduleContainer, [{
key: 'componentDidMount',
key: "componentDidMount",
value: function componentDidMount() {

@@ -326,6 +445,6 @@ var _this2 = this;

var delayMS = this.props.delayMS;
this.renderingDelayTimeout = setTimeout(function () {
_this2.setState({ delayComplete: true }, function () {
_this2.setState({
delayComplete: true
}, function () {
_this2.performAnimationFrame();

@@ -336,3 +455,3 @@ });

}, {
key: 'componentWillUnmount',
key: "componentWillUnmount",
value: function componentWillUnmount() {

@@ -343,3 +462,3 @@ clearTimeout(this.renderingDelayTimeout);

}, {
key: 'performAnimationFrame',
key: "performAnimationFrame",
value: function performAnimationFrame() {

@@ -350,2 +469,3 @@ var _this3 = this;

_this3.props.tick(timestamp);
_this3.performAnimationFrame();

@@ -355,19 +475,16 @@ });

}, {
key: 'render',
key: "render",
value: function render() {
var _props = this.props,
delayMS = _props.delayMS,
size = _props.size,
children = _props.children,
_props$render = _props.render,
render = _props$render === undefined ? children : _props$render;
var _this$props = this.props,
delayMS = _this$props.delayMS,
size = _this$props.size,
children = _this$props.children,
_this$props$render = _this$props.render,
render = _this$props$render === void 0 ? children : _this$props$render;
var delayComplete = this.state.delayComplete;
if (!delayComplete && delayMS !== 0) {
return _react2.default.createElement(
_styledElements.LoadingPlaceholder,
{ fontSize: size },
'\xA0'
);
return external_react_default.a.createElement(LoadingPlaceholder, {
fontSize: size
}, "\xA0");
}

@@ -380,9 +497,10 @@

return ScheduleContainer;
}(_react.Component);
}(external_react_["Component"]);
ScheduleContainer.propTypes = {
_defineProperty(ScheduleContainer_ScheduleContainer, "propTypes", {
/**
* Size of the loader. Can inherit from `font-size` styling.
**/
size: _propTypes2.default.any,
size: external_prop_types_default.a.any,
/**

@@ -392,119 +510,87 @@ * Delay in MS to begin loader rendering. This helps prevent

**/
delayMS: _propTypes2.default.number,
delayMS: external_prop_types_default.a.number,
/**
* Function to call on each animation frame.
**/
tick: _propTypes2.default.func,
children: _propTypes2.default.func,
tick: external_prop_types_default.a.func,
children: external_prop_types_default.a.func,
/**
* Identical to children
*/
render: _propTypes2.default.func
};
ScheduleContainer.defaultProps = {
delayMS: 750
};
exports.default = ScheduleContainer;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
render: external_prop_types_default.a.func
});
var _Dots = __webpack_require__(5);
Object.defineProperty(exports, 'Dots', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Dots).default;
}
_defineProperty(ScheduleContainer_ScheduleContainer, "defaultProps", {
delayMS: 750
});
var _Spinner = __webpack_require__(10);
Object.defineProperty(exports, 'Spinner', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Spinner).default;
}
});
// CONCATENATED MODULE: ./src/Dots.js
function Dots_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Dots_typeof = function _typeof(obj) { return typeof obj; }; } else { Dots_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Dots_typeof(obj); }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Dots_extends() { Dots_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Dots_extends.apply(this, arguments); }
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
function Dots_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Dots_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
"use strict";
function Dots_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function Dots_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Object.defineProperty(exports, "__esModule", {
value: true
});
function Dots_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function Dots_createClass(Constructor, protoProps, staticProps) { if (protoProps) Dots_defineProperties(Constructor.prototype, protoProps); if (staticProps) Dots_defineProperties(Constructor, staticProps); return Constructor; }
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function Dots_possibleConstructorReturn(self, call) { if (call && (Dots_typeof(call) === "object" || typeof call === "function")) { return call; } return Dots_assertThisInitialized(self); }
var _react = __webpack_require__(0);
function Dots_getPrototypeOf(o) { Dots_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Dots_getPrototypeOf(o); }
var _react2 = _interopRequireDefault(_react);
function Dots_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) Dots_setPrototypeOf(subClass, superClass); }
var _propTypes = __webpack_require__(1);
function Dots_setPrototypeOf(o, p) { Dots_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Dots_setPrototypeOf(o, p); }
var _propTypes2 = _interopRequireDefault(_propTypes);
function Dots_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var _dotCoordinates = __webpack_require__(6);
function Dots_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _styledElements = __webpack_require__(2);
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var _ScheduleContainer = __webpack_require__(3);
var _ScheduleContainer2 = _interopRequireDefault(_ScheduleContainer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var COMPONENT_ID = 'loaders.dots';
var Dots = function (_React$Component) {
_inherits(Dots, _React$Component);
var Dots_Dots =
/*#__PURE__*/
function (_React$Component) {
Dots_inherits(Dots, _React$Component);
function Dots() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Dots);
Dots_classCallCheck(this, Dots);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dots.__proto__ || Object.getPrototypeOf(Dots)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
_this = Dots_possibleConstructorReturn(this, (_getPrototypeOf2 = Dots_getPrototypeOf(Dots)).call.apply(_getPrototypeOf2, [this].concat(args)));
Dots_defineProperty(Dots_assertThisInitialized(Dots_assertThisInitialized(_this)), "state", {
frame: 0,
timestamp: 0
}, _this.performAnimationFrame = function () {
});
Dots_defineProperty(Dots_assertThisInitialized(Dots_assertThisInitialized(_this)), "performAnimationFrame", function () {
var timestamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var velocity = _this.props.velocity;
var pinnedVelocity = velocity;

@@ -521,21 +607,26 @@

var elapsed = (timestamp - prevState.timestamp) / factor;
var frame = prevState.frame + elapsed % _dotCoordinates.KEYFRAME_MAX;
return { frame: frame, timestamp: timestamp };
var frame = prevState.frame + elapsed % KEYFRAME_MAX;
return {
frame: frame,
timestamp: timestamp
};
});
}, _this.retrieveFrame = function (offset) {
var loop = _dotCoordinates.KEYFRAME_MAX * 2;
});
Dots_defineProperty(Dots_assertThisInitialized(Dots_assertThisInitialized(_this)), "retrieveFrame", function (offset) {
var loop = KEYFRAME_MAX * 2;
return (_this.state.frame + offset * loop) % loop;
}, _temp), _possibleConstructorReturn(_this, _ret);
});
return _this;
}
_createClass(Dots, [{
key: 'render',
Dots_createClass(Dots, [{
key: "render",
value: function render() {
var _props = this.props,
size = _props.size,
color = _props.color,
delayMS = _props.delayMS,
other = _objectWithoutProperties(_props, ['size', 'color', 'delayMS']);
var _this$props = this.props,
size = _this$props.size,
color = _this$props.color,
delayMS = _this$props.delayMS,
other = Dots_objectWithoutProperties(_this$props, ["size", "color", "delayMS"]);

@@ -545,32 +636,23 @@ var dotOneFrame = this.retrieveFrame(0);

var dotThreeFrame = this.retrieveFrame(2 / 3);
return _react2.default.createElement(
_ScheduleContainer2.default,
{ tick: this.performAnimationFrame, size: size, delayMS: delayMS },
function () {
return _react2.default.createElement(
_styledElements.StyledSVG,
_extends({
fontSize: size,
color: color,
width: '80',
height: '72',
'data-garden-id': COMPONENT_ID
}, other),
_react2.default.createElement(
'g',
{ fill: 'currentColor' },
_react2.default.createElement(_styledElements.DotsCircle, {
transform: 'translate(' + (0, _dotCoordinates.retrieveXCoordinate)(dotOneFrame) + ' ' + (0, _dotCoordinates.retrieveYCoordinate)(dotOneFrame) + ')'
}),
_react2.default.createElement(_styledElements.DotsCircle, {
transform: 'translate(' + (0, _dotCoordinates.retrieveXCoordinate)(dotTwoFrame) + ' ' + (0, _dotCoordinates.retrieveYCoordinate)(dotTwoFrame) + ')'
}),
_react2.default.createElement(_styledElements.DotsCircle, {
transform: 'translate(' + (0, _dotCoordinates.retrieveXCoordinate)(dotThreeFrame) + ' ' + (0, _dotCoordinates.retrieveYCoordinate)(dotThreeFrame) + ')'
})
)
);
}
);
return external_react_default.a.createElement(ScheduleContainer_ScheduleContainer, {
tick: this.performAnimationFrame,
size: size,
delayMS: delayMS
}, function () {
return external_react_default.a.createElement(styled_elements_StyledSVG, Dots_extends({
fontSize: size,
color: color,
width: "80",
height: "72",
"data-garden-id": COMPONENT_ID
}, other), external_react_default.a.createElement("g", {
fill: "currentColor"
}, external_react_default.a.createElement(DotsCircle, {
transform: "translate(".concat(retrieveXCoordinate(dotOneFrame), " ").concat(retrieveYCoordinate(dotOneFrame), ")")
}), external_react_default.a.createElement(DotsCircle, {
transform: "translate(".concat(retrieveXCoordinate(dotTwoFrame), " ").concat(retrieveYCoordinate(dotTwoFrame), ")")
}), external_react_default.a.createElement(DotsCircle, {
transform: "translate(".concat(retrieveXCoordinate(dotThreeFrame), " ").concat(retrieveYCoordinate(dotThreeFrame), ")")
})));
});
}

@@ -580,9 +662,10 @@ }]);

return Dots;
}(_react2.default.Component);
}(external_react_default.a.Component);
Dots.propTypes = {
Dots_defineProperty(Dots_Dots, "propTypes", {
/**
* Size of the loader. Can inherit from `font-size` styling.
**/
size: _propTypes2.default.any,
size: external_prop_types_default.a.any,
/**

@@ -592,7 +675,9 @@ * Velocity (speed) of the animation. Between -1 and 1.

**/
velocity: _propTypes2.default.number,
velocity: external_prop_types_default.a.number,
/**
* Color of the loader. Can inherit from `color` styling.
**/
color: _propTypes2.default.string,
color: external_prop_types_default.a.string,
/**

@@ -602,5 +687,6 @@ * Delay in MS to begin loader rendering. This helps prevent

**/
delayMS: _propTypes2.default.number
};
Dots.defaultProps = {
delayMS: external_prop_types_default.a.number
});
Dots_defineProperty(Dots_Dots, "defaultProps", {
size: 'inherit',

@@ -610,117 +696,110 @@ color: 'inherit',

delayMS: 750
};
exports.default = Dots;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KEYFRAME_MAX = exports.KEYFRAME_5 = exports.KEYFRAME_4 = exports.KEYFRAME_3 = exports.KEYFRAME_2 = exports.KEYFRAME_1 = undefined;
exports.retrieveXCoordinate = retrieveXCoordinate;
exports.retrieveYCoordinate = retrieveYCoordinate;
var _animations = __webpack_require__(7);
var KEYFRAME_1 = exports.KEYFRAME_1 = 0.166666667; /**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
// CONCATENATED MODULE: ./src/utils/spinner-coordinates.js
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var STROKE_WIDTH_FRAMES = {
0: 6,
14: 5,
26: 4,
36: 3,
46: 2,
58: 3,
70: 4,
80: 5,
91: 6
};
var ROTATION_FRAMES = {
0: -90,
8: -81,
36: -30,
41: -18,
44: -8,
48: 0,
55: 22,
63: 53,
64: 62,
66: 67,
68: 78,
69: 90,
71: 99,
73: 112,
74: 129,
76: 138,
78: 159,
79: 180,
81: 190,
83: 207,
84: 221,
86: 226,
88: 235,
90: 243,
99: 270
};
var DASHARRAY_FRAMES = {
0: 0,
13: 2,
26: 13,
53: 86,
58: 90,
63: 89,
64: 88,
66: 86,
68: 83,
69: 81,
71: 76,
73: 70,
74: 62,
76: 58,
78: 47,
79: 37,
81: 31,
83: 23,
84: 16,
88: 10,
89: 7,
98: 1,
99: 0
};
// CONCATENATED MODULE: ./src/Spinner.js
function Spinner_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Spinner_typeof = function _typeof(obj) { return typeof obj; }; } else { Spinner_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Spinner_typeof(obj); }
var KEYFRAME_2 = exports.KEYFRAME_2 = 0.55;
var KEYFRAME_3 = exports.KEYFRAME_3 = 1.166666667;
var KEYFRAME_4 = exports.KEYFRAME_4 = 1.333333333;
var KEYFRAME_5 = exports.KEYFRAME_5 = 1.533333333;
var KEYFRAME_MAX = exports.KEYFRAME_MAX = 1.766666667;
function Spinner_extends() { Spinner_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Spinner_extends.apply(this, arguments); }
var WIDTH = 80;
var HEIGHT = WIDTH * 0.9;
var CIRCLE_RADIUS = WIDTH * 0.1125;
var MID_X = WIDTH / 2 - CIRCLE_RADIUS;
var MID_Y = HEIGHT / 2 - CIRCLE_RADIUS;
var BOTTOM = MID_Y + 5;
function Spinner_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Spinner_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
/**
* Retrieve the X coordinate value
* @param {Number} frame The current frame
*/
function retrieveXCoordinate(frame) {
var retVal = void 0;
function Spinner_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var _frame = frame % KEYFRAME_MAX;
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
if (_frame < KEYFRAME_1) {
return MID_X;
} else if (_frame < KEYFRAME_2) {
var frameValue = _frame - KEYFRAME_1;
var frameMaximum = KEYFRAME_2 - KEYFRAME_1;
var easeValue = (0, _animations.easeInOutCubic)(frameValue / frameMaximum);
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
retVal = MID_X - easeValue * MID_X;
} else if (_frame < KEYFRAME_4) {
retVal = 0;
} else {
var _frameValue = _frame - KEYFRAME_4;
var _frameMaximum = KEYFRAME_MAX - KEYFRAME_4;
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
retVal = MID_X * (_frameValue / _frameMaximum);
}
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
if (frame >= KEYFRAME_MAX) {
retVal = MID_X * 2 - retVal;
}
function Spinner_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
return retVal;
}
function Spinner_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
/**
* Retrieve the Y coordinate value
* @param {Number} frame The current frame
*/
function retrieveYCoordinate(frame) {
var _frame = frame % KEYFRAME_MAX;
function Spinner_createClass(Constructor, protoProps, staticProps) { if (protoProps) Spinner_defineProperties(Constructor.prototype, protoProps); if (staticProps) Spinner_defineProperties(Constructor, staticProps); return Constructor; }
if (_frame < KEYFRAME_1) {
return _frame / KEYFRAME_1 * -1 * (BOTTOM - MID_Y) + BOTTOM;
} else if (_frame < KEYFRAME_3) {
return MID_Y;
} else if (_frame < KEYFRAME_4) {
var _frameValue2 = _frame - KEYFRAME_3;
var _frameMaximum2 = KEYFRAME_4 - KEYFRAME_3;
function Spinner_possibleConstructorReturn(self, call) { if (call && (Spinner_typeof(call) === "object" || typeof call === "function")) { return call; } return Spinner_assertThisInitialized(self); }
return _frameValue2 / _frameMaximum2 * (BOTTOM - MID_Y) + MID_Y;
} else if (_frame < KEYFRAME_5) {
var _frameValue3 = _frame - KEYFRAME_4;
var _frameMaximum3 = KEYFRAME_5 - KEYFRAME_4;
var _easeValue = (0, _animations.easeOutCubic)(_frameValue3 / _frameMaximum3);
function Spinner_getPrototypeOf(o) { Spinner_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return Spinner_getPrototypeOf(o); }
return BOTTOM - _easeValue * BOTTOM;
}
var frameValue = _frame - KEYFRAME_5;
var frameMaximum = KEYFRAME_MAX - KEYFRAME_5;
var easeValue = (0, _animations.easeInCubic)(frameValue / frameMaximum);
function Spinner_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) Spinner_setPrototypeOf(subClass, superClass); }
return easeValue * BOTTOM;
}
function Spinner_setPrototypeOf(o, p) { Spinner_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Spinner_setPrototypeOf(o, p); }
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
function Spinner_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
"use strict";
function Spinner_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.easeInCubic = easeInCubic;
exports.easeOutCubic = easeOutCubic;
exports.easeInOutCubic = easeInOutCubic;
/**

@@ -733,99 +812,21 @@ * Copyright Zendesk, Inc.

/**
* Accelerating from zero velocity
* @param {Number} time Time
*/
function easeInCubic(time) {
return time * time * time;
}
/**
* Decelerating to zero velocity
* @param {Number} time Time
*/
function easeOutCubic(time) {
var value = time - 1;
return value * value * value + 1;
}
/**
* Acceleration until halfway, then deceleration
* @param {Number} time Time
*/
function easeInOutCubic(time) {
return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1;
}
/***/ }),
/* 8 */
/***/ (function(module, exports) {
var Spinner_COMPONENT_ID = 'loaders.spinner';
module.exports = require("styled-components");
var Spinner_Spinner =
/*#__PURE__*/
function (_React$Component) {
Spinner_inherits(Spinner, _React$Component);
/***/ }),
/* 9 */
/***/ (function(module, exports) {
function Spinner(props) {
var _this;
module.exports = require("@zendeskgarden/react-theming");
Spinner_classCallCheck(this, Spinner);
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
_this = Spinner_possibleConstructorReturn(this, Spinner_getPrototypeOf(Spinner).call(this, props));
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _spinnerCoordinates = __webpack_require__(11);
var _styledElements = __webpack_require__(2);
var _ScheduleContainer = __webpack_require__(3);
var _ScheduleContainer2 = _interopRequireDefault(_ScheduleContainer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
var COMPONENT_ID = 'loaders.spinner';
var Spinner = function (_React$Component) {
_inherits(Spinner, _React$Component);
function Spinner(props) {
_classCallCheck(this, Spinner);
var _this = _possibleConstructorReturn(this, (Spinner.__proto__ || Object.getPrototypeOf(Spinner)).call(this, props));
_this.state = {
Spinner_defineProperty(Spinner_assertThisInitialized(Spinner_assertThisInitialized(_this)), "state", {
frame: 0,

@@ -836,9 +837,7 @@ rawFrame: 0,

timestamp: 0
};
});
_this.computeFrames = function (frames) {
Spinner_defineProperty(Spinner_assertThisInitialized(Spinner_assertThisInitialized(_this)), "computeFrames", function (frames) {
var duration = _this.props.duration;
var totalFrames = _this.state.totalFrames;
return Object.entries(frames).reduce(function (acc, item, index, arr) {

@@ -856,20 +855,18 @@ var _item = _slicedToArray(item, 2),

var frameHz = 1000 / 60;
var subDuration = duration / (totalFrames - 1) * diff;
var lastValue = value;
acc[frame] = value;
acc[frame] = value;
for (var idx = 0; idx < diff; idx++) {
lastValue = lastValue + (nextValue - lastValue) * (frameHz / subDuration);
subDuration = duration / (totalFrames - 1) * (diff - idx);
acc[parseInt(frame, 10) + idx + 1] = lastValue;
}
acc[nextFrame] = nextValue;
return acc;
}, {});
};
});
_this.performAnimationFrame = function () {
Spinner_defineProperty(Spinner_assertThisInitialized(Spinner_assertThisInitialized(_this)), "performAnimationFrame", function () {
var nowTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

@@ -881,3 +878,2 @@ var _this$state = _this.state,

var duration = _this.props.duration;
var elapsedTime = nowTime - timestamp;

@@ -891,24 +887,26 @@

var currentRawFrame = nextValue % totalFrames;
return { frame: frame, rawFrame: currentRawFrame, timestamp: nowTime };
return {
frame: frame,
rawFrame: currentRawFrame,
timestamp: nowTime
};
});
};
});
_this.strokeWidthValues = _this.computeFrames(_spinnerCoordinates.STROKE_WIDTH_FRAMES);
_this.rotationValues = _this.computeFrames(_spinnerCoordinates.ROTATION_FRAMES);
_this.dasharrayValues = _this.computeFrames(_spinnerCoordinates.DASHARRAY_FRAMES);
_this.strokeWidthValues = _this.computeFrames(STROKE_WIDTH_FRAMES);
_this.rotationValues = _this.computeFrames(ROTATION_FRAMES);
_this.dasharrayValues = _this.computeFrames(DASHARRAY_FRAMES);
return _this;
}
_createClass(Spinner, [{
key: 'render',
Spinner_createClass(Spinner, [{
key: "render",
value: function render() {
var _props = this.props,
size = _props.size,
color = _props.color,
delayMS = _props.delayMS,
other = _objectWithoutProperties(_props, ['size', 'color', 'delayMS']);
var _this$props = this.props,
size = _this$props.size,
color = _this$props.color,
delayMS = _this$props.delayMS,
other = Spinner_objectWithoutProperties(_this$props, ["size", "color", "delayMS"]);
var frame = this.state.frame;
var strokeWidthValue = this.strokeWidthValues[frame];

@@ -919,24 +917,19 @@ var rotationValue = this.rotationValues[frame];

var HEIGHT = 80;
return _react2.default.createElement(
_ScheduleContainer2.default,
{ tick: this.performAnimationFrame, size: size, delayMS: delayMS },
function () {
return _react2.default.createElement(
_styledElements.StyledSVG,
_extends({
fontSize: size,
color: color,
width: WIDTH,
height: HEIGHT,
'data-garden-id': COMPONENT_ID
}, other),
_react2.default.createElement(_styledElements.SpinnerCircle, {
strokeDasharray: dasharrayValue + ' 250',
strokeWidth: strokeWidthValue,
transform: 'rotate(' + rotationValue + ', ' + WIDTH / 2 + ', ' + HEIGHT / 2 + ')'
})
);
}
);
return external_react_default.a.createElement(ScheduleContainer_ScheduleContainer, {
tick: this.performAnimationFrame,
size: size,
delayMS: delayMS
}, function () {
return external_react_default.a.createElement(styled_elements_StyledSVG, Spinner_extends({
fontSize: size,
color: color,
width: WIDTH,
height: HEIGHT,
"data-garden-id": Spinner_COMPONENT_ID
}, other), external_react_default.a.createElement(SpinnerCircle, {
strokeDasharray: "".concat(dasharrayValue, " 250"),
strokeWidth: strokeWidthValue,
transform: "rotate(".concat(rotationValue, ", ").concat(WIDTH / 2, ", ").concat(HEIGHT / 2, ")")
}));
});
}

@@ -946,17 +939,20 @@ }]);

return Spinner;
}(_react2.default.Component);
}(external_react_default.a.Component);
Spinner.propTypes = {
Spinner_defineProperty(Spinner_Spinner, "propTypes", {
/**
* Size of the loader. Can inherit from `font-size` styling.
**/
size: _propTypes2.default.any,
size: external_prop_types_default.a.any,
/**
* Duration (ms) of the animation. Default is 1250ms.
**/
duration: _propTypes2.default.number,
duration: external_prop_types_default.a.number,
/**
* Color of the loader. Can inherit from `color` styling.
**/
color: _propTypes2.default.string,
color: external_prop_types_default.a.string,
/**

@@ -966,5 +962,6 @@ * Delay in MS to begin loader rendering. This helps prevent

**/
delayMS: _propTypes2.default.number
};
Spinner.defaultProps = {
delayMS: external_prop_types_default.a.number
});
Spinner_defineProperty(Spinner_Spinner, "defaultProps", {
size: 'inherit',

@@ -974,15 +971,8 @@ color: 'inherit',

duration: 1250
};
exports.default = Spinner;
});
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
// CONCATENATED MODULE: ./src/index.js
/* concated harmony reexport Dots */__webpack_require__.d(__webpack_exports__, "Dots", function() { return Dots_Dots; });
/* concated harmony reexport Spinner */__webpack_require__.d(__webpack_exports__, "Spinner", function() { return Spinner_Spinner; });
/**

@@ -995,70 +985,6 @@ * Copyright Zendesk, Inc.

var STROKE_WIDTH_FRAMES = exports.STROKE_WIDTH_FRAMES = {
0: 6,
14: 5,
26: 4,
36: 3,
46: 2,
58: 3,
70: 4,
80: 5,
91: 6
};
var ROTATION_FRAMES = exports.ROTATION_FRAMES = {
0: -90,
8: -81,
36: -30,
41: -18,
44: -8,
48: 0,
55: 22,
63: 53,
64: 62,
66: 67,
68: 78,
69: 90,
71: 99,
73: 112,
74: 129,
76: 138,
78: 159,
79: 180,
81: 190,
83: 207,
84: 221,
86: 226,
88: 235,
90: 243,
99: 270
};
var DASHARRAY_FRAMES = exports.DASHARRAY_FRAMES = {
0: 0,
13: 2,
26: 13,
53: 86,
58: 90,
63: 89,
64: 88,
66: 86,
68: 83,
69: 81,
71: 76,
73: 70,
74: 62,
76: 58,
78: 47,
79: 37,
81: 31,
83: 23,
84: 16,
88: 10,
89: 7,
98: 1,
99: 0
};
/***/ })
/******/ ])));
//# sourceMappingURL=index.js.map

2

dist/umd/bundle.min.js

@@ -7,3 +7,3 @@ /*!

*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("rop-types"),require("styled-components"),require("@zendeskgarden/react-theming")):"function"==typeof define&&define.amd?define(["react","prop-types","styled-components","@zendeskgarden/react-theming"],t):"object"==typeof exports?exports.GardenLoaders=t(require("react"),require("rop-types"),require("styled-components"),require("@zendeskgarden/react-theming")):e.GardenLoaders=t(e.React,e.PropTypes,e.styled,e.GardenTheming)}(window,function(r,n,o,a){return function(r){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=r,o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4)}([function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LoadingPlaceholder=t.StyledSVG=t.SpinnerCircle=t.DotsCircle=void 0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u=l(r(0)),n=l(r(1)),o=l(r(8)),a=r(9);function l(e){return e&&e.__esModule?e:{default:e}}(t.DotsCircle=o.default.circle.attrs({cx:9,cy:9,r:9,transform:function(e){return e.transform}}).withConfig({displayName:"styled-elements__DotsCircle",componentId:"sc-19dhio6-0"})([""])).propTypes={transform:n.default.string},(t.SpinnerCircle=o.default.circle.attrs({cx:40,cy:40,r:34,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:function(e){return e.strokeWidthValue},strokeDasharray:function(e){return e.dasharrayValue+" 250"},transform:function(e){return e.transform}}).withConfig({displayName:"styled-elements__SpinnerCircle",componentId:"sc-19dhio6-1"})([""])).propTypes={dasharrayValue:n.default.string,strokeWidthValue:n.default.string,transform:n.default.string};var f=o.default.svg.attrs({"data-garden-id":function(e){return e.dataGardenId},"data-garden-version":"0.2.4",xmlns:"http://www.w3.org/2000/svg",width:function(e){return e.width},height:function(e){return e.height},focusable:"false",viewBox:function(e){return"0 0 "+e.width+" "+e.height},role:"progressbar"}).withConfig({displayName:"styled-elements__StyledSvg",componentId:"sc-19dhio6-2"})(["width:1em;height:0.9em;color:",";font-size:",";",";"],function(e){return e.color||"inherit"},function(e){return e.fontSize||"inherit"},function(e){return(0,a.retrieveTheme)(e.dataGardenId,e)});f.propTypes={color:n.default.string,fontSize:n.default.any};var c=function(e){var t=e.children,r=e.fontSize,n=e.width,o=e.height,a=function(e,t){var r={};for(var n in e)0<=t.indexOf(n)||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["children","fontSize","width","height"]);return u.default.createElement(f,i({fontSize:r,width:n,height:o},a),t)};(t.StyledSVG=c).propTypes={children:n.default.node,fontSize:n.default.any,height:n.default.oneOfType([n.default.string,n.default.number]),width:n.default.oneOfType([n.default.string,n.default.number])},(t.LoadingPlaceholder=o.default.div.attrs({role:"progressbar"}).withConfig({displayName:"styled-elements__LoadingPlaceholder",componentId:"sc-19dhio6-3"})(["display:inline;width:1em;height:0.9em;font-size:",";"],function(e){return e.fontSize})).propTypes={fontSize:n.default.any}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),o=r(0),i=l(o),a=l(r(1)),u=r(2);function l(e){return e&&e.__esModule?e:{default:e}}var f=function(e){function r(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r);var t=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.state={delayComplete:!1},t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,o.Component),n(r,[{key:"componentDidMount",value:function(){var e=this,t=this.props.delayMS;this.renderingDelayTimeout=setTimeout(function(){e.setState({delayComplete:!0},function(){e.performAnimationFrame()})},t)}},{key:"componentWillUnmount",value:function(){clearTimeout(this.renderingDelayTimeout),cancelAnimationFrame(this.tick)}},{key:"performAnimationFrame",value:function(){var t=this;this.tick=requestAnimationFrame(function(e){t.props.tick(e),t.performAnimationFrame()})}},{key:"render",value:function(){var e=this.props,t=e.delayMS,r=e.size,n=e.children,o=e.render,a=void 0===o?n:o;return this.state.delayComplete||0===t?a():i.default.createElement(u.LoadingPlaceholder,{fontSize:r}," ")}}]),r}();f.propTypes={size:a.default.any,delayMS:a.default.number,tick:a.default.func,children:a.default.func,render:a.default.func},f.defaultProps={delayMS:750},t.default=f},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(5);Object.defineProperty(t,"Dots",{enumerable:!0,get:function(){return a(n).default}});var o=r(10);function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"Spinner",{enumerable:!0,get:function(){return a(o).default}})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),f=a(r(0)),o=a(r(1)),c=r(6),s=r(2),d=a(r(3));function a(e){return e&&e.__esModule?e:{default:e}}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var i=function(e){function i(){var e,t,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];return(t=r=u(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(o)))).state={frame:0,timestamp:0},r.performAnimationFrame=function(){var n=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=r.props.velocity,o=e;e<-1?o=-.9:1<e&&(o=1),r.setState(function(e){var t=1e3+1e3*o,r=(n-e.timestamp)/t;return{frame:e.frame+r%c.KEYFRAME_MAX,timestamp:n}})},r.retrieveFrame=function(e){var t=2*c.KEYFRAME_MAX;return(r.state.frame+e*t)%t},u(r,t)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,f.default.Component),n(i,[{key:"render",value:function(){var e=this.props,t=e.size,r=e.color,n=e.delayMS,o=function(e,t){var r={};for(var n in e)0<=t.indexOf(n)||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["size","color","delayMS"]),a=this.retrieveFrame(0),i=this.retrieveFrame(1/3),u=this.retrieveFrame(2/3);return f.default.createElement(d.default,{tick:this.performAnimationFrame,size:t,delayMS:n},function(){return f.default.createElement(s.StyledSVG,l({fontSize:t,color:r,width:"80",height:"72","data-garden-id":"loaders.dots"},o),f.default.createElement("g",{fill:"currentColor"},f.default.createElement(s.DotsCircle,{transform:"translate("+(0,c.retrieveXCoordinate)(a)+" "+(0,c.retrieveYCoordinate)(a)+")"}),f.default.createElement(s.DotsCircle,{transform:"translate("+(0,c.retrieveXCoordinate)(i)+" "+(0,c.retrieveYCoordinate)(i)+")"}),f.default.createElement(s.DotsCircle,{transform:"translate("+(0,c.retrieveXCoordinate)(u)+" "+(0,c.retrieveYCoordinate)(u)+")"})))})}}]),i}();i.propTypes={size:o.default.any,velocity:o.default.number,color:o.default.string,delayMS:o.default.number},i.defaultProps={size:"inherit",color:"inherit",velocity:.05,delayMS:750},t.default=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.KEYFRAME_MAX=t.KEYFRAME_5=t.KEYFRAME_4=t.KEYFRAME_3=t.KEYFRAME_2=t.KEYFRAME_1=void 0,t.retrieveXCoordinate=function(e){var t=void 0,r=e%y;{if(r<c)return m;if(r<l){var n=r-c,o=l-c,a=(0,f.easeInOutCubic)(n/o);t=m-a*m}else if(r<d)t=0;else{var i=r-d,u=y-d;t=m*(i/u)}}y<=e&&(t=2*m-t);return t},t.retrieveYCoordinate=function(e){var t=e%y;{if(t<c)return t/c*-1*(v-h)+v;if(t<s)return h;if(t<d){var r=t-s,n=d-s;return r/n*(v-h)+h}if(t<p){var o=t-d,a=p-d,i=(0,f.easeOutCubic)(o/a);return v-i*v}}var u=t-p,l=y-p;return(0,f.easeInCubic)(u/l)*v};var f=r(7),c=t.KEYFRAME_1=.166666667,l=t.KEYFRAME_2=.55,s=t.KEYFRAME_3=1.166666667,d=t.KEYFRAME_4=1.333333333,p=t.KEYFRAME_5=1.533333333,y=t.KEYFRAME_MAX=1.766666667,m=31,h=27,v=h+5},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.easeInCubic=function(e){return e*e*e},t.easeOutCubic=function(e){var t=e-1;return t*t*t+1},t.easeInOutCubic=function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1}},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},n=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),c=i(r(0)),o=i(r(1)),a=r(11),s=r(2),d=i(r(3));function i(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return u.state={frame:0,rawFrame:0,totalFrames:100,delayComplete:!1,timestamp:0},u.computeFrames=function(e){var m=u.props.duration,h=u.state.totalFrames;return Object.entries(e).reduce(function(e,t,r,n){var o=v(t,2),a=o[0],i=o[1],u=n[r+1]||[h,n[0][1]],l=v(u,2),f=l[0],c=l[1],s=f-a,d=m/(h-1)*s,p=i;e[a]=i;for(var y=0;y<s;y++)p+=1e3/60/d*(c-p),d=m/(h-1)*(s-y),e[parseInt(a,10)+y+1]=p;return e[f]=c,e},{})},u.performAnimationFrame=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=u.state,r=e.totalFrames,n=e.rawFrame,o=e.timestamp,a=u.props.duration,i=t-o;u.setState(function(){var e=n+i*((r+1)/a);return{frame:Math.floor(e)%r,rawFrame:e%r,timestamp:t}})},u.strokeWidthValues=u.computeFrames(a.STROKE_WIDTH_FRAMES),u.rotationValues=u.computeFrames(a.ROTATION_FRAMES),u.dasharrayValues=u.computeFrames(a.DASHARRAY_FRAMES),u}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,c.default.Component),n(t,[{key:"render",value:function(){var e=this.props,t=e.size,r=e.color,n=e.delayMS,o=function(e,t){var r={};for(var n in e)0<=t.indexOf(n)||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["size","color","delayMS"]),a=this.state.frame,i=this.strokeWidthValues[a],u=this.rotationValues[a],l=this.dasharrayValues[a];return c.default.createElement(d.default,{tick:this.performAnimationFrame,size:t,delayMS:n},function(){return c.default.createElement(s.StyledSVG,f({fontSize:t,color:r,width:80,height:80,"data-garden-id":"loaders.spinner"},o),c.default.createElement(s.SpinnerCircle,{strokeDasharray:l+" 250",strokeWidth:i,transform:"rotate("+u+", 40, 40)"}))})}}]),t}();u.propTypes={size:o.default.any,duration:o.default.number,color:o.default.string,delayMS:o.default.number},u.defaultProps={size:"inherit",color:"inherit",delayMS:750,duration:1250},t.default=u},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.STROKE_WIDTH_FRAMES={0:6,14:5,26:4,36:3,46:2,58:3,70:4,80:5,91:6},t.ROTATION_FRAMES={0:-90,8:-81,36:-30,41:-18,44:-8,48:0,55:22,63:53,64:62,66:67,68:78,69:90,71:99,73:112,74:129,76:138,78:159,79:180,81:190,83:207,84:221,86:226,88:235,90:243,99:270},t.DASHARRAY_FRAMES={0:0,13:2,26:13,53:86,58:90,63:89,64:88,66:86,68:83,69:81,71:76,73:70,74:62,76:58,78:47,79:37,81:31,83:23,84:16,88:10,89:7,98:1,99:0}}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("rop-types"),require("react"),require("styled-components"),require("@zendeskgarden/react-theming")):"function"==typeof define&&define.amd?define(["prop-types","react","styled-components","@zendeskgarden/react-theming"],t):"object"==typeof exports?exports.GardenLoaders=t(require("rop-types"),require("react"),require("styled-components"),require("@zendeskgarden/react-theming")):e.GardenLoaders=t(e.PropTypes,e.React,e.styled,e.GardenTheming)}(window,function(r,n,o,a){return function(r){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=r,o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4)}([function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t,r){"use strict";r.r(t);var a=r(1),f=r.n(a),n=r(0),o=r.n(n);var i=.166666667,u=1.166666667,c=1.333333333,l=1.533333333,s=1.766666667;function p(e){var t,r,n=e%s;if(n<i)return 31;if(n<.55){t=31-31*((r=(n-i)/.38333333300000005)<.5?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1)}else if(n<c)t=0;else{t=(n-c)/.43333333400000007*31}return s<=e&&(t=62-t),t}function y(e){var t,r=e%s;if(r<i)return r/i*-1*5+32;if(r<u)return 27;if(r<c){return(r-u)/.1666666659999998*5+27}if(r<l){return 32-32*((t=(r-c)/.20000000000000018-1)*t*t+1)}var n;return 32*((n=(r-l)/.2333333339999999)*n*n)}var m=r(2),d=r.n(m),h=r(3);function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var g=d.a.circle.attrs({cx:9,cy:9,r:9,transform:function(e){return e.transform}}).withConfig({displayName:"styled-elements__DotsCircle",componentId:"sc-19dhio6-0"})([""]);g.propTypes={transform:o.a.string};var O=d.a.circle.attrs({cx:40,cy:40,r:34,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:function(e){return e.strokeWidthValue},strokeDasharray:function(e){var t=e.dasharrayValue;return"".concat(t," 250")},transform:function(e){return e.transform}}).withConfig({displayName:"styled-elements__SpinnerCircle",componentId:"sc-19dhio6-1"})([""]);O.propTypes={dasharrayValue:o.a.string,strokeWidthValue:o.a.string,transform:o.a.string};var w=d.a.svg.attrs({"data-garden-id":function(e){return e.dataGardenId},"data-garden-version":"0.2.5",xmlns:"http://www.w3.org/2000/svg",width:function(e){return e.width},height:function(e){return e.height},focusable:"false",viewBox:function(e){var t=e.width,r=e.height;return"0 0 ".concat(t," ").concat(r)},role:"progressbar"}).withConfig({displayName:"styled-elements__StyledSvg",componentId:"sc-19dhio6-2"})(["width:1em;height:0.9em;color:",";font-size:",";",";"],function(e){return e.color||"inherit"},function(e){return e.fontSize||"inherit"},function(e){return Object(h.retrieveTheme)(e.dataGardenId,e)});w.propTypes={color:o.a.string,fontSize:o.a.any};var S=function(e){var t=e.children,r=e.fontSize,n=e.width,o=e.height,a=v(e,["children","fontSize","width","height"]);return f.a.createElement(w,b({fontSize:r,width:n,height:o},a),t)};S.propTypes={children:o.a.node,fontSize:o.a.any,height:o.a.oneOfType([o.a.string,o.a.number]),width:o.a.oneOfType([o.a.string,o.a.number])};var j=d.a.div.attrs({role:"progressbar"}).withConfig({displayName:"styled-elements__LoadingPlaceholder",componentId:"sc-19dhio6-3"})(["display:inline;width:1em;height:0.9em;font-size:",";"],function(e){return e.fontSize});function _(e){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function k(e,t){return!t||"object"!==_(t)&&"function"!=typeof t?function(e){if(void 0!==e)return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}function z(e){return(z=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function x(e,t){return(x=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function T(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}j.propTypes={fontSize:o.a.any};var E=function(e){function r(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r),(t=k(this,z(r).call(this,e))).state={delayComplete:!1},t}var t,n,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&x(e,t)}(r,a["Component"]),t=r,(n=[{key:"componentDidMount",value:function(){var e=this,t=this.props.delayMS;this.renderingDelayTimeout=setTimeout(function(){e.setState({delayComplete:!0},function(){e.performAnimationFrame()})},t)}},{key:"componentWillUnmount",value:function(){clearTimeout(this.renderingDelayTimeout),cancelAnimationFrame(this.tick)}},{key:"performAnimationFrame",value:function(){var t=this;this.tick=requestAnimationFrame(function(e){t.props.tick(e),t.performAnimationFrame()})}},{key:"render",value:function(){var e=this.props,t=e.delayMS,r=e.size,n=e.children,o=e.render,a=void 0===o?n:o;return this.state.delayComplete||0===t?a():f.a.createElement(j,{fontSize:r}," ")}}])&&P(t.prototype,n),o&&P(t,o),r}();function F(e){return(F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function M(){return(M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function C(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function A(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function I(e){return(I=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function V(e,t){return(V=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function q(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}T(E,"propTypes",{size:o.a.any,delayMS:o.a.number,tick:o.a.func,children:o.a.func,render:o.a.func}),T(E,"defaultProps",{delayMS:750});var W=function(e){function u(){var e,r,t,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u);for(var o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];return t=this,n=(e=I(u)).call.apply(e,[this].concat(a)),D(q(q(r=!n||"object"!==F(n)&&"function"!=typeof n?q(t):n)),"state",{frame:0,timestamp:0}),D(q(q(r)),"performAnimationFrame",function(){var n=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=r.props.velocity,o=e;e<-1?o=-.9:1<e&&(o=1),r.setState(function(e){var t=1e3+1e3*o,r=(n-e.timestamp)/t;return{frame:e.frame+r%s,timestamp:n}})}),D(q(q(r)),"retrieveFrame",function(e){var t=2*s;return(r.state.frame+e*t)%t}),r}var t,r,n;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&V(e,t)}(u,f.a.Component),t=u,(r=[{key:"render",value:function(){var e=this.props,t=e.size,r=e.color,n=e.delayMS,o=C(e,["size","color","delayMS"]),a=this.retrieveFrame(0),i=this.retrieveFrame(1/3),u=this.retrieveFrame(2/3);return f.a.createElement(E,{tick:this.performAnimationFrame,size:t,delayMS:n},function(){return f.a.createElement(S,M({fontSize:t,color:r,width:"80",height:"72","data-garden-id":"loaders.dots"},o),f.a.createElement("g",{fill:"currentColor"},f.a.createElement(g,{transform:"translate(".concat(p(a)," ").concat(y(a),")")}),f.a.createElement(g,{transform:"translate(".concat(p(i)," ").concat(y(i),")")}),f.a.createElement(g,{transform:"translate(".concat(p(u)," ").concat(y(u),")")})))})}}])&&A(t.prototype,r),n&&A(t,n),u}();D(W,"propTypes",{size:o.a.any,velocity:o.a.number,color:o.a.string,delayMS:o.a.number}),D(W,"defaultProps",{size:"inherit",color:"inherit",velocity:.05,delayMS:750});var G={0:6,14:5,26:4,36:3,46:2,58:3,70:4,80:5,91:6},L={0:-90,8:-81,36:-30,41:-18,44:-8,48:0,55:22,63:53,64:62,66:67,68:78,69:90,71:99,73:112,74:129,76:138,78:159,79:180,81:190,83:207,84:221,86:226,88:235,90:243,99:270},N={0:0,13:2,26:13,53:86,58:90,63:89,64:88,66:86,68:83,69:81,71:76,73:70,74:62,76:58,78:47,79:37,81:31,83:23,84:16,88:10,89:7,98:1,99:0};function R(e){return(R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function B(){return(B=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function U(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function H(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function J(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function K(e){return(K=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function Q(e,t){return(Q=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function X(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function Y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var Z=function(e){function n(e){var u,t,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),t=this,r=K(n).call(this,e),Y(X(X(u=!r||"object"!==R(r)&&"function"!=typeof r?X(t):r)),"state",{frame:0,rawFrame:0,totalFrames:100,delayComplete:!1,timestamp:0}),Y(X(X(u)),"computeFrames",function(e){var m=u.props.duration,d=u.state.totalFrames;return Object.entries(e).reduce(function(e,t,r,n){var o=H(t,2),a=o[0],i=o[1],u=H(n[r+1]||[d,n[0][1]],2),c=u[0],f=u[1],l=c-a,s=m/(d-1)*l,p=i;e[a]=i;for(var y=0;y<l;y++)p+=1e3/60/s*(f-p),s=m/(d-1)*(l-y),e[parseInt(a,10)+y+1]=p;return e[c]=f,e},{})}),Y(X(X(u)),"performAnimationFrame",function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=u.state,r=e.totalFrames,n=e.rawFrame,o=e.timestamp,a=u.props.duration,i=t-o;u.setState(function(){var e=n+i*((r+1)/a);return{frame:Math.floor(e)%r,rawFrame:e%r,timestamp:t}})}),u.strokeWidthValues=u.computeFrames(G),u.rotationValues=u.computeFrames(L),u.dasharrayValues=u.computeFrames(N),u}var t,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&Q(e,t)}(n,f.a.Component),t=n,(r=[{key:"render",value:function(){var e=this.props,t=e.size,r=e.color,n=e.delayMS,o=U(e,["size","color","delayMS"]),a=this.state.frame,i=this.strokeWidthValues[a],u=this.rotationValues[a],c=this.dasharrayValues[a];return f.a.createElement(E,{tick:this.performAnimationFrame,size:t,delayMS:n},function(){return f.a.createElement(S,B({fontSize:t,color:r,width:80,height:80,"data-garden-id":"loaders.spinner"},o),f.a.createElement(O,{strokeDasharray:"".concat(c," 250"),strokeWidth:i,transform:"rotate(".concat(u,", ").concat(40,", ").concat(40,")")}))})}}])&&J(t.prototype,r),o&&J(t,o),n}();Y(Z,"propTypes",{size:o.a.any,duration:o.a.number,color:o.a.string,delayMS:o.a.number}),Y(Z,"defaultProps",{size:"inherit",color:"inherit",delayMS:750,duration:1250}),r.d(t,"Dots",function(){return W}),r.d(t,"Spinner",function(){return Z})}])});
//# sourceMappingURL=bundle.min.js.map

6

package.json

@@ -11,3 +11,3 @@ {

},
"version": "0.2.4",
"version": "0.2.5",
"main": "./dist/index.js",

@@ -34,3 +34,3 @@ "files": [

"@zendeskgarden/css-variables": "5.2.1",
"@zendeskgarden/react-theming": "^3.1.1"
"@zendeskgarden/react-theming": "^3.2.0"
},

@@ -48,3 +48,3 @@ "keywords": [

"zendeskgarden:src": "src/index.js",
"gitHead": "7249e5f9539f14e639646202d302870494ce8949"
"gitHead": "100dd0814a481ce46eecd0246a9ea35b024aa154"
}
dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/umd/bundle.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc