import React from 'react';
import { AppBar, Checkbox, Dropdown, IconButton, RadioGroup, RadioButton } from '../../components';
import { Layout, NavDrawer, Panel, Sidebar } from '../../components';
const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
const drawerItems = dummyText.split(/\s/).map(function (word, index) {
return (
{word});
});
const sidebarWidths = [
{ value: 4, label: '4 incr' },
{ value: 5, label: '5 incr' },
{ value: 6, label: '6 incr' },
{ value: 7, label: '7 incr' },
{ value: 8, label: '8 incr' },
{ value: 9, label: '9 incr' },
{ value: 10, label: '10 incr' },
{ value: 25, label: '25%'},
{ value: 33, label: '33%'},
{ value: 50, label: '50%'},
{ value: 66, label: '66%'},
{ value: 75, label: '75%'}
];
class LayoutTest extends React.Component {
state = {
permanentAt: 'lg',
drawerOpen: false,
drawerPinned: false,
sidebarPinned: false,
sidebarWidth: 5,
loremIpsums: 1
};
toggleDrawer = (event) => {
event.stopPropagation();
this.setState({ drawerOpen: !this.state.drawerOpen });
};
toggleDrawerPinned = () => {
this.setState({ drawerPinned: !this.state.drawerPinned });
};
changeDrawerPermanentAt = (value) => {
this.setState({ permanentAt: value });
};
toggleSidebar = (value) => {
this.setState({ sidebarPinned: (value === true) });
};
changeSidebarWidth = (value) => {
this.setState({ sidebarWidth: value });
};
fewer = (event) => {
event.preventDefault();
this.setState({ loremIpsums: Math.max(0, this.state.loremIpsums - 1) });
};
more = (event) => {
event.preventDefault();
this.setState({ loremIpsums: this.state.loremIpsums + 1 });
};
render () {
const rng = Array.from(new Array(this.state.loremIpsums), (x, i) => i);
return (
Layout
NavDrawer State
Drawer becomes permanent when window is....
Sidebar State
Sidebar Width
Scrollable Content
The center pane should scroll independently from
the sides. Show
[-]
{`${this.state.loremIpsums}`}
[+] paragraph(s) below this one.
{rng.map((x, i) => {dummyText}
)}
Sidebar
Sidebar content should be secondary to the main content on a page.
The width of the sidebar can be set either in increments
(where 1 increment = height of the app bar) or in percentages.
As per the spec, the right sidebar expands to cover the entire
screen at small screen sizes.
);
}
}
export default LayoutTest;