commit mui#2: user settings

david-docs/src/app/AppRoutes.js

@@ -66,6 +66,9 @@ import RelatedProjects from './components/pages/discover-more/RelatedProjects';
 
 import StepperPage from './components/pages/components/Stepper/Page';
 
+
+import UserPage from './components/pages/users/Page'
+
 /**
  * Routes: https://github.com/reactjs/react-router/blob/master/docs/API.md#route
  *
@@ -143,6 +146,9 @@ const AppRoutes = (
       <Route path="showcase" component={Showcase} />
       <Route path="related-projects" component={RelatedProjects} />
     </Route>
+    <Route path="settings">
+      <Route path="user" component={UserPage} />
+    </Route>
   </Route>
 );
 

david-docs/src/app/components/AppNavDrawer.js

@@ -422,6 +422,24 @@ class AppNavDrawer extends Component {
             value="https://www.google.com/design/spec/material-design/introduction.html"
           />
         </SelectableList>
+        <Divider />
+        <SelectableList
+          value={location.pathname}
+          onChange={onChangeList}
+        >
+          <Subheader>Store Management System</Subheader>
+          <ListItem
+            primaryText="Settings"
+            primaryTogglesNestedList={true}
+            nestedItems={[
+              <ListItem
+                primaryText="Users"
+                value="/settings/user"
+                href="#/settings/user"
+              />,
+            ]}
+          />
+        </SelectableList>
       </Drawer>
     );
   }

david-docs/src/app/components/pages/users/ExampleComplex.js

@@ -0,0 +1,203 @@
+import React from 'react';
+import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn}
+  from 'material-ui/Table';
+import TextField from 'material-ui/TextField';
+import Toggle from 'material-ui/Toggle';
+
+const styles = {
+  propContainer: {
+    width: 200,
+    overflow: 'hidden',
+    margin: '20px auto 0',
+  },
+  propToggleHeader: {
+    margin: '20px auto 10px',
+  },
+};
+
+const tableData = [
+  {
+    name: 'John Smith',
+    status: 'Employed',
+    selected: true,
+  },
+  {
+    name: 'Randal White',
+    status: 'Unemployed',
+  },
+  {
+    name: 'Stephanie Sanders',
+    status: 'Employed',
+    selected: true,
+  },
+  {
+    name: 'Steve Brown',
+    status: 'Employed',
+  },
+  {
+    name: 'Joyce Whitten',
+    status: 'Employed',
+  },
+  {
+    name: 'Samuel Roberts',
+    status: 'Employed',
+  },
+  {
+    name: 'Adam Moore',
+    status: 'Employed',
+  },
+];
+
+export default class TableExampleComplex extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fixedHeader: true,
+      fixedFooter: true,
+      stripedRows: false,
+      showRowHover: false,
+      selectable: true,
+      multiSelectable: false,
+      enableSelectAll: false,
+      deselectOnClickaway: true,
+      showCheckboxes: true,
+      height: '300px',
+    };
+  }
+
+  handleToggle = (event, toggled) => {
+    this.setState({
+      [event.target.name]: toggled,
+    });
+  };
+
+  handleChange = (event) => {
+    this.setState({height: event.target.value});
+  };
+
+  render() {
+    return (
+      <div>
+        <Table
+          height={this.state.height}
+          fixedHeader={this.state.fixedHeader}
+          fixedFooter={this.state.fixedFooter}
+          selectable={this.state.selectable}
+          multiSelectable={this.state.multiSelectable}
+        >
+          <TableHeader
+            displaySelectAll={this.state.showCheckboxes}
+            adjustForCheckbox={this.state.showCheckboxes}
+            enableSelectAll={this.state.enableSelectAll}
+          >
+            <TableRow>
+              <TableHeaderColumn colSpan="3" tooltip="Super Header" style={{textAlign: 'center'}}>
+                Super Header
+              </TableHeaderColumn>
+            </TableRow>
+            <TableRow>
+              <TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
+              <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
+              <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
+            </TableRow>
+          </TableHeader>
+          <TableBody
+            displayRowCheckbox={this.state.showCheckboxes}
+            deselectOnClickaway={this.state.deselectOnClickaway}
+            showRowHover={this.state.showRowHover}
+            stripedRows={this.state.stripedRows}
+          >
+            {tableData.map( (row, index) => (
+              <TableRow key={index} selected={row.selected}>
+                <TableRowColumn>{index}</TableRowColumn>
+                <TableRowColumn>{row.name}</TableRowColumn>
+                <TableRowColumn>{row.status}</TableRowColumn>
+              </TableRow>
+              ))}
+          </TableBody>
+          <TableFooter
+            adjustForCheckbox={this.state.showCheckboxes}
+          >
+            <TableRow>
+              <TableRowColumn>ID</TableRowColumn>
+              <TableRowColumn>Name</TableRowColumn>
+              <TableRowColumn>Status</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn colSpan="3" style={{textAlign: 'center'}}>
+                Super Footer
+              </TableRowColumn>
+            </TableRow>
+          </TableFooter>
+        </Table>
+
+        <div style={styles.propContainer}>
+          <h3>Table Properties</h3>
+          <TextField
+            floatingLabelText="Table Body Height"
+            defaultValue={this.state.height}
+            onChange={this.handleChange}
+          />
+          <Toggle
+            name="fixedHeader"
+            label="Fixed Header"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.fixedHeader}
+          />
+          <Toggle
+            name="fixedFooter"
+            label="Fixed Footer"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.fixedFooter}
+          />
+          <Toggle
+            name="selectable"
+            label="Selectable"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.selectable}
+          />
+          <Toggle
+            name="multiSelectable"
+            label="Multi-Selectable"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.multiSelectable}
+          />
+          <Toggle
+            name="enableSelectAll"
+            label="Enable Select All"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.enableSelectAll}
+          />
+          <h3 style={styles.propToggleHeader}>TableBody Properties</h3>
+          <Toggle
+            name="deselectOnClickaway"
+            label="Deselect On Clickaway"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.deselectOnClickaway}
+          />
+          <Toggle
+            name="stripedRows"
+            label="Stripe Rows"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.stripedRows}
+          />
+          <Toggle
+            name="showRowHover"
+            label="Show Row Hover"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.showRowHover}
+          />
+          <h3 style={styles.propToggleHeader}>Multiple Properties</h3>
+          <Toggle
+            name="showCheckboxes"
+            label="Show Checkboxes"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.showCheckboxes}
+          />
+        </div>
+      </div>
+    );
+  }
+}

david-docs/src/app/components/pages/users/ExampleSimple.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
+
+
+const TableExampleSimple = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderColumn>ID</TableHeaderColumn>
+        <TableHeaderColumn>Name</TableHeaderColumn>
+        <TableHeaderColumn>Status</TableHeaderColumn>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableRowColumn>1</TableRowColumn>
+        <TableRowColumn>John Smith</TableRowColumn>
+        <TableRowColumn>Employed</TableRowColumn>
+      </TableRow>
+      <TableRow>
+        <TableRowColumn>2</TableRowColumn>
+        <TableRowColumn>Randal White</TableRowColumn>
+        <TableRowColumn>Unemployed</TableRowColumn>
+      </TableRow>
+      <TableRow>
+        <TableRowColumn>3</TableRowColumn>
+        <TableRowColumn>Stephanie Sanders</TableRowColumn>
+        <TableRowColumn>Employed</TableRowColumn>
+      </TableRow>
+      <TableRow>
+        <TableRowColumn>4</TableRowColumn>
+        <TableRowColumn>Steve Brown</TableRowColumn>
+        <TableRowColumn>Employed</TableRowColumn>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export default TableExampleSimple;

david-docs/src/app/components/pages/users/Page.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Title from 'react-title-component';
+
+import CodeExample from '../../CodeExample';
+import PropTypeDescription from '../../PropTypeDescription';
+import MarkdownElement from '../../MarkdownElement';
+
+import tableReadmeText from './README';
+import TableExampleSimple from './ExampleSimple';
+import tableExampleSimpleCode from '!raw!./ExampleSimple';
+import TableExampleComplex from './ExampleComplex';
+import tableExampleComplexCode from '!raw!./ExampleComplex';
+
+import tableCode from '!raw!material-ui/Table/Table';
+import tableRowCode from '!raw!material-ui/Table/TableRow';
+import tableRowColumnCode from '!raw!material-ui/Table/TableRowColumn';
+import tableHeaderCode from '!raw!material-ui/Table/TableHeader';
+import tableHeaderColumnCode from '!raw!material-ui/Table/TableHeaderColumn';
+import tableBodyCode from '!raw!material-ui/Table/TableBody';
+import tableFooterCode from '!raw!material-ui/Table/TableFooter';
+
+const descriptions = {
+  simple: 'A simple table demonstrating the hierarchy of the `Table` component and its sub-components.',
+  complex: 'A more complex example, allowing the table height to be set, and key boolean properties to be toggled.',
+};
+
+const UserPage = () => (
+  <div>
+    <Title render={(previousTitle) => `Table - ${previousTitle}`} />
+    <MarkdownElement text={tableReadmeText} />
+    <CodeExample
+      title="Simple example"
+      description={descriptions.simple}
+      code={tableExampleSimpleCode}
+    >
+      <TableExampleSimple />
+    </CodeExample>
+    <CodeExample
+      title="Complex example"
+      description={descriptions.complex}
+      code={tableExampleComplexCode}
+    >
+      <TableExampleComplex />
+    </CodeExample>
+    <PropTypeDescription code={tableCode} header="### Table Properties" />
+    <PropTypeDescription code={tableRowCode} header="### TableRow Properties" />
+    <PropTypeDescription code={tableRowColumnCode} header="### TableRowColumn Properties" />
+    <PropTypeDescription code={tableHeaderCode} header="### TableHeader Properties" />
+    <PropTypeDescription code={tableHeaderColumnCode} header="### TableHeaderColumn Properties" />
+    <PropTypeDescription code={tableBodyCode} header="### TableBody Properties" />
+    <PropTypeDescription code={tableFooterCode} header="### TableFooter Properties" />
+  </div>
+);
+
+export default UserPage;

david-docs/src/app/components/pages/users/README.md

@@ -0,0 +1,6 @@
+## Table
+
+[Tables](https://www.google.com/design/spec/components/data-tables.html)
+are used to display data and to organize it.
+
+### Examples