{"action":"created","comment":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/comments/89660737","pull_request_review_id":10205515,"id":89660737,"diff_hunk":"@@ -0,0 +1,135 @@\n+// @flow weak\n+import { reduce, range, flow, partialRight } from 'lodash/fp';\n+\n+const baselineGrid = 8;\n+\n+const generateProps = (propSetter, from, to) => flow(\n+  range,\n+  reduce((a, i) => ({\n+    ...a,\n+    ...propSetter(i),\n+  }), { }),\n+)(from, to);\n+\n+const flexOrder = () => ({\n+  flexOrder: { order: 0 },\n+  ...generateProps((i) => ({ [`flexOrder${i}`]: { order: i } }), -20, 20),\n+});\n+\n+const offset = () => ({\n+  ...generateProps((i) => ({ [`flexOffset${i}`]: { marginLeft: `${i * 5}%` } }), 0, 19),\n+  flexOffset33: { marginLeft: 'calc(100% / 3)' },\n+  flexOffset66: { marginLeft: 'calc(200% / 3)' },\n+});\n+\n+const boxSizing = 'border-box';\n+const generateFlexProps = partialRight(generateProps, [0, 20]);","path":"src/Layout/layout-styles.js","position":26,"original_position":26,"commit_id":"7fd0af19109ceb8ec31a90fed2c16dd4390076f2","original_commit_id":"7fd0af19109ceb8ec31a90fed2c16dd4390076f2","user":{"login":"vanthiyathevan","id":1296183,"avatar_url":"https://avatars.githubusercontent.com/u/1296183?v=3","gravatar_id":"","url":"https://api.github.com/users/vanthiyathevan","html_url":"https://github.com/vanthiyathevan","followers_url":"https://api.github.com/users/vanthiyathevan/followers","following_url":"https://api.github.com/users/vanthiyathevan/following{/other_user}","gists_url":"https://api.github.com/users/vanthiyathevan/gists{/gist_id}","starred_url":"https://api.github.com/users/vanthiyathevan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vanthiyathevan/subscriptions","organizations_url":"https://api.github.com/users/vanthiyathevan/orgs","repos_url":"https://api.github.com/users/vanthiyathevan/repos","events_url":"https://api.github.com/users/vanthiyathevan/events{/privacy}","received_events_url":"https://api.github.com/users/vanthiyathevan/received_events","type":"User","site_admin":false},"body":"I think 12 should do it. as it is used in other grid layouts or make it configurable using theme?","created_at":"2016-11-25T22:48:03Z","updated_at":"2016-11-25T22:48:03Z","html_url":"https://github.com/callemall/material-ui/pull/5267#discussion_r89660737","pull_request_url":"https://api.github.com/repos/callemall/material-ui/pulls/5267","_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/comments/89660737"},"html":{"href":"https://github.com/callemall/material-ui/pull/5267#discussion_r89660737"},"pull_request":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/5267"}}},"pull_request":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/5267","id":87003466,"html_url":"https://github.com/callemall/material-ui/pull/5267","diff_url":"https://github.com/callemall/material-ui/pull/5267.diff","patch_url":"https://github.com/callemall/material-ui/pull/5267.patch","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/5267","number":5267,"state":"open","locked":false,"title":"[Layout]: Add new `Layout` components","user":{"login":"vanthiyathevan","id":1296183,"avatar_url":"https://avatars.githubusercontent.com/u/1296183?v=3","gravatar_id":"","url":"https://api.github.com/users/vanthiyathevan","html_url":"https://github.com/vanthiyathevan","followers_url":"https://api.github.com/users/vanthiyathevan/followers","following_url":"https://api.github.com/users/vanthiyathevan/following{/other_user}","gists_url":"https://api.github.com/users/vanthiyathevan/gists{/gist_id}","starred_url":"https://api.github.com/users/vanthiyathevan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vanthiyathevan/subscriptions","organizations_url":"https://api.github.com/users/vanthiyathevan/orgs","repos_url":"https://api.github.com/users/vanthiyathevan/repos","events_url":"https://api.github.com/users/vanthiyathevan/events{/privacy}","received_events_url":"https://api.github.com/users/vanthiyathevan/received_events","type":"User","site_admin":false},"body":"- [x] PR has tests / docs demo, and is linted.\n- [x] Commit and PR titles begin with [ComponentName], and are in imperative form: \"[Component] Fix leaky abstraction\".\n- [x] Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).\n\n> First of all Thank you for the awesome library. I love how every thing just works. One thing that is missing is a layout component. I've been custom rolling the awesome [angular material](https://material.angularjs.org/latest/layout/introduction) with react. As I am following the changes to the `next` branch, I see the potential to contribute my little `Layout` component. This is only a very basic layout component. Appreciate all the feedback. Thank you.\n\nThis is an initial take on layout feature heavily influenced by [angular material](https://material.angularjs.org/latest/layout/introduction). There are 2 components  exposed here.\n- `<Block />` Component. Works very similar to the `layout` attributes in **angular material**\n- `withLayout` HOC. which wraps any component with layout properties which gets rendered as `className` property.\n\nAlso included is the option to set layout properties for media query breakpoints.\n\nExample use of `<Block />` component\n\n``` jsx\nimport { List, ListItem, Toolbar, ToolbarGroup } from 'material-ui';\nimport { Block } from 'material-ui/Layout';\nimport { Link } from 'react-router';\nimport SvgIconHome from 'material-ui/svg-icons/action/home';\n\nconst ToolbarBlock = withLayout(Toolbar);\nconst BlockLink = withLayout(Link);\n\nexport default (props) => (\n  <Block flex layout=\"column\">\n    <Block flex=\"none\">\n      <ToolbarBlock layout=\"row\">\n        <ToolbarGroup>\n          <Block layout=\"row\" align=\"center\" justify=\"start\">\n            <Block hide={['xs', 'sm']}>Hello</Block>\n            <IconButton><SvgIconHome /></IconButton>\n          </Block>\n        </ToolbarGroup>\n      </ToolbarBlock>\n    </Block>\n    <Block flex layout=\"row\" scroll>\n     <Block flex=\"33\">\n        <List>\n          <ListItem primaryText=\"Inbox\" />\n          <ListItem primaryText=\"Starred\" />\n          <ListItem primaryText=\"Sent mail\" />\n          <ListItem primaryText=\"Drafts\" />\n          <ListItem primaryText=\"Inbox\" />\n        </List>\n      </Block>\n      <List>\n        <ListItem primaryText=\"Inbox\" />\n        <ListItem primaryText=\"Starred\" />\n        <ListItem primaryText=\"Sent mail\" />\n        <ListItem primaryText=\"Drafts\" />\n        <ListItem primaryText=\"Inbox\" />\n      </List>  \n    </Block>\n  </Block>\n);\n```\n","created_at":"2016-09-27T20:16:06Z","updated_at":"2016-11-25T22:48:03Z","closed_at":null,"merged_at":null,"merge_commit_sha":"0946fe4803886c53c37c91a100b09a1f6b903af7","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/callemall/material-ui/pulls/5267/commits","review_comments_url":"https://api.github.com/repos/callemall/material-ui/pulls/5267/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/5267/comments","statuses_url":"https://api.github.com/repos/callemall/material-ui/statuses/7fd0af19109ceb8ec31a90fed2c16dd4390076f2","head":{"label":"vanthiyathevan:next","ref":"next","sha":"7fd0af19109ceb8ec31a90fed2c16dd4390076f2","user":{"login":"vanthiyathevan","id":1296183,"avatar_url":"https://avatars.githubusercontent.com/u/1296183?v=3","gravatar_id":"","url":"https://api.github.com/users/vanthiyathevan","html_url":"https://github.com/vanthiyathevan","followers_url":"https://api.github.com/users/vanthiyathevan/followers","following_url":"https://api.github.com/users/vanthiyathevan/following{/other_user}","gists_url":"https://api.github.com/users/vanthiyathevan/gists{/gist_id}","starred_url":"https://api.github.com/users/vanthiyathevan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vanthiyathevan/subscriptions","organizations_url":"https://api.github.com/users/vanthiyathevan/orgs","repos_url":"https://api.github.com/users/vanthiyathevan/repos","events_url":"https://api.github.com/users/vanthiyathevan/events{/privacy}","received_events_url":"https://api.github.com/users/vanthiyathevan/received_events","type":"User","site_admin":false},"repo":{"id":69361776,"name":"material-ui","full_name":"vanthiyathevan/material-ui","owner":{"login":"vanthiyathevan","id":1296183,"avatar_url":"https://avatars.githubusercontent.com/u/1296183?v=3","gravatar_id":"","url":"https://api.github.com/users/vanthiyathevan","html_url":"https://github.com/vanthiyathevan","followers_url":"https://api.github.com/users/vanthiyathevan/followers","following_url":"https://api.github.com/users/vanthiyathevan/following{/other_user}","gists_url":"https://api.github.com/users/vanthiyathevan/gists{/gist_id}","starred_url":"https://api.github.com/users/vanthiyathevan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vanthiyathevan/subscriptions","organizations_url":"https://api.github.com/users/vanthiyathevan/orgs","repos_url":"https://api.github.com/users/vanthiyathevan/repos","events_url":"https://api.github.com/users/vanthiyathevan/events{/privacy}","received_events_url":"https://api.github.com/users/vanthiyathevan/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/vanthiyathevan/material-ui","description":"React Components that Implement Google's Material Design.","fork":true,"url":"https://api.github.com/repos/vanthiyathevan/material-ui","forks_url":"https://api.github.com/repos/vanthiyathevan/material-ui/forks","keys_url":"https://api.github.com/repos/vanthiyathevan/material-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/vanthiyathevan/material-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/vanthiyathevan/material-ui/teams","hooks_url":"https://api.github.com/repos/vanthiyathevan/material-ui/hooks","issue_events_url":"https://api.github.com/repos/vanthiyathevan/material-ui/issues/events{/number}","events_url":"https://api.github.com/repos/vanthiyathevan/material-ui/events","assignees_url":"https://api.github.com/repos/vanthiyathevan/material-ui/assignees{/user}","branches_url":"https://api.github.com/repos/vanthiyathevan/material-ui/branches{/branch}","tags_url":"https://api.github.com/repos/vanthiyathevan/material-ui/tags","blobs_url":"https://api.github.com/repos/vanthiyathevan/material-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/vanthiyathevan/material-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/vanthiyathevan/material-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/vanthiyathevan/material-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/vanthiyathevan/material-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/vanthiyathevan/material-ui/languages","stargazers_url":"https://api.github.com/repos/vanthiyathevan/material-ui/stargazers","contributors_url":"https://api.github.com/repos/vanthiyathevan/material-ui/contributors","subscribers_url":"https://api.github.com/repos/vanthiyathevan/material-ui/subscribers","subscription_url":"https://api.github.com/repos/vanthiyathevan/material-ui/subscription","commits_url":"https://api.github.com/repos/vanthiyathevan/material-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/vanthiyathevan/material-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/vanthiyathevan/material-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/vanthiyathevan/material-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/vanthiyathevan/material-ui/contents/{+path}","compare_url":"https://api.github.com/repos/vanthiyathevan/material-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/vanthiyathevan/material-ui/merges","archive_url":"https://api.github.com/repos/vanthiyathevan/material-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/vanthiyathevan/material-ui/downloads","issues_url":"https://api.github.com/repos/vanthiyathevan/material-ui/issues{/number}","pulls_url":"https://api.github.com/repos/vanthiyathevan/material-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/vanthiyathevan/material-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/vanthiyathevan/material-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/vanthiyathevan/material-ui/labels{/name}","releases_url":"https://api.github.com/repos/vanthiyathevan/material-ui/releases{/id}","deployments_url":"https://api.github.com/repos/vanthiyathevan/material-ui/deployments","created_at":"2016-09-27T13:50:07Z","updated_at":"2016-09-27T13:50:10Z","pushed_at":"2016-11-24T18:28:28Z","git_url":"git://github.com/vanthiyathevan/material-ui.git","ssh_url":"git@github.com:vanthiyathevan/material-ui.git","clone_url":"https://github.com/vanthiyathevan/material-ui.git","svn_url":"https://github.com/vanthiyathevan/material-ui","homepage":"http://www.material-ui.com","size":73587,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1,"mirror_url":null,"open_issues_count":0,"forks":1,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"callemall:next","ref":"next","sha":"331ecbc9077a12f04b6286142efe30c1f99681bf","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}","deployments_url":"https://api.github.com/repos/callemall/material-ui/deployments","created_at":"2014-08-18T19:11:54Z","updated_at":"2016-11-25T22:35:59Z","pushed_at":"2016-11-25T16:06:28Z","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://www.material-ui.com","size":84880,"stargazers_count":21291,"watchers_count":21291,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":3819,"mirror_url":null,"open_issues_count":664,"forks":3819,"open_issues":664,"watchers":21291,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/5267"},"html":{"href":"https://github.com/callemall/material-ui/pull/5267"},"issue":{"href":"https://api.github.com/repos/callemall/material-ui/issues/5267"},"comments":{"href":"https://api.github.com/repos/callemall/material-ui/issues/5267/comments"},"review_comments":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/5267/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/5267/commits"},"statuses":{"href":"https://api.github.com/repos/callemall/material-ui/statuses/7fd0af19109ceb8ec31a90fed2c16dd4390076f2"}}}}
{"actor":{"display_login":"vanthiyathevan"}}