react-toolbox/spec/components/layout.js

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 (<li key={index}>{word}</li>);
});

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 (
            <section>
                <h5>Layout</h5>
                <div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
                    <Layout>
                        <NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
                          <AppBar title='Drawer'/>
                            <ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
                                {drawerItems}
                            </ul>
                        </NavDrawer>
                        <Panel>
                            <AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
                            <div style={{ flex: 1, overflowY: 'auto' }}>
                                <div style={{ display: 'flex', flexDirection: 'row' }}>
                                    <section style={{ margin: '1.8rem'}}>
                                        <h5>NavDrawer State</h5>
                                        <p>Drawer becomes permanent when window is....</p>
                                        <RadioGroup name='permanentAt' value={this.state.permanentAt} onChange={this.changeDrawerPermanentAt}>
                                          <RadioButton label='Small' value='sm'/>
                                          <RadioButton label='Medium' value='md' />
                                          <RadioButton label='Large' value='lg' />
                                          <RadioButton label='Extra Large' value='xl' />
                                          <RadioButton label='Never' value={undefined} />
                                        </RadioGroup>
                                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
                                    </section>

                                    <section style={{ margin: '1.8rem'}}>
                                        <h5>Sidebar State</h5>
                                        <RadioGroup name='sidebarPinned' value={this.state.sidebarPinned} onChange={this.toggleSidebar}>
                                            <RadioButton label='Pinned' value />
                                            <RadioButton label='Unpinned' value={false} />
                                        </RadioGroup>
                                        <h5>Sidebar Width</h5>
                                            <Dropdown
                                                auto
                                                onChange={this.changeSidebarWidth}
                                                source={sidebarWidths}
                                                value={this.state.sidebarWidth}
                                              />
                                    </section>
                                </div>

                                <section style={{ margin: '1.8rem' }}>
                                    <h5>Scrollable Content</h5>
                                    <p>
                                        The center pane should scroll independently from
                                        the sides. Show
                                        [<a href='#' onClick={this.fewer}>-</a>]
                                        {`${this.state.loremIpsums}`}
                                        [<a href='#' onClick={this.more}>+</a>] paragraph(s) below this one.
                                    </p>
                                    {rng.map((x, i) => <p key={i}>{dummyText}</p>)}
                                </section>
                            </div>
                        </Panel>
                        <Sidebar pinned={this.state.sidebarPinned} width={Number(this.state.sidebarWidth)}>
                            <div><IconButton icon='close' onClick={this.toggleSidebar}/></div>
                            <div style={{ flex: 1, margin: '1.8rem' }}>
                                <h5>Sidebar</h5>
                                <p>
                                    Sidebar content should be secondary to the main content on a page.
                                </p>
                                <p>
                                    The width of the sidebar can be set either in <em>increments</em>
                                    (where 1 increment = height of the app bar) or in percentages.
                                </p>
                                <p>
                                    As per the spec, the right sidebar expands to cover the entire
                                    screen at small screen sizes.
                                </p>
                            </div>
                        </Sidebar>
                    </Layout>
                </div>
            </section>
        );
    }
}

export default LayoutTest;