Merge pull request #6 from coreui/dev-switch

feat: add switch component

Author: xidedix

demo/src/scss/_custom.scss

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "CoreUI React Bootstrap 4 components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,13 +20,13 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.6",
-    "bootstrap": "4.0.0",
+    "@coreui/coreui": "^2.0.0-beta.9",
+    "bootstrap": "^4.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "react-perfect-scrollbar": "^1.0.5",
+    "react-perfect-scrollbar": "^1.1.1",
     "react-router-dom": "^4.2.2",
     "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
@@ -35,15 +35,15 @@
     "react": "16.x"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-react": "^7.7.0",
-    "nwb": "0.21.x",
-    "react": "^16.3.1",
-    "react-dom": "^16.3.1",
+    "nwb": "^0.21.5",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "sinon": "^4.5.0"
   },
   "author": "Łukasz Holeczek",

demo/src/scss/_variables.scss

@@ -23,9 +23,9 @@ class AppHeader extends Component {
     if (fixed) { document.body.classList.add('header-fixed'); }
   }
 
-  breakpoint(breakpoint) {
-    return breakpoint || '';
-  }
+  // breakpoint(breakpoint) {
+  //   return breakpoint || '';
+  // }
 
   render() {
     const { className, children, fixed, tag: Tag, ...attributes } = this.props;

demo/src/scss/style.css

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const propTypes = {
+  color: PropTypes.string,
+  label: PropTypes.bool,
+  outline: PropTypes.bool,
+  outlineAlt: PropTypes.bool,
+  pill: PropTypes.bool,
+  size: PropTypes.string,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  defaultValue: PropTypes.any,
+  disabled: PropTypes.bool,
+  form: PropTypes.any,
+  indeterminate: PropTypes.any,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  type: PropTypes.string,
+  value: PropTypes.string,
+  className: PropTypes.string,
+  dataOn: PropTypes.string,
+  dataOff: PropTypes.string,
+};
+
+const defaultProps = {
+  color: 'secondary',
+  label: false,
+  outline: false,
+  outlineAlt: false,
+  pill: false,
+  size: '',
+  checked: false,
+  defaultChecked: false,
+  disabled: false,
+  required: false,
+  type: 'checkbox',
+  dataOn: 'On',
+  dataOff: 'Off',
+};
+
+class AppSwitch extends Component {
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      checked: this.props.defaultChecked || this.props.checked,
+    };
+  }
+
+  toggle(event) {
+    const target = event.target;
+    this.setState({
+      checked: target.checked,
+    });
+  }
+
+  render() {
+    const { className, checked, disabled, color, defaultChecked, name, label, outline, outlineAlt, pill, size, required, type, value, dataOn, dataOff, ...attributes } = this.props;
+
+    const outlined = outline || outlineAlt;
+
+    const variant = `switch${outlined ? '-outline' : ''}-${color}${outlineAlt ? '-alt' : ''}`;
+
+    const classes = classNames(
+      className,
+      'switch',
+      label ? 'switch-label' : false,
+      pill ? 'switch-pill' : false,
+      size ? `switch-${size}` : false,
+      variant,
+      'form-check-label',
+    );
+
+    const inputClasses = classNames(
+      'switch-input',
+      'form-check-input',
+    );
+
+    const sliderClasses = classNames(
+      'switch-slider',
+    );
+
+    return (
+      <label className={classes}>
+        <input type={type} className={inputClasses} onChange={this.toggle} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} />
+        <span className={sliderClasses} data-checked={dataOn} data-unchecked={dataOff}></span>
+      </label>
+    );
+  }
+}
+
+AppSwitch.propTypes = propTypes;
+AppSwitch.defaultProps = defaultProps;
+
+export default AppSwitch;

demo/src/scss/style.scss

@@ -12,4 +12,5 @@ export AppSidebarHeader from './SidebarHeader';
 export AppSidebarMinimizer from './SidebarMinimizer';
 export AppSidebarNav from './SidebarNav';
 export AppSidebarToggler from './SidebarToggler';
+export AppSwitch from './Switch';
 export AppLayout from './Shared';

demo/src/scss/vendors/_variables.scss

@@ -0,0 +1,28 @@
+import expect from 'expect'
+import React from 'react'
+import {renderToStaticMarkup as render} from 'react-dom/server'
+
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import { spy } from 'sinon'
+
+import AppSwitch from 'src/Switch'
+
+configure({ adapter: new Adapter() });
+
+describe('AppSwitch', () => {
+  it('renders label with class="switch"', () => {
+    expect(render(<AppSwitch />))
+    .toContain('<label class="switch')
+  });
+  it('should call toggle', () => {
+    const onChange = spy(AppSwitch.prototype, 'toggle');
+    const event = {target: { checked: true }};
+    const wrapper = mount(<AppSwitch outlineAlt label pill size="lg" />);
+    expect(wrapper.find('input').props().checked).toBe(false);
+    wrapper.find('input').simulate('change', event)
+    expect(onChange.called).toBe(true);
+    expect(wrapper.find('input').props().checked).toBe(true);
+
+  })
+})