Skip to content

Commit 193b7ee

Browse files
gregnbgregnb
authored
Merge pull request #158 from benjaminbours/feature/doc-menu
#157 add Menu drawer on documentation website
2 parents 39c581b + 98c288d commit 193b7ee

File tree

9 files changed

+847
-741
lines changed

9 files changed

+847
-741
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
#Osx
2+
.DS_Store
3+
14
# Logs
25
logs
36
*.log

‎docs/icons/GitHub.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable max-len */
22

33
import React from "react";
4-
import SvgIcon from "material-ui/SvgIcon";
4+
import SvgIcon from "@material-ui/core/SvgIcon";
55

66
function GitHub(props) {
77
return (

‎docs/pages/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import Typography from "material-ui/Typography";
4-
import IconButton from "material-ui/IconButton";
5-
import Tooltip from "material-ui/Tooltip";
3+
import Typography from "@material-ui/core/Typography";
4+
import IconButton from "@material-ui/core/IconButton";
5+
import Tooltip from "@material-ui/core/Tooltip";
66
import DownloadIcon from "@material-ui/icons/CloudDownload";
77
import BuildIcon from "@material-ui/icons/Build"; // eslint-disable-line import/no-unresolved
88
import CodeSnippet from "../utils/CodeSnippet";
99
import Layout from "../utils/layout";
1010
import withRoot from "../utils/withRoot";
11-
import { withStyles } from "material-ui/styles";
11+
import { withStyles } from "@material-ui/core/styles";
1212

1313
const styles = theme => ({
1414
stepIcon: {
@@ -38,7 +38,7 @@ class Homepage extends React.Component {
3838
selectable rows, pagination, and sorting. On top of the ability to customize styling on most views, there
3939
are two responsive modes "stacked" and "scroll" for mobile/tablet devices.
4040
</p>
41-
<img src="/static/mui-datatables-main.jpg" className={classes.mainImage} border="0" />
41+
<img src="/static/mui-datatables-main.jpg" className={classes.mainImage} border="0" alt="The look of the component" />
4242

4343
<div className={classes.stepWrapper}>
4444
<DownloadIcon className={classes.stepIcon} />

‎docs/utils/CodeSnippet.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import classnames from "classnames";
44
import prism from "prismjs";
55
import "prismjs/components/prism-jsx";
66
import "prismjs/components/prism-bash";
7-
import Paper from "material-ui/Paper";
8-
import { withStyles } from "material-ui/styles";
7+
import Paper from "@material-ui/core/Paper";
8+
import { withStyles } from "@material-ui/core/styles";
99

1010
const styles = theme => ({});
1111

‎docs/utils/Menu.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { withStyles } from "@material-ui/core";
4+
import Drawer from '@material-ui/core/Drawer';
5+
import List from '@material-ui/core/List';
6+
import ListItem from '@material-ui/core/ListItem';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import ListSubheader from '@material-ui/core/ListSubheader';
9+
10+
const styles = theme => ({
11+
list: {
12+
width: 250,
13+
},
14+
listTitle: {
15+
fontSize: 25,
16+
}
17+
});
18+
19+
const sandboxes = [
20+
{ name: "Custom Component", href: "https://codesandbox.io/embed/xrvrzryjvp?autoresize=1&hidenavigation=1" },
21+
{ name: "Customize Columns", href: "https://codesandbox.io/embed/xowj5oj8w?autoresize=1&hidenavigation=1" },
22+
{ name: "Customize Footer", href: "https://codesandbox.io/embed/5z0w0w9jyk?autoresize=1&hidenavigation=1" },
23+
{ name: "Customize Styling", href: "https://codesandbox.io/embed/0ylq1lqwp0?autoresize=1&hidenavigation=1" },
24+
{ name: "Customize Toolbar", href: "https://codesandbox.io/embed/wy2rl1nyzl?autoresize=1&hidenavigation=1" },
25+
{ name: "Customize ToolbarSelect", href: "https://codesandbox.io/embed/545ym5ov6p?autoresize=1&hidenavigation=1" },
26+
{ name: "Resizable Columns", href: "https://codesandbox.io/embed/q8w3230qpj?autoresize=1&hidenavigation=1" },
27+
];
28+
29+
const Exemple = props => (
30+
<ListItem button>
31+
<ListItemText onClick={() => window.open(props.href, "_blank")} primary={props.name} />
32+
</ListItem>
33+
);
34+
35+
Exemple.propTypes = {
36+
href: PropTypes.string,
37+
name: PropTypes.string,
38+
};
39+
40+
class Menu extends React.Component {
41+
render() {
42+
const { isOpen, toggle, classes } = this.props;
43+
return (
44+
<Drawer open={isOpen} onClose={toggle} >
45+
<div
46+
tabIndex={0}
47+
role="button"
48+
onClick={toggle}
49+
onKeyDown={toggle}
50+
className={classes.list}
51+
>
52+
<List
53+
component="nav"
54+
subheader={<ListSubheader className={classes.listTitle} component="h2">Exemples</ListSubheader>}
55+
>
56+
{sandboxes.map((item) => (
57+
<Exemple href={item.href} name={item.name} />
58+
))}
59+
</List>
60+
</div>
61+
</Drawer>
62+
);
63+
}
64+
}
65+
66+
Menu.propTypes = {
67+
isOpen: PropTypes.bool.isRequired,
68+
toggle: PropTypes.func.isRequired,
69+
classes: PropTypes.object.isRequired,
70+
};
71+
72+
export default withStyles(styles)(Menu);

‎docs/utils/getPageContext.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint-disable no-underscore-dangle */
22

33
import { SheetsRegistry } from "jss";
4-
import { createMuiTheme, createGenerateClassName } from "material-ui/styles";
5-
import purple from "material-ui/colors/purple";
6-
import green from "material-ui/colors/green";
4+
import { createMuiTheme, createGenerateClassName } from "@material-ui/core/styles";
5+
import purple from "@material-ui/core/colors/purple";
6+
import green from "@material-ui/core/colors/green";
77

88
// A theme with custom primary and secondary color.
99
// It's optional.

‎docs/utils/layout.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33
import Head from "next/head";
4-
import Typography from "material-ui/Typography";
5-
import AppBar from "material-ui/AppBar";
6-
import Toolbar from "material-ui/Toolbar";
7-
import IconButton from "material-ui/IconButton";
4+
import Typography from "@material-ui/core/Typography";
5+
import AppBar from "@material-ui/core/AppBar";
6+
import Toolbar from "@material-ui/core/Toolbar";
7+
import IconButton from "@material-ui/core/IconButton";
88
import MenuIcon from "@material-ui/icons/Menu";
9-
import Tooltip from "material-ui/Tooltip";
9+
import Tooltip from "@material-ui/core/Tooltip";
1010
import GitHub from "../icons/GitHub";
1111
import withRoot from "../utils/withRoot";
12-
import { withStyles } from "material-ui/styles";
12+
import { withStyles } from "@material-ui/core/styles";
13+
import Menu from "./Menu";
1314

1415
/* eslint-disable import/no-webpack-loader-syntax */
1516
import lightTheme from "!raw-loader!prismjs/themes/prism.css";
@@ -45,6 +46,11 @@ const styles = theme => ({
4546
});
4647

4748
class Layout extends React.Component {
49+
50+
state = {
51+
drawerIsOpen: false
52+
}
53+
4854
componentDidMount() {
4955
const styleNode = document.createElement("style");
5056
styleNode.setAttribute("data-prism", "true");
@@ -55,14 +61,24 @@ class Layout extends React.Component {
5561
styleNode.textContent = lightTheme;
5662
}
5763

64+
toggleDrawer = () => {
65+
const drawerIsOpen = this.state.drawerIsOpen ? false : true;
66+
this.setState({ drawerIsOpen });
67+
}
68+
5869
render() {
5970
const { classes, children } = this.props;
71+
const { drawerIsOpen } = this.state;
6072

6173
return (
6274
<div className={classes.wrapper}>
75+
<Menu
76+
isOpen={drawerIsOpen}
77+
toggle={this.toggleDrawer}
78+
/>
6379
<AppBar classes={{ root: classes.appBar }}>
6480
<Toolbar classes={{ root: classes.toolBar }}>
65-
<IconButton color="inherit" aria-label="open drawer">
81+
<IconButton onClick={this.toggleDrawer} color="inherit" aria-label="open drawer">
6682
<MenuIcon />
6783
</IconButton>
6884
<a href="/">

‎docs/utils/withRoot.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { MuiThemeProvider } from "material-ui/styles";
3+
import { MuiThemeProvider } from "@material-ui/core/styles";
44
import getPageContext from "./getPageContext";
55

66
function withRoot(Component) {

0 commit comments

Comments
 (0)