react-bootstrap-toggle - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/react-bootstrap-toggle.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 _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; }; }();
@@ -18,2 +20,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('./utils');
@@ -27,2 +33,6 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -67,6 +77,6 @@
     key: 'onClick',
-    value: function onClick() {
+    value: function onClick(evt) {
       if (this.props.disabled) return;
       if (typeof this.props.onClick === 'function') {
-        this.props.onClick(!this.props.active);
+        this.props.onClick(!this.props.active, this.parent, evt);
       }
@@ -84,3 +94,3 @@ }
       // Check if the sizes are the same with a margin of error of one pixel
-      var areAlmostTheSame = util.compareWithMarginOfError(this.state.width, width) && util.compareWithMarginOfError(this.state.height, height);
+      var areAlmostTheSame = util.compareWithMarginOfError(this.state.width, width, this.props.width) && util.compareWithMarginOfError(this.state.height, height, this.props.height);
 
@@ -108,30 +118,30 @@ // if they are the same then return
     value: function render() {
-      var _this2 = this;
+      var _cn,
+          _this2 = this;
 
-      var onstyle = 'btn-' + this.props.onstyle;
-      var offstyle = 'btn-' + this.props.offstyle;
+      var _props = this.props,
+          active = _props.active,
+          onClick = _props.onClick,
+          onstyle = _props.onstyle,
+          onstyleClassName = _props.onstyleClassName,
+          offstyle = _props.offstyle,
+          offstyleClassName = _props.offstyleClassName,
+          handlestyle = _props.handlestyle,
+          handlestyleClassName = _props.handlestyleClassName,
+          style = _props.style,
+          on = _props.on,
+          off = _props.off,
+          className = _props.className,
+          disabled = _props.disabled,
+          width = _props.width,
+          height = _props.height,
+          props = _objectWithoutProperties(_props, ['active', 'onClick', 'onstyle', 'onstyleClassName', 'offstyle', 'offstyleClassName', 'handlestyle', 'handlestyleClassName', 'style', 'on', 'off', 'className', 'disabled', 'width', 'height']);
+
       var sizeClass = this.getSizeClass();
-      var activeClass = 'btn toggle ' + sizeClass + ' ' + onstyle;
-      var inactiveClass = 'btn toggle ' + sizeClass + ' ' + offstyle + ' off';
-      var onStyleClass = 'btn toggle-on ' + sizeClass + ' ' + onstyle;
-      var offStyleClass = 'btn toggle-off ' + sizeClass + ' ' + offstyle;
 
-      var style = {};
-      var className = this.props.active ? activeClass : inactiveClass;
-      if (this.props.width && this.props.height) {
-        style = {
-          width: this.props.width,
-          height: this.props.height
-        };
-      } else {
-        style = {
-          width: this.state.width,
-          height: this.state.height
-        };
-      }
+      var s = {
+        width: this.state.width || width,
+        height: this.state.height || height
+      };
 
-      if (this.props.className) {
-        className += ' ' + this.props.className;
-      }
-
       return (
@@ -141,11 +151,13 @@ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           'div',
-          {
+          _extends({
             role: 'button',
-            id: this.props.id,
-            disabled: this.props.disabled,
-            className: className,
+            disabled: disabled,
+            className: (0, _classnames2.default)('btn', 'toggle', className, sizeClass, (_cn = {}, _defineProperty(_cn, 'off btn-' + offstyle, !this.props.active), _defineProperty(_cn, 'btn-' + onstyle, this.props.active), _cn)),
             onClick: this.onClick,
-            style: style
-
-          },
+            style: Object.assign({}, s, style)
+          }, props, {
+            ref: function ref(c) {
+              _this2.parent = c;
+            }
+          }),
           _react2.default.createElement(
@@ -160,6 +172,6 @@ 'div',
                 },
-                className: onStyleClass,
-                disabled: this.props.disabled
+                className: (0, _classnames2.default)('btn toggle-on', sizeClass, onClassName, _defineProperty({}, 'btn-' + onstyle, onstyle)),
+                disabled: disabled
               },
-              this.props.on
+              on
             ),
@@ -172,8 +184,11 @@ _react2.default.createElement(
                 },
-                className: offStyleClass,
-                disabled: this.props.disabled
+                className: (0, _classnames2.default)('btn toggle-off', sizeClass, offClassName, _defineProperty({}, 'btn-' + offstyle, offstyle)),
+                disabled: disabled
               },
-              this.props.off
+              off
             ),
-            _react2.default.createElement('span', { disabled: this.props.disabled, className: 'toggle-handle btn btn-' + this.props.handlestyle + ' ' + sizeClass })
+            _react2.default.createElement('span', {
+              disabled: disabled,
+              className: (0, _classnames2.default)('toggle-handle btn', sizeClass, handleClassName, _defineProperty({}, 'btn-' + handlestyle, handlestyle))
+            })
           )
@@ -189,8 +204,15 @@ )
 ReactBootstrapToggle.propTypes = {
+  style: _propTypes2.default.shape(),
   // Holds the className for label one
   onstyle: _propTypes2.default.string,
+  // additional className for the on component
+  onClassName: _propTypes2.default.string,
   // Holds the className for label two
   offstyle: _propTypes2.default.string,
+  // additional className for the off component
+  offClassName: _propTypes2.default.string,
   // The className for the handle
   handlestyle: _propTypes2.default.string,
+  // additional className for the handle component
+  handleClassName: _propTypes2.default.string,
   // Height prop
@@ -211,3 +233,2 @@ height: eitherStringOrInteger,
   onClick: _propTypes2.default.func,
-  id: _propTypes2.default.string,
   className: _propTypes2.default.string
@@ -225,4 +246,5 @@ };
   size: 'normal',
-  active: true
+  active: true,
+  style: {}
 };
 exports.default = ReactBootstrapToggle;

dist/utils.js

@@ -36,4 +36,4 @@ 'use strict';
 
-var compareWithMarginOfError = exports.compareWithMarginOfError = function compareWithMarginOfError(num1, num2) {
-  return Math.abs(num1 - num2) < 1.01;
+var compareWithMarginOfError = exports.compareWithMarginOfError = function compareWithMarginOfError(num1, num2, isSet) {
+  return isSet || Math.abs(num1 - num2) < 1.01;
 };
@@ -40,0 +40,0 @@

package.json

 {
   "name": "react-bootstrap-toggle",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A React version of the bootstrap-toggle without the JQuery dependency",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

readme.md

@@ -76,7 +76,7 @@ ## React-Bootstrap-Toggle
 onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-onstyleClassName|string|"primary"| additional classname to put on the on button
+onClassName|string|"primary"| additional classname to put on the on button
 offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-offstyleClassName|string|"primary"| additional classname to put on the off button
+offClassName|string|"primary"| additional classname to put on the off button
 handlestyle|string|"default"|Style of the handle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-handlestyleClassName|string|"primary"| additional classname to put on the handle button
+handleClassName|string|"primary"| additional classname to put on the handle button
 width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be responsive.
@@ -83,0 +83,0 @@ height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be responsive.

src/react-bootstrap-toggle.jsx

@@ -17,11 +17,11 @@ import React, { Component } from 'react';
     // additional className for the on component
-    onstyleClassName: PropTypes.string,
+    onClassName: PropTypes.string,
     // Holds the className for label two
     offstyle: PropTypes.string,
     // additional className for the off component
-    offstyleClassName: PropTypes.string,
+    offClassName: PropTypes.string,
     // The className for the handle
     handlestyle: PropTypes.string,
     // additional className for the handle component
-    handlestyleClassName: PropTypes.string,
+    handleClassName: PropTypes.string,
     // Height prop
@@ -163,3 +163,3 @@ height: eitherStringOrInteger,
               sizeClass,
-              onstyleClassName, {
+              onClassName, {
                 [`btn-${onstyle}`]: onstyle,
@@ -176,3 +176,3 @@ })}
               sizeClass,
-              offstyleClassName, {
+              offClassName, {
                 [`btn-${offstyle}`]: offstyle,
@@ -189,3 +189,3 @@ })}
               sizeClass,
-              handlestyleClassName, {
+              handleClassName, {
                 [`btn-${handlestyle}`]: handlestyle,
@@ -192,0 +192,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

40958

increased by4.6%

Lines of code

956

increased by1.92%

No dependency changes