{"action":"created","comment":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/comments/36119160","id":36119160,"diff_hunk":"@@ -0,0 +1,370 @@\n+import React from 'react';\n+import { AutoPrefix, Transitions } from '../styles';\n+import Overlay from '../overlay';\n+import Menu from '../menus/menu';\n+import Paper from '../paper';\n+import KeyCode from '../utils/key-code';\n+import StylePropable from '../mixins/style-propable';\n+import WindowListenable from '../mixins/window-listenable';\n+\n+let openNavEventHandler = null;\n+\n+let SideNav = React.createClass({\n+\n+  mixins: [StylePropable, WindowListenable],\n+\n+  contextTypes: {\n+    muiTheme: React.PropTypes.object,\n+  },\n+\n+  propTypes: {\n+    className: React.PropTypes.string,\n+    /*open type currently supports: docked/overlay */\n+    openType: React.PropTypes.oneOf([\n+      'none',\n+      'docked',\n+      'overlay',\n+    ]),\n+    defaultOpen: React.PropTypes.bool,\n+    header: React.PropTypes.element,\n+    onChange: React.PropTypes.func,\n+    onNavOpen: React.PropTypes.func,\n+    onNavClose: React.PropTypes.func,\n+    openRight: React.PropTypes.bool,\n+    menuStyle: React.PropTypes.object,\n+    listStyle: React.PropTypes.object,\n+    disableSwipeToOpen: React.PropTypes.bool,\n+  },\n+\n+  windowListeners: {\n+    'keyup': '_onWindowKeyUp',\n+    'resize': '_onWindowResize',\n+  },\n+\n+  getDefaultProps() {\n+    return {\n+      openType:'docked',\n+      defaultOpen: false,\n+      disableSwipeToOpen: false,\n+      zDepth: 0,\n+    };\n+  },\n+\n+  getInitialState() {\n+    this._maybeSwiping = false;\n+    this._touchStartX = null;\n+    this._touchStartY = null;\n+    this._swipeStartX = null;\n+\n+    return {\n+      open: this.props.defaultOpen,\n+      swiping: null,\n+    };\n+  },\n+\n+  componentDidMount() {\n+    this._updateMenuHeight();\n+    this._enableSwipeHandling();\n+  },\n+\n+  componentDidUpdate() {\n+    this._updateMenuHeight();\n+    this._enableSwipeHandling();\n+  },\n+\n+  componentWillUnmount() {\n+    this._disableSwipeHandling();\n+  },\n+\n+  toggle() {\n+    this.setState({ open: !this.state.open });\n+    return this;\n+  },\n+\n+  close() {\n+    this.setState({ open: false });\n+    if (this.props.onNavClose) this.props.onNavClose();\n+    return this;\n+  },\n+\n+  open() {\n+    this.setState({ open: true });\n+    if (this.props.onNavOpen) this.props.onNavOpen();\n+    return this;\n+  },\n+\n+  getThemePalette() {\n+    return this.context.muiTheme.palette;\n+  },\n+\n+  getTheme() {\n+    if(this.context.muiTheme.component.sideNav)\n+      return this.context.muiTheme.component.sideNav;\n+    else\n+      return {\n+        width: 256,\n+        backgroundColor: '#FFFFFF',\n+      };\n+  },\n+\n+  getStyles() {\n+    let x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX());\n+    let styles = {\n+      root: {\n+        height: '100%',\n+        width: this.props.width? this.props.width : this.getTheme().width,\n+        backgroundColor: this.props.backgroundColor? this.props.backgroundColor : this.getTheme().backgroundColor,\n+        position: 'fixed',\n+        zIndex: 10,\n+        left: 0,\n+        top: 0,\n+        transform: 'translate3d(' + x + 'px, 0, 0)',\n+        transition: !this.state.swiping && Transitions.easeOut(),\n+        overflow: 'hidden',\n+      },\n+      menu: {\n+        backgroundColor: this.props.backgroundColor? this.props.backgroundColor : this.getTheme().backgroundColor,\n+        overflowY: 'auto',\n+        overflowX: 'hidden',\n+        height: '100%',\n+        width: this.props.width? this.props.width : this.getTheme().width,\n+        borderRadius: '0',\n+      },\n+      list: {\n+        width: this.props.width? this.props.width : this.getTheme().width,\n+        paddingTop: 0,\n+      },\n+      rootWhenOpenRight: {\n+        left: 'auto',\n+        right: 0,\n+      },\n+    };\n+\n+    return styles;\n+  },\n+\n+  render() {\n+    let overlay;\n+\n+    let {\n+      className,\n+      openType,\n+      defaultOpen,\n+      header,\n+      onChange,\n+      onNavOpen,\n+      onNavClose,\n+      openRight,\n+      disableSwipeToOpen,\n+      style,\n+      listStyle,\n+      menuStyle,\n+      zDepth,\n+      ...other,\n+    } = this.props;\n+\n+    let styles = this.getStyles();\n+    if (openType==='overlay') {\n+      overlay = (\n+        <Overlay\n+          ref=\"overlay\"\n+          show={this.state.open || !!this.state.swiping}\n+          transitionEnabled={!this.state.swiping}\n+          onTouchTap={this._onOverlayTouchTap}\n+        />\n+      );\n+    }\n+\n+    return (\n+      <div className={className}>\n+        {overlay}\n+        <Paper\n+          ref=\"container\"\n+          className=\"paper\"\n+          zDepth={2}\n+          rounded={false}\n+          transitionEnabled={!this.state.swiping}\n+          style={this.mergeAndPrefix(\n+            styles.root,\n+            openRight && styles.rootWhenOpenRight,\n+            style)}>\n+            {header}\n+            <Menu\n+              {...other}\n+              ref=\"menu\"\n+              autoWidth={false}\n+              style={this.mergeAndPrefix(styles.menu,menuStyle)}\n+              listStyle={this.mergeAndPrefix(styles.list,listStyle)}\n+              zDepth={zDepth}\n+              onItemTouchTap={this._onMenuItemClick} >\n+              {this.props.children}","path":"src/side-nav/side-nav.jsx","position":200,"original_position":200,"commit_id":"8112090d5b9becdfea50c97ca83da39926e279fd","original_commit_id":"8112090d5b9becdfea50c97ca83da39926e279fd","user":{"login":"igorbt","id":1198924,"avatar_url":"https://avatars.githubusercontent.com/u/1198924?v=3","gravatar_id":"","url":"https://api.github.com/users/igorbt","html_url":"https://github.com/igorbt","followers_url":"https://api.github.com/users/igorbt/followers","following_url":"https://api.github.com/users/igorbt/following{/other_user}","gists_url":"https://api.github.com/users/igorbt/gists{/gist_id}","starred_url":"https://api.github.com/users/igorbt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/igorbt/subscriptions","organizations_url":"https://api.github.com/users/igorbt/orgs","repos_url":"https://api.github.com/users/igorbt/repos","events_url":"https://api.github.com/users/igorbt/events{/privacy}","received_events_url":"https://api.github.com/users/igorbt/received_events","type":"User","site_admin":false},"body":"That seems the only line different from LeftNav (aside importing another Menu compnent),","created_at":"2015-08-03T19:06:53Z","updated_at":"2015-08-03T19:06:53Z","html_url":"https://github.com/callemall/material-ui/pull/1319#discussion_r36119160","pull_request_url":"https://api.github.com/repos/callemall/material-ui/pulls/1319","_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/comments/36119160"},"html":{"href":"https://github.com/callemall/material-ui/pull/1319#discussion_r36119160"},"pull_request":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1319"}}},"pull_request":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/1319","id":41414901,"html_url":"https://github.com/callemall/material-ui/pull/1319","diff_url":"https://github.com/callemall/material-ui/pull/1319.diff","patch_url":"https://github.com/callemall/material-ui/pull/1319.patch","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/1319","number":1319,"state":"open","locked":false,"title":"Side nav - [new component]","user":{"login":"yongxu","id":1932255,"avatar_url":"https://avatars.githubusercontent.com/u/1932255?v=3","gravatar_id":"","url":"https://api.github.com/users/yongxu","html_url":"https://github.com/yongxu","followers_url":"https://api.github.com/users/yongxu/followers","following_url":"https://api.github.com/users/yongxu/following{/other_user}","gists_url":"https://api.github.com/users/yongxu/gists{/gist_id}","starred_url":"https://api.github.com/users/yongxu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yongxu/subscriptions","organizations_url":"https://api.github.com/users/yongxu/orgs","repos_url":"https://api.github.com/users/yongxu/repos","events_url":"https://api.github.com/users/yongxu/events{/privacy}","received_events_url":"https://api.github.com/users/yongxu/received_events","type":"User","site_admin":false},"body":"Hi there,\r\nI started this component for my own project use, but I think it would be great to contribute it as a part of material ui library.   \r\nA better LeftNav with much richer features, Items are defined react components instead of list.\r\nAlso compatible with ListItem, used Menus/Menu instead of Menu/Menu.\r\n\r\nThe code is structurally similar to LeftNav, which was intended to create a better version of LeftNav. Some function names and the swipe handling functions come from LeftNav.\r\nI also added a demo page, it works great, but more detailed documentation is still needed. \r\n\r\nDemo screen shot:\r\n![screen shot](https://cloud.githubusercontent.com/assets/1932255/9025463/c2e3cb44-38ca-11e5-99f9-5a8962bb22cc.jpg)\r\n![screen shot](https://cloud.githubusercontent.com/assets/1932255/9025465/cf2b3cca-38ca-11e5-95e2-4ac41a00f091.jpg)\r\n","created_at":"2015-08-02T09:12:14Z","updated_at":"2015-08-03T19:06:53Z","closed_at":null,"merged_at":null,"merge_commit_sha":"b7b8cf99eb0f451d201ec442cfbff40a094ea954","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/callemall/material-ui/pulls/1319/commits","review_comments_url":"https://api.github.com/repos/callemall/material-ui/pulls/1319/comments","review_comment_url":"https://api.github.com/repos/callemall/material-ui/pulls/comments{/number}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/1319/comments","statuses_url":"https://api.github.com/repos/callemall/material-ui/statuses/8112090d5b9becdfea50c97ca83da39926e279fd","head":{"label":"yongxu:side-nav","ref":"side-nav","sha":"8112090d5b9becdfea50c97ca83da39926e279fd","user":{"login":"yongxu","id":1932255,"avatar_url":"https://avatars.githubusercontent.com/u/1932255?v=3","gravatar_id":"","url":"https://api.github.com/users/yongxu","html_url":"https://github.com/yongxu","followers_url":"https://api.github.com/users/yongxu/followers","following_url":"https://api.github.com/users/yongxu/following{/other_user}","gists_url":"https://api.github.com/users/yongxu/gists{/gist_id}","starred_url":"https://api.github.com/users/yongxu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yongxu/subscriptions","organizations_url":"https://api.github.com/users/yongxu/orgs","repos_url":"https://api.github.com/users/yongxu/repos","events_url":"https://api.github.com/users/yongxu/events{/privacy}","received_events_url":"https://api.github.com/users/yongxu/received_events","type":"User","site_admin":false},"repo":{"id":39987206,"name":"material-ui","full_name":"yongxu/material-ui","owner":{"login":"yongxu","id":1932255,"avatar_url":"https://avatars.githubusercontent.com/u/1932255?v=3","gravatar_id":"","url":"https://api.github.com/users/yongxu","html_url":"https://github.com/yongxu","followers_url":"https://api.github.com/users/yongxu/followers","following_url":"https://api.github.com/users/yongxu/following{/other_user}","gists_url":"https://api.github.com/users/yongxu/gists{/gist_id}","starred_url":"https://api.github.com/users/yongxu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yongxu/subscriptions","organizations_url":"https://api.github.com/users/yongxu/orgs","repos_url":"https://api.github.com/users/yongxu/repos","events_url":"https://api.github.com/users/yongxu/events{/privacy}","received_events_url":"https://api.github.com/users/yongxu/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/yongxu/material-ui","description":"React Components that Implement Google's Material Design.","fork":true,"url":"https://api.github.com/repos/yongxu/material-ui","forks_url":"https://api.github.com/repos/yongxu/material-ui/forks","keys_url":"https://api.github.com/repos/yongxu/material-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/yongxu/material-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/yongxu/material-ui/teams","hooks_url":"https://api.github.com/repos/yongxu/material-ui/hooks","issue_events_url":"https://api.github.com/repos/yongxu/material-ui/issues/events{/number}","events_url":"https://api.github.com/repos/yongxu/material-ui/events","assignees_url":"https://api.github.com/repos/yongxu/material-ui/assignees{/user}","branches_url":"https://api.github.com/repos/yongxu/material-ui/branches{/branch}","tags_url":"https://api.github.com/repos/yongxu/material-ui/tags","blobs_url":"https://api.github.com/repos/yongxu/material-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/yongxu/material-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/yongxu/material-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/yongxu/material-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/yongxu/material-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/yongxu/material-ui/languages","stargazers_url":"https://api.github.com/repos/yongxu/material-ui/stargazers","contributors_url":"https://api.github.com/repos/yongxu/material-ui/contributors","subscribers_url":"https://api.github.com/repos/yongxu/material-ui/subscribers","subscription_url":"https://api.github.com/repos/yongxu/material-ui/subscription","commits_url":"https://api.github.com/repos/yongxu/material-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/yongxu/material-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/yongxu/material-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/yongxu/material-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/yongxu/material-ui/contents/{+path}","compare_url":"https://api.github.com/repos/yongxu/material-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/yongxu/material-ui/merges","archive_url":"https://api.github.com/repos/yongxu/material-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/yongxu/material-ui/downloads","issues_url":"https://api.github.com/repos/yongxu/material-ui/issues{/number}","pulls_url":"https://api.github.com/repos/yongxu/material-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/yongxu/material-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/yongxu/material-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/yongxu/material-ui/labels{/name}","releases_url":"https://api.github.com/repos/yongxu/material-ui/releases{/id}","created_at":"2015-07-31T04:50:42Z","updated_at":"2015-07-31T04:50:43Z","pushed_at":"2015-08-03T12:01:52Z","git_url":"git://github.com/yongxu/material-ui.git","ssh_url":"git@github.com:yongxu/material-ui.git","clone_url":"https://github.com/yongxu/material-ui.git","svn_url":"https://github.com/yongxu/material-ui","homepage":"http://material-ui.com","size":24275,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"callemall:master","ref":"master","sha":"70e66940c1b8d0534a3a70f0db07429e3a05ce53","user":{"login":"callemall","id":1262264,"avatar_url":"https://avatars.githubusercontent.com/u/1262264?v=3","gravatar_id":"","url":"https://api.github.com/users/callemall","html_url":"https://github.com/callemall","followers_url":"https://api.github.com/users/callemall/followers","following_url":"https://api.github.com/users/callemall/following{/other_user}","gists_url":"https://api.github.com/users/callemall/gists{/gist_id}","starred_url":"https://api.github.com/users/callemall/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callemall/subscriptions","organizations_url":"https://api.github.com/users/callemall/orgs","repos_url":"https://api.github.com/users/callemall/repos","events_url":"https://api.github.com/users/callemall/events{/privacy}","received_events_url":"https://api.github.com/users/callemall/received_events","type":"Organization","site_admin":false},"repo":{"id":23083156,"name":"material-ui","full_name":"callemall/material-ui","owner":{"login":"callemall","id":1262264,"avatar_url":"https://avatars.githubusercontent.com/u/1262264?v=3","gravatar_id":"","url":"https://api.github.com/users/callemall","html_url":"https://github.com/callemall","followers_url":"https://api.github.com/users/callemall/followers","following_url":"https://api.github.com/users/callemall/following{/other_user}","gists_url":"https://api.github.com/users/callemall/gists{/gist_id}","starred_url":"https://api.github.com/users/callemall/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callemall/subscriptions","organizations_url":"https://api.github.com/users/callemall/orgs","repos_url":"https://api.github.com/users/callemall/repos","events_url":"https://api.github.com/users/callemall/events{/privacy}","received_events_url":"https://api.github.com/users/callemall/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/callemall/material-ui","description":"React Components that Implement Google's Material Design.","fork":false,"url":"https://api.github.com/repos/callemall/material-ui","forks_url":"https://api.github.com/repos/callemall/material-ui/forks","keys_url":"https://api.github.com/repos/callemall/material-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/callemall/material-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/callemall/material-ui/teams","hooks_url":"https://api.github.com/repos/callemall/material-ui/hooks","issue_events_url":"https://api.github.com/repos/callemall/material-ui/issues/events{/number}","events_url":"https://api.github.com/repos/callemall/material-ui/events","assignees_url":"https://api.github.com/repos/callemall/material-ui/assignees{/user}","branches_url":"https://api.github.com/repos/callemall/material-ui/branches{/branch}","tags_url":"https://api.github.com/repos/callemall/material-ui/tags","blobs_url":"https://api.github.com/repos/callemall/material-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/callemall/material-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/callemall/material-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/callemall/material-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/callemall/material-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/callemall/material-ui/languages","stargazers_url":"https://api.github.com/repos/callemall/material-ui/stargazers","contributors_url":"https://api.github.com/repos/callemall/material-ui/contributors","subscribers_url":"https://api.github.com/repos/callemall/material-ui/subscribers","subscription_url":"https://api.github.com/repos/callemall/material-ui/subscription","commits_url":"https://api.github.com/repos/callemall/material-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/callemall/material-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/callemall/material-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/callemall/material-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/callemall/material-ui/contents/{+path}","compare_url":"https://api.github.com/repos/callemall/material-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/callemall/material-ui/merges","archive_url":"https://api.github.com/repos/callemall/material-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/callemall/material-ui/downloads","issues_url":"https://api.github.com/repos/callemall/material-ui/issues{/number}","pulls_url":"https://api.github.com/repos/callemall/material-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/callemall/material-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/callemall/material-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/callemall/material-ui/labels{/name}","releases_url":"https://api.github.com/repos/callemall/material-ui/releases{/id}","created_at":"2014-08-18T19:11:54Z","updated_at":"2015-08-03T17:53:18Z","pushed_at":"2015-08-03T16:13:50Z","git_url":"git://github.com/callemall/material-ui.git","ssh_url":"git@github.com:callemall/material-ui.git","clone_url":"https://github.com/callemall/material-ui.git","svn_url":"https://github.com/callemall/material-ui","homepage":"http://material-ui.com","size":33250,"stargazers_count":9635,"watchers_count":9635,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":1356,"mirror_url":null,"open_issues_count":261,"forks":1356,"open_issues":261,"watchers":9635,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1319"},"html":{"href":"https://github.com/callemall/material-ui/pull/1319"},"issue":{"href":"https://api.github.com/repos/callemall/material-ui/issues/1319"},"comments":{"href":"https://api.github.com/repos/callemall/material-ui/issues/1319/comments"},"review_comments":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1319/comments"},"review_comment":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1319/commits"},"statuses":{"href":"https://api.github.com/repos/callemall/material-ui/statuses/8112090d5b9becdfea50c97ca83da39926e279fd"}}}}