Skip to content

Commit 21012b8

Browse files
PolGuixePolGuixe
authored
Merge pull request #1 from Zetoff/feature/adding-components
first working version
2 parents 2344789 + 872109e commit 21012b8

File tree

21 files changed

+899
-11
lines changed

21 files changed

+899
-11
lines changed

‎package.json

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "material-ui-layout",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "Layout components for material-ui",
55
"main": "./lib/index.js",
66
"scripts": {
@@ -41,5 +41,14 @@
4141
"jest": "^21.0.2"
4242
},
4343
"dependencies": {
44+
"classnames": "^2.2.5",
45+
"lodash": "^4.17.4",
46+
"material-ui": "^1.0.0-beta.9",
47+
"material-ui-icons": "^1.0.0-beta.5",
48+
"prop-types": "^15.5.10",
49+
"react": "^15.6.1",
50+
"react-controllables": "^0.6.0",
51+
"react-dom": "^15.6.1",
52+
"recompose": "^0.25.0"
4453
}
4554
}

‎src/components/Footer/Footer.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withStyles } from 'material-ui/styles';
4+
5+
import styles from './styles';
6+
7+
class Footer extends React.PureComponent {
8+
static propTypes = {
9+
classes: PropTypes.shape({}).isRequired,
10+
children: PropTypes.element.isRequired,
11+
};
12+
13+
render() {
14+
const { classes, children } = this.props;
15+
return (
16+
<div className={classes.footer}>
17+
{children}
18+
</div>
19+
);
20+
}
21+
}
22+
23+
export default withStyles(styles)(Footer);

‎src/components/Footer/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Footer from './Footer';
2+
3+
export default Footer;

‎src/components/Footer/styles.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const styles = theme => ({
2+
footer: {
3+
backgroundColor: theme.palette.background.appBar,
4+
color: theme.palette.getContrastText(theme.palette.background.appBar),
5+
padding: '20px 10px',
6+
},
7+
message: {
8+
textAlign: 'center',
9+
marginBottom: '30px',
10+
},
11+
logoImage: {
12+
maxHeight: '50px',
13+
maxWidth: '300px',
14+
margin: '0',
15+
padding: '0',
16+
},
17+
});
18+
19+
export default styles;

‎src/components/Layout/Layout.jsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withStyles } from 'material-ui/styles';
4+
import classNames from 'classnames';
5+
import Drawer from 'material-ui/Drawer';
6+
import controllable from 'react-controllables';
7+
8+
import styles from './styles';
9+
10+
import NavBar from '../NavBar';
11+
import Footer from '../Footer';
12+
13+
// TODO create Layout Library
14+
15+
class Layout extends React.PureComponent {
16+
static propTypes = {
17+
title: PropTypes.string,
18+
classes: PropTypes.shape({}),
19+
children: PropTypes.element.isRequired,
20+
navbarPostion: PropTypes.string,
21+
stickyFooter: PropTypes.bool,
22+
footerContent: PropTypes.element,
23+
navBarContent: PropTypes.element,
24+
drawerOpen: PropTypes.bool.isRequired,
25+
onDrawerOpenChange: PropTypes.func,
26+
drawerContent: PropTypes.element,
27+
navBarProps: PropTypes.shape({}),
28+
drawerProps: PropTypes.shape({}),
29+
footerProps: PropTypes.shape({}),
30+
};
31+
32+
static defaultProps = {
33+
title: '',
34+
navbarPostion: 'default',
35+
stickyFooter: false,
36+
drawerOpen: false,
37+
};
38+
39+
handleDrawerClose = () => {
40+
if (!this.props.onDrawerOpenChange) return;
41+
42+
this.props.onDrawerOpenChange(false);
43+
};
44+
45+
toggleDrawer = () => {
46+
if (!this.props.onDrawerOpenChange) return;
47+
48+
this.props.onDrawerOpenChange(!this.props.drawerOpen);
49+
};
50+
51+
render() {
52+
const {
53+
title,
54+
logo, // TODO what kind of logo can we expect?.....
55+
classes,
56+
children,
57+
navbarPostion,
58+
stickyFooter,
59+
footerContent,
60+
navBarContent,
61+
drawerContent,
62+
drawerOpen,
63+
navBarProps,
64+
drawerProps,
65+
footerProps,
66+
} = this.props;
67+
68+
const mainClassnames = classNames(
69+
classes.main,
70+
{ [`${classes.mainFixedNavbar}`]: navbarPostion === 'fixed' },
71+
{ [`${classes.mainStickyFooter}`]: stickyFooter },
72+
);
73+
74+
return (
75+
<div className={classes.layout}>
76+
<NavBar {...navBarProps} title={title} logo={logo} onIconClick={this.toggleDrawer}>
77+
{navBarContent}
78+
</NavBar>
79+
{drawerContent ? (
80+
<Drawer {...drawerProps} open={drawerOpen} onRequestClose={this.handleDrawerClose}>
81+
{drawerContent}
82+
</Drawer>
83+
) : null}
84+
<main className={mainClassnames}>{children}</main>
85+
{footerContent ? <Footer {...footerProps}>{footerContent}</Footer> : null}
86+
</div>
87+
);
88+
}
89+
}
90+
91+
export default controllable(withStyles(styles)(Layout), ['drawerOpen']);

‎src/components/Layout/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Layout from './Layout';
2+
3+
export default Layout;

‎src/components/Layout/styles.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const styles = {
2+
layout: {
3+
display: 'flex',
4+
minHeight: '100vh',
5+
flexDirection: 'column',
6+
},
7+
main: {
8+
paddingTop: '0px',
9+
display: 'flex',
10+
},
11+
mainFixedNavbar: {
12+
marginTop: '64px',
13+
},
14+
mainStickyFooter: {
15+
flex: 1,
16+
},
17+
'@media (max-width: 599px)': {
18+
mainFixedNavbar: {
19+
marginTop: '56px',
20+
},
21+
},
22+
};
23+
24+
export default styles;

‎src/components/NavBar/NavBar.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// @flow weak
2+
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
import { withStyles } from 'material-ui/styles';
6+
import AppBar from 'material-ui/AppBar';
7+
8+
import styles from './styles';
9+
10+
class NavBar extends React.PureComponent {
11+
static propTypes = {
12+
classes: PropTypes.shape({}),
13+
children: PropTypes.element,
14+
navbarPostion: PropTypes.string,
15+
};
16+
17+
render() {
18+
const { children, navbarPostion, classes, ...other } = this.props;
19+
return (
20+
<AppBar position={navbarPostion} color="default">
21+
{React.cloneElement(children, { ...other })}
22+
</AppBar>
23+
);
24+
}
25+
}
26+
27+
export default withStyles(styles)(NavBar);

‎src/components/NavBar/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import NavBar from './NavBar';
2+
3+
export default NavBar;

‎src/components/NavBar/styles.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default {};

‎src/index.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export default {};
1+
import Layout from './components/Layout';
2+
3+
export { default as AppBar } from './components/NavBar';
4+
export { default as Footer } from './components/Footer';
5+
6+
// I am changing the name from NavBar to AppBar
7+
export { default as BasicAppBar } from './templates/NavBar/BasicNavBar';
8+
export { default as BasicFooter } from './templates/Footer/BasicFooter';
9+
export { default as BasicDrawer } from './templates/Drawer/BasicDrawer';
10+
11+
export default Layout;

‎src/templates/Drawer/BasicDrawer/BasicDrawer.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import _ from 'lodash';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import { withStyles } from 'material-ui/styles';
5+
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
6+
import Icon from 'material-ui/Icon';
7+
8+
import styles from './styles';
9+
10+
class BasicDrawer extends React.PureComponent {
11+
static propTypes = {
12+
links: PropTypes.arrayOf(PropTypes.shape({})),
13+
classes: PropTypes.shape({}),
14+
};
15+
render() {
16+
const { links, classes } = this.props;
17+
return (
18+
<div>
19+
<List className={classes.list}>
20+
{_.map(links, link => (
21+
<ListItem button onClick={link.onClick} key={`link-${link.label}`}>
22+
<ListItemIcon>
23+
{link.icon ? <Icon>{link.icon}</Icon> : <Icon>arrow_right</Icon>}
24+
</ListItemIcon>
25+
<ListItemText primary={link.label} />
26+
</ListItem>
27+
))}
28+
</List>
29+
</div>
30+
);
31+
}
32+
}
33+
34+
export default withStyles(styles)(BasicDrawer);

‎src/templates/Drawer/BasicDrawer/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import BasicDrawer from './BasicDrawer';
2+
3+
export default BasicDrawer;

‎src/templates/Drawer/BasicDrawer/styles.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
list: {
3+
width: 250,
4+
flex: 'initial',
5+
},
6+
};

‎src/templates/Footer/BasicFooter/BasicFooter.jsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import _ from 'lodash';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import { withStyles } from 'material-ui/styles';
5+
import Grid from 'material-ui/Grid';
6+
import Typography from 'material-ui/Typography';
7+
import Button from 'material-ui/Button';
8+
9+
import styles from './styles';
10+
11+
class BasicFooter extends React.PureComponent {
12+
static propTypes = {
13+
title: PropTypes.string,
14+
smallMessage: PropTypes.string,
15+
bigMessage: PropTypes.string,
16+
classes: PropTypes.shape({}),
17+
logo: PropTypes.string,
18+
links: PropTypes.arrayOf(PropTypes.shape({})),
19+
};
20+
static defaultProps = {
21+
title: 'Brand',
22+
};
23+
24+
renderLogo = () => {
25+
const { classes, title, logo } = this.props;
26+
if (logo) {
27+
return <img src={logo} alt={title} className={classes.logoImage} />;
28+
}
29+
return (
30+
<Typography type="title" color="inherit" className={classes.flex}>
31+
{title}
32+
</Typography>
33+
);
34+
};
35+
36+
render() {
37+
const { title, classes, smallMessage, bigMessage, links } = this.props;
38+
return (
39+
<Grid container align="flex-end" justify="space-around" spacing={16}>
40+
<Grid item xs={12}>
41+
<div className={classes.message}>
42+
<Typography type="display3" color="inherit">
43+
{bigMessage}
44+
</Typography>
45+
</div>
46+
</Grid>
47+
<Grid item xs={12} md={4}>
48+
<Grid container direction="row" spacing={0} justify="center">
49+
{_.map(links, link => (
50+
<Button href={link.href} color="inherit" key={link.label}>{link.label}</Button>
51+
))}
52+
</Grid>
53+
</Grid>
54+
<Grid item xs={12} md={4}>
55+
<Grid container direction="column" align="center" spacing={0}>
56+
<Typography type="body1" color="inherit">
57+
{smallMessage}
58+
</Typography>
59+
<Typography type="caption" color="inherit">
60+
{title} © {new Date().getFullYear()}
61+
</Typography>
62+
</Grid>
63+
</Grid>
64+
<Grid item xs={12} md={4}>
65+
<Grid container justify="center">
66+
{this.renderLogo()}
67+
</Grid>
68+
</Grid>
69+
</Grid>
70+
);
71+
}
72+
}
73+
74+
export default withStyles(styles)(BasicFooter);

‎src/templates/Footer/BasicFooter/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import BasicFooter from './BasicFooter';
2+
3+
export default BasicFooter;

‎src/templates/Footer/BasicFooter/styles.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const styles = () => ({
2+
message: {
3+
textAlign: 'center',
4+
marginBottom: '30px',
5+
},
6+
logoImage: {
7+
maxHeight: '50px',
8+
maxWidth: '300px',
9+
margin: '0',
10+
padding: '0',
11+
},
12+
});
13+
14+
export default styles;

0 commit comments

Comments
 (0)