@eaze/button - npm Package Compare versions

Comparing version 3.0.19-0 to 3.0.19-1

dist/button.js

@@ -48,3 +48,3 @@ 'use strict';
 var Button = /*#__PURE__*/(0, _reactEmotion2.default)('button', {
-  target: 'css-18y9xd00'
+  target: 'css-4kcgr10'
 })('line-height:', function (_ref) {
@@ -56,3 +56,3 @@ var pill = _ref.pill;
       loading = _ref2.loading;
-  return pill ? '0.2rem 0.5rem' : loading ? '1rem 1.4rem' : '1.4rem';
+  return pill ? '0.2rem 0.5rem' : loading ? '0' : '1.4rem';
 }, ';font-size:', function (_ref3) {
@@ -67,10 +67,7 @@ var supersize = _ref3.supersize;
   return pill ? '' : '100%';
-}, ';height:', function (_ref6) {
-  var loading = _ref6.loading;
-  return loading ? '100%' : '';
-}, ';text-transform:', function (_ref7) {
-  var pill = _ref7.pill;
+}, ';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 (_ref8) {
-  var type = _ref8.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 (_ref7) {
+  var type = _ref7.type;
   return type === _types.TEXT ? 'none' : '0 0.4rem 0.8rem rgba(0,0,0,.2)';
@@ -83,10 +80,43 @@ }, ';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);
 
-    return _possibleConstructorReturn(this, (ButtonComponent.__proto__ || Object.getPrototypeOf(ButtonComponent)).apply(this, arguments));
+    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);
   }
 
   _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,
@@ -101,3 +131,8 @@ children = _props.children,
         Button,
-        _extends({}, this.props, { style: _extends({}, componentStyle) }),
+        _extends({}, this.props, {
+          style: _extends({}, componentStyle, { height: this.state.height }),
+          innerRef: function innerRef(element) {
+            _this2.btn = element;
+          }
+        }),
         notification && _react2.default.createElement(_badge2.default, { count: notification }),
@@ -120,3 +155,4 @@ loading ? _react2.default.createElement(_spinner2.default, null) : children
   pill: _propTypes2.default.bool,
-  active: _propTypes2.default.bool
+  active: _propTypes2.default.bool,
+  height: _propTypes2.default.string
 };
@@ -123,0 +159,0 @@ ButtonComponent.defaultProps = {

dist/spinner.js

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

package.json

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

src/button.js

@@ -18,7 +18,6 @@ import React, { PureComponent } from 'react'
   line-height: ${({ pill }) => pill ? '0.2rem 0.5rem' : '1.4rem'};
-  padding: ${({ pill, loading }) => pill ? '0.2rem 0.5rem' : loading ? '1rem 1.4rem' : '1.4rem'};
+  padding: ${({ pill, loading }) => pill ? '0.2rem 0.5rem' : loading ? '0' : '1.4rem'};
   font-size: ${({ supersize }) => supersize ? '1.6rem' : '1.2rem'};
   font-weight: ${({ supersize }) => supersize ? '900' : '400'};
   width: ${({ pill }) => pill ? '' : '100%'};
-  height: ${({ loading }) => loading ? '100%' : ''};
   text-transform: ${({ pill }) => pill ? '' : 'uppercase'};
@@ -65,3 +64,4 @@
     pill: PropTypes.bool,
-    active: PropTypes.bool
+    active: PropTypes.bool,
+    height: PropTypes.string
   }
@@ -77,5 +77,28 @@
     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 () {
@@ -85,3 +108,6 @@ const { children, componentStyle, loading, notification } = this.props
     return (
-      <Button {...this.props} style={{ ...componentStyle }}>
+      <Button {...this.props} 
+        style={{ ...componentStyle, height: this.state.height}} 
+        innerRef={element => { this.btn = element }}
+      >
         {notification && <Badge count={notification} />}
@@ -88,0 +114,0 @@ {loading ? <Spinner /> : children}

src/spinner.js

@@ -8,4 +8,4 @@ import React, { PureComponent } from 'react'
   display: flex;
-  alignItems: center;
-  justifyContent: center;
+  justify-content: center;
+  align-items: center;
   width: 100%;
@@ -15,5 +15,2 @@ `
 export default class SpinnerComponent extends PureComponent {
-  // static defaultProps = {
-  // }
-
   // static propTypes = {
@@ -20,0 +17,0 @@ // }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29534

increased by6.2%

Lines of code

703

increased by7.33%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes