cf-component-button - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

es/Button.js

@@ -0,5 +1,15 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 import React, { PropTypes } from 'react';
 import { createComponent } from 'cf-style-container';
 
-var getRadius = function getRadius(borderRadius, group) {
+var radius = function radius(borderRadius, group) {
   if (group) {
@@ -16,13 +26,13 @@ return {
 
-var getOpacity = function getOpacity(props) {
-  if (props.loading) {
-    return 0.8;
+var opacity = function opacity(loading, disabled) {
+  if (loading) {
+    return { opacity: 0.8 };
   }
-  if (props.disabled) {
-    return 0.5;
+  if (disabled) {
+    return { opacity: 0.5 };
   }
-  return 'inherit';
+  return { opacity: 'inherit' };
 };
 
-var getLoadingBefore = function getLoadingBefore(fadeZoomIn, loading) {
+var before = function before(fadeZoomIn, loading) {
   if (!loading) {
@@ -47,5 +57,15 @@ return null;
 
+var marginLeft = function marginLeft(_marginLeft, group, spaced) {
+  if (!group) {
+    return { marginLeft: _marginLeft };
+  }
+  if (spaced && group !== 'first') {
+    return { marginLeft: '0.4rem' };
+  }
+  return { marginLeft: 0 };
+};
+
 var styles = function styles(props) {
   var theme = props.theme;
-  return Object.assign({
+  return _extends({
     '&:hover': {
@@ -66,3 +86,4 @@ backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'HoverBackground'],
       outline: props.loading ? 'none' : 'inherit'
-    },
+    }
+  }, before(theme.fadeZoomIn, props.loading), {
     '&[title]': {
@@ -88,6 +109,5 @@ pointerEvents: props.disabled ? 'auto' : 'none'
     marginBottom: props.group ? 0 : theme.marginBottom,
-    marginLeft: props.group ? 0 : theme.marginLeft,
     marginRight: props.group ? 0 : theme.marginRight,
-    marginTop: props.group ? 0 : theme.marginTop,
-    opacity: getOpacity(props),
+    marginTop: props.group ? 0 : theme.marginTop
+  }, marginLeft(theme.marginLeft, props.group, props.spaced), opacity(props.loading, props.disabled), {
     paddingBottom: theme.paddingBottom,
@@ -98,31 +118,50 @@ paddingLeft: theme.paddingLeft,
     pointerEvents: props.disabled ? 'none' : 'auto',
-    position: theme.position,
+    position: theme.position
+  }, radius(theme.borderRadius, props.group), {
     textAlign: theme.textAlign,
     transition: theme.transition,
     userSelect: theme.userSelect
-  }, getRadius(theme.borderRadius, props.group), getLoadingBefore(theme.fadeZoomIn, props.loading));
+  });
 };
 
-var Button = function Button(_ref) {
-  var onClick = _ref.onClick,
-      submit = _ref.submit,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      loading = _ref.loading,
-      children = _ref.children;
-  return React.createElement(
-    'button',
-    {
-      type: submit ? 'submit' : 'button',
-      disabled: disabled || loading,
-      className: className,
-      onClick: onClick
-    },
-    children
-  );
-};
+var Button = function (_React$Component) {
+  _inherits(Button, _React$Component);
 
+  function Button() {
+    _classCallCheck(this, Button);
+
+    return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
+  }
+
+  _createClass(Button, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          onClick = _props.onClick,
+          submit = _props.submit,
+          className = _props.className,
+          disabled = _props.disabled,
+          loading = _props.loading,
+          children = _props.children;
+
+      return React.createElement(
+        'button',
+        {
+          type: submit ? 'submit' : 'button',
+          disabled: disabled || loading,
+          className: className,
+          onClick: onClick
+        },
+        children
+      );
+    }
+  }]);
+
+  return Button;
+}(React.Component);
+
 Button.propTypes = {
   onClick: PropTypes.func.isRequired,
   submit: PropTypes.bool,
+  spaced: PropTypes.bool,
   className: PropTypes.string.isRequired,
@@ -129,0 +168,0 @@ group: PropTypes.oneOf(['first', 'inbetween', 'last']),

es/ButtonGroup.js

@@ -0,1 +1,9 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 import React, { PropTypes } from 'react';
@@ -24,7 +32,8 @@ import { createComponent } from 'cf-style-container';
 
-var addGroupProps = function addGroupProps(children) {
+var addGroupProps = function addGroupProps(children, spaced) {
   return React.Children.map(children, function (child, index) {
     if (React.isValidElement(child)) {
       return React.cloneElement(child, {
-        group: getGroupByIndex(index, React.Children.count(children))
+        group: getGroupByIndex(index, React.Children.count(children)),
+        spaced: spaced
       });
@@ -36,14 +45,33 @@ }
 
-var ButtonGroup = function ButtonGroup(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  return React.createElement(
-    'div',
-    { className: className },
-    addGroupProps(children)
-  );
-};
+var ButtonGroup = function (_React$Component) {
+  _inherits(ButtonGroup, _React$Component);
 
+  function ButtonGroup() {
+    _classCallCheck(this, ButtonGroup);
+
+    return _possibleConstructorReturn(this, (ButtonGroup.__proto__ || Object.getPrototypeOf(ButtonGroup)).apply(this, arguments));
+  }
+
+  _createClass(ButtonGroup, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          children = _props.children,
+          spaced = _props.spaced;
+
+      return React.createElement(
+        'div',
+        { className: className },
+        addGroupProps(children, spaced)
+      );
+    }
+  }]);
+
+  return ButtonGroup;
+}(React.Component);
+
 ButtonGroup.propTypes = {
   children: PropTypes.node,
+  spaced: PropTypes.bool,
   className: PropTypes.string.isRequired
@@ -50,0 +78,0 @@ };

lib/Button.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -16,3 +20,9 @@
 
-var getRadius = function getRadius(borderRadius, group) {
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var radius = function radius(borderRadius, group) {
   if (group) {
@@ -29,13 +39,13 @@ return {
 
-var getOpacity = function getOpacity(props) {
-  if (props.loading) {
-    return 0.8;
+var opacity = function opacity(loading, disabled) {
+  if (loading) {
+    return { opacity: 0.8 };
   }
-  if (props.disabled) {
-    return 0.5;
+  if (disabled) {
+    return { opacity: 0.5 };
   }
-  return 'inherit';
+  return { opacity: 'inherit' };
 };
 
-var getLoadingBefore = function getLoadingBefore(fadeZoomIn, loading) {
+var before = function before(fadeZoomIn, loading) {
   if (!loading) {
@@ -60,5 +70,15 @@ return null;
 
+var marginLeft = function marginLeft(_marginLeft, group, spaced) {
+  if (!group) {
+    return { marginLeft: _marginLeft };
+  }
+  if (spaced && group !== 'first') {
+    return { marginLeft: '0.4rem' };
+  }
+  return { marginLeft: 0 };
+};
+
 var styles = function styles(props) {
   var theme = props.theme;
-  return Object.assign({
+  return _extends({
     '&:hover': {
@@ -79,3 +99,4 @@ backgroundColor: props.loading ? theme.disabledBackground : theme[props.type + 'HoverBackground'],
       outline: props.loading ? 'none' : 'inherit'
-    },
+    }
+  }, before(theme.fadeZoomIn, props.loading), {
     '&[title]': {
@@ -101,6 +122,5 @@ pointerEvents: props.disabled ? 'auto' : 'none'
     marginBottom: props.group ? 0 : theme.marginBottom,
-    marginLeft: props.group ? 0 : theme.marginLeft,
     marginRight: props.group ? 0 : theme.marginRight,
-    marginTop: props.group ? 0 : theme.marginTop,
-    opacity: getOpacity(props),
+    marginTop: props.group ? 0 : theme.marginTop
+  }, marginLeft(theme.marginLeft, props.group, props.spaced), opacity(props.loading, props.disabled), {
     paddingBottom: theme.paddingBottom,
@@ -111,31 +131,50 @@ paddingLeft: theme.paddingLeft,
     pointerEvents: props.disabled ? 'none' : 'auto',
-    position: theme.position,
+    position: theme.position
+  }, radius(theme.borderRadius, props.group), {
     textAlign: theme.textAlign,
     transition: theme.transition,
     userSelect: theme.userSelect
-  }, getRadius(theme.borderRadius, props.group), getLoadingBefore(theme.fadeZoomIn, props.loading));
+  });
 };
 
-var Button = function Button(_ref) {
-  var onClick = _ref.onClick,
-      submit = _ref.submit,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      loading = _ref.loading,
-      children = _ref.children;
-  return _react2.default.createElement(
-    'button',
-    {
-      type: submit ? 'submit' : 'button',
-      disabled: disabled || loading,
-      className: className,
-      onClick: onClick
-    },
-    children
-  );
-};
+var Button = function (_React$Component) {
+  _inherits(Button, _React$Component);
 
+  function Button() {
+    _classCallCheck(this, Button);
+
+    return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
+  }
+
+  _createClass(Button, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          onClick = _props.onClick,
+          submit = _props.submit,
+          className = _props.className,
+          disabled = _props.disabled,
+          loading = _props.loading,
+          children = _props.children;
+
+      return _react2.default.createElement(
+        'button',
+        {
+          type: submit ? 'submit' : 'button',
+          disabled: disabled || loading,
+          className: className,
+          onClick: onClick
+        },
+        children
+      );
+    }
+  }]);
+
+  return Button;
+}(_react2.default.Component);
+
 Button.propTypes = {
   onClick: _react.PropTypes.func.isRequired,
   submit: _react.PropTypes.bool,
+  spaced: _react.PropTypes.bool,
   className: _react.PropTypes.string.isRequired,
@@ -142,0 +181,0 @@ group: _react.PropTypes.oneOf(['first', 'inbetween', 'last']),

lib/ButtonGroup.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -16,2 +18,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var styles = function styles(props) {
@@ -37,7 +45,8 @@ var theme = props.theme;
 
-var addGroupProps = function addGroupProps(children) {
+var addGroupProps = function addGroupProps(children, spaced) {
   return _react2.default.Children.map(children, function (child, index) {
     if (_react2.default.isValidElement(child)) {
       return _react2.default.cloneElement(child, {
-        group: getGroupByIndex(index, _react2.default.Children.count(children))
+        group: getGroupByIndex(index, _react2.default.Children.count(children)),
+        spaced: spaced
       });
@@ -49,14 +58,33 @@ }
 
-var ButtonGroup = function ButtonGroup(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  return _react2.default.createElement(
-    'div',
-    { className: className },
-    addGroupProps(children)
-  );
-};
+var ButtonGroup = function (_React$Component) {
+  _inherits(ButtonGroup, _React$Component);
 
+  function ButtonGroup() {
+    _classCallCheck(this, ButtonGroup);
+
+    return _possibleConstructorReturn(this, (ButtonGroup.__proto__ || Object.getPrototypeOf(ButtonGroup)).apply(this, arguments));
+  }
+
+  _createClass(ButtonGroup, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          children = _props.children,
+          spaced = _props.spaced;
+
+      return _react2.default.createElement(
+        'div',
+        { className: className },
+        addGroupProps(children, spaced)
+      );
+    }
+  }]);
+
+  return ButtonGroup;
+}(_react2.default.Component);
+
 ButtonGroup.propTypes = {
   children: _react.PropTypes.node,
+  spaced: _react.PropTypes.bool,
   className: _react.PropTypes.string.isRequired
@@ -63,0 +91,0 @@ };

package.json

 {
   "name": "cf-component-button",
   "description": "Cloudflare Button Component",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

README.md

@@ -18,13 +18,24 @@ # cf-component-button
 const ButtonComponent = () => (
-  <ButtonGroup>
-    <Button type="primary" onClick={() => console.log('Clicked One!')}>
-      Button One
-    </Button>
-    <Button type="default" onClick={() => console.log('Clicked Two!')}>
-      Button Two
-    </Button>
-    <Button type="success" onClick={() => console.log('Clicked Three!')}>
-      Button Three
-    </Button>
-  </ButtonGroup>
+  <div>
+    <ButtonGroup>
+      <Button type="primary" onClick={() => console.log('Clicked One!')}>
+        Button One
+      </Button>
+      <Button type="default" onClick={() => console.log('Clicked Two!')}>
+        Button Two
+      </Button>
+      <Button type="success" onClick={() => console.log('Clicked Three!')}>
+        Button Three
+      </Button>
+    </ButtonGroup>
+    <p>Button group with spacing</p>
+    <ButtonGroup spaced>
+      <Button type="success" onClick={() => console.log('Clicked Four!')}>
+        Button Four
+      </Button>
+      <Button type="danger" onClick={() => console.log('Clicked Five!')}>
+        Button Five
+      </Button>
+    </ButtonGroup>
+  </div>
 );
@@ -31,0 +42,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

Improved metrics

Total package byte prevSize

59597

increased by18.53%

Lines of code

1149

increased by9.74%

Number of lines in readme file

44

increased by33.33%

No dependency changes