Skip to content

Commit b0437cd

Browse files
javivelascojavivelasco
committed
Fix linter error for layouts
1 parent 0277719 commit b0437cd

File tree

8 files changed

+380
-396
lines changed

8 files changed

+380
-396
lines changed

‎components/layout/Layout.jsx‎

Lines changed: 36 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,54 @@
11
import React from 'react';
2-
import ClassNames from 'classnames';
2+
import classnames from 'classnames';
33
import style from './style';
44

5-
6-
const Layout = (props) => {
7-
const className = ClassNames(style.root, props.className);
8-
9-
return (
10-
<div data-react-toolbox='layout' className={className}>
11-
{props.children}
12-
</div>
13-
);
14-
};
5+
const Layout = ({ className, children }) => (
6+
<div data-react-toolbox='layout' className={classnames(style.root, className)}>
7+
{children}
8+
</div>
9+
);
1510

1611
const ALLOWED = [
17-
'Panel',
18-
'NavDrawer|Panel',
19-
'NavDrawer|Panel|Sidebar',
20-
'Panel|Sidebar'
12+
'Panel',
13+
'NavDrawer|Panel',
14+
'NavDrawer|Panel|Sidebar',
15+
'Panel|Sidebar'
2116
];
2217

2318
function getChildName (child) {
24-
if (child.type) {
25-
return child.type.name || child.type;
26-
}
27-
if (!child.constructor || !child.constructor.name) {
28-
return 'UNKNOWN';
29-
}
30-
return child.constructor.name;
19+
if (child.type) {
20+
return child.type.name || child.type;
21+
}
22+
if (!child.constructor || !child.constructor.name) {
23+
return 'UNKNOWN';
24+
}
25+
return child.constructor.name;
3126
}
3227

3328
Layout.propTypes = {
34-
children (props, propName, componentName) {
35-
// Accept only [NavDrawer]Pane[Sidebar]
36-
const children = props[propName];
37-
if (React.Children.count(children) > 3) {
38-
return new Error(
39-
'`' + componentName + '` ' +
40-
'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
41-
);
42-
}
43-
44-
const names = React.Children.map(children, getChildName).join('|');
29+
children (props, propName, componentName) {
30+
// Accept only [NavDrawer]Pane[Sidebar]
31+
const children = props[propName];
32+
if (React.Children.count(children) > 3) {
33+
return new Error(
34+
'`' + componentName + '` '
35+
+ 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
36+
);
37+
}
4538

46-
if (!(~ALLOWED.indexOf(names))) {
47-
return new Error(
48-
'`' + componentName + '` ' +
49-
'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
50-
);
51-
}
52-
},
53-
className: React.PropTypes.string
39+
const names = React.Children.map(children, getChildName).join('|');
40+
if (!(~ALLOWED.indexOf(names))) {
41+
return new Error(
42+
'`' + componentName + '` '
43+
+ 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
44+
);
45+
}
46+
},
47+
className: React.PropTypes.string
5448
};
5549

5650
Layout.defaultProps = {
57-
className: ''
51+
className: ''
5852
};
5953

6054
export default Layout;

‎components/layout/NavDrawer.jsx‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
11
import React from 'react';
2-
import ClassNames from 'classnames';
2+
import classnames from 'classnames';
33
import style from './style';
44

55
const NavDrawer = (props) => {
6+
const rootClasses = classnames([style.navDrawer], {
7+
[style['permanent-' + props.permanentAt]]: props.permanentAt,
8+
[style.wide]: (props.width === 'wide'),
9+
[style.active]: props.active,
10+
[style.pinned]: props.pinned
11+
}, props.className);
612

7-
const rootClasses = ClassNames([style.navDrawer], {
8-
[style['permanent-' + props.permanentAt]]: props.permanentAt,
9-
[style.wide]: (props.width === 'wide'),
10-
[style.active]: props.active,
11-
[style.pinned]: props.pinned
12-
}, props.className);
13+
const drawerClasses = classnames(style.drawerContent, {
14+
[style.scrollY]: props.scrollY
15+
});
1316

14-
const drawerClasses = ClassNames(style.drawerContent, {
15-
[style.scrollY]: props.scrollY
16-
});
17-
18-
return (
19-
<div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
20-
<div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
21-
<aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
22-
{props.children}
23-
</aside>
24-
</div>
25-
</div>
26-
);
17+
return (
18+
<div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
19+
<div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
20+
<aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
21+
{props.children}
22+
</aside>
23+
</div>
24+
</div>
25+
);
2726
};
2827

2928
NavDrawer.propTypes = {
30-
active: React.PropTypes.bool,
31-
children: React.PropTypes.any,
32-
className: React.PropTypes.string,
33-
onOverlayClick: React.PropTypes.func,
34-
permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
35-
pinned: React.PropTypes.bool,
36-
scrollY: React.PropTypes.bool,
37-
width: React.PropTypes.oneOf(['normal', 'wide'])
29+
active: React.PropTypes.bool,
30+
children: React.PropTypes.any,
31+
className: React.PropTypes.string,
32+
onOverlayClick: React.PropTypes.func,
33+
permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
34+
pinned: React.PropTypes.bool,
35+
scrollY: React.PropTypes.bool,
36+
width: React.PropTypes.oneOf(['normal', 'wide'])
3837
};
3938

4039
NavDrawer.defaultProps = {
41-
active: false,
42-
className: '',
43-
scrollY: false,
44-
width: 'normal'
40+
active: false,
41+
className: '',
42+
scrollY: false,
43+
width: 'normal'
4544
};
4645

4746
export default NavDrawer;

‎components/layout/Panel.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
import React from 'react';
2-
import ClassNames from 'classnames';
2+
import classnames from 'classnames';
33
import style from './style';
44

5-
const Panel = (props) => {
6-
const className = ClassNames(style.panel, {
7-
[style.scrollY]: props.scrollY
8-
}, props.className);
5+
const Panel = ({ children, className, scrollY }) => {
6+
const _className = classnames(style.panel, {
7+
[style.scrollY]: scrollY
8+
}, className);
99

10-
return (
11-
<div data-react-toolbox='panel' className={className}>
12-
{props.children}
13-
</div>
14-
);
10+
return (
11+
<div data-react-toolbox='panel' className={_className}>
12+
{children}
13+
</div>
14+
);
1515
};
1616

1717
Panel.propTypes = {
18-
children: React.PropTypes.any,
19-
className: React.PropTypes.string,
20-
scrollY: React.PropTypes.bool
18+
children: React.PropTypes.any,
19+
className: React.PropTypes.string,
20+
scrollY: React.PropTypes.bool
2121
};
2222

2323
Panel.defaultProps = {
24-
className: '',
25-
scrollY: false
24+
className: '',
25+
scrollY: false
2626
};
2727

2828
export default Panel;

‎components/layout/Sidebar.jsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
import React from 'react';
2-
import ClassNames from 'classnames';
2+
import classnames from 'classnames';
33
import style from './style';
44

55
const Sidebar = (props) => {
6-
const wrapperClasses = ClassNames(style.sidebar, style[`width-${props.width}`], {
7-
[style.pinned]: props.pinned
8-
}, props.className);
6+
const wrapperClasses = classnames(style.sidebar, style[`width-${props.width}`], {
7+
[style.pinned]: props.pinned
8+
}, props.className);
99

10-
const innerClasses = ClassNames(style.sidebarContent, {
11-
[style.scrollY]: props.scrollY
12-
});
10+
const innerClasses = classnames(style.sidebarContent, {
11+
[style.scrollY]: props.scrollY
12+
});
1313

14-
return (
15-
<div data-react-toolbox='sidebar' className={wrapperClasses}>
16-
<aside data-react-toolbox='sidebar-content' className={innerClasses}>
17-
{props.children}
18-
</aside>
19-
</div>
20-
);
14+
return (
15+
<div data-react-toolbox='sidebar' className={wrapperClasses}>
16+
<aside data-react-toolbox='sidebar-content' className={innerClasses}>
17+
{props.children}
18+
</aside>
19+
</div>
20+
);
2121
};
2222

2323
Sidebar.propTypes = {
24-
children: React.PropTypes.any,
25-
className: React.PropTypes.string,
26-
pinned: React.PropTypes.bool,
27-
scrollY: React.PropTypes.bool,
28-
width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
24+
children: React.PropTypes.any,
25+
className: React.PropTypes.string,
26+
pinned: React.PropTypes.bool,
27+
scrollY: React.PropTypes.bool,
28+
width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
2929
};
3030

3131
Sidebar.defaultProps = {
32-
className: '',
33-
pinned: false,
34-
scrollY: false,
35-
width: 5
32+
className: '',
33+
pinned: false,
34+
scrollY: false,
35+
width: 5
3636
};
3737

3838
export default Sidebar;

‎components/layout/_config.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ $drawer-text-color: $palette-grey-800 !default;
55
$drawer-overlay-color: $color-black !default;
66
$drawer-overlay-opacity: .6 !default;
77

8-
98
// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
10-
$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
11-
$navigation-drawer-max-desktop-width: 40 * $unit !default;
9+
$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
10+
$navigation-drawer-max-desktop-width: 40 * $unit !default;
11+
1212
// Mobile:
1313
// Width = Screen width − 56 dp
1414
// Maximum width: 320dp
15-
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
15+
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
16+
1617
// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
17-
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
18+
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;

‎components/layout/_mixins.scss‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
1-
21
@mixin open() {
3-
transition-delay: $animation-delay;
4-
& > .scrim {
5-
& > .drawerContent {
6-
pointer-events: all;
7-
transition-delay: $animation-delay;
8-
transform: translateX(0);
9-
}
2+
transition-delay: $animation-delay;
3+
& > .scrim {
4+
& > .drawerContent {
5+
pointer-events: all;
6+
transition-delay: $animation-delay;
7+
transform: translateX(0);
108
}
9+
}
1110
}
1211

1312
@mixin permanent() {
14-
@include open();
13+
@include open();
1514

16-
width: $navigation-drawer-desktop-width;
17-
max-width: $navigation-drawer-desktop-width;
15+
width: $navigation-drawer-desktop-width;
16+
max-width: $navigation-drawer-desktop-width;
1817

19-
&.wide {
20-
width: $navigation-drawer-max-desktop-width;
21-
max-width: $navigation-drawer-max-desktop-width;
22-
}
18+
&.wide {
19+
width: $navigation-drawer-max-desktop-width;
20+
max-width: $navigation-drawer-max-desktop-width;
21+
}
2322

24-
&.active {
25-
& > .scrim {
26-
width: 0;
27-
background-color: rgba($drawer-overlay-color, 0);
28-
}
23+
&.active {
24+
& > .scrim {
25+
width: 0;
26+
background-color: rgba($drawer-overlay-color, 0);
2927
}
28+
}
3029
}

‎components/layout/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { default as Layout } from './Layout.jsx';
2-
export { default as Panel } from './Panel.jsx';
3-
export { default as NavDrawer } from './NavDrawer.jsx';
4-
export { default as Sidebar } from './Sidebar.jsx';
1+
export { default as Layout } from './Layout';
2+
export { default as Panel } from './Panel';
3+
export { default as NavDrawer } from './NavDrawer';
4+
export { default as Sidebar } from './Sidebar';

0 commit comments

Comments
 (0)