react-awesome-button
Advanced tools
Comparing version 0.8.0 to 1.0.0
@@ -30,4 +30,5 @@ { | ||
"jsx-a11y/anchor-has-content": 0, | ||
"jsx-a11y/click-events-have-key-events": 0, | ||
"import/no-extraneous-dependencies": 0 | ||
} | ||
} |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports["react-awesome-button"]=t(require("react"),require("prop-types")):e["react-awesome-button"]=t(e.React,e.PropTypes)}("undefined"!=typeof self?self:this,function(e,t){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=0)}([function(e,t,n){e.exports=n(1)},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(2),c=o(u),d=n(3),p=o(d),f=n(4),h="aws-btn",b=function(e){return c.default.createElement("a",e)},m=function(e){return c.default.createElement("button",e)},g=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||e.placeholder&&!e.children,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1},n.checkProps(e),n}return i(t,e),l(t,[{key:"componentDidMount",value:function(){this.container=this.button&&this.button.parentNode,(0,f.setCssEndEvent)(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(e){this.checkPlaceholder(e),this.checkProps(e)}},{key:"getRootClassName",value:function(){var e=this.rootElement,t=this.props,n=t.type,o=t.size,r=t.placeholder,s=t.children,i=t.visible,a=t.progress,l=t.cssModule,u=this.state,c=u.loadingStart,d=u.loadingEnd,p=u.disabled,h=u.pressPosition,b=[this.rootElement,n&&e+"--"+n,o&&e+"--"+o,i&&e+"--visible",r&&!s&&e+"--placeholder"||null,c&&e+"--start"||null,d&&e+"--end"||null,a&&e+"--progress"||null];return!0===p&&b.push(e+"--disabled"),h&&b.push(h),l&&l["aws-btn"]?(0,f.classToModules)(b,l):b.join(" ").trim().replace(/[\s]+/gi," ")}},{key:"checkProps",value:function(e){var t=e.to,n=e.href,o=e.target,r=e.element;this.extraProps.to=t||null,this.extraProps.href=n||null,this.extraProps.target=o||null,this.renderComponent=r||(this.props.href?b:m)}},{key:"checkPlaceholder",value:function(e){var t=e.placeholder,n=e.children;!0===t&&(n?this.setState({disabled:!1}):this.setState({disabled:!0}))}},{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,f.toggleMoveClasses)({element:this.container,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.container,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(),r=o.left,s=n.offsetWidth,i=t.pageX<r+.3*s?"left":t.pageX>r+.65*s?"right":"middle";(0,f.toggleMoveClasses)({element:e.container,root:e.rootElement,cssModule:e.props.cssModule,state:i})}}:t.onMouseEnter=function(){e.container.classList.add((0,f.classToModules)([e.rootElement+"--middle"],e.props.cssModule))},t}},{key:"render",value:function(){var e=this,t=this.renderComponent,n=this.props,o=n.title,r=n.style,s=n.cssModule,i=n.progress,l=n.loadingLabel,u=n.resultLabel,d=n.children;return c.default.createElement(t,a({style:r,className:this.getRootClassName(),role:"button",title:o},this.extraProps,this.moveEvents()),c.default.createElement("span",{ref:function(t){e.button=t},className:(0,f.getClassName)(this.rootElement+"__container",s)},c.default.createElement("span",{ref:function(t){e.wrapper=t},className:(0,f.getClassName)(this.rootElement+"__wrapper",s)},c.default.createElement("span",{ref:function(t){e.content=t},"data-loading":i&&l||null,"data-status":i&&u||null,className:(0,f.getClassName)(this.rootElement+"__content",s)},c.default.createElement("span",null,d)))))}}]),t}(c.default.Component);g.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,placeholder:p.default.bool,progress:p.default.bool,title:p.default.string,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},g.defaultProps={action:null,bubbles:!1,cssModule:null,disabled:!1,title:null,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,placeholder:!1,resultLabel:"Success!",rootElement:h,size:null,style:{},target:null,to:null,type:"primary",visible:!0},t.default=g},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function o(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(!t)return e.join(" ").trim();for(var 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(!t)return!1;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"]}])}); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports["react-awesome-button"]=t(require("react"),require("prop-types")):e["react-awesome-button"]=t(e.React,e.PropTypes)}("undefined"!=typeof self?self: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.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=0)}([function(e,t,n){e.exports=n(1)},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(2),c=o(u),d=n(3),p=o(d),f=n(4),h="aws-btn",b=function(e){return c.default.createElement("a",e)},m=function(e){return c.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||e.placeholder&&!e.children,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1},n.checkProps(e),n}return i(t,e),l(t,[{key:"componentDidMount",value:function(){this.container=this.button&&this.button.parentNode,(0,f.setCssEndEvent)(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(e){this.checkPlaceholder(e),this.checkProps(e)}},{key:"getRootClassName",value:function(){var e=this.rootElement,t=this.props,n=t.type,o=t.size,s=t.placeholder,r=t.children,i=t.visible,a=t.progress,l=t.cssModule,u=this.state,c=u.loadingStart,d=u.loadingEnd,p=u.disabled,h=u.pressPosition,b=[this.rootElement,n&&e+"--"+n,o&&e+"--"+o,i&&e+"--visible",s&&!r&&e+"--placeholder"||null,c&&e+"--start"||null,d&&e+"--end"||null,a&&e+"--progress"||null];return!0===p&&b.push(e+"--disabled"),h&&b.push(h),l&&l["aws-btn"]?(0,f.classToModules)(b,l):b.join(" ").trim().replace(/[\s]+/gi," ")}},{key:"checkProps",value:function(e){var t=e.to,n=e.href,o=e.target,s=e.element;this.extraProps.to=t||null,this.extraProps.href=n||null,this.extraProps.target=o||null,this.renderComponent=s||(this.props.href?b:m)}},{key:"checkPlaceholder",value:function(e){var t=e.disabled,n=e.placeholder,o=e.children;!0===n?o?this.setState({disabled:!1}):this.setState({disabled:!0}):this.setState({disabled:t})}},{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,f.toggleMoveClasses)({element:this.container,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.container,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(),s=o.left,r=n.offsetWidth,i=t.pageX<s+.3*r?"left":t.pageX>s+.65*r?"right":"middle";(0,f.toggleMoveClasses)({element:e.container,root:e.rootElement,cssModule:e.props.cssModule,state:i})}}:t.onMouseEnter=function(){e.container.classList.add((0,f.classToModules)([e.rootElement+"--middle"],e.props.cssModule))},t}},{key:"render",value:function(){var e=this,t=this.renderComponent,n=this.props,o=n.title,s=n.style,r=n.cssModule,i=n.progress,l=n.loadingLabel,u=n.resultLabel,d=n.children;return c.default.createElement(t,a({style:s,className:this.getRootClassName(),role:"button",title:o},this.extraProps,this.moveEvents()),c.default.createElement("span",{ref:function(t){e.button=t},className:(0,f.getClassName)(this.rootElement+"__container",r)},c.default.createElement("span",{ref:function(t){e.wrapper=t},className:(0,f.getClassName)(this.rootElement+"__wrapper",r)},c.default.createElement("span",{ref:function(t){e.content=t},"data-loading":i&&l||null,"data-status":i&&u||null,className:(0,f.getClassName)(this.rootElement+"__content",r)},c.default.createElement("span",null,d)))))}}]),t}(c.default.Component);g.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,placeholder:p.default.bool,progress:p.default.bool,title:p.default.string,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},g.defaultProps={action:null,bubbles:!1,cssModule:null,disabled:!1,title:null,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,placeholder:!1,resultLabel:"Success!",rootElement:h,size:null,style:{},target:null,to:null,type:"primary",visible:!0},t.default=g},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function o(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1];if(!t)return e.join(" ").trim();for(var 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.element,n=e.root,s=e.cssModule,r=void 0===s?null:s,i=e.state,a=void 0===i?null:i;if(!t)return!1;if(!a)return t.classList.remove(o([n+"--"+l[0]],r),o([n+"--"+l[1]],r),o([n+"--"+l[2]],r)),!1;for(var u=l.filter(function(e){return e!==a}),c=u.length;c--;)t.classList.remove(o([n+"--"+u[c]],r));return t.classList.add(o([n+"--"+a],r)),!0}function a(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.toggleMoveClasses=i,t.createBubbleEffect=a;var l=["middle","left","right"]}])}); |
{ | ||
"name": "react-awesome-button", | ||
"version": "0.8.0", | ||
"version": "1.0.0", | ||
"description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons", | ||
@@ -18,3 +18,3 @@ "main": "dist/index.js", | ||
"start": "webpack-dev-server -d --config webpack.demo.config.js", | ||
"start:white": "webpack-dev-server -d --config webpack.demo-white.config.js", | ||
"start:white": "webpack-dev-server -d --config webpack.demo-theme.config.js", | ||
"build": "NODE_ENV=production webpack", | ||
@@ -55,2 +55,3 @@ "build:scss": "NODE_ENV=production webpack --config webpack.scss.config.js && rm ./dist/styles.js", | ||
"prismjs": "^1.9.0", | ||
"react-awesome-social": "^0.1.7", | ||
"react-dom": "^16.2.0", | ||
@@ -57,0 +58,0 @@ "react-router": "^4.1.1", |
@@ -7,3 +7,3 @@ # <AwesomeButton /> | ||
<img width="600" alt="react-awesome-button demo" src="https://image.ibb.co/dOzGum/react_awesome_button_demo.gif"> | ||
<img width="400" alt="react-awesome-button demo" src="https://github.com/rcaferati/react-awesome-button/blob/master/demo/images/theme-set.gif?raw=true"> | ||
@@ -19,3 +19,3 @@ ## Live demo | ||
```jsx | ||
import AwesomeSocial from 'react-awesome-social'; | ||
import AwesomeButton from 'react-awesome-button'; | ||
import 'react-awesome-button/dist/styles.css'; | ||
@@ -25,3 +25,3 @@ | ||
return ( | ||
<AwesomeSocial type="facebook">Share</AwesomeSocial> | ||
<AwesomeButton type="facebook">Button</AwesomeButton> | ||
); | ||
@@ -33,3 +33,3 @@ } | ||
```jsx | ||
import AwesomeSocial from 'react-awesome-social'; | ||
import AwesomeButton from 'react-awesome-button'; | ||
import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss' | ||
@@ -39,6 +39,8 @@ | ||
return ( | ||
<AwesomeSocial | ||
<AwesomeButton | ||
cssModule={AwesomeButtonStyles} | ||
type="twitter" | ||
>Share</AwesomeSocial> | ||
> | ||
Share | ||
</AwesomeButton> | ||
); | ||
@@ -45,0 +47,0 @@ } |
@@ -141,3 +141,3 @@ import React from 'react'; | ||
checkPlaceholder(newProps) { | ||
const { placeholder, children } = newProps; | ||
const { disabled, placeholder, children } = newProps; | ||
if (placeholder === true) { | ||
@@ -153,2 +153,6 @@ if (!children) { | ||
} | ||
} else { | ||
this.setState({ | ||
disabled, | ||
}); | ||
} | ||
@@ -155,0 +159,0 @@ } |
import React from 'react'; | ||
import AwesomeButton from '../component'; | ||
import AwsBtnStyles from '../styles/default.scss'; | ||
import AwsBtnStylesThemeTwo from '../styles/themes/theme-two.scss'; | ||
import AwsBtnStyles from '../styles/styles.scss'; | ||
import AwsBtnThemeMorty from '../styles/themes/theme-c137/styles.scss'; | ||
import AwsBtnThemeRick from '../styles/themes/theme-rickiest/styles.scss'; | ||
import Themes from './themes'; | ||
@@ -40,3 +42,3 @@ const Div = props => (<div {... props} />); | ||
> | ||
<i className="fa fa-facebook" aria-hidden /> | ||
<i className="fa fa-facebook" /> | ||
</AwesomeButton> | ||
@@ -53,3 +55,3 @@ ...`, | ||
> | ||
<i className="fa fa-facebook" aria-hidden /> | ||
<i className="fa fa-facebook" /> | ||
</AwesomeButton> | ||
@@ -63,3 +65,3 @@ <AwesomeButton | ||
> | ||
<i className="fa fa-twitter" aria-hidden /> | ||
<i className="fa fa-twitter" /> | ||
</AwesomeButton> | ||
@@ -73,3 +75,3 @@ <AwesomeButton | ||
> | ||
<i className="fa fa-github" aria-hidden /> | ||
<i className="fa fa-github" /> | ||
</AwesomeButton> | ||
@@ -83,3 +85,3 @@ <AwesomeButton | ||
> | ||
<i className="fa fa-linkedin" aria-hidden /> | ||
<i className="fa fa-linkedin" /> | ||
</AwesomeButton> | ||
@@ -93,3 +95,3 @@ <AwesomeButton | ||
> | ||
<i className="fa fa-whatsapp" aria-hidden /> | ||
<i className="fa fa-whatsapp" /> | ||
</AwesomeButton> | ||
@@ -103,3 +105,3 @@ <AwesomeButton | ||
> | ||
<i className="fa fa-instagram" aria-hidden /> | ||
<i className="fa fa-instagram" /> | ||
</AwesomeButton> | ||
@@ -121,3 +123,5 @@ </div> | ||
action={action} | ||
>Progress Button</AwesomeButton>`, | ||
> | ||
Progress Button | ||
</AwesomeButton>`, | ||
button: ( | ||
@@ -154,39 +158,13 @@ <div> | ||
scss: ` | ||
$button-default-border-radius: 40px; | ||
$button-default-height: 48px; | ||
$button-default-border-radius: 6px; | ||
$button-horizontal-padding: 20px; | ||
$button-raise-level: 4px; | ||
$button-raise-level: 6px; | ||
$transform-speed: 0.185s; | ||
$button-hover-pressure: 2; | ||
`, | ||
jsx: ` | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
>Themed Button</AwesomeButton> | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
type="secondary" | ||
>Themed Button</AwesomeButton> | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
disabled | ||
>Themed Button</AwesomeButton>`, | ||
button: ( | ||
<div> | ||
<div> | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
> | ||
Themed Button | ||
</AwesomeButton> | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
type="secondary" | ||
> | ||
Themed Button | ||
</AwesomeButton> | ||
<AwesomeButton | ||
cssModule={AwsBtnStylesThemeTwo} | ||
disabled | ||
> | ||
Themed Button | ||
</AwesomeButton> | ||
</div> | ||
<Themes theme={AwsBtnThemeMorty} /> | ||
<Themes theme={AwsBtnThemeRick} /> | ||
</div> | ||
@@ -193,0 +171,0 @@ ), |
@@ -44,10 +44,12 @@ import React from 'react'; | ||
)} | ||
<pre> | ||
<h4>.jsx</h4> | ||
<code | ||
dangerouslySetInnerHTML={{ | ||
__html: Prism.highlight(example.jsx.trim(), Prism.languages.jsx), | ||
}} | ||
/> | ||
</pre> | ||
{example.jsx && ( | ||
<pre> | ||
<h4>.jsx</h4> | ||
<code | ||
dangerouslySetInnerHTML={{ | ||
__html: Prism.highlight(example.jsx.trim(), Prism.languages.jsx), | ||
}} | ||
/> | ||
</pre> | ||
)} | ||
</div> | ||
@@ -54,0 +56,0 @@ <div className={Styles.buttons}> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
2777008
103
1468
1
72
32
3