Skip to content

Commit 7807197

Browse files
xidedixxidedix
authoredApr 19, 2018
Merge pull request #7 from coreui/dev-beta-1
ship: v2.0.0-beta.1
v2(#7)+
·
v2.5.83.0.0-rc.2
2 parents 97a493e + 8bf613a commit 7807197

23 files changed

+197
-63
lines changed
 

‎CONTRIBUTING.md ‎NWB.md

File renamed without changes.

‎demo/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM, { render } from 'react-dom';
2+
import ReactDOM from 'react-dom';
33
import App from './App';
44
// import registerServiceWorker from './registerServiceWorker';
55

‎package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"css/",
99
"es/",
1010
"lib/",
11-
"umd/"
11+
"umd/",
12+
"README.md"
1213
],
1314
"scripts": {
1415
"build": "nwb build-react-component",
@@ -20,7 +21,7 @@
2021
"lint": "eslint src"
2122
},
2223
"dependencies": {
23-
"@coreui/coreui": "^2.0.0-beta.9",
24+
"@coreui/coreui": "^2.0.0-beta.10",
2425
"bootstrap": "^4.1.0",
2526
"classnames": "^2.2.5",
2627
"prop-types": "^15.6.1",
@@ -61,6 +62,9 @@
6162
"react",
6263
"bootstrap",
6364
"framework",
64-
"responsive"
65+
"responsive",
66+
"layout",
67+
"component",
68+
"components"
6569
]
6670
}

‎src/Aside.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,13 @@ class AppAside extends Component {
6262
}
6363

6464
render() {
65-
const { className, children, display, fixed, hidden, offCanvas, isOpen, tag: Tag, ...attributes } = this.props;
65+
const { className, children, tag: Tag, ...attributes } = this.props;
66+
67+
delete attributes.display
68+
delete attributes.fixed
69+
delete attributes.hidden
70+
delete attributes.offCanvas
71+
delete attributes.isOpen
6672

6773
const classes = classNames(className, 'aside-menu');
6874

‎src/AsideToggler.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,23 @@ class AppAsideToggler extends Component {
4545
}
4646

4747
render() {
48-
const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
48+
const { className, children, type, tag: Tag, ...attributes } = this.props;
49+
50+
delete attributes.display
51+
delete attributes.mobile
52+
delete attributes.display
4953

5054
const classes = classNames(className, 'navbar-toggler');
5155

5256
return (
53-
<button
54-
type="button"
57+
<Tag
58+
type={type}
5559
className={classes}
5660
{...attributes}
5761
onClick={(event)=>this.asideToggle(event)}
5862
>
5963
{children || <span className="navbar-toggler-icon" />}
60-
</button>
64+
</Tag>
6165
);
6266
}
6367
}

‎src/Breadcrumb.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,11 @@ class AppBreadcrumb extends Component {
8282
}
8383

8484
render() {
85-
const { className, children, appRoutes, tag: Tag, ...attributes } = this.props;
85+
const { className, tag: Tag, ...attributes } = this.props;
86+
87+
delete attributes.children
88+
delete attributes.appRoutes
89+
8690
const classes = classNames(className);
8791

8892
return (

‎src/Footer.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ class AppFooter extends Component {
3030
}
3131

3232
render() {
33-
const { className, children, fixed, tag: Tag, ...attributes } = this.props;
33+
const { className, children, tag: Tag, ...attributes } = this.props;
34+
35+
delete attributes.fixed
3436

3537
const classes = classNames(className, 'app-footer');
3638

‎src/Header.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ class AppHeader extends Component {
2828
// }
2929

3030
render() {
31-
const { className, children, fixed, tag: Tag, ...attributes } = this.props;
31+
const { className, children, tag: Tag, ...attributes } = this.props;
32+
33+
delete attributes.fixed
3234

3335
const classes = classNames(className, 'app-header', 'navbar');
3436

‎src/Shared/layout/layout.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ToggleClasses } from '../toggle-classes';
1+
// import { toggleClasses } from '../toggle-classes';
22

33
class Layout {
44
static sidebarToggle() {

‎src/Sidebar.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,15 @@ class AppSidebar extends Component {
7171
}
7272

7373
render() {
74-
const { className, children, compact, display, fixed, minimized, offCanvas, isOpen, tag: Tag, staticContext, ...attributes } = this.props;
74+
const { className, children, tag: Tag, ...attributes } = this.props;
75+
76+
delete attributes.compact
77+
delete attributes.display
78+
delete attributes.fixed
79+
delete attributes.minimized
80+
delete attributes.offCanvas
81+
delete attributes.isOpen
82+
delete attributes.staticContext
7583

7684
const classes = classNames(className, 'sidebar');
7785

‎src/SidebarMinimizer.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ class AppSidebarMinimizer extends Component {
2020

2121
this.handleClick = this.handleClick.bind(this);
2222
}
23-
sidebarMinimize(e) {
24-
// e.preventDefault();
25-
23+
sidebarMinimize() {
2624
document.body.classList.toggle('sidebar-minimized');
2725
const sidebar = document.querySelector('.sidebar-nav')
2826
if (sidebar) {
@@ -31,9 +29,7 @@ class AppSidebarMinimizer extends Component {
3129
}
3230
}
3331

34-
brandMinimize(e) {
35-
// e.preventDefault();
36-
32+
brandMinimize() {
3733
document.body.classList.toggle('brand-minimized');
3834
}
3935

‎src/SidebarNav.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,11 @@ class AppSidebarNav extends Component {
165165
}
166166

167167
render() {
168-
const { className, children, isOpen, tag: Tag, navConfig, staticContext, ...attributes } = this.props;
168+
const { className, children, navConfig, ...attributes } = this.props;
169+
170+
delete attributes.isOpen
171+
delete attributes.staticContext
172+
delete attributes.Tag
169173

170174
const navClasses = classNames(className, 'sidebar-nav');
171175

‎src/SidebarToggler.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ class AppSidebarToggler extends Component {
4343
}
4444

4545
render() {
46-
const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
46+
const { className, children, tag: Tag, ...attributes } = this.props;
47+
48+
delete attributes.mobile
49+
delete attributes.display
4750

4851
const classes = classNames(className, 'navbar-toggler');
4952

‎src/Switch.js

+26-19
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,23 @@ import classNames from 'classnames';
55
const propTypes = {
66
color: PropTypes.string,
77
label: PropTypes.bool,
8-
outline: PropTypes.bool,
9-
outlineAlt: PropTypes.bool,
10-
pill: PropTypes.bool,
11-
size: PropTypes.string,
8+
outline: PropTypes.oneOfType([
9+
PropTypes.bool,
10+
PropTypes.string,
11+
PropTypes.oneOf(['', 'alt'])
12+
]),
13+
size: PropTypes.oneOf(['', 'lg', 'sm']),
1214
checked: PropTypes.bool,
1315
defaultChecked: PropTypes.bool,
1416
defaultValue: PropTypes.any,
17+
value: PropTypes.string,
1518
disabled: PropTypes.bool,
1619
form: PropTypes.any,
17-
indeterminate: PropTypes.any,
1820
name: PropTypes.string,
1921
required: PropTypes.bool,
20-
type: PropTypes.string,
21-
value: PropTypes.string,
22+
onChange: PropTypes.func,
23+
type: PropTypes.oneOf(['checkbox', 'radio']),
24+
variant: PropTypes.oneOf(['', '3d', 'pill']),
2225
className: PropTypes.string,
2326
dataOn: PropTypes.string,
2427
dataOff: PropTypes.string,
@@ -28,48 +31,52 @@ const defaultProps = {
2831
color: 'secondary',
2932
label: false,
3033
outline: false,
31-
outlineAlt: false,
32-
pill: false,
3334
size: '',
3435
checked: false,
3536
defaultChecked: false,
3637
disabled: false,
3738
required: false,
3839
type: 'checkbox',
40+
variant: '',
3941
dataOn: 'On',
4042
dataOff: 'Off',
4143
};
4244

4345
class AppSwitch extends Component {
4446
constructor(props) {
4547
super(props);
46-
this.toggle = this.toggle.bind(this);
48+
this.onChange = this.onChange.bind(this);
4749
this.state = {
4850
checked: this.props.defaultChecked || this.props.checked,
51+
selected: []
4952
};
5053
}
5154

52-
toggle(event) {
55+
onChange(event) {
5356
const target = event.target;
5457
this.setState({
5558
checked: target.checked,
56-
});
59+
})
60+
61+
if (this.props.onChange) {
62+
this.props.onChange(event);
63+
}
5764
}
5865

5966
render() {
60-
const { className, checked, disabled, color, defaultChecked, name, label, outline, outlineAlt, pill, size, required, type, value, dataOn, dataOff, ...attributes } = this.props;
61-
62-
const outlined = outline || outlineAlt;
67+
const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props;
6368

64-
const variant = `switch${outlined ? '-outline' : ''}-${color}${outlineAlt ? '-alt' : ''}`;
69+
delete attributes.checked
70+
delete attributes.defaultChecked
71+
delete attributes.onChange
6572

6673
const classes = classNames(
6774
className,
6875
'switch',
6976
label ? 'switch-label' : false,
70-
pill ? 'switch-pill' : false,
7177
size ? `switch-${size}` : false,
72-
variant,
78+
variant ? `switch-${variant}` : false,
79+
`switch${outline ? '-outline' : ''}-${color}${outline==='alt' ? '-alt' : ''}`,
7380
'form-check-label',
7481
);
7582

@@ -84,7 +91,7 @@ class AppSwitch extends Component {
8491

8592
return (
8693
<label className={classes}>
87-
<input type={type} className={inputClasses} onChange={this.toggle} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} />
94+
<input type={type} className={inputClasses} onChange={this.onChange} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} {...attributes} />
8895
<span className={sliderClasses} data-checked={dataOn} data-unchecked={dataOff}></span>
8996
</label>
9097
);

‎tests/Aside.test.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import expect from 'expect'
22
import React from 'react'
33
import {renderToStaticMarkup as render} from 'react-dom/server'
44

5-
import { configure, mount } from 'enzyme'
5+
import { configure, mount, shallow } from 'enzyme'
66
import Adapter from 'enzyme-adapter-react-16'
77
import { spy } from 'sinon'
88

@@ -12,7 +12,7 @@ configure({ adapter: new Adapter() });
1212

1313
describe('AppAside', () => {
1414
it('renders aside with class="aside-menu"', () => {
15-
expect(render(<AppAside fixed hidden display="lg">aside</AppAside>))
15+
expect(render(<AppAside fixed hidden offCanvas display="lg">aside</AppAside>))
1616
.toContain('<aside class="aside-menu">aside</aside>')
1717
});
1818
it('calls componentDidMount', () => {
@@ -21,4 +21,14 @@ describe('AppAside', () => {
2121
const wrapper = mount(<AppAside fixed hidden display="lg" />);
2222
expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true);
2323
});
24-
})
24+
it('should call isHidden()', () => {
25+
const isHidden = spy(AppAside.prototype, 'isHidden');
26+
shallow(<AppAside />);
27+
expect(isHidden.called).toBe(true);
28+
});
29+
it('should call isOffCanvas()', () => {
30+
const isOffCanvas = spy(AppAside.prototype, 'isOffCanvas');
31+
shallow(<AppAside offCanvas={false}/>);
32+
expect(isOffCanvas.called).toBe(true);
33+
});
34+
})

‎tests/Footer.test.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import expect from 'expect'
22
import React from 'react'
33
import {renderToStaticMarkup as render} from 'react-dom/server'
44

5-
import { configure, mount } from 'enzyme'
5+
import { configure, mount, shallow } from 'enzyme'
66
import Adapter from 'enzyme-adapter-react-16'
77
import { spy } from 'sinon'
88

@@ -21,4 +21,10 @@ describe('AppFooter', () => {
2121
const wrapper = mount(<AppFooter fixed display="lg" />);
2222
expect(AppFooter.prototype.componentDidMount.calledOnce).toEqual(true);
2323
});
24-
})
24+
it('should call isFixed()', () => {
25+
const isFixed = spy(AppFooter.prototype, 'isFixed');
26+
shallow(<AppFooter />);
27+
expect(isFixed.called).toBe(true);
28+
});
29+
30+
})

‎tests/Header.test.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import expect from 'expect'
22
import React from 'react'
33
import {renderToStaticMarkup as render} from 'react-dom/server'
44

5-
import { configure, mount } from 'enzyme'
5+
import { configure, mount, shallow } from 'enzyme'
66
import Adapter from 'enzyme-adapter-react-16'
77
import { spy } from 'sinon'
88

99
import AppHeader from 'src/Header'
10+
import AppFooter from '../src/Footer';
1011

1112
configure({ adapter: new Adapter() });
1213

@@ -21,4 +22,9 @@ describe('AppHeader', () => {
2122
const wrapper = mount(<AppHeader fixed/>);
2223
expect(AppHeader.prototype.componentDidMount.calledOnce).toEqual(true);
2324
});
24-
})
25+
it('should call isFixed()', () => {
26+
const isFixed = spy(AppHeader.prototype, 'isFixed');
27+
shallow(<AppHeader />);
28+
expect(isFixed.called).toBe(true);
29+
});
30+
})

‎tests/NavbarBrand.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,13 @@ describe('AppNavbarBrand', () => {
1515
minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Minimized' }}
1616
/>)).toContain('class="navbar-brand"');
1717
});
18+
it('renders anchor with class="navbar-brand"', () => {
19+
expect(render(<AppNavbarBrand
20+
brand={{ }}
21+
/>)).toContain('class="navbar-brand"');
22+
});
23+
it('renders anchor with class="navbar-brand"', () => {
24+
expect(render(<AppNavbarBrand />)).toContain('class="navbar-brand"');
25+
});
26+
1827
});

‎tests/Sidebar.test.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import expect from 'expect'
22
import React from 'react'
33
import {renderToStaticMarkup as render} from 'react-dom/server'
44

5-
import { configure, mount } from 'enzyme'
5+
import { configure, mount, shallow } from 'enzyme'
66
import Adapter from 'enzyme-adapter-react-16'
77
import { spy } from 'sinon'
88

@@ -21,4 +21,9 @@ describe('AppSidebar', () => {
2121
const wrapper = mount(<AppSidebar fixed display="lg" compact minimized offCanvas />);
2222
expect(AppSidebar.prototype.componentDidMount.calledOnce).toBe(true);
2323
});
24+
it('should call isFixed()', () => {
25+
const isFixed = spy(AppSidebar.prototype, 'isFixed');
26+
shallow(<AppSidebar />);
27+
expect(isFixed.called).toBe(true);
28+
});
2429
})

‎tests/SidebarFooter.test.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@ describe('SidebarFooter', () => {
99
expect(render(<SidebarFooter>test</SidebarFooter>))
1010
.toContain('<div class="sidebar-footer">test</div>')
1111
})
12-
})
12+
it('renders no div with class="sidebar-footer"', () => {
13+
expect(render(<SidebarFooter></SidebarFooter>))
14+
.toNotContain('<div class="sidebar-footer"></div>')
15+
})
16+
})

‎tests/SidebarForm.test.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@ describe('AppSidebarForm', () => {
99
expect(render(<AppSidebarForm>test</AppSidebarForm>))
1010
.toContain('<div class="sidebar-form">test</div>')
1111
})
12-
})
12+
it('renders no div with class="sidebar-form"', () => {
13+
expect(render(<AppSidebarForm></AppSidebarForm>))
14+
.toNotContain('<div class="sidebar-form"></div>')
15+
})
16+
})

‎tests/SidebarHeader.test.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@ describe('AppSidebarHeader', () => {
99
expect(render(<AppSidebarHeader>test</AppSidebarHeader>))
1010
.toContain('<div class="sidebar-header">test</div>')
1111
})
12-
})
12+
it('renders no div with class="sidebar-header"', () => {
13+
expect(render(<AppSidebarHeader></AppSidebarHeader>))
14+
.toNotContain('<div class="sidebar-header"></div>')
15+
})
16+
})

‎tests/Switch.test.js

+57-11
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import expect from 'expect'
22
import React from 'react'
33
import {renderToStaticMarkup as render} from 'react-dom/server'
44

5-
import { configure, mount } from 'enzyme'
5+
import { configure, mount, shallow } from 'enzyme'
66
import Adapter from 'enzyme-adapter-react-16'
7-
import { spy } from 'sinon'
7+
import { spy, mock } from 'sinon'
88

99
import AppSwitch from 'src/Switch'
1010

@@ -15,14 +15,60 @@ describe('AppSwitch', () => {
1515
expect(render(<AppSwitch />))
1616
.toContain('<label class="switch')
1717
});
18-
it('should call toggle', () => {
19-
const onChange = spy(AppSwitch.prototype, 'toggle');
20-
const event = {target: { checked: true }};
21-
const wrapper = mount(<AppSwitch outlineAlt label pill size="lg" />);
22-
expect(wrapper.find('input').props().checked).toBe(false);
23-
wrapper.find('input').simulate('change', event)
24-
expect(onChange.called).toBe(true);
25-
expect(wrapper.find('input').props().checked).toBe(true);
18+
it('should render with switch class', () => {
19+
const wrapper = shallow(<AppSwitch />);
20+
expect(wrapper.hasClass('switch')).toBe(true);
21+
});
22+
it('should render with outline class', () => {
23+
const wrapper = shallow(<AppSwitch outline />);
24+
expect(wrapper.hasClass('switch-outline-secondary')).toBe(true);
25+
});
26+
it('should render with outline alt class', () => {
27+
const wrapper = shallow(<AppSwitch outline={'alt'} />);
28+
expect(wrapper.hasClass('switch-outline-secondary-alt')).toBe(true);
29+
});
30+
it('should render with outline alt class', () => {
31+
const wrapper = shallow(<AppSwitch outline color="primary-alt" />);
32+
expect(wrapper.hasClass('switch-outline-primary-alt')).toBe(true);
33+
});
34+
it('should render with info class', () => {
35+
const wrapper = shallow(<AppSwitch color="info" />);
36+
expect(wrapper.hasClass('switch-info')).toBe(true);
37+
});
38+
it('should render with pill class', () => {
39+
const wrapper = shallow(<AppSwitch variant="pill" />);
40+
expect(wrapper.hasClass('switch-pill')).toBe(true);
41+
});
42+
it('should render with 3d class', () => {
43+
const wrapper = shallow(<AppSwitch variant="3d" />);
44+
expect(wrapper.hasClass('switch-3d')).toBe(true);
45+
});
46+
it('should render with lg class', () => {
47+
const wrapper = shallow(<AppSwitch size="lg" />);
48+
expect(wrapper.hasClass('switch-lg')).toBe(true);
49+
});
50+
it('should render with label class', () => {
51+
const wrapper = shallow(<AppSwitch label />);
52+
expect(wrapper.hasClass('switch-label')).toBe(true);
53+
});
54+
55+
describe('onChange', () => {
56+
it('calls props.onChange if it exists', () => {
57+
const onChangeMock = mock()
58+
const wrapper = mount(<AppSwitch onChange={onChangeMock} />);
59+
wrapper.find('input').hostNodes().simulate('change');
60+
expect(onChangeMock.called).toBe(true);
61+
});
2662

27-
})
63+
it('should call onChange()', () => {
64+
const onChange = spy(AppSwitch.prototype, 'onChange');
65+
const event = { target: { checked: true } };
66+
const wrapper = shallow(<AppSwitch label size="lg" />);
67+
expect(wrapper.find('input').props().checked).toBe(false);
68+
wrapper.find('input').simulate('change', event)
69+
expect(onChange.called).toBe(true);
70+
expect(wrapper.find('input').props().checked).toBe(true);
71+
})
72+
}
73+
)
2874
})

0 commit comments

Comments
 (0)
Please sign in to comment.