react-bootstrap-toggle - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

package.json

 {
   "name": "react-bootstrap-toggle",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A React version of the bootstrap-toggle without the JQuery dependency",
@@ -35,2 +35,3 @@ "main": "./dist/index.js",
     "babel-runtime": "^6.23.0",
+    "css-loader": "^0.28.7",
     "enzyme": "^2.6.0",
@@ -47,2 +48,3 @@ "eslint": "^3.15.0",
     "sinon": "^1.17.6",
+    "style-loader": "^0.19.0",
     "webpack": "^2.2.1",
@@ -49,0 +51,0 @@ "webpack-dev-server": "^2.3.0"

readme.md

@@ -76,4 +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
 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
 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
 width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be responsive.
@@ -80,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

@@ -16,6 +16,12 @@ import React, { Component } from 'react';
     onstyle: PropTypes.string,
+    // additional className for the on component
+    onstyleClassName: PropTypes.string,
     // Holds the className for label two
     offstyle: PropTypes.string,
+    // additional className for the off component
+    offstyleClassName: PropTypes.string,
     // The className for the handle
     handlestyle: PropTypes.string,
+    // additional className for the handle component
+    handlestyleClassName: PropTypes.string,
     // Height prop
@@ -89,4 +95,4 @@ height: eitherStringOrInteger,
     const areAlmostTheSame = (
-      util.compareWithMarginOfError(this.state.width, width) &&
-        util.compareWithMarginOfError(this.state.height, height)
+      util.compareWithMarginOfError(this.state.width, width, this.props.width,) &&
+        util.compareWithMarginOfError(this.state.height, height, this.props.height)
     );
@@ -117,4 +123,7 @@
       onstyle,
+      onstyleClassName,
       offstyle,
+      offstyleClassName,
       handlestyle,
+      handlestyleClassName,
       style,
@@ -153,3 +162,8 @@ on,
             ref={(onLabel) => { this.on = onLabel; }}
-            className={cn('btn', 'toggle-on', sizeClass, `btn-${onstyle}`)}
+            className={cn(
+              'btn toggle-on',
+              sizeClass,
+              onstyleClassName, {
+                [`btn-${onstyle}`]: onstyle,
+              })}
             disabled={disabled}
@@ -161,3 +175,8 @@ >
             ref={(offLabel) => { this.off = offLabel; }}
-            className={cn('btn', 'toggle-off', sizeClass, `btn-${offstyle}`)}
+            className={cn(
+              'btn toggle-off',
+              sizeClass,
+              offstyleClassName, {
+                [`btn-${offstyle}`]: offstyle,
+              })}
             disabled={disabled}
@@ -169,5 +188,8 @@ >
             disabled={disabled}
-            className={cn('toggle-handle', 'btn', sizeClass,
-              { [`btn-${handlestyle}`]: handlestyle })
-            }
+            className={cn(
+              'toggle-handle btn',
+              sizeClass,
+              handlestyleClassName, {
+                [`btn-${handlestyle}`]: handlestyle,
+              })}
           />
@@ -174,0 +196,0 @@ </div>

src/utils.js

@@ -31,4 +31,4 @@ const PADDING = {
 
-export const compareWithMarginOfError = (num1, num2) =>
-  Math.abs(num1 - num2) < 1.01;
+export const compareWithMarginOfError = (num1, num2, isSet) =>
+  (isSet || Math.abs(num1 - num2) < 1.01);
 
@@ -35,0 +35,0 @@ export const getDimension = (node) => {

webpack.config.js

@@ -9,3 +9,3 @@ const path =  require('path');
   'react-hot-loader/patch',
-  './example.jsx',
+  './examples/onClick.jsx',
 ];
@@ -48,2 +48,6 @@
       exclude: /node_modules/,
+    },
+    {
+      test: /.css$/,
+      loader: 'style-loader!css-loader',
     }],
@@ -50,0 +54,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

39155

increased by3.08%

Lines of code

938

increased by2.85%

Number of lines in readme file

105

increased by2.94%

Worsened metrics

Dev dependency count

25

increased by8.7%

No dependency changes