react-awesome-button - npm Package Compare versions

Comparing version 0.4.8 to 0.5.0

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports["react-awesome-button"]=t(require("prop-types"),require("react")):e["react-awesome-button"]=t(e.PropTypes,e.React)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var s=n[o]={i:o,l:!1,exports:{}};return e[o].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(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}function i(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)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),u=n(3),p=o(u),c=n(2),d=o(c),f=n(1),h="aws-btn",m=function(e){return p.default.createElement("a",e)},b=function(e){return p.default.createElement("button",e)},g=function(e){function t(e){s(this,t);var n=r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.rootElement=e.rootElement||h,n.animationStage=0,n.extraProps={},n.state={disabled:e.disabled,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1,clicked:!1},n.checkProps(e),n}return i(t,e),l(t,[{key:"componentDidMount",value:function(){(0,f.setCssEndEvent)(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(e){this.checkProps(e)}},{key:"getRootClassName",value:function(){var e=[this.rootElement,this.props.type&&this.rootElement+"--"+this.props.type,this.props.size&&this.rootElement+"--"+this.props.size,this.props.visible&&this.rootElement+"--visible",this.state.loadingStart&&this.rootElement+"--start"||null,this.state.loadingEnd&&this.rootElement+"--end"||null,this.props.progress&&this.rootElement+"--progress"||null];return!0===this.state.disabled&&e.push(this.rootElement+"--disabled"),this.state.pressPosition&&e.push(this.state.pressPosition),this.props.cssModule&&this.props.cssModule["aws-btn"]?(0,f.classToModules)(e,this.props.cssModule):e.join(" ").trim().replace(/[\s]+/gi," ")}},{key:"checkProps",value:function(e){this.extraProps.to=e.to||null,this.extraProps.href=e.href||null,this.extraProps.target=e.target||null,this.renderComponent=e.element||(this.props.href?m:b)}},{key:"endLoading",value:function(){this.setState({loadingEnd:!0}),this.animationStage=1}},{key:"startLoading",value:function(){this.setState({loading:!0,loadingStart:!0,blocked:!0})}},{key:"clearPress",value:function(){var e=this.state.loading?this.state.pressPosition:null;this.setState({pressPosition:e})}},{key:"clearLoading",value:function(){this.setState({loading:!1,loadingStart:!1,loadingEnd:!1})}},{key:"clearStagedWrapperAnimation",value:function(){var e=this;if(0!==this.animationStage){if(5===this.animationStage)return this.animationStage=0,void setTimeout(function(){"undefined"!=typeof window&&window.requestAnimationFrame(function(){e.clearLoading(),e.clearPress(),setTimeout(function(){e.setState({blocked:!1})},500)})},350);this.animationStage+=1}}},{key:"action",value:function(){this.props.progress&&this.startLoading(),this.props.action&&this.button&&this.props.action(this.button.parentNode,this.props.progress?this.endLoading.bind(this):null)}},{key:"createBubble",value:function(e){(0,f.createBubbleEffect)({event:e,button:this.button,content:this.content,className:(0,f.getClassName)(this.rootElement+"__bubble",this.props.cssModule)})}},{key:"moveEvents",value:function(){var e=this,t={onMouseLeave:function(){e.clearPress()},onMouseDown:function(t){!0===e.state.disabled||!0===e.state.loading||!0===e.state.blocked||t&&1!==t.nativeEvent.which||(e.pressed=(new Date).getTime(),e.setState({pressPosition:e.rootElement+"--active",loading:e.props.progress}))},onMouseUp:function(t){if(!0===e.state.disabled||!0===e.state.blocked)return t.preventDefault(),void t.stopPropagation();e.clearTimer&&clearTimeout(e.clearTimer);var n=(new Date).getTime()-e.pressed;if(!1===e.props.progress&&!0===e.props.bubbles&&e.createBubble(t),"undefined"!=typeof window&&e.button){var o=new Event("action");e.button.dispatchEvent(o)}e.action(),e.clearTimer=setTimeout(function(){e.clearPress()},100-n)}};return!0===this.props.moveEvents?t.onMouseMove=function(t){if(!0!==e.state.disabled&&!0!==e.state.loading&&!0!==e.state.blocked){var n=e.button,o=n.getBoundingClientRect().left,s=n.offsetWidth;e.setState({pressPosition:t.pageX<o+.3*s?e.rootElement+"--left":t.pageX>o+.65*s?e.rootElement+"--right":e.rootElement+"--middle"})}}:t.onMouseEnter=function(){e.setState({pressPosition:e.rootElement+"--middle"})},t}},{key:"render",value:function(){var e=this,t=this.renderComponent;return p.default.createElement(t,a({style:this.props.style,className:this.getRootClassName(),role:"button"},this.extraProps,this.moveEvents()),p.default.createElement("span",{ref:function(t){e.button=t},className:(0,f.getClassName)(this.rootElement+"__container",this.props.cssModule)},p.default.createElement("span",{ref:function(t){e.wrapper=t},className:(0,f.getClassName)(this.rootElement+"__wrapper",this.props.cssModule)},p.default.createElement("span",{ref:function(t){e.content=t},"data-loading":this.props.progress&&this.props.loadingLabel||null,"data-status":this.props.progress&&this.props.resultLabel||null,className:(0,f.getClassName)(this.rootElement+"__content",this.props.cssModule)},p.default.createElement("span",null,this.props.children)))))}}]),t}(p.default.Component);g.propTypes={action:d.default.func,bubbles:d.default.bool,children:d.default.node.isRequired,disabled:d.default.bool,element:d.default.func,href:d.default.string,loadingLabel:d.default.string,progress:d.default.bool,resultLabel:d.default.string,rootElement:d.default.string,moveEvents:d.default.bool,size:d.default.string,style:d.default.object,cssModule:d.default.object,target:d.default.string,to:d.default.string,type:d.default.string,visible:d.default.bool},g.defaultProps={action:null,bubbles:!1,disabled:!1,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,resultLabel:"Success!",rootElement:h,size:null,style:{},target:null,to:null,type:"primary",visible:!0},t.default=g},function(e,t,n){"use strict";function o(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1],n=[],o=e.length;o--;)t[e[o]]&&n.push(t[e[o]]);return n.join(" ").trim()}function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments[1];return t?t[e]||e:e}function r(e,t,n){if(!e)return!1;var o=t.charAt(0).toUpperCase()+t.slice(1);return void 0!==e.style["Webkit"+o]?e.addEventListener("webkit"+o+"End",n):void 0!==e.style.OTransition?e.addEventListener("o"+t+"End",n):e.addEventListener(t+"End",n)}function i(e){var t=e.event,n=e.button,o=e.content,s=e.className,i=n.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrolltop||0,l=document.createElement("span"),u=i.width<50?3*i.width:2*i.width;l.className=s,l.style.top="-"+(u/2-(t.pageY-i.top-a))+"px",l.style.left="-"+(u/2-(t.pageX-i.left))+"px",l.style.width=u+"px",l.style.height=u+"px",r(l,"animation",function(){o.removeChild(l)}),window.requestAnimationFrame(function(){o.appendChild(l)})}Object.defineProperty(t,"__esModule",{value:!0}),t.classToModules=o,t.getClassName=s,t.setCssEndEvent=r,t.createBubbleEffect=i},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){e.exports=n(0)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["react-awesome-button"]=t():e["react-awesome-button"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";function o(e){return function(){return e}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function i(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)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),u=n(3),c=o(u),f=n(7),p=o(f),d=n(11),h="aws-btn",y=function(e){return c.default.createElement("a",e)},m=function(e){return c.default.createElement("button",e)},b=function(e){function t(e){r(this,t);var n=s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.rootElement=e.rootElement||h,n.animationStage=0,n.extraProps={},n.state={disabled:e.disabled,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1},n.checkProps(e),n}return i(t,e),l(t,[{key:"componentDidMount",value:function(){(0,d.setCssEndEvent)(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(e){this.checkProps(e)}},{key:"getRootClassName",value:function(){var e=[this.rootElement,this.props.type&&this.rootElement+"--"+this.props.type,this.props.size&&this.rootElement+"--"+this.props.size,this.props.visible&&this.rootElement+"--visible",this.state.loadingStart&&this.rootElement+"--start"||null,this.state.loadingEnd&&this.rootElement+"--end"||null,this.props.progress&&this.rootElement+"--progress"||null];return!0===this.state.disabled&&e.push(this.rootElement+"--disabled"),this.state.pressPosition&&e.push(this.state.pressPosition),this.props.cssModule&&this.props.cssModule["aws-btn"]?(0,d.classToModules)(e,this.props.cssModule):e.join(" ").trim().replace(/[\s]+/gi," ")}},{key:"checkProps",value:function(e){this.extraProps.to=e.to||null,this.extraProps.href=e.href||null,this.extraProps.target=e.target||null,this.renderComponent=e.element||(this.props.href?y:m)}},{key:"endLoading",value:function(){this.setState({loadingEnd:!0}),this.animationStage=1}},{key:"startLoading",value:function(){this.setState({loading:!0,loadingStart:!0,blocked:!0})}},{key:"clearPress",value:function(){(0,d.toggleMoveClasses)({element:this.button.parentNode,root:this.rootElement,cssModule:this.props.cssModule});var e=this.state.loading?this.state.pressPosition:null;this.setState({pressPosition:e})}},{key:"clearLoading",value:function(){this.setState({loading:!1,loadingStart:!1,loadingEnd:!1})}},{key:"clearStagedWrapperAnimation",value:function(){var e=this;if(0!==this.animationStage){if(5===this.animationStage)return this.animationStage=0,void setTimeout(function(){"undefined"!=typeof window&&window.requestAnimationFrame(function(){e.clearLoading(),e.clearPress(),setTimeout(function(){e.setState({blocked:!1})},500)})},350);this.animationStage+=1}}},{key:"action",value:function(){this.props.progress&&this.startLoading(),this.props.action&&this.button&&this.props.action(this.button.parentNode,this.props.progress?this.endLoading.bind(this):null)}},{key:"createBubble",value:function(e){(0,d.createBubbleEffect)({event:e,button:this.button,content:this.content,className:(0,d.getClassName)(this.rootElement+"__bubble",this.props.cssModule)})}},{key:"moveEvents",value:function(){var e=this,t={onMouseLeave:function(){e.clearPress()},onMouseDown:function(t){!0===e.state.disabled||!0===e.state.loading||!0===e.state.blocked||t&&1!==t.nativeEvent.which||(e.pressed=(new Date).getTime(),e.setState({pressPosition:e.rootElement+"--active",loading:e.props.progress}))},onMouseUp:function(t){if(!0===e.state.disabled||!0===e.state.blocked)return t.preventDefault(),void t.stopPropagation();e.clearTimer&&clearTimeout(e.clearTimer);var n=(new Date).getTime()-e.pressed;if(!1===e.props.progress&&!0===e.props.bubbles&&e.createBubble(t),"undefined"!=typeof window&&e.button){var o=new Event("action");e.button.dispatchEvent(o)}e.action(),e.clearTimer=setTimeout(function(){e.clearPress()},100-n)}};return!0===this.props.moveEvents?t.onMouseMove=function(t){if(!0!==e.state.disabled&&!0!==e.state.loading&&!0!==e.state.blocked){var n=e.button,o=n.getBoundingClientRect(),r=o.left,s=n.offsetWidth,i=t.pageX<r+.3*s?"left":t.pageX>r+.65*s?"right":"middle";(0,d.toggleMoveClasses)({element:e.button.parentNode,root:e.rootElement,cssModule:e.props.cssModule,state:i})}}:t.onMouseEnter=function(){e.button.parentNode.classList.add((0,d.classToModules)([e.rootElement+"--middle"],e.props.cssModule))},t}},{key:"render",value:function(){var e=this,t=this.renderComponent;return c.default.createElement(t,a({style:this.props.style,className:this.getRootClassName(),role:"button"},this.extraProps,this.moveEvents()),c.default.createElement("span",{ref:function(t){e.button=t},className:(0,d.getClassName)(this.rootElement+"__container",this.props.cssModule)},c.default.createElement("span",{ref:function(t){e.wrapper=t},className:(0,d.getClassName)(this.rootElement+"__wrapper",this.props.cssModule)},c.default.createElement("span",{ref:function(t){e.content=t},"data-loading":this.props.progress&&this.props.loadingLabel||null,"data-status":this.props.progress&&this.props.resultLabel||null,className:(0,d.getClassName)(this.rootElement+"__content",this.props.cssModule)},c.default.createElement("span",null,this.props.children)))))}}]),t}(c.default.Component);b.propTypes={action:p.default.func,bubbles:p.default.bool,children:p.default.node.isRequired,disabled:p.default.bool,element:p.default.func,href:p.default.string,loadingLabel:p.default.string,progress:p.default.bool,resultLabel:p.default.string,rootElement:p.default.string,moveEvents:p.default.bool,size:p.default.string,style:p.default.object,cssModule:p.default.object,target:p.default.string,to:p.default.string,type:p.default.string,visible:p.default.bool},b.defaultProps={action:null,bubbles:!1,cssModule:null,disabled:!1,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,resultLabel:"Success!",rootElement:h,size:null,style:{},target:null,to:null,type:"primary",visible:!0},t.default=b},function(e,t,n){"use strict";e.exports=n(4)},function(e,t,n){"use strict";function o(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,o=0;o<t;o++)n+="&args[]="+encodeURIComponent(arguments[o+1]);throw t=Error(n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."),t.name="Invariant Violation",t.framesToPop=1,t}function r(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||x}function s(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||x}function i(){}function a(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||x}function l(e,t,n){var o,r={},s=null,i=null;if(null!=t)for(o in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(s=""+t.key),t)R.call(t,o)&&!N.hasOwnProperty(o)&&(r[o]=t[o]);var a=arguments.length-2;if(1===a)r.children=n;else if(1<a){for(var l=Array(a),u=0;u<a;u++)l[u]=arguments[u+2];r.children=l}if(e&&e.defaultProps)for(o in a=e.defaultProps)void 0===r[o]&&(r[o]=a[o]);return{$$typeof:_,type:e,key:s,ref:i,props:r,_owner:T.current}}function u(e){return"object"==typeof e&&null!==e&&e.$$typeof===_}function c(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function f(e,t,n,o){if(A.length){var r=A.pop();return r.result=e,r.keyPrefix=t,r.func=n,r.context=o,r.count=0,r}return{result:e,keyPrefix:t,func:n,context:o,count:0}}function p(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>A.length&&A.push(e)}function d(e,t,n,r){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var i=!1;if(null===e)i=!0;else switch(s){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case _:case k:case O:case P:i=!0}}if(i)return n(r,e,""===t?"."+h(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;a<e.length;a++){s=e[a];var l=t+h(s,a);i+=d(s,l,n,r)}else if(null===e||void 0===e?l=null:(l=S&&e[S]||e["@@iterator"],l="function"==typeof l?l:null),"function"==typeof l)for(e=l.call(e),a=0;!(s=e.next()).done;)s=s.value,l=t+h(s,a++),i+=d(s,l,n,r);else"object"===s&&(n=""+e,o("31","[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n,""));return i}function h(e,t){return"object"==typeof e&&null!==e&&null!=e.key?c(e.key):t.toString(36)}function y(e,t){e.func.call(e.context,t,e.count++)}function m(e,t,n){var o=e.result,r=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?b(e,o,n,E.thatReturnsArgument):null!=e&&(u(e)&&(t=r+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(L,"$&/")+"/")+n,e={$$typeof:_,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}),o.push(e))}function b(e,t,n,o,r){var s="";null!=n&&(s=(""+n).replace(L,"$&/")+"/"),t=f(t,s,o,r),null==e||d(e,"",m,t),p(t)}var v=n(5),g=n(6),E=n(0),w="function"==typeof Symbol&&Symbol.for,_=w?Symbol.for("react.element"):60103,k=w?Symbol.for("react.call"):60104,O=w?Symbol.for("react.return"):60105,P=w?Symbol.for("react.portal"):60106,j=w?Symbol.for("react.fragment"):60107,S="function"==typeof Symbol&&Symbol.iterator,x={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}};r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e&&o("85"),this.updater.enqueueSetState(this,e,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},i.prototype=r.prototype;var C=s.prototype=new i;C.constructor=s,v(C,r.prototype),C.isPureReactComponent=!0;var M=a.prototype=new i;M.constructor=a,v(M,r.prototype),M.unstable_isAsyncReactComponent=!0,M.render=function(){return this.props.children};var T={current:null},R=Object.prototype.hasOwnProperty,N={key:!0,ref:!0,__self:!0,__source:!0},L=/\/+/g,A=[],$={Children:{map:function(e,t,n){if(null==e)return e;var o=[];return b(e,o,null,t,n),o},forEach:function(e,t,n){if(null==e)return e;t=f(null,null,t,n),null==e||d(e,"",y,t),p(t)},count:function(e){return null==e?0:d(e,"",E.thatReturnsNull,null)},toArray:function(e){var t=[];return b(e,t,null,E.thatReturnsArgument),t},only:function(e){return u(e)||o("143"),e}},Component:r,PureComponent:s,unstable_AsyncComponent:a,Fragment:j,createElement:l,cloneElement:function(e,t,n){var o=v({},e.props),r=e.key,s=e.ref,i=e._owner;if(null!=t){if(void 0!==t.ref&&(s=t.ref,i=T.current),void 0!==t.key&&(r=""+t.key),e.type&&e.type.defaultProps)var a=e.type.defaultProps;for(l in t)R.call(t,l)&&!N.hasOwnProperty(l)&&(o[l]=void 0===t[l]&&void 0!==a?a[l]:t[l])}var l=arguments.length-2;if(1===l)o.children=n;else if(1<l){a=Array(l);for(var u=0;u<l;u++)a[u]=arguments[u+2];o.children=a}return{$$typeof:_,type:e.type,key:r,ref:s,props:o,_owner:i}},createFactory:function(e){var t=l.bind(null,e);return t.type=e,t},isValidElement:u,version:"16.2.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:T,assign:v}},q=Object.freeze({default:$}),U=q&&$||q;e.exports=U.default?U.default:U},function(e,t,n){"use strict";function o(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var r=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,l=o(e),u=1;u<arguments.length;u++){n=Object(arguments[u]);for(var c in n)s.call(n,c)&&(l[c]=n[c]);if(r){a=r(n);for(var f=0;f<a.length;f++)i.call(n,a[f])&&(l[a[f]]=n[a[f]])}}return l}},function(e,t,n){"use strict";var o={};e.exports=o},function(e,t,n){e.exports=n(8)()},function(e,t,n){"use strict";var o=n(0),r=n(9),s=n(10);e.exports=function(){function e(e,t,n,o,i,a){a!==s&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=o,n.PropTypes=n,n}},function(e,t,n){"use strict";function o(e,t,n,o,s,i,a,l){if(r(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,s,i,a,l],f=0;u=new Error(t.replace(/%s/g,function(){return c[f++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var r=function(e){};e.exports=o},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function o(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1],n=[],o=e.length;o--;)t[e[o]]&&n.push(t[e[o]]);return n.join(" ").trim()}function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments[1];return t?t[e]||e:e}function s(e,t,n){if(!e)return!1;var o=t.charAt(0).toUpperCase()+t.slice(1);return void 0!==e.style["Webkit"+o]?e.addEventListener("webkit"+o+"End",n):void 0!==e.style.OTransition?e.addEventListener("o"+t+"End",n):e.addEventListener(t+"End",n)}function i(e){var t=e.element,n=e.root,r=e.cssModule,s=void 0===r?null:r,i=e.state,a=void 0===i?null:i;if(!a)return t.classList.remove(o([n+"--"+l[0]],s),o([n+"--"+l[1]],s),o([n+"--"+l[2]],s)),!1;for(var u=l.filter(function(e){return e!==a}),c=u.length;c--;)t.classList.remove(o([n+"--"+u[c]],s));return t.classList.add(o([n+"--"+a],s)),!0}function a(e){var t=e.event,n=e.button,o=e.content,r=e.className,i=n.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrolltop||0,l=document.createElement("span"),u=i.width<50?3*i.width:2*i.width;l.className=r,l.style.top="-"+(u/2-(t.pageY-i.top-a))+"px",l.style.left="-"+(u/2-(t.pageX-i.left))+"px",l.style.width=u+"px",l.style.height=u+"px",s(l,"animation",function(){o.removeChild(l)}),window.requestAnimationFrame(function(){o.appendChild(l)})}Object.defineProperty(t,"__esModule",{value:!0}),t.classToModules=o,t.getClassName=r,t.setCssEndEvent=s,t.toggleMoveClasses=i,t.createBubbleEffect=a;var l=["middle","left","right"]}])});

package.json

 {
   "name": "react-awesome-button",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons",
@@ -18,5 +18,6 @@ "main": "dist/index.js",
     "start": "webpack-dev-server -d --config webpack.demo.config.js",
-    "white": "webpack-dev-server -d --config webpack.demo-white.config.js",
+    "start:white": "webpack-dev-server -d --config webpack.demo-white.config.js",
     "build": "NODE_ENV=production webpack",
     "build:scss": "NODE_ENV=production webpack --config webpack.scss.config.js && rm ./dist/styles.js",
+    "build:website": "webpack -p --config webpack.website.config.js",
     "test": "BABEL_JEST_STAGE=0 jest",
@@ -27,4 +28,4 @@ "lint": "eslint src/**",
   "dependencies": {
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4"
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0"
   },
@@ -36,4 +37,4 @@ "devDependencies": {
     "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.0",
+    "babel-eslint": "^8.2.1",
+    "babel-jest": "^22.0.4",
     "babel-loader": "^7.1.2",
@@ -45,20 +46,20 @@ "babel-preset-es2015": "^6.24.1",
     "cssnano": "^3.10.0",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^14.1.0",
+    "eslint": "^4.15.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.3",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "jest": "^20.0.0",
-    "node-sass": "^4.5.2",
-    "postcss-loader": "^2.0.3",
-    "prismjs": "^1.6.0",
-    "react-dom": "^15.5.4",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "jest": "^22.0.4",
+    "node-sass": "^4.7.2",
+    "postcss-loader": "^2.0.10",
+    "prismjs": "^1.9.0",
+    "react-dom": "^16.2.0",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
-    "react-test-renderer": "^15.5.4",
+    "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.3",
-    "style-loader": "^0.17.0",
-    "webpack": "^2.7.0",
-    "webpack-dev-server": "^2.4.3"
+    "style-loader": "^0.19.1",
+    "webpack": "^3.1.0",
+    "webpack-dev-server": "^2.10.0"
   },
@@ -65,0 +66,0 @@ "keywords": [

src/component.js

@@ -8,2 +8,3 @@ import React from 'react';
   createBubbleEffect,
+  toggleMoveClasses,
 } from './helpers/component';
@@ -14,2 +15,3 @@
 const ANIMATION_DELAY = 100;
+
 /**
@@ -48,2 +50,3 @@ TODO: Extend the setup with CSS custom properties;
     bubbles: false,
+    cssModule: null,
     disabled: false,
@@ -75,3 +78,2 @@ element: null,
       blocked: false,
-      clicked: false,
     };
@@ -125,4 +127,7 @@ this.checkProps(props);
   clearPress() {
-    // da um timeout aqui caso não esteja pressionado -- interesting
-    // timeout ou loop? pode ser que nunca seja pressionado?
+    toggleMoveClasses({
+      element: this.button.parentNode,
+      root: this.rootElement,
+      cssModule: this.props.cssModule,
+    });
     const pressPosition = this.state.loading ? this.state.pressPosition : null;
@@ -233,11 +238,15 @@ this.setState({
         }
-        const button = this.button;
-        const left = button.getBoundingClientRect().left;
+        const { button } = this;
+        const { left } = button.getBoundingClientRect();
         const width = button.offsetWidth;
-        this.setState({
-          pressPosition: event.pageX < (left + (width * 0.3))
-            ? `${this.rootElement}--left`
-            : event.pageX > (left + (width * 0.65))
-              ? `${this.rootElement}--right`
-              : `${this.rootElement}--middle`,
+        const state = event.pageX < (left + (width * 0.3))
+          ? 'left'
+          : event.pageX > (left + (width * 0.65))
+            ? 'right'
+            : 'middle';
+        toggleMoveClasses({
+          element: this.button.parentNode,
+          root: this.rootElement,
+          cssModule: this.props.cssModule,
+          state,
         });
@@ -247,5 +256,3 @@ };
       events.onMouseEnter = () => {
-        this.setState({
-          pressPosition: `${this.rootElement}--middle`,
-        });
+        this.button.parentNode.classList.add(classToModules([`${this.rootElement}--middle`], this.props.cssModule));
       };
@@ -252,0 +259,0 @@ }

src/helpers/component.js

 export function classToModules(className = [], cssModule) {
   const ClassName = [];
   let i = className.length;
+  // eslint-disable-next-line
   while (i--) {
@@ -32,3 +33,34 @@ if (cssModule[className[i]]) {
 
-export function createBubbleEffect({ event, button, content, className }) {
+const POSITION_STATES = ['middle', 'left', 'right'];
+
+export function toggleMoveClasses({
+  element,
+  root,
+  cssModule = null,
+  state = null,
+}) {
+  if (!state) {
+    element.classList.remove(
+      classToModules([`${root}--${POSITION_STATES[0]}`], cssModule),
+      classToModules([`${root}--${POSITION_STATES[1]}`], cssModule),
+      classToModules([`${root}--${POSITION_STATES[2]}`], cssModule),
+    );
+    return false;
+  }
+  const options = POSITION_STATES.filter(item => item !== state);
+  let i = options.length;
+  // eslint-disable-next-line
+  while (i--) {
+    element.classList.remove(classToModules([`${root}--${options[i]}`], cssModule));
+  }
+  element.classList.add(classToModules([`${root}--${state}`], cssModule));
+  return true;
+}
+
+export function createBubbleEffect({
+  event,
+  button,
+  content,
+  className,
+}) {
   const bounds = button.getBoundingClientRect();
@@ -35,0 +67,0 @@ const top = window.pageYOffset || document.documentElement.scrolltop || 0;

webpack.config.js

@@ -9,3 +9,3 @@ const webpack = require('webpack');
   output: {
-    path: path.join(__dirname, '/dist'),
+    path: path.resolve(__dirname, 'dist'),
     filename: '[name].js',
@@ -15,21 +15,10 @@ libraryTarget: 'umd',
   },
-  externals: {
-    react: {
-      root: 'React',
-      commonjs2: 'react',
-      commonjs: 'react',
-      amd: 'react',
-    },
-    'prop-types': {
-      root: 'PropTypes',
-      commonjs: 'prop-types',
-      commonjs2: 'prop-types',
-      amd: 'prop-types',
-    },
-  },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
+      options: {
+        presets: ['es2015', 'react', 'stage-0'],
+      },
     }],
@@ -36,0 +25,0 @@ },

webpack.demo.config.js

@@ -8,3 +8,3 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
   module: {
-    loaders: [
+    rules: [
       {
@@ -14,6 +14,7 @@ test: /\.js$/,
         loader: 'babel-loader',
-        query: {
+        options: {
           presets: ['es2015', 'react', 'stage-0'],
         },
-      }, {
+      },
+      {
         test: /\.scss$/i,
@@ -36,4 +37,5 @@ loader: ExtractTextPlugin.extract({
         test: /\.css$/i,
-        loader: ExtractTextPlugin.extract({
-          loader: 'css-loader?importLoaders=1!postcss-loader',
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader?importLoaders=1!postcss-loader',
         }),
@@ -40,0 +42,0 @@ },

webpack.scss.config.js

@@ -10,3 +10,3 @@ const webpack = require('webpack');
   output: {
-    path: path.join(__dirname, '/dist'),
+    path: path.resolve(__dirname, 'dist'),
     filename: '[name].js',
@@ -16,3 +16,3 @@ libraryTarget: 'umd',
   module: {
-    loaders: [
+    rules: [
       {
@@ -22,3 +22,3 @@ test: /\.js$/,
         loader: 'babel-loader',
-        query: {
+        options: {
           presets: ['es2015', 'react', 'stage-0'],
@@ -39,4 +39,5 @@ },
         test: /\.css$/i,
-        loader: ExtractTextPlugin.extract({
-          loader: 'css-loader?importLoaders=1!postcss-loader',
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader?importLoaders=1!postcss-loader',
         }),
@@ -43,0 +44,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89025

increased by12.91%

Number of package files

32

increased by3.23%

Lines of code

964

increased by10.42%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Addedreact@16.14.0(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedprop-types@^15.6.0

• Updatedreact@^16.2.0