Side nav - [new component]

docs/src/app/app-routes.jsx

@@ -36,6 +36,7 @@ let Paper = require('./components/pages/components/paper');
 let Progress = require('./components/pages/components/progress');
 let RefreshIndicator = require('./components/pages/components/refresh-indicator');
 let Sliders = require('./components/pages/components/sliders');
+let SideNav = require('./components/pages/components/side-nav');
 let Snackbar = require('./components/pages/components/snackbar');
 let Switches = require('./components/pages/components/switches');
 let Table = require('./components/pages/components/table');
@@ -89,6 +90,7 @@ let AppRoutes = (
       <Route name="progress" handler={Progress} />
       <Route name="refresh-indicator" handler={RefreshIndicator} />
       <Route name="sliders" handler={Sliders} />
+      <Route name="side-nav" handler={SideNav} />
       <Route name="switches" handler={Switches} />
       <Route name="snackbar" handler={Snackbar} />
       <Route name="table" handler={Table} />

docs/src/app/components/pages/components.jsx

@@ -22,6 +22,7 @@ class Components extends React.Component {
       { route: 'progress', text: 'Progress'},
       { route: 'refresh-indicator', text: 'Refresh Indicator'},
       { route: 'sliders', text: 'Sliders'},
+      { route: 'side-nav', text: 'Side Nav'},
       { route: 'switches', text: 'Switches'},
       { route: 'snackbar', text: 'Snackbar'},
       { route: 'table', text: 'Table'},

docs/src/app/components/pages/components/side-nav.jsx

@@ -0,0 +1,241 @@
+let React = require('react');
+let { Avatar, 
+      SideNav,
+      SideNavItem,
+      SideNavHeader,
+      SideNavDivider,
+      SideNavSubheader,
+      ListItem,
+      MenuItem,
+      Styles,      
+      RaisedButton,
+      FlatButton,
+      FontIcon,
+} = require('material-ui');
+let ComponentDoc = require('../../component-doc');
+
+let ActionAssignment = require('svg-icons/action/assignment');
+let ArrowDropRight = require('svg-icons/navigation-arrow-drop-right');
+let ContentInbox = require('svg-icons/content/inbox');
+let ActionInfo = require('svg-icons/action/info');
+
+
+class SideNavPage extends React.Component {
+
+  render() {
+    let code = '\n<SideNav ref="dockedSideNav" openType="docked" >'
+      +'\n  <SideNavHeader disabled={true} >'
+      +'\n    HEADER {/*same as primaryText="HEADER"*/}'
+      +'\n  </SideNavHeader>'
+      +'\n  <SideNavItem primaryText="plain text"/>'
+      +'\n  <SideNavItem active={true} primaryText="actived item" />'
+      +'\n  <SideNavItem primaryText="looks better?" />'
+      +'\n  <SideNavDivider />'
+      +'\n  <SideNavSubheader>'
+      +'\n    AWESOME SUBHEADER'
+      +'\n  </SideNavSubheader>'
+      +'\n  <SideNavItem primaryText="even icons" leftIcon={<ContentInbox />} />'
+      +'\n  <SideNavItem primaryText="are supported" rightIcon={<ActionInfo />} />'
+      +'\n  <SideNavItem'
+      +'\n    disabled={true}'
+      +'\n    rightIcon={<ArrowDropRight />}'
+      +'\n    primaryText="And" />'
+      +'\n  <ListItem '
+      +'\n    primaryText="ListItem" '
+      +'\n    secondaryText="is also supported!" />'
+      +'\n  <ListItem'
+      +'\n    primaryText="but, there are" '
+      +'\n    leftAvatar={<Avatar src="images/jsa-128.jpg" />} />'
+      +'\n  <ListItem primaryText="More Waiting" '
+      +'\n    leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor="#3f51b5"/>}/>'
+      +'\n  <ListItem '
+      +'\n    primaryText="For you" '
+      +'\n    secondaryText="to try and contribute!" />'
+      +'\n  <SideNavItem href="https://github.com/callemall/material-ui" style={{fontSize:18}}>'
+      +'\n    <FontIcon style={exampleFlatButtonIcon} className="muidocs-icon-custom-github"/> <div>GitHub</div>'
+      +'\n  </SideNavItem>'
+      +'\n</SideNav>\n'
+
+      +'\n<SideNav ref="sideNav" openType="overlay">'
+      +'\n  <SideNavHeader>'
+      +'\n    material ui'
+      +'\n  </SideNavHeader>'
+      +'\n  <SideNavItem primaryText="Get Started"/>'
+      +'\n  <SideNavItem primaryText="Customization" />'
+      +'\n  <SideNavItem active={true}>'
+      +'\n    Components'
+      +'\n  </SideNavItem>'
+      +'\n  <SideNavDivider />'
+      +'\n  <SideNavSubheader>'
+      +'\n    Resources'
+      +'\n  </SideNavSubheader>'
+      +'\n  <SideNavItem primaryText="GitHub" href="https://github.com/callemall/material-ui" />'
+      +'\n  <SideNavItem primaryText="React" href="http://facebook.github.io/react" />'
+      +'\n  <SideNavItem primaryText="Material Design" href="https://www.google.com/design/spec/material-design/introduction.html"/>'
+      +'\n</SideNav>'
+
+    let componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'disableSwipeToOpen',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'Indicates whether swiping sideways when the nav is closed ' +
+              'should open the nav.'
+          },
+          {
+            name: 'docked',
+            type: 'bool',
+            header: 'default: true',
+            desc: 'Indicates that the left nav should be docked. In this state, the ' +
+              'overlay won\'t show and clicking on a menu item will not close the left nav.'
+          },
+          {
+            name: 'header',
+            type: 'element',
+            header: 'optional',
+            desc: 'A react component that will be displayed above all the menu items. ' +
+              'Usually, this is used for a logo or a profile image.'
+          },
+          {
+            name: 'openRight',
+            type: 'boole',
+            header: 'default: false',
+            desc: 'Positions the SideNav to open from the right side.'
+          },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of SideNav\'s root element.'
+          }
+        ]
+      },
+      {
+        name: 'Methods',
+        infoArray: [
+          {
+            name: 'close',
+            header: 'SideNav.close()',
+            desc: 'Closes the component, hiding it from view.'
+          },
+          {
+            name: 'toggle',
+            header: 'SideNav.toggle()',
+            desc: 'Toggles between the open and closed states.'
+          }
+        ]
+      },
+      {
+        name: 'Events',
+        infoArray: [
+          {
+            name: 'onChange',
+            header: 'function(e, selectedIndex, menuItem)',
+            desc: 'Fired when a menu item is clicked that is not the one currently ' +
+              'selected. Note that this requires the injectTapEventPlugin component. ' +
+              'See the "Get Started" section for more detail.'
+          },
+          {
+            name: 'onNavOpen',
+            header: 'function()',
+            desc: 'Fired when the component is opened'
+          },
+          {
+            name: 'onNavClose',
+            header: 'function()',
+            desc: 'Fired when the component is closed'
+          }
+        ]
+      }
+    ];
+
+    const exampleFlatButtonIcon = {
+        height: '100%',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        float: 'left',
+        paddingLeft: '12px',
+        lineHeight: '36px',
+        color: Styles.Colors.cyan500
+      };
+    return (
+      <ComponentDoc
+        name="Side Nav"
+        code={code}
+        componentInfo={componentInfo}>
+
+        <div>
+
+          <RaisedButton label="Toggle Docked Side Nav" onTouchTap={this._toggleDockedSideNavClick.bind(this)} /><br/><br/>
+          <RaisedButton label="Show Overlay Side Nav" onTouchTap={this._showOverlaySideNavClick.bind(this)} />
+
+          <SideNav ref="dockedSideNav" openType='docked' >
+            <SideNavHeader disabled={true} >
+              HEADER {/*same as primaryText="HEADER"*/}
+            </SideNavHeader>
+            <SideNavItem primaryText="plain text"/>
+            <SideNavItem active={true} primaryText="actived item" />
+            <SideNavItem primaryText="looks better?" />
+            <SideNavDivider />
+            <SideNavSubheader>
+              AWESOME SUBHEADER
+            </SideNavSubheader>
+            <SideNavItem primaryText="even icons" leftIcon={<ContentInbox />} />
+            <SideNavItem primaryText="are supported" rightIcon={<ActionInfo />} />
+            <SideNavItem
+              disabled={true}
+              rightIcon={<ArrowDropRight />}
+              primaryText="And" />
+            <ListItem 
+              primaryText="ListItem" 
+              secondaryText="is also supported!" />
+            <ListItem
+              primaryText="but, there are" 
+              leftAvatar={<Avatar src="images/jsa-128.jpg" />} />
+            <ListItem primaryText="More Waiting" 
+              leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor="#3f51b5"/>}/>
+            <ListItem 
+              primaryText="For you" 
+              secondaryText="to try and contribute!" />
+            <SideNavItem href="https://github.com/callemall/material-ui" style={{fontSize:18}}>
+              <FontIcon style={exampleFlatButtonIcon} className="muidocs-icon-custom-github"/> <div>GitHub</div>
+            </SideNavItem>
+
+          </SideNav>
+          <SideNav ref="sideNav" openType='overlay'>
+            <SideNavHeader>
+              material ui
+            </SideNavHeader>
+            <SideNavItem primaryText="Get Started"/>
+            <SideNavItem primaryText="Customization" />
+            <SideNavItem active={true}>
+              Components
+            </SideNavItem>
+            <SideNavDivider />
+            <SideNavSubheader>
+              Resources
+            </SideNavSubheader>
+            <SideNavItem primaryText="GitHub" href="https://github.com/callemall/material-ui" />
+            <SideNavItem primaryText="React" href="http://facebook.github.io/react" />
+            <SideNavItem primaryText="Material Design" href="https://www.google.com/design/spec/material-design/introduction.html"/>
+          </SideNav>
+        </div>
+
+      </ComponentDoc>
+    );
+  }
+
+  _showOverlaySideNavClick() {
+    this.refs.sideNav.toggle();
+  }
+
+  _toggleDockedSideNavClick() {
+    this.refs.dockedSideNav.toggle();
+  }
+
+}
+
+module.exports = SideNavPage;

src/index.js

@@ -41,6 +41,11 @@ module.exports = {
   Ripples: require('./ripples/'),
   SelectField: require('./select-field'),
   Slider: require('./slider'),
+  SideNav: require('./side-nav/side-nav'),
+  SideNavDivider: require('./side-nav/side-nav-divider'),
+  SideNavItem: require('./side-nav/side-nav-item'),
+  SideNavHeader: require('./side-nav/side-nav-header'),
+  SideNavSubheader: require('./side-nav/side-nav-subheader'),
   SvgIcon: require('./svg-icon'),
   Icons: {
     NavigationMenu: require('./svg-icons/navigation/menu'),

src/side-nav/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+    SideNav: require('./side-nav'),
+    SideNavDivider: require('./side-nav-divider'),
+    SideNavItem: require('./side-nav-item'),
+    SideNavHeader: require('./side-nav-header'),
+    SideNavSubheader: require('./side-nav-subheader'),
+};

src/side-nav/side-nav-divider.jsx

@@ -0,0 +1,29 @@
+let React = require('react/addons');
+let StylePropable = require('../mixins/style-propable');
+let MenuDivider = require('../menus/menu-divider');
+
+let SideNavDivider = React.createClass({
+
+  mixins: [StylePropable],
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  render() {
+    let {
+      style,
+      ...other,
+    } = this.props;
+
+    let mergedStyles = this.mergeAndPrefix({
+      /*TODO*/
+    }, style);
+
+    return (
+      <MenuDivider {...other} style={mergedStyles} />
+    );
+  },
+});
+
+module.exports = SideNavDivider;

src/side-nav/side-nav-header.jsx

@@ -0,0 +1,67 @@
+let React = require('react/addons');
+let StylePropable = require('../mixins/style-propable');
+let MenuItem = require('../lists/list-item');
+
+let SideNavHeader = React.createClass({
+
+  mixins: [StylePropable],
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  propTypes: {
+    disabled: React.PropTypes.bool,
+    lineHeight: React.PropTypes.string,
+    innerDivStyle: React.PropTypes.object,
+    insetChildren: React.PropTypes.bool,
+  },
+
+  getTheme() {
+    if(this.context.muiTheme.component.sideNav)
+      return this.context.muiTheme.component.sideNav;
+    else
+      return {
+        headerItemBackgroundColor: '#2196f3',
+        headerItemTextColor: '#000000',
+      };
+  },
+
+  getDefaultProps() {
+    return {
+      disabled: true,
+    };
+  },
+
+  render() {
+    let {
+      disabled,
+      innerDivStyle,
+      style,
+      lineHeight,
+      ...other,
+    } = this.props;
+
+    let mergedStyles = this.mergeAndPrefix({
+      color: this.getTheme().headerItemTextColor,
+      backgroundColor: this.getTheme().headerItemBackgroundColor,
+      fontSize: '22px',
+      lineHeight: lineHeight? lineHeight : '32px',
+    }, style);
+
+    let mergedInnerDivStyles = this.mergeAndPrefix({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }, mergedStyles, innerDivStyle);
+
+    return (
+      <MenuItem {...other} disabled={disabled}
+         style={mergedStyles} innerDivStyle={mergedInnerDivStyles}>
+        {this.props.children}
+      </MenuItem>
+    );
+  },
+});
+
+module.exports = SideNavHeader;