Socket
Socket
Sign inDemoInstall

@atlaskit/spinner

Package Overview
Dependencies
Maintainers
1
Versions
149
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/spinner - npm Package Compare versions

Comparing version 3.4.2 to 4.0.0

21

CHANGELOG.md

@@ -1,6 +0,23 @@

<a name="3.4.2"></a>
## 3.4.2 (2017-07-27)
<a name="4.0.0"></a>
# 4.0.0 (2017-08-29)
<a name="4.0.0"></a>
# 4.0.0 (2017-08-29)
### Features
* **component:** convert spinner to have a dark mode implementation ([b1c2a53](https://bitbucket.org/atlassian/atlaskit/commits/b1c2a53))
### BREAKING CHANGES
* **component:** convert spinner to have a dark mode implementation
ISSUES CLOSED: #AK-3371
<a name="3.4.2"></a>

@@ -7,0 +24,0 @@ ## 3.4.2 (2017-07-27)

24

dist/bundle-cjs.js

@@ -313,12 +313,20 @@ module.exports = /******/

_taggedTemplateLiteral3.default)([ "\n from { opacity: 0; }\n to { opacity: 1; }\n " ], [ "\n from { opacity: 0; }\n to { opacity: 1; }\n " ]), _templateObject5 = (0,
_taggedTemplateLiteral3.default)([ "", "" ], [ "", "" ]), _styledComponents = __webpack_require__(14), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(16), getStrokeColor = exports.getStrokeColor = function(invertColor) {
return invertColor ? _utilSharedStyles.akColorN0 : _utilSharedStyles.akColorN500;
}, svgStyles = exports.svgStyles = (0, _styledComponents.css)(_templateObject, function(_ref) {
var invertColor = _ref.invertColor, phase = _ref.phase, size = _ref.size, strokeWidth = Math.round(size / 10), strokeRadius = size / 2 - strokeWidth / 2, circumference = Math.PI * strokeRadius * 2, idleRotation = "0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite " + (0,
_taggedTemplateLiteral3.default)([ "\n animation: ", ";\n fill: none;\n stroke: ", ";\n stroke-dasharray: ", "px;\n stroke-dashoffset: ", "px;\n stroke-linecap: round;\n stroke-width: ", "px;\n transform-origin: center;\n " ], [ "\n animation: ", ";\n fill: none;\n stroke: ", ";\n stroke-dasharray: ", "px;\n stroke-dashoffset: ", "px;\n stroke-linecap: round;\n stroke-width: ", "px;\n transform-origin: center;\n " ]), _templateObject6 = (0,
_taggedTemplateLiteral3.default)([ "", "" ], [ "", "" ]), _styledComponents = __webpack_require__(14), _styledComponents2 = _interopRequireDefault(_styledComponents), _theme = __webpack_require__(16), spinnerColor = (0,
_theme.themed)({
light: _theme.colors.N500,
dark: _theme.colors.N0
}), spinnerColorInverted = (0, _theme.themed)({
light: _theme.colors.N0,
dark: _theme.colors.N0
}), getStrokeColor = exports.getStrokeColor = function(p) {
return p.invertColor ? spinnerColorInverted(p) : spinnerColor(p);
}, svgStyles = exports.svgStyles = (0, _styledComponents.css)(_templateObject, function(props) {
var strokeWidth = Math.round(props.size / 10), strokeRadius = props.size / 2 - strokeWidth / 2, circumference = Math.PI * strokeRadius * 2, idleRotation = "0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite " + (0,
_styledComponents.keyframes)(_templateObject2), spinUpStroke = "0.8s ease-in-out " + (0,
_styledComponents.keyframes)(_templateObject3, circumference, .8 * circumference), spinUpOpacity = "0.2s ease-in-out " + (0,
_styledComponents.keyframes)(_templateObject4), activeAnimations = [ idleRotation ];
return "ENTER" === phase && activeAnimations.push(spinUpStroke, spinUpOpacity),
"\n animation: " + activeAnimations.join(", ") + ";\n fill: none;\n stroke: " + getStrokeColor(invertColor) + ";\n stroke-dasharray: " + circumference + "px;\n stroke-dashoffset: " + .8 * circumference + "px;\n stroke-linecap: round;\n stroke-width: " + strokeWidth + "px;\n transform-origin: center;\n ";
}), Svg = _styledComponents2.default.svg(_templateObject5, svgStyles);
return "ENTER" === props.phase && activeAnimations.push(spinUpStroke, spinUpOpacity),
(0, _styledComponents.css)(_templateObject5, activeAnimations.join(", "), getStrokeColor, circumference, .8 * circumference, strokeWidth);
}), Svg = _styledComponents2.default.svg(_templateObject6, svgStyles);
Svg.displayName = "SpinnerSvg", exports.default = Svg;

@@ -328,3 +336,3 @@ }, /* 16 */

function(module, exports) {
module.exports = require("@atlaskit/util-shared-styles");
module.exports = require("@atlaskit/theme");
} ]);

2

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@

module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(2),i=r(o);t.default=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),u=n(5),l=r(u),f=n(6),d=r(f),p=n(7),c=r(p),m=n(8),h=r(m),y=n(9),v=r(y),g=n(10),b=n(11),x=r(b),C=function(e){function t(){return(0,l.default)(this,t),(0,d.default)(this,e.apply(this,arguments))}return(0,c.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.isCompleting,n=(0,s.default)(e,["isCompleting"]);return v.default.createElement(g.TransitionGroup,{component:"div",style:{display:"inline-block"}},t?null:v.default.createElement(x.default,(0,i.default)({key:Date.now()},n)))},t}(y.PureComponent);C.propTypes={delay:h.default.number.isRequired,invertColor:h.default.bool.isRequired,onComplete:h.default.func.isRequired,size:h.default.oneOfType([h.default.oneOf(["small"]),h.default.oneOf(["medium"]),h.default.oneOf(["large"]),h.default.oneOf(["xlarge"]),h.default.number]).isRequired,isCompleting:h.default.bool.isRequired},C.defaultProps={delay:100,isCompleting:!1,invertColor:!1,onComplete:function(){},size:"small"},t.default=C},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("react-transition-group")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o),a=n(6),s=r(a),u=n(7),l=r(u),f=n(8),d=r(f),p=n(9),c=r(p),m=n(12),h=r(m),y=n(15),v=r(y),g={small:20,medium:30,large:50,xlarge:100},b=g.small,x=function(e){function t(){var n,r,o;(0,i.default)(this,t);for(var a=arguments.length,u=Array(a),l=0;l<a;l++)u[l]=arguments[l];return n=r=(0,s.default)(this,e.call.apply(e,[this].concat(u))),r.state={phase:""},r.runAfterAnimation=function(e){function t(n){return"svg"!==n.target.tagName&&(e(),o&&o.removeEventListener("animationend",t))}var n=r,o=n.parentNode;return o&&o.addEventListener("animationend",t)},r.validateSize=function(){var e=r.props.size,t=g[e]||e;return"number"==typeof t?t:b},o=n,(0,s.default)(r,o)}return(0,l.default)(t,e),t.prototype.componentWillAppear=function(e){this.enter(e)},t.prototype.componentDidAppear=function(){this.idle()},t.prototype.componentWillEnter=function(e){this.enter(e)},t.prototype.componentDidEnter=function(){this.idle()},t.prototype.componentWillLeave=function(e){this.leave(e)},t.prototype.componentDidLeave=function(){this.props.onComplete()},t.prototype.enter=function(e){var t=this,n=function(){t.setState({phase:"ENTER"}),t.runAfterAnimation(e)},r=this.props.delay;r?(this.setState({phase:"DELAY"}),this.runAfterAnimation(n)):n()},t.prototype.idle=function(){this.setState({phase:"IDLE"})},t.prototype.leave=function(e){this.setState({phase:"LEAVE"}),this.runAfterAnimation(e)},t.prototype.render=function(){var e=this,t=this.state.phase,n=this.props,r=n.delay,o=n.invertColor,i=this.validateSize(),a=Math.round(i/10),s=i/2-a/2;return c.default.createElement(h.default,{delay:r/1e3,innerRef:function(t){e.parentNode=t?t.parentElement:null},phase:t,size:i},c.default.createElement(v.default,{focusable:"false",height:i,invertColor:o,phase:t,size:i,viewBox:"0 0 "+i+" "+i,width:i,xmlns:"http://www.w3.org/2000/svg"},c.default.createElement("circle",{cx:i/2,cy:i/2,r:s})))},t}(p.PureComponent);x.propTypes={delay:d.default.number.isRequired,invertColor:d.default.bool.isRequired,onComplete:d.default.func.isRequired,size:d.default.oneOfType([d.default.oneOf(["small"]),d.default.oneOf(["medium"]),d.default.oneOf(["large"]),d.default.oneOf(["xlarge"]),d.default.number]).isRequired},t.default=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getContainerAnimation=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 0; }\n "],["\n from { opacity: 0; }\n to { opacity: 0; }\n "]),s=(0,i.default)(["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "],["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "]),u=(0,i.default)(["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "],["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "]),l=(0,i.default)(["\n from { opacity: 1; }\n to { opacity: 0; }\n "],["\n from { opacity: 1; }\n to { opacity: 0; }\n "]),f=(0,i.default)(["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"],["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"]),d=n(14),p=r(d),c=t.getContainerAnimation=function(e){var t=e.delay,n=e.phase;return"DELAY"===n?"animation: "+t+"s "+(0,d.keyframes)(a)+";":"ENTER"===n||"IDLE"===n?"animation: 1s ease-in-out forwards "+(0,d.keyframes)(s)+";":"LEAVE"===n?"animation: 0.53s ease-in-out forwards "+(0,d.keyframes)(u)+",\n 0.2s ease-in-out 0.33s "+(0,d.keyframes)(l)+";":""},m=function(e){var t=e.size;return t+"px"},h=p.default.div(f,c,m,m);h.displayName="SpinnerContainer",t.default=h},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.svgStyles=t.getStrokeColor=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n ","\n"],["\n ","\n"]),s=(0,i.default)(["\n to { transform: rotate(360deg); }\n "],["\n to { transform: rotate(360deg); }\n "]),u=(0,i.default)(["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "],["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "]),l=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n "],["\n from { opacity: 0; }\n to { opacity: 1; }\n "]),f=(0,i.default)(["",""],["",""]),d=n(14),p=r(d),c=n(16),m=t.getStrokeColor=function(e){return e?c.akColorN0:c.akColorN500},h=t.svgStyles=(0,d.css)(a,function(e){var t=e.invertColor,n=e.phase,r=e.size,o=Math.round(r/10),i=r/2-o/2,a=Math.PI*i*2,f="0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite "+(0,d.keyframes)(s),p="0.8s ease-in-out "+(0,d.keyframes)(u,a,.8*a),c="0.2s ease-in-out "+(0,d.keyframes)(l),h=[f];return"ENTER"===n&&h.push(p,c),"\n animation: "+h.join(", ")+";\n fill: none;\n stroke: "+m(t)+";\n stroke-dasharray: "+a+"px;\n stroke-dashoffset: "+.8*a+"px;\n stroke-linecap: round;\n stroke-width: "+o+"px;\n transform-origin: center;\n "}),y=p.default.svg(f,h);y.displayName="SpinnerSvg",t.default=y},function(e,t){e.exports=require("@atlaskit/util-shared-styles")}]);
module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(2),i=r(o);t.default=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),l=n(5),u=r(l),f=n(6),d=r(f),p=n(7),c=r(p),m=n(8),h=r(m),y=n(9),v=r(y),g=n(10),x=n(11),b=r(x),k=function(e){function t(){return(0,u.default)(this,t),(0,d.default)(this,e.apply(this,arguments))}return(0,c.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.isCompleting,n=(0,s.default)(e,["isCompleting"]);return v.default.createElement(g.TransitionGroup,{component:"div",style:{display:"inline-block"}},t?null:v.default.createElement(b.default,(0,i.default)({key:Date.now()},n)))},t}(y.PureComponent);k.propTypes={delay:h.default.number.isRequired,invertColor:h.default.bool.isRequired,onComplete:h.default.func.isRequired,size:h.default.oneOfType([h.default.oneOf(["small"]),h.default.oneOf(["medium"]),h.default.oneOf(["large"]),h.default.oneOf(["xlarge"]),h.default.number]).isRequired,isCompleting:h.default.bool.isRequired},k.defaultProps={delay:100,isCompleting:!1,invertColor:!1,onComplete:function(){},size:"small"},t.default=k},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("react-transition-group")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o),a=n(6),s=r(a),l=n(7),u=r(l),f=n(8),d=r(f),p=n(9),c=r(p),m=n(12),h=r(m),y=n(15),v=r(y),g={small:20,medium:30,large:50,xlarge:100},x=g.small,b=function(e){function t(){var n,r,o;(0,i.default)(this,t);for(var a=arguments.length,l=Array(a),u=0;u<a;u++)l[u]=arguments[u];return n=r=(0,s.default)(this,e.call.apply(e,[this].concat(l))),r.state={phase:""},r.runAfterAnimation=function(e){function t(n){return"svg"!==n.target.tagName&&(e(),o&&o.removeEventListener("animationend",t))}var n=r,o=n.parentNode;return o&&o.addEventListener("animationend",t)},r.validateSize=function(){var e=r.props.size,t=g[e]||e;return"number"==typeof t?t:x},o=n,(0,s.default)(r,o)}return(0,u.default)(t,e),t.prototype.componentWillAppear=function(e){this.enter(e)},t.prototype.componentDidAppear=function(){this.idle()},t.prototype.componentWillEnter=function(e){this.enter(e)},t.prototype.componentDidEnter=function(){this.idle()},t.prototype.componentWillLeave=function(e){this.leave(e)},t.prototype.componentDidLeave=function(){this.props.onComplete()},t.prototype.enter=function(e){var t=this,n=function(){t.setState({phase:"ENTER"}),t.runAfterAnimation(e)},r=this.props.delay;r?(this.setState({phase:"DELAY"}),this.runAfterAnimation(n)):n()},t.prototype.idle=function(){this.setState({phase:"IDLE"})},t.prototype.leave=function(e){this.setState({phase:"LEAVE"}),this.runAfterAnimation(e)},t.prototype.render=function(){var e=this,t=this.state.phase,n=this.props,r=n.delay,o=n.invertColor,i=this.validateSize(),a=Math.round(i/10),s=i/2-a/2;return c.default.createElement(h.default,{delay:r/1e3,innerRef:function(t){e.parentNode=t?t.parentElement:null},phase:t,size:i},c.default.createElement(v.default,{focusable:"false",height:i,invertColor:o,phase:t,size:i,viewBox:"0 0 "+i+" "+i,width:i,xmlns:"http://www.w3.org/2000/svg"},c.default.createElement("circle",{cx:i/2,cy:i/2,r:s})))},t}(p.PureComponent);b.propTypes={delay:d.default.number.isRequired,invertColor:d.default.bool.isRequired,onComplete:d.default.func.isRequired,size:d.default.oneOfType([d.default.oneOf(["small"]),d.default.oneOf(["medium"]),d.default.oneOf(["large"]),d.default.oneOf(["xlarge"]),d.default.number]).isRequired},t.default=b},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getContainerAnimation=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 0; }\n "],["\n from { opacity: 0; }\n to { opacity: 0; }\n "]),s=(0,i.default)(["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "],["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "]),l=(0,i.default)(["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "],["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "]),u=(0,i.default)(["\n from { opacity: 1; }\n to { opacity: 0; }\n "],["\n from { opacity: 1; }\n to { opacity: 0; }\n "]),f=(0,i.default)(["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"],["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"]),d=n(14),p=r(d),c=t.getContainerAnimation=function(e){var t=e.delay,n=e.phase;return"DELAY"===n?"animation: "+t+"s "+(0,d.keyframes)(a)+";":"ENTER"===n||"IDLE"===n?"animation: 1s ease-in-out forwards "+(0,d.keyframes)(s)+";":"LEAVE"===n?"animation: 0.53s ease-in-out forwards "+(0,d.keyframes)(l)+",\n 0.2s ease-in-out 0.33s "+(0,d.keyframes)(u)+";":""},m=function(e){var t=e.size;return t+"px"},h=p.default.div(f,c,m,m);h.displayName="SpinnerContainer",t.default=h},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.svgStyles=t.getStrokeColor=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n ","\n"],["\n ","\n"]),s=(0,i.default)(["\n to { transform: rotate(360deg); }\n "],["\n to { transform: rotate(360deg); }\n "]),l=(0,i.default)(["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "],["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "]),u=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n "],["\n from { opacity: 0; }\n to { opacity: 1; }\n "]),f=(0,i.default)(["\n animation: ",";\n fill: none;\n stroke: ",";\n stroke-dasharray: ","px;\n stroke-dashoffset: ","px;\n stroke-linecap: round;\n stroke-width: ","px;\n transform-origin: center;\n "],["\n animation: ",";\n fill: none;\n stroke: ",";\n stroke-dasharray: ","px;\n stroke-dashoffset: ","px;\n stroke-linecap: round;\n stroke-width: ","px;\n transform-origin: center;\n "]),d=(0,i.default)(["",""],["",""]),p=n(14),c=r(p),m=n(16),h=(0,m.themed)({light:m.colors.N500,dark:m.colors.N0}),y=(0,m.themed)({light:m.colors.N0,dark:m.colors.N0}),v=t.getStrokeColor=function(e){return e.invertColor?y(e):h(e)},g=t.svgStyles=(0,p.css)(a,function(e){var t=Math.round(e.size/10),n=e.size/2-t/2,r=Math.PI*n*2,o="0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite "+(0,p.keyframes)(s),i="0.8s ease-in-out "+(0,p.keyframes)(l,r,.8*r),a="0.2s ease-in-out "+(0,p.keyframes)(u),d=[o];return"ENTER"===e.phase&&d.push(i,a),(0,p.css)(f,d.join(", "),v,r,.8*r,t)}),x=c.default.svg(d,g);x.displayName="SpinnerSvg",t.default=x},function(e,t){e.exports=require("@atlaskit/theme")}]);

24

dist/bundle.js
!function(root, factory) {
"object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("react-transition-group"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/extends", "babel-runtime/helpers/objectWithoutProperties", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "prop-types", "react", "react-transition-group", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles" ], factory) : "object" == typeof exports ? exports["@atlaskit/spinner"] = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("react-transition-group"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : root["@atlaskit/spinner"] = factory(root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/objectWithoutProperties"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root["prop-types"], root.react, root["react-transition-group"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"]);
"object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("react-transition-group"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/theme")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/extends", "babel-runtime/helpers/objectWithoutProperties", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "prop-types", "react", "react-transition-group", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/theme" ], factory) : "object" == typeof exports ? exports["@atlaskit/spinner"] = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("react-transition-group"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/theme")) : root["@atlaskit/spinner"] = factory(root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/objectWithoutProperties"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root["prop-types"], root.react, root["react-transition-group"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/theme"]);
}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_16__) {

@@ -316,12 +316,20 @@ /******/

_taggedTemplateLiteral3.default)([ "\n from { opacity: 0; }\n to { opacity: 1; }\n " ], [ "\n from { opacity: 0; }\n to { opacity: 1; }\n " ]), _templateObject5 = (0,
_taggedTemplateLiteral3.default)([ "", "" ], [ "", "" ]), _styledComponents = __webpack_require__(14), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(16), getStrokeColor = exports.getStrokeColor = function(invertColor) {
return invertColor ? _utilSharedStyles.akColorN0 : _utilSharedStyles.akColorN500;
}, svgStyles = exports.svgStyles = (0, _styledComponents.css)(_templateObject, function(_ref) {
var invertColor = _ref.invertColor, phase = _ref.phase, size = _ref.size, strokeWidth = Math.round(size / 10), strokeRadius = size / 2 - strokeWidth / 2, circumference = Math.PI * strokeRadius * 2, idleRotation = "0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite " + (0,
_taggedTemplateLiteral3.default)([ "\n animation: ", ";\n fill: none;\n stroke: ", ";\n stroke-dasharray: ", "px;\n stroke-dashoffset: ", "px;\n stroke-linecap: round;\n stroke-width: ", "px;\n transform-origin: center;\n " ], [ "\n animation: ", ";\n fill: none;\n stroke: ", ";\n stroke-dasharray: ", "px;\n stroke-dashoffset: ", "px;\n stroke-linecap: round;\n stroke-width: ", "px;\n transform-origin: center;\n " ]), _templateObject6 = (0,
_taggedTemplateLiteral3.default)([ "", "" ], [ "", "" ]), _styledComponents = __webpack_require__(14), _styledComponents2 = _interopRequireDefault(_styledComponents), _theme = __webpack_require__(16), spinnerColor = (0,
_theme.themed)({
light: _theme.colors.N500,
dark: _theme.colors.N0
}), spinnerColorInverted = (0, _theme.themed)({
light: _theme.colors.N0,
dark: _theme.colors.N0
}), getStrokeColor = exports.getStrokeColor = function(p) {
return p.invertColor ? spinnerColorInverted(p) : spinnerColor(p);
}, svgStyles = exports.svgStyles = (0, _styledComponents.css)(_templateObject, function(props) {
var strokeWidth = Math.round(props.size / 10), strokeRadius = props.size / 2 - strokeWidth / 2, circumference = Math.PI * strokeRadius * 2, idleRotation = "0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite " + (0,
_styledComponents.keyframes)(_templateObject2), spinUpStroke = "0.8s ease-in-out " + (0,
_styledComponents.keyframes)(_templateObject3, circumference, .8 * circumference), spinUpOpacity = "0.2s ease-in-out " + (0,
_styledComponents.keyframes)(_templateObject4), activeAnimations = [ idleRotation ];
return "ENTER" === phase && activeAnimations.push(spinUpStroke, spinUpOpacity),
"\n animation: " + activeAnimations.join(", ") + ";\n fill: none;\n stroke: " + getStrokeColor(invertColor) + ";\n stroke-dasharray: " + circumference + "px;\n stroke-dashoffset: " + .8 * circumference + "px;\n stroke-linecap: round;\n stroke-width: " + strokeWidth + "px;\n transform-origin: center;\n ";
}), Svg = _styledComponents2.default.svg(_templateObject5, svgStyles);
return "ENTER" === props.phase && activeAnimations.push(spinUpStroke, spinUpOpacity),
(0, _styledComponents.css)(_templateObject5, activeAnimations.join(", "), getStrokeColor, circumference, .8 * circumference, strokeWidth);
}), Svg = _styledComponents2.default.svg(_templateObject6, svgStyles);
Svg.displayName = "SpinnerSvg", exports.default = Svg;

@@ -328,0 +336,0 @@ }, /* 16 */

2

dist/bundle.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("react-transition-group"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/objectWithoutProperties","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","prop-types","react","react-transition-group","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles"],t):"object"==typeof exports?exports["@atlaskit/spinner"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("react-transition-group"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):e["@atlaskit/spinner"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/objectWithoutProperties"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e["prop-types"],e.react,e["react-transition-group"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"])}(this,function(e,t,n,r,o,i,a,s,l,u,p){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(2),i=r(o);t.default=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),l=n(5),u=r(l),p=n(6),f=r(p),d=n(7),c=r(d),m=n(8),h=r(m),y=n(9),b=r(y),g=n(10),v=n(11),x=r(v),C=function(e){function t(){return(0,u.default)(this,t),(0,f.default)(this,e.apply(this,arguments))}return(0,c.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.isCompleting,n=(0,s.default)(e,["isCompleting"]);return b.default.createElement(g.TransitionGroup,{component:"div",style:{display:"inline-block"}},t?null:b.default.createElement(x.default,(0,i.default)({key:Date.now()},n)))},t}(y.PureComponent);C.propTypes={delay:h.default.number.isRequired,invertColor:h.default.bool.isRequired,onComplete:h.default.func.isRequired,size:h.default.oneOfType([h.default.oneOf(["small"]),h.default.oneOf(["medium"]),h.default.oneOf(["large"]),h.default.oneOf(["xlarge"]),h.default.number]).isRequired,isCompleting:h.default.bool.isRequired},C.defaultProps={delay:100,isCompleting:!1,invertColor:!1,onComplete:function(){},size:"small"},t.default=C},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t){e.exports=s},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o),a=n(6),s=r(a),l=n(7),u=r(l),p=n(8),f=r(p),d=n(9),c=r(d),m=n(12),h=r(m),y=n(15),b=r(y),g={small:20,medium:30,large:50,xlarge:100},v=g.small,x=function(e){function t(){var n,r,o;(0,i.default)(this,t);for(var a=arguments.length,l=Array(a),u=0;u<a;u++)l[u]=arguments[u];return n=r=(0,s.default)(this,e.call.apply(e,[this].concat(l))),r.state={phase:""},r.runAfterAnimation=function(e){function t(n){return"svg"!==n.target.tagName&&(e(),o&&o.removeEventListener("animationend",t))}var n=r,o=n.parentNode;return o&&o.addEventListener("animationend",t)},r.validateSize=function(){var e=r.props.size,t=g[e]||e;return"number"==typeof t?t:v},o=n,(0,s.default)(r,o)}return(0,u.default)(t,e),t.prototype.componentWillAppear=function(e){this.enter(e)},t.prototype.componentDidAppear=function(){this.idle()},t.prototype.componentWillEnter=function(e){this.enter(e)},t.prototype.componentDidEnter=function(){this.idle()},t.prototype.componentWillLeave=function(e){this.leave(e)},t.prototype.componentDidLeave=function(){this.props.onComplete()},t.prototype.enter=function(e){var t=this,n=function(){t.setState({phase:"ENTER"}),t.runAfterAnimation(e)},r=this.props.delay;r?(this.setState({phase:"DELAY"}),this.runAfterAnimation(n)):n()},t.prototype.idle=function(){this.setState({phase:"IDLE"})},t.prototype.leave=function(e){this.setState({phase:"LEAVE"}),this.runAfterAnimation(e)},t.prototype.render=function(){var e=this,t=this.state.phase,n=this.props,r=n.delay,o=n.invertColor,i=this.validateSize(),a=Math.round(i/10),s=i/2-a/2;return c.default.createElement(h.default,{delay:r/1e3,innerRef:function(t){e.parentNode=t?t.parentElement:null},phase:t,size:i},c.default.createElement(b.default,{focusable:"false",height:i,invertColor:o,phase:t,size:i,viewBox:"0 0 "+i+" "+i,width:i,xmlns:"http://www.w3.org/2000/svg"},c.default.createElement("circle",{cx:i/2,cy:i/2,r:s})))},t}(d.PureComponent);x.propTypes={delay:f.default.number.isRequired,invertColor:f.default.bool.isRequired,onComplete:f.default.func.isRequired,size:f.default.oneOfType([f.default.oneOf(["small"]),f.default.oneOf(["medium"]),f.default.oneOf(["large"]),f.default.oneOf(["xlarge"]),f.default.number]).isRequired},t.default=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getContainerAnimation=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 0; }\n "],["\n from { opacity: 0; }\n to { opacity: 0; }\n "]),s=(0,i.default)(["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "],["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "]),l=(0,i.default)(["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "],["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "]),u=(0,i.default)(["\n from { opacity: 1; }\n to { opacity: 0; }\n "],["\n from { opacity: 1; }\n to { opacity: 0; }\n "]),p=(0,i.default)(["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"],["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"]),f=n(14),d=r(f),c=t.getContainerAnimation=function(e){var t=e.delay,n=e.phase;return"DELAY"===n?"animation: "+t+"s "+(0,f.keyframes)(a)+";":"ENTER"===n||"IDLE"===n?"animation: 1s ease-in-out forwards "+(0,f.keyframes)(s)+";":"LEAVE"===n?"animation: 0.53s ease-in-out forwards "+(0,f.keyframes)(l)+",\n 0.2s ease-in-out 0.33s "+(0,f.keyframes)(u)+";":""},m=function(e){var t=e.size;return t+"px"},h=d.default.div(p,c,m,m);h.displayName="SpinnerContainer",t.default=h},function(e,t){e.exports=l},function(e,t){e.exports=u},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.svgStyles=t.getStrokeColor=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n ","\n"],["\n ","\n"]),s=(0,i.default)(["\n to { transform: rotate(360deg); }\n "],["\n to { transform: rotate(360deg); }\n "]),l=(0,i.default)(["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "],["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "]),u=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n "],["\n from { opacity: 0; }\n to { opacity: 1; }\n "]),p=(0,i.default)(["",""],["",""]),f=n(14),d=r(f),c=n(16),m=t.getStrokeColor=function(e){return e?c.akColorN0:c.akColorN500},h=t.svgStyles=(0,f.css)(a,function(e){var t=e.invertColor,n=e.phase,r=e.size,o=Math.round(r/10),i=r/2-o/2,a=Math.PI*i*2,p="0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite "+(0,f.keyframes)(s),d="0.8s ease-in-out "+(0,f.keyframes)(l,a,.8*a),c="0.2s ease-in-out "+(0,f.keyframes)(u),h=[p];return"ENTER"===n&&h.push(d,c),"\n animation: "+h.join(", ")+";\n fill: none;\n stroke: "+m(t)+";\n stroke-dasharray: "+a+"px;\n stroke-dashoffset: "+.8*a+"px;\n stroke-linecap: round;\n stroke-width: "+o+"px;\n transform-origin: center;\n "}),y=d.default.svg(p,h);y.displayName="SpinnerSvg",t.default=y},function(e,t){e.exports=p}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("react-transition-group"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/theme")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/objectWithoutProperties","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","prop-types","react","react-transition-group","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/theme"],t):"object"==typeof exports?exports["@atlaskit/spinner"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("react-transition-group"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/theme")):e["@atlaskit/spinner"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/objectWithoutProperties"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e["prop-types"],e.react,e["react-transition-group"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/theme"])}(this,function(e,t,n,r,o,i,a,s,l,u,p){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(2),i=r(o);t.default=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=r(o),a=n(4),s=r(a),l=n(5),u=r(l),p=n(6),f=r(p),d=n(7),c=r(d),m=n(8),h=r(m),b=n(9),y=r(b),g=n(10),v=n(11),x=r(v),k=function(e){function t(){return(0,u.default)(this,t),(0,f.default)(this,e.apply(this,arguments))}return(0,c.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.isCompleting,n=(0,s.default)(e,["isCompleting"]);return y.default.createElement(g.TransitionGroup,{component:"div",style:{display:"inline-block"}},t?null:y.default.createElement(x.default,(0,i.default)({key:Date.now()},n)))},t}(b.PureComponent);k.propTypes={delay:h.default.number.isRequired,invertColor:h.default.bool.isRequired,onComplete:h.default.func.isRequired,size:h.default.oneOfType([h.default.oneOf(["small"]),h.default.oneOf(["medium"]),h.default.oneOf(["large"]),h.default.oneOf(["xlarge"]),h.default.number]).isRequired,isCompleting:h.default.bool.isRequired},k.defaultProps={delay:100,isCompleting:!1,invertColor:!1,onComplete:function(){},size:"small"},t.default=k},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t){e.exports=s},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o),a=n(6),s=r(a),l=n(7),u=r(l),p=n(8),f=r(p),d=n(9),c=r(d),m=n(12),h=r(m),b=n(15),y=r(b),g={small:20,medium:30,large:50,xlarge:100},v=g.small,x=function(e){function t(){var n,r,o;(0,i.default)(this,t);for(var a=arguments.length,l=Array(a),u=0;u<a;u++)l[u]=arguments[u];return n=r=(0,s.default)(this,e.call.apply(e,[this].concat(l))),r.state={phase:""},r.runAfterAnimation=function(e){function t(n){return"svg"!==n.target.tagName&&(e(),o&&o.removeEventListener("animationend",t))}var n=r,o=n.parentNode;return o&&o.addEventListener("animationend",t)},r.validateSize=function(){var e=r.props.size,t=g[e]||e;return"number"==typeof t?t:v},o=n,(0,s.default)(r,o)}return(0,u.default)(t,e),t.prototype.componentWillAppear=function(e){this.enter(e)},t.prototype.componentDidAppear=function(){this.idle()},t.prototype.componentWillEnter=function(e){this.enter(e)},t.prototype.componentDidEnter=function(){this.idle()},t.prototype.componentWillLeave=function(e){this.leave(e)},t.prototype.componentDidLeave=function(){this.props.onComplete()},t.prototype.enter=function(e){var t=this,n=function(){t.setState({phase:"ENTER"}),t.runAfterAnimation(e)},r=this.props.delay;r?(this.setState({phase:"DELAY"}),this.runAfterAnimation(n)):n()},t.prototype.idle=function(){this.setState({phase:"IDLE"})},t.prototype.leave=function(e){this.setState({phase:"LEAVE"}),this.runAfterAnimation(e)},t.prototype.render=function(){var e=this,t=this.state.phase,n=this.props,r=n.delay,o=n.invertColor,i=this.validateSize(),a=Math.round(i/10),s=i/2-a/2;return c.default.createElement(h.default,{delay:r/1e3,innerRef:function(t){e.parentNode=t?t.parentElement:null},phase:t,size:i},c.default.createElement(y.default,{focusable:"false",height:i,invertColor:o,phase:t,size:i,viewBox:"0 0 "+i+" "+i,width:i,xmlns:"http://www.w3.org/2000/svg"},c.default.createElement("circle",{cx:i/2,cy:i/2,r:s})))},t}(d.PureComponent);x.propTypes={delay:f.default.number.isRequired,invertColor:f.default.bool.isRequired,onComplete:f.default.func.isRequired,size:f.default.oneOfType([f.default.oneOf(["small"]),f.default.oneOf(["medium"]),f.default.oneOf(["large"]),f.default.oneOf(["xlarge"]),f.default.number]).isRequired},t.default=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getContainerAnimation=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 0; }\n "],["\n from { opacity: 0; }\n to { opacity: 0; }\n "]),s=(0,i.default)(["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "],["\n from { transform: rotate(50deg); }\n to { transform: rotate(230deg); }\n "]),l=(0,i.default)(["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "],["\n from { transform: rotate(230deg); }\n to { transform: rotate(510deg); }\n "]),u=(0,i.default)(["\n from { opacity: 1; }\n to { opacity: 0; }\n "],["\n from { opacity: 1; }\n to { opacity: 0; }\n "]),p=(0,i.default)(["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"],["\n ","\n display: inline-flex;\n height: ",";\n width: ",";\n\n /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n * they complete their exit animations. This rules hides the spinner if another one has been\n * added. */\n div + & {\n display: none;\n }\n"]),f=n(14),d=r(f),c=t.getContainerAnimation=function(e){var t=e.delay,n=e.phase;return"DELAY"===n?"animation: "+t+"s "+(0,f.keyframes)(a)+";":"ENTER"===n||"IDLE"===n?"animation: 1s ease-in-out forwards "+(0,f.keyframes)(s)+";":"LEAVE"===n?"animation: 0.53s ease-in-out forwards "+(0,f.keyframes)(l)+",\n 0.2s ease-in-out 0.33s "+(0,f.keyframes)(u)+";":""},m=function(e){var t=e.size;return t+"px"},h=d.default.div(p,c,m,m);h.displayName="SpinnerContainer",t.default=h},function(e,t){e.exports=l},function(e,t){e.exports=u},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.svgStyles=t.getStrokeColor=void 0;var o=n(13),i=r(o),a=(0,i.default)(["\n ","\n"],["\n ","\n"]),s=(0,i.default)(["\n to { transform: rotate(360deg); }\n "],["\n to { transform: rotate(360deg); }\n "]),l=(0,i.default)(["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "],["\n from { stroke-dashoffset: ","px; }\n to { stroke-dashoffset: ","px; }\n "]),u=(0,i.default)(["\n from { opacity: 0; }\n to { opacity: 1; }\n "],["\n from { opacity: 0; }\n to { opacity: 1; }\n "]),p=(0,i.default)(["\n animation: ",";\n fill: none;\n stroke: ",";\n stroke-dasharray: ","px;\n stroke-dashoffset: ","px;\n stroke-linecap: round;\n stroke-width: ","px;\n transform-origin: center;\n "],["\n animation: ",";\n fill: none;\n stroke: ",";\n stroke-dasharray: ","px;\n stroke-dashoffset: ","px;\n stroke-linecap: round;\n stroke-width: ","px;\n transform-origin: center;\n "]),f=(0,i.default)(["",""],["",""]),d=n(14),c=r(d),m=n(16),h=(0,m.themed)({light:m.colors.N500,dark:m.colors.N0}),b=(0,m.themed)({light:m.colors.N0,dark:m.colors.N0}),y=t.getStrokeColor=function(e){return e.invertColor?b(e):h(e)},g=t.svgStyles=(0,d.css)(a,function(e){var t=Math.round(e.size/10),n=e.size/2-t/2,r=Math.PI*n*2,o="0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite "+(0,d.keyframes)(s),i="0.8s ease-in-out "+(0,d.keyframes)(l,r,.8*r),a="0.2s ease-in-out "+(0,d.keyframes)(u),f=[o];return"ENTER"===e.phase&&f.push(i,a),(0,d.css)(p,f.join(", "),y,r,.8*r,t)}),v=c.default.svg(f,g);v.displayName="SpinnerSvg",t.default=v},function(e,t){e.exports=p}])});

28

dist/es/styled/Svg.js

@@ -7,19 +7,19 @@ import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';

_templateObject4 = _taggedTemplateLiteral(['\n from { opacity: 0; }\n to { opacity: 1; }\n '], ['\n from { opacity: 0; }\n to { opacity: 1; }\n ']),
_templateObject5 = _taggedTemplateLiteral(['', ''], ['', '']);
_templateObject5 = _taggedTemplateLiteral(['\n animation: ', ';\n fill: none;\n stroke: ', ';\n stroke-dasharray: ', 'px;\n stroke-dashoffset: ', 'px;\n stroke-linecap: round;\n stroke-width: ', 'px;\n transform-origin: center;\n '], ['\n animation: ', ';\n fill: none;\n stroke: ', ';\n stroke-dasharray: ', 'px;\n stroke-dashoffset: ', 'px;\n stroke-linecap: round;\n stroke-width: ', 'px;\n transform-origin: center;\n ']),
_templateObject6 = _taggedTemplateLiteral(['', ''], ['', '']);
import styled, { css, keyframes } from 'styled-components';
import { akColorN0, akColorN500 } from '@atlaskit/util-shared-styles';
import { colors, themed } from '@atlaskit/theme';
export var getStrokeColor = function getStrokeColor(invertColor) {
return invertColor ? akColorN0 : akColorN500;
var spinnerColor = themed({ light: colors.N500, dark: colors.N0 });
var spinnerColorInverted = themed({ light: colors.N0, dark: colors.N0 });
export var getStrokeColor = function getStrokeColor(p) {
return p.invertColor ? spinnerColorInverted(p) : spinnerColor(p);
};
export var svgStyles = css(_templateObject, function (_ref) {
var invertColor = _ref.invertColor,
phase = _ref.phase,
size = _ref.size;
var strokeWidth = Math.round(size / 10);
var strokeRadius = size / 2 - strokeWidth / 2;
export var svgStyles = css(_templateObject, function (props) {
var strokeWidth = Math.round(props.size / 10);
var strokeRadius = props.size / 2 - strokeWidth / 2;
var circumference = Math.PI * strokeRadius * 2;

@@ -34,11 +34,11 @@

var activeAnimations = [idleRotation];
if (phase === 'ENTER') {
if (props.phase === 'ENTER') {
activeAnimations.push(spinUpStroke, spinUpOpacity);
}
return '\n animation: ' + activeAnimations.join(', ') + ';\n fill: none;\n stroke: ' + getStrokeColor(invertColor) + ';\n stroke-dasharray: ' + circumference + 'px;\n stroke-dashoffset: ' + circumference * 0.8 + 'px;\n stroke-linecap: round;\n stroke-width: ' + strokeWidth + 'px;\n transform-origin: center;\n ';
return css(_templateObject5, activeAnimations.join(', '), getStrokeColor, circumference, circumference * 0.8, strokeWidth);
});
var Svg = styled.svg(_templateObject5, svgStyles);
var Svg = styled.svg(_templateObject6, svgStyles);
Svg.displayName = 'SpinnerSvg';
export default Svg;

17

package.json
{
"name": "@atlaskit/spinner",
"version": "3.4.2",
"version": "4.0.0",
"config": {

@@ -13,9 +13,12 @@ "access": "public"

"ak:component": {
"name": "Spinner"
"name": "Spinner",
"dark": true
},
"scripts": {
"eslint": "../../build/bin/lint.eslint.sh",
"jest": "echo 'yarn run jest is deprecated and removed. please run yarn run test:unit instead.'",
"prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish-with-babel/single @atlaskit/spinner; } || ../../node_modules/.bin/not-in-publish",
"jest": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js",
"storybook": "../../build/bin/storybook.single.sh",
"eslint": "../../build/bin/lint.eslint.sh"
"storybook": "../../build/bin/storybook/run.local.js",
"storybook:static": "../../build/bin/storybook/build.static.js",
"test:unit": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js"
},

@@ -37,6 +40,6 @@ "types": "src/index.d.ts",

"dependencies": {
"@atlaskit/util-shared-styles": "^2.3.1",
"@atlaskit/theme": "^2.0.0",
"babel-runtime": "^6.11.6",
"prop-types-extra": "^1.0.1",
"prop-types": "^15.5.10",
"prop-types-extra": "^1.0.1",
"react-transition-group": "^1.2.0",

@@ -43,0 +46,0 @@ "styled-components": "^1.3.0"

2

README.md

@@ -14,3 +14,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)

Interact with a [live demo of the @atlaskit/spinner component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/spinner/3.4.2/).
Interact with a [live demo of the @atlaskit/spinner component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/spinner/4.0.0/).

@@ -17,0 +17,0 @@ ## Installation

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