@eaze/button - npm Package Compare versions

Comparing version 3.0.19-1 to 3.0.19-2

dist/button.js

@@ -48,24 +48,20 @@ 'use strict';
 var Button = /*#__PURE__*/(0, _reactEmotion2.default)('button', {
-  target: 'css-4kcgr10'
+  target: 'css-1fiocyr0'
 })('line-height:', function (_ref) {
   var pill = _ref.pill;
   return pill ? '0.2rem 0.5rem' : '1.4rem';
-}, ';padding:', function (_ref2) {
-  var pill = _ref2.pill,
-      loading = _ref2.loading;
-  return pill ? '0.2rem 0.5rem' : loading ? '0' : '1.4rem';
-}, ';font-size:', function (_ref3) {
+}, ';padding:', _styleHelpers.getCustomPadding, ';font-size:', function (_ref2) {
+  var supersize = _ref2.supersize;
+  return supersize ? '1.6rem' : '1.2rem';
+}, ';font-weight:', function (_ref3) {
   var supersize = _ref3.supersize;
-  return supersize ? '1.6rem' : '1.2rem';
-}, ';font-weight:', function (_ref4) {
-  var supersize = _ref4.supersize;
   return supersize ? '900' : '400';
-}, ';width:', function (_ref5) {
+}, ';width:', function (_ref4) {
+  var pill = _ref4.pill;
+  return pill ? '' : '100%';
+}, ';text-transform:', function (_ref5) {
   var pill = _ref5.pill;
-  return pill ? '' : '100%';
-}, ';text-transform:', function (_ref6) {
-  var pill = _ref6.pill;
   return pill ? '' : 'uppercase';
-}, ';background-color:', _styleHelpers.fetchBackgroundColor, ';color:', _styleHelpers.getTextColor, ';border:0.1rem solid ', _styleHelpers.fetchBorderColor, ';border-radius:0.2rem;position:relative;cursor:pointer;min-width:5rem;font-family:\'Open Sans\';letter-spacing:0.03em;outline:none;white-space:nowrap;text-align:center;&:hover{box-shadow:', function (_ref7) {
-  var type = _ref7.type;
+}, ';background-color:', _styleHelpers.fetchBackgroundColor, ';color:', _styleHelpers.getTextColor, ';border:0.1rem solid ', _styleHelpers.fetchBorderColor, ';border-radius:0.2rem;position:relative;cursor:pointer;min-width:5rem;font-family:\'Open Sans\';letter-spacing:0.03em;outline:none;white-space:nowrap;text-align:center;&:hover{box-shadow:', function (_ref6) {
+  var type = _ref6.type;
   return type === _types.TEXT ? 'none' : '0 0.4rem 0.8rem rgba(0,0,0,.2)';
@@ -78,43 +74,10 @@ }, ';opacity:0.9;}&[disabled],&[disabled]:hover{opacity:0.5;cursor:not-allowed;box-shadow:none;background-color:', _styleHelpers.fetchDisabledBackgroundColor, '\n    color:', _color2.default['accessory']['2'], ';border:1px solid ', _color2.default['accessory']['3'], ';}');
   function ButtonComponent() {
-    var _ref8;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, ButtonComponent);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref8 = ButtonComponent.__proto__ || Object.getPrototypeOf(ButtonComponent)).call.apply(_ref8, [this].concat(args))), _this), _this.state = {
-      height: ''
-    }, _this.getBtnHeight = function (element) {
-      var h = element.getBoundingClientRect().height;
-      return h ? h + 'px' : '';
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (ButtonComponent.__proto__ || Object.getPrototypeOf(ButtonComponent)).apply(this, arguments));
   }
 
   _createClass(ButtonComponent, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.btn) {
-        this.setState({ height: this.getBtnHeight(this.btn) });
-      }
-    }
-
-    // using this lifecycle the trigger state change when view changes (i.e. on checkout) and componendDidMount is not triggered
-
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps() {
-      var calcHeight = this.getBtnHeight(this.btn);
-      if (this.state.height !== calcHeight) {
-        this.setState({ height: this.getBtnHeight(this.btn) });
-      }
-    }
-  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
-
       var _props = this.props,
@@ -129,8 +92,3 @@ children = _props.children,
         Button,
-        _extends({}, this.props, {
-          style: _extends({}, componentStyle, { height: this.state.height }),
-          innerRef: function innerRef(element) {
-            _this2.btn = element;
-          }
-        }),
+        _extends({}, this.props, { style: _extends({}, componentStyle) }),
         notification && _react2.default.createElement(_badge2.default, { count: notification }),
@@ -153,4 +111,3 @@ loading ? _react2.default.createElement(_spinner2.default, null) : children
   pill: _propTypes2.default.bool,
-  active: _propTypes2.default.bool,
-  height: _propTypes2.default.string
+  active: _propTypes2.default.bool
 };
@@ -157,0 +114,0 @@ ButtonComponent.defaultProps = {

dist/spinner.js

@@ -32,3 +32,3 @@ 'use strict';
 var Container = /*#__PURE__*/(0, _reactEmotion2.default)('div', {
-  target: 'css-13v3mzf0'
+  target: 'css-s5w8zk0'
 })('display:flex;justify-content:center;align-items:center;width:100%;');
@@ -48,2 +48,5 @@
 
+    // static defaultProps = {
+    // }
+
     // static propTypes = {
@@ -50,0 +53,0 @@ // }

dist/style-helpers.js

@@ -10,2 +10,3 @@ 'use strict';
 exports.fetchBorderColor = fetchBorderColor;
+exports.getCustomPadding = getCustomPadding;
 
@@ -32,2 +33,9 @@ var _color = require('@eaze/color');
 
+var CUSTOM_PADDING = {
+  pill: '0.2rem 0.5rem',
+  supersize: '1.055rem 1.4rem',
+  loading: '1.05rem 1.4rem',
+  default: '1.4rem'
+};
+
 function getTextColor(_ref) {
@@ -73,2 +81,13 @@ var type = _ref.type,
   return inverted || pill ? colorMap[type] : 'transparent';
+}
+
+function getCustomPadding(_ref5) {
+  var pill = _ref5.pill,
+      supersize = _ref5.supersize,
+      loading = _ref5.loading;
+
+  if (pill) return CUSTOM_PADDING.pill;
+  if (supersize && loading) return CUSTOM_PADDING.supersize;
+  if (loading) return CUSTOM_PADDING.loading;
+  return CUSTOM_PADDING.default;
 }

package.json

 {
   "name": "@eaze/button",
-  "version": "3.0.19-1",
+  "version": "3.0.19-2",
   "description": "Button component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/button.js

@@ -9,3 +9,4 @@ import React, { PureComponent } from 'react'
   fetchDisabledBackgroundColor,
-  fetchBorderColor
+  fetchBorderColor,
+  getCustomPadding
 } from './style-helpers'
@@ -19,3 +20,3 @@
   line-height: ${({ pill }) => pill ? '0.2rem 0.5rem' : '1.4rem'};
-  padding: ${({ pill, loading }) => pill ? '0.2rem 0.5rem' : loading ? '0' : '1.4rem'};
+  padding: ${getCustomPadding};
   font-size: ${({ supersize }) => supersize ? '1.6rem' : '1.2rem'};
@@ -65,4 +66,3 @@ font-weight: ${({ supersize }) => supersize ? '900' : '400'};
     pill: PropTypes.bool,
-    active: PropTypes.bool,
-    height: PropTypes.string
+    active: PropTypes.bool
   }
@@ -78,28 +78,5 @@
     pill: false,
-    active: false,
+    active: false
   }
 
-  state = {
-    height: ''
-  }
-
-  componentDidMount () {
-    if (this.btn) {
-      this.setState({height: this.getBtnHeight(this.btn)})
-    } 
-  }
-
-  // using this lifecycle the trigger state change when view changes (i.e. on checkout) and componendDidMount is not triggered
-  componentWillReceiveProps () {
-    const calcHeight = this.getBtnHeight(this.btn)
-    if (this.state.height !== calcHeight) {
-      this.setState({height: this.getBtnHeight(this.btn)})
-    }
-  }
-
-  getBtnHeight = element => {
-    const h = element.getBoundingClientRect().height
-    return h ? `${h}px` : ''
-  }
-  
   render () {
@@ -109,6 +86,3 @@ const { children, componentStyle, loading, notification } = this.props
     return (
-      <Button {...this.props} 
-        style={{ ...componentStyle, height: this.state.height}} 
-        innerRef={element => { this.btn = element }}
-      >
+      <Button {...this.props} style={{ ...componentStyle }}>
         {notification && <Badge count={notification} />}
@@ -115,0 +89,0 @@ {loading ? <Spinner /> : children}

src/spinner.js

@@ -14,2 +14,5 @@ import React, { PureComponent } from 'react'
 export default class SpinnerComponent extends PureComponent {
+  // static defaultProps = {
+  // }
+
   // static propTypes = {
@@ -16,0 +19,0 @@ // }

src/style-helpers.js

@@ -16,2 +16,9 @@ import Colors from '@eaze/color'
 
+const CUSTOM_PADDING = {
+  pill: '0.2rem 0.5rem',
+  supersize: '1.055rem 1.4rem',
+  loading: '1.05rem 1.4rem',
+  default: '1.4rem'
+}
+
 export function getTextColor ({ type, inverted, pill, active }) {
@@ -48,1 +55,8 @@ if (type === TEXT) {
 }
+
+export function getCustomPadding ({ pill, supersize, loading }) {
+  if (pill) return CUSTOM_PADDING.pill
+  if (supersize && loading) return CUSTOM_PADDING.supersize
+  if (loading) return CUSTOM_PADDING.loading
+  return CUSTOM_PADDING.default
+}

No alert changes

Worsened metrics

Total package byte prevSize

28368

decreased by-3.95%

Lines of code

676

decreased by-3.84%

No dependency changes