react-bootstrap-toggle - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

dist/react-bootstrap-toggle.js

@@ -13,3 +13,3 @@ 'use strict';
 
-var _utils = require('./utils.js');
+var _utils = require('./utils');
 
@@ -90,5 +90,5 @@ var util = _interopRequireWildcard(_utils);
     value: function getSizeClass() {
-      if (this.props.size === 'large') return 'btn-lg';
-      if (this.props.size === 'small') return 'btn-sm';
-      if (this.props.size === 'mini') return 'btn-xs';
+      if (this.props.size === 'lg') return 'btn-lg';
+      if (this.props.size === 'sm') return 'btn-sm';
+      if (this.props.size === 'xs') return 'btn-xs';
       return 'btn-md';
@@ -121,34 +121,39 @@ }
       }
-      return _react2.default.createElement(
-        'div',
-        {
-          disabled: this.props.disabled,
-          className: this.props.active ? activeClass : inactiveClass,
-          onClick: this.onClick,
-          style: style
-        },
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         _react2.default.createElement(
           'div',
-          { className: 'toggle-group' },
+          {
+            role: 'button',
+            disabled: this.props.disabled,
+            className: this.props.active ? activeClass : inactiveClass,
+            onClick: this.onClick,
+            style: style
+
+          },
           _react2.default.createElement(
-            'span',
-            {
-              ref: function ref(onLabel) {
-                _this2.on = onLabel;
+            'div',
+            { className: 'toggle-group' },
+            _react2.default.createElement(
+              'span',
+              {
+                ref: function ref(onLabel) {
+                  _this2.on = onLabel;
+                },
+                className: onStyleClass
               },
-              className: onStyleClass
-            },
-            this.props.on
-          ),
-          _react2.default.createElement(
-            'span',
-            {
-              ref: function ref(offLabel) {
-                _this2.off = offLabel;
+              this.props.on
+            ),
+            _react2.default.createElement(
+              'span',
+              {
+                ref: function ref(offLabel) {
+                  _this2.off = offLabel;
+                },
+                className: offStyleClass
               },
-              className: offStyleClass
-            },
-            this.props.off
-          ),
-          _react2.default.createElement('span', { className: 'toggle-handle btn btn-default ' + sizeClass })
+              this.props.off
+            ),
+            _react2.default.createElement('span', { className: 'toggle-handle btn btn-' + this.props.handlestyle + ' ' + sizeClass })
+          )
         )
@@ -167,2 +172,4 @@ );
   offstyle: _react.PropTypes.string,
+  // The className for the handle
+  handlestyle: _react.PropTypes.string,
   // Height prop
@@ -187,2 +194,3 @@ height: _react.PropTypes.string,
   offstyle: 'default',
+  handlestyle: 'default',
   width: '',
@@ -196,5 +204,2 @@ height: '',
 };
-exports.default = ReactBootstrapToggle;
-
-
-;
+exports.default = ReactBootstrapToggle;

dist/react-bootstrap2-toggle.js

@@ -25,2 +25,5 @@ 'use strict';
 
+/**
+ * Exports the component with bootstrap 2 style names
+ */
 var ReactBootstrap2Toggle = function (_Toggle) {
@@ -27,0 +30,0 @@ _inherits(ReactBootstrap2Toggle, _Toggle);

example.jsx

@@ -28,4 +28,5 @@ import React from 'react';
           off="qwerqrwe12341234"
+          handlestyle="warning"
           onClick={this.onClick}
-          size="mini"
+          size="xs"
         />
@@ -32,0 +33,0 @@ </div>

package.json

 {
   "name": "react-bootstrap-toggle",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A React version of the bootstrap-toggle without the JQuery dependency",
@@ -15,4 +15,5 @@ "main": "./dist/index.js",
     "start": "webpack-dev-server --inline --hot",
-    "coveralls": "jet --coverage | coveralls",
-    "build": "babel src -d dist"
+    "coveralls": "jest --coverage | coveralls",
+    "build": "babel src -d dist",
+    "uglify": "uglifyjs-folder js -eo dist"
   },
@@ -25,10 +26,14 @@ "keywords": [
   "devDependencies": {
-    "babel-core": "^6.20.0",
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.8",
+    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
+    "babel-runtime": "^6.23.0",
     "enzyme": "^2.6.0",
-    "eslint": "^3.11.1",
+    "eslint": "^3.15.0",
     "eslint-config-airbnb": "^13.0.0",
@@ -41,5 +46,6 @@ "eslint-loader": "^1.6.1",
     "react-addons-test-utils": "^15.4.1",
+    "react-hot-loader": "^3.0.0-beta.6",
     "sinon": "^1.17.6",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
   },
@@ -46,0 +52,0 @@ "dependencies": {

readme.md

@@ -28,3 +28,3 @@ ## React-Bootstrap-Toggle
 
-class Form extends Componentn {
+class Form extends Component {
   constructor() {
@@ -43,3 +43,3 @@ super();
       <form>
-        <SomeInput something={true} />
+        <SomeInput something={someProp} />
         .....
@@ -50,3 +50,3 @@ <Toggle
           off={<h2>OFF</h2>}
-          size="large"
+          size="xs"
           offstyle="danger"
@@ -77,7 +77,8 @@ active={this.state.toggleActive}
 off|string/html|"Off"|Text of the off toggle
-size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`.
+size|string|*null*|Size of the toggle. Possible values are `lg`, `sm`, `xs`.
 onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
 offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
-width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated.
-height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated.
+handlestyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
+width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be responsive.
+height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be responsive.
 onClick|function|*null*|A Callback that returns the current state of the toggle
@@ -93,2 +94,8 @@
 
+### Bootstrap2Toggle Props
+Name|Type|Default|Description|
+---|---|---|---
+size|string|*null*|Size of the toggle. Possible values are `large`, `small`, `tiny`.
 
+
+

src/react-bootstrap-toggle.jsx

 import React, { Component, PropTypes } from 'react';
-import * as util from './utils.js';
+import * as util from './utils';
 
@@ -10,2 +10,4 @@ export default class ReactBootstrapToggle extends Component {
     offstyle: PropTypes.string,
+    // The className for the handle
+    handlestyle: PropTypes.string,
     // Height prop
@@ -31,2 +33,3 @@ height: PropTypes.string,
     offstyle: 'default',
+    handlestyle: 'default',
     width: '',
@@ -94,5 +97,5 @@ height: '',
   getSizeClass() {
-    if (this.props.size === 'large') return 'btn-lg';
-    if (this.props.size === 'small') return 'btn-sm';
-    if (this.props.size === 'mini') return 'btn-xs';
+    if (this.props.size === 'lg') return 'btn-lg';
+    if (this.props.size === 'sm') return 'btn-sm';
+    if (this.props.size === 'xs') return 'btn-xs';
     return 'btn-md';
@@ -123,3 +126,5 @@ }
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
+        role="button"
         disabled={this.props.disabled}
@@ -129,2 +134,3 @@ className={this.props.active ? activeClass : inactiveClass}
         style={style}
+
       >
@@ -144,3 +150,3 @@ <div className="toggle-group">
           </span>
-          <span className={`toggle-handle btn btn-default ${sizeClass}`} />
+          <span className={`toggle-handle btn btn-${this.props.handlestyle} ${sizeClass}`} />
         </div>
@@ -151,6 +157,1 @@ </div>
 }
-
-
-
-;
-

src/react-bootstrap2-toggle.jsx

 import React from 'react';
 import Toggle from './react-bootstrap-toggle';
-
+/**
+ * Exports the component with bootstrap 2 style names
+ */
 export default class ReactBootstrap2Toggle extends Toggle {
@@ -5,0 +7,0 @@ getSizeClass() {

webpack.config.js

 const path =  require('path');
 const webpack = require('webpack');
 
+const NODE_ENV = process.env.NODE_ENV || 'development';
+const DEV = NODE_ENV !== 'production';
+
+const devE = [
+  'react-hot-loader/patch',
+  './example.jsx',
+];
+
+const prodE = {
+  main: './src/index.jsx',
+  vendors: ['react', 'react-dom'],
+};
+
+const minimize = new webpack.optimize.UglifyJsPlugin({
+  compress: { screw_ie8: true, warnings: false },
+  output: { comments: false },
+  sourceMap: false,
+});
+
 module.exports = {
   devtool: 'eval-source-map',
-  entry: './example.jsx',
+  entry: DEV ? devE : prodE,
   output: {
     path: __dirname,
-    filename: './index.js',
+    filename: './dist/index.js',
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
+    modules: [
+      'node_modules',
+    ],
   },
   module: {
-    preLoaders: [{
+    rules: [{
+      enforce: 'pre',
       test: /\.jsx?$/,
-      loaders: ['eslint'],
+      loaders: 'eslint-loader',
       exclude: '/node_modules/',
-    }],
-    loaders: [{
+    },
+    {
       test: /.jsx?$/,
@@ -26,2 +49,3 @@ loader: 'babel-loader',
   },
+  plugins: !DEV ? [minimize] : [],
 };

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

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

37250

increased by10.93%

Number of package files

23

increased by4.55%

Lines of code

891

increased by7.35%

Number of lines in readme file

97

increased by7.78%

Worsened metrics

Dev dependency count

23

increased by27.78%

Number of low license alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes