Merge pull request #66 from coreui/dev-v2

v2.0.0-beta.1

Author: xidedix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,8 +12,8 @@
     "url": "[email protected]:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.8",
-    "@coreui/react": "^2.0.0-beta",
+    "@coreui/coreui": "^2.0.0-beta.10",
+    "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",

src/containers/Full/FullAside.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
+import { Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { AppSwitch } from '@coreui/react'
 
 const propTypes = {
   children: PropTypes.node,
@@ -239,11 +240,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-4">
                 <small><b>Option 1</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -255,11 +252,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 2</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -271,22 +264,17 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 3</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
+                <div>
+                  <small className="text-muted">Option disabled.</small>
+                </div>
               </div>
             </div>
 
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 4</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
               </div>
             </div>
 

src/routes.js

@@ -44,7 +44,7 @@ const routes = [
   { path: '/base', exact: true, name: 'Base', component: Cards },
   { path: '/base/cards', name: 'Cards', component: Cards },
   { path: '/base/forms', name: 'Forms', component: Forms },
-  { path: '/base/switches', name: 'Swithces', component: Switches },
+  { path: '/base/switches', name: 'Switches', component: Switches },
   { path: '/base/tables', name: 'Tables', component: Tables },
   { path: '/base/tabs', name: 'Tabs', component: Tabs },
   { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },