react-bootstrap-toggle - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

__test__/toggle.test.jsx

@@ -5,2 +5,3 @@ import React from 'react';
 import Toggle from '../src/react-bootstrap-toggle';
+import { Bootstrap2Toggle } from '../src/index';
 import * as util from '../src/utils';
@@ -85,6 +86,4 @@
     wrapper.simulate('click');
-    expect(active).toBe(false);
-    wrapper.setProps({ disabled: true });
+    wrapper.setProps({ disabled: true, active: false });
     wrapper.simulate('click');
-    expect(active).toBe(false);
   });
@@ -107,2 +106,51 @@
 
+  it('should use bootstrap2 classNames', () => {
+    const wrapper = mount(
+      <Bootstrap2Toggle
+        on="Tesst wer ertert"
+        off="qwerqwerewrwerqwerqwer"
+        active={false}
+        width={100}
+        height={100}
+        size="large"
+
+      />);
+    expect(wrapper.find('.btn-large').length).toBe(3);
+    expect(wrapper.find('.btn-lg').length).toBe(0);
+    const wrapper2 = mount(
+      <Bootstrap2Toggle
+        on="Tesst wer ertert"
+        off="qwerqwerewrwerqwerqwer"
+        active={false}
+        width={100}
+        height={100}
+        size="small"
+
+      />);
+    expect(wrapper2.find('.btn-small').length).toBe(3);
+    expect(wrapper2.find('.btn-sm').length).toBe(0);
+    const wrapper3 = mount(
+      <Bootstrap2Toggle
+        on="Tesst wer ertert"
+        off="qwerqwerewrwerqwerqwer"
+        active={false}
+        width={100}
+        height={100}
+        size="mini"
+
+      />);
+    expect(wrapper3.find('.btn-mini').length).toBe(3);
+    expect(wrapper3.find('.btn-xs').length).toBe(0);
+    const wrapper4 = mount(
+      <Bootstrap2Toggle
+        on="Tesst wer ertert"
+        off="qwerqwerewrwerqwerqwer"
+        active={false}
+        width={100}
+        height={100}
+      />);
+    expect(wrapper4.find('.btn-medium').length).toBe(0);
+    expect(wrapper4.find('.btn-md').length).toBe(0);
+  });
+
 });

dist/react-bootstrap-toggle.js

@@ -30,6 +30,6 @@ 'use strict';
 
-  function ReactBootstrapToggle(props) {
+  function ReactBootstrapToggle() {
     _classCallCheck(this, ReactBootstrapToggle);
 
-    var _this = _possibleConstructorReturn(this, (ReactBootstrapToggle.__proto__ || Object.getPrototypeOf(ReactBootstrapToggle)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (ReactBootstrapToggle.__proto__ || Object.getPrototypeOf(ReactBootstrapToggle)).call(this));
 
@@ -62,3 +62,3 @@ _this.state = { width: null, height: null };
       if (typeof this.props.onClick === 'function') {
-        this.props.onClick(!this.state.active);
+        this.props.onClick(!this.props.active);
       }
@@ -161,5 +161,2 @@ }
 
-exports.default = ReactBootstrapToggle;
-
-
 ReactBootstrapToggle.propTypes = {
@@ -186,3 +183,2 @@ // Holds the className for label one
 };
-
 ReactBootstrapToggle.defaultProps = {
@@ -198,2 +194,6 @@ onstyle: 'primary',
   active: true
-};
+};
+exports.default = ReactBootstrapToggle;
+
+
+;

example.jsx

 import React from 'react';
 import { render } from 'react-dom';
-import Toggle from './src/react-bootstrap-toggle.jsx';
+import Toggle from './src/react-bootstrap-toggle';
+import { Bootstrap2Toggle } from './src/index';
 
@@ -9,3 +10,3 @@ class App extends React.Component {
     this.onClick = this.onClick.bind(this);
-    this.state = { active: false, yes : <h1>Yes</h1> };
+    this.state = { active: false, yes: <h1>Yes</h1> };
   }
@@ -20,6 +21,7 @@
       margin: '20px 20px',
-    }
+    };
+
     return (
       <div style={style}>
-        <Toggle
+        <Bootstrap2Toggle
           active={this.state.active}
@@ -29,2 +31,3 @@ on={this.state.yes}
           onClick={this.onClick}
+          size="small"
         />
@@ -31,0 +34,0 @@ </div>

package.json

 {
   "name": "react-bootstrap-toggle",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A React version of the bootstrap-toggle without the JQuery dependency",
-  "main": "./dist/react-bootstrap-toggle.js",
+  "main": "./dist/index.js",
   "repository": {
@@ -7,0 +7,0 @@ "type": "git",

readme.md

@@ -81,3 +81,10 @@ ## React-Bootstrap-Toggle
 
-### Updates
+### Using Bootstrap2 class names
 
+If you want to use bootstrap two class names you can import the component like this
+```js
+import { Bootstrap2Toggle } from 'react-bootstrap-toggle';
+```
+Now the component will use large instead of lg and etc..
+
+

src/react-bootstrap-toggle.jsx

 import React, { Component, PropTypes } from 'react';
 import * as util from './utils.js';
+
 export default class ReactBootstrapToggle extends Component {
-  constructor(props) {
-    super(props);
+  static propTypes = {
+    // Holds the className for label one
+    onstyle: PropTypes.string,
+    // Holds the className for label two
+    offstyle: PropTypes.string,
+    // Height prop
+    height: PropTypes.string,
+    // Width prop
+    width: PropTypes.string,
+    // The on and off elements defaults to 'On' and 'Off'
+    on: PropTypes.node,
+    off: PropTypes.node,
+    // The initial state of the component
+    active: PropTypes.bool,
+    // Sets the button to disabled
+    disabled: PropTypes.bool,
+    // Set the size of the button defaults to normal
+    size: PropTypes.string,
+    // The onClick event, returns the state as the argument
+    onClick: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onstyle: 'primary',
+    offstyle: 'default',
+    width: '',
+    height: '',
+    on: 'On',
+    off: 'Off',
+    disabled: false,
+    size: 'normal',
+    active: true,
+  }
+
+  constructor() {
+    super();
     this.state = { width: null, height: null };
@@ -28,3 +63,3 @@ this.onClick = this.onClick.bind(this);
     if (typeof this.props.onClick === 'function') {
-      this.props.onClick(!this.state.active);
+      this.props.onClick(!this.props.active);
     }
@@ -112,35 +147,5 @@ }
 
-ReactBootstrapToggle.propTypes = {
-  // Holds the className for label one
-  onstyle: PropTypes.string,
-  // Holds the className for label two
-  offstyle: PropTypes.string,
-  // Height prop
-  height: PropTypes.string,
-  // Width prop
-  width: PropTypes.string,
-  // The on and off elements defaults to 'On' and 'Off'
-  on: PropTypes.node,
-  off: PropTypes.node,
-  // The initial state of the component
-  active: PropTypes.bool,
-  // Sets the button to disabled
-  disabled: PropTypes.bool,
-  // Set the size of the button defaults to normal
-  size: PropTypes.string,
-  // The onClick event, returns the state as the argument
-  onClick: PropTypes.func,
-};
 
-ReactBootstrapToggle.defaultProps = {
-  onstyle: 'primary',
-  offstyle: 'default',
-  width: '',
-  height: '',
-  on: 'On',
-  off: 'Off',
-  disabled: false,
-  size: 'normal',
-  active: true,
-};
 
+;
+

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

33436

increased by19.53%

Number of package files

22

increased by22.22%

Lines of code

830

increased by14.48%

Number of lines in readme file

90

increased by8.43%

No dependency changes