From b76c423ce50c32b321347d26e64a1e1f951a0ff7 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 17:08:37 +0200 Subject: [PATCH 1/4] chore: cleanup --- CONTRIBUTING.md => NWB.md | 0 demo/src/index.js | 2 +- package.json | 10 +++++++--- src/Shared/layout/layout.js | 2 +- src/SidebarMinimizer.js | 8 ++------ 5 files changed, 11 insertions(+), 11 deletions(-) rename CONTRIBUTING.md => NWB.md (100%) diff --git a/CONTRIBUTING.md b/NWB.md similarity index 100% rename from CONTRIBUTING.md rename to NWB.md diff --git a/demo/src/index.js b/demo/src/index.js index dc88c24b..bd196a99 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM, { render } from 'react-dom'; +import ReactDOM from 'react-dom'; import App from './App'; // import registerServiceWorker from './registerServiceWorker'; diff --git a/package.json b/package.json index ee82e479..a2f8dee9 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "css/", "es/", "lib/", - "umd/" + "umd/", + "README.md" ], "scripts": { "build": "nwb build-react-component", @@ -20,7 +21,7 @@ "lint": "eslint src" }, "dependencies": { - "@coreui/coreui": "^2.0.0-beta.9", + "@coreui/coreui": "^2.0.0-beta.10", "bootstrap": "^4.1.0", "classnames": "^2.2.5", "prop-types": "^15.6.1", @@ -61,6 +62,9 @@ "react", "bootstrap", "framework", - "responsive" + "responsive", + "layout", + "component", + "components" ] } diff --git a/src/Shared/layout/layout.js b/src/Shared/layout/layout.js index ec33f475..01d5f7ad 100644 --- a/src/Shared/layout/layout.js +++ b/src/Shared/layout/layout.js @@ -1,4 +1,4 @@ -import { ToggleClasses } from '../toggle-classes'; +// import { toggleClasses } from '../toggle-classes'; class Layout { static sidebarToggle() { diff --git a/src/SidebarMinimizer.js b/src/SidebarMinimizer.js index 96f817fc..c3670090 100644 --- a/src/SidebarMinimizer.js +++ b/src/SidebarMinimizer.js @@ -20,9 +20,7 @@ class AppSidebarMinimizer extends Component { this.handleClick = this.handleClick.bind(this); } - sidebarMinimize(e) { - // e.preventDefault(); - + sidebarMinimize() { document.body.classList.toggle('sidebar-minimized'); const sidebar = document.querySelector('.sidebar-nav') if (sidebar) { @@ -31,9 +29,7 @@ class AppSidebarMinimizer extends Component { } } - brandMinimize(e) { - // e.preventDefault(); - + brandMinimize() { document.body.classList.toggle('brand-minimized'); } From 3f9c17cca4ec5c204efc71cde64cd73b16335df2 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 17:09:48 +0200 Subject: [PATCH 2/4] refactor: delete unused attributes --- src/Aside.js | 8 +++++++- src/AsideToggler.js | 12 ++++++++---- src/Breadcrumb.js | 6 +++++- src/Footer.js | 4 +++- src/Header.js | 4 +++- src/Sidebar.js | 10 +++++++++- src/SidebarNav.js | 6 +++++- src/SidebarToggler.js | 5 ++++- 8 files changed, 44 insertions(+), 11 deletions(-) diff --git a/src/Aside.js b/src/Aside.js index df7134fd..669ae98b 100644 --- a/src/Aside.js +++ b/src/Aside.js @@ -62,7 +62,13 @@ class AppAside extends Component { } render() { - const { className, children, display, fixed, hidden, offCanvas, isOpen, tag: Tag, ...attributes } = this.props; + const { className, children, tag: Tag, ...attributes } = this.props; + + delete attributes.display + delete attributes.fixed + delete attributes.hidden + delete attributes.offCanvas + delete attributes.isOpen const classes = classNames(className, 'aside-menu'); diff --git a/src/AsideToggler.js b/src/AsideToggler.js index 38125692..7a3da07c 100644 --- a/src/AsideToggler.js +++ b/src/AsideToggler.js @@ -45,19 +45,23 @@ class AppAsideToggler extends Component { } render() { - const { className, children, mobile, tag: Tag, display, ...attributes } = this.props; + const { className, children, type, tag: Tag, ...attributes } = this.props; + + delete attributes.display + delete attributes.mobile + delete attributes.display const classes = classNames(className, 'navbar-toggler'); return ( - + ); } } diff --git a/src/Breadcrumb.js b/src/Breadcrumb.js index b37e271f..cacf94e3 100644 --- a/src/Breadcrumb.js +++ b/src/Breadcrumb.js @@ -82,7 +82,11 @@ class AppBreadcrumb extends Component { } render() { - const { className, children, appRoutes, tag: Tag, ...attributes } = this.props; + const { className, tag: Tag, ...attributes } = this.props; + + delete attributes.children + delete attributes.appRoutes + const classes = classNames(className); return ( diff --git a/src/Footer.js b/src/Footer.js index c6515cc0..b139162c 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -30,7 +30,9 @@ class AppFooter extends Component { } render() { - const { className, children, fixed, tag: Tag, ...attributes } = this.props; + const { className, children, tag: Tag, ...attributes } = this.props; + + delete attributes.fixed const classes = classNames(className, 'app-footer'); diff --git a/src/Header.js b/src/Header.js index 939e8b13..e7ee43af 100644 --- a/src/Header.js +++ b/src/Header.js @@ -28,7 +28,9 @@ class AppHeader extends Component { // } render() { - const { className, children, fixed, tag: Tag, ...attributes } = this.props; + const { className, children, tag: Tag, ...attributes } = this.props; + + delete attributes.fixed const classes = classNames(className, 'app-header', 'navbar'); diff --git a/src/Sidebar.js b/src/Sidebar.js index 155078b7..6896522f 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -71,7 +71,15 @@ class AppSidebar extends Component { } render() { - const { className, children, compact, display, fixed, minimized, offCanvas, isOpen, tag: Tag, staticContext, ...attributes } = this.props; + const { className, children, tag: Tag, ...attributes } = this.props; + + delete attributes.compact + delete attributes.display + delete attributes.fixed + delete attributes.minimized + delete attributes.offCanvas + delete attributes.isOpen + delete attributes.staticContext const classes = classNames(className, 'sidebar'); diff --git a/src/SidebarNav.js b/src/SidebarNav.js index 34d801ae..0e5aea1b 100644 --- a/src/SidebarNav.js +++ b/src/SidebarNav.js @@ -165,7 +165,11 @@ class AppSidebarNav extends Component { } render() { - const { className, children, isOpen, tag: Tag, navConfig, staticContext, ...attributes } = this.props; + const { className, children, navConfig, ...attributes } = this.props; + + delete attributes.isOpen + delete attributes.staticContext + delete attributes.Tag const navClasses = classNames(className, 'sidebar-nav'); diff --git a/src/SidebarToggler.js b/src/SidebarToggler.js index b6847a79..3d8f74b7 100644 --- a/src/SidebarToggler.js +++ b/src/SidebarToggler.js @@ -43,7 +43,10 @@ class AppSidebarToggler extends Component { } render() { - const { className, children, mobile, tag: Tag, display, ...attributes } = this.props; + const { className, children, tag: Tag, ...attributes } = this.props; + + delete attributes.mobile + delete attributes.display const classes = classNames(className, 'navbar-toggler'); From 4efd464bfd53f17afe6987bb46eb794da68b7972 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 17:10:25 +0200 Subject: [PATCH 3/4] refactor: Switch api --- src/Switch.js | 45 ++++++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/src/Switch.js b/src/Switch.js index 1eaac851..7df81d54 100644 --- a/src/Switch.js +++ b/src/Switch.js @@ -5,20 +5,23 @@ import classNames from 'classnames'; const propTypes = { color: PropTypes.string, label: PropTypes.bool, - outline: PropTypes.bool, - outlineAlt: PropTypes.bool, - pill: PropTypes.bool, - size: PropTypes.string, + outline: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.string, + PropTypes.oneOf(['', 'alt']) + ]), + size: PropTypes.oneOf(['', 'lg', 'sm']), checked: PropTypes.bool, defaultChecked: PropTypes.bool, defaultValue: PropTypes.any, + value: PropTypes.string, disabled: PropTypes.bool, form: PropTypes.any, - indeterminate: PropTypes.any, name: PropTypes.string, required: PropTypes.bool, - type: PropTypes.string, - value: PropTypes.string, + onChange: PropTypes.func, + type: PropTypes.oneOf(['checkbox', 'radio']), + variant: PropTypes.oneOf(['', '3d', 'pill']), className: PropTypes.string, dataOn: PropTypes.string, dataOff: PropTypes.string, @@ -28,14 +31,13 @@ const defaultProps = { color: 'secondary', label: false, outline: false, - outlineAlt: false, - pill: false, size: '', checked: false, defaultChecked: false, disabled: false, required: false, type: 'checkbox', + variant: '', dataOn: 'On', dataOff: 'Off', }; @@ -43,33 +45,38 @@ const defaultProps = { class AppSwitch extends Component { constructor(props) { super(props); - this.toggle = this.toggle.bind(this); + this.onChange = this.onChange.bind(this); this.state = { checked: this.props.defaultChecked || this.props.checked, + selected: [] }; } - toggle(event) { + onChange(event) { const target = event.target; this.setState({ checked: target.checked, - }); + }) + + if (this.props.onChange) { + this.props.onChange(event); + } } 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 { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props; - const variant = `switch${outlined ? '-outline' : ''}-${color}${outlineAlt ? '-alt' : ''}`; + delete attributes.checked + delete attributes.defaultChecked + delete attributes.onChange const classes = classNames( className, 'switch', label ? 'switch-label' : false, - pill ? 'switch-pill' : false, size ? `switch-${size}` : false, - variant, + variant ? `switch-${variant}` : false, + `switch${outline ? '-outline' : ''}-${color}${outline==='alt' ? '-alt' : ''}`, 'form-check-label', ); @@ -84,7 +91,7 @@ class AppSwitch extends Component { return ( ); From 8bf613a42a13c7bff643005ef1fcdbee3c369539 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 17:11:07 +0200 Subject: [PATCH 4/4] tests: more coverage --- tests/Aside.test.js | 16 +++++++-- tests/Footer.test.js | 10 ++++-- tests/Header.test.js | 10 ++++-- tests/NavbarBrand.test.js | 9 +++++ tests/Sidebar.test.js | 7 +++- tests/SidebarFooter.test.js | 6 +++- tests/SidebarForm.test.js | 6 +++- tests/SidebarHeader.test.js | 6 +++- tests/Switch.test.js | 68 +++++++++++++++++++++++++++++++------ 9 files changed, 116 insertions(+), 22 deletions(-) diff --git a/tests/Aside.test.js b/tests/Aside.test.js index 17ae37ef..15e32696 100644 --- a/tests/Aside.test.js +++ b/tests/Aside.test.js @@ -2,7 +2,7 @@ import expect from 'expect' import React from 'react' import {renderToStaticMarkup as render} from 'react-dom/server' -import { configure, mount } from 'enzyme' +import { configure, mount, shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import { spy } from 'sinon' @@ -12,7 +12,7 @@ configure({ adapter: new Adapter() }); describe('AppAside', () => { it('renders aside with class="aside-menu"', () => { - expect(render()) + expect(render()) .toContain('') }); it('calls componentDidMount', () => { @@ -21,4 +21,14 @@ describe('AppAside', () => { const wrapper = mount(