{"action":"created","issue":{"url":"https://api.github.com/repos/KleeGroup/focus-components/issues/909","labels_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/909/labels{/name}","comments_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/909/comments","events_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/909/events","html_url":"https://github.com/KleeGroup/focus-components/issues/909","id":128192379,"number":909,"title":"Header customization","user":{"login":"asimsir","id":10651714,"avatar_url":"https://avatars.githubusercontent.com/u/10651714?v=3","gravatar_id":"","url":"https://api.github.com/users/asimsir","html_url":"https://github.com/asimsir","followers_url":"https://api.github.com/users/asimsir/followers","following_url":"https://api.github.com/users/asimsir/following{/other_user}","gists_url":"https://api.github.com/users/asimsir/gists{/gist_id}","starred_url":"https://api.github.com/users/asimsir/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/asimsir/subscriptions","organizations_url":"https://api.github.com/users/asimsir/orgs","repos_url":"https://api.github.com/users/asimsir/repos","events_url":"https://api.github.com/users/asimsir/events{/privacy}","received_events_url":"https://api.github.com/users/asimsir/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-01-22T16:30:05Z","updated_at":"2016-01-27T12:07:02Z","closed_at":null,"body":"# TL;DR\r\nDefining a customized header seems a bit too heavy and should be done with a single public method.\r\n\r\n# Current behaviour\r\nCurrently, if you wish to define the header part of the layout of your application, you need to manually call `dispatcher.handleViewAction()` at the end of the initialization.\r\nFor example, in `$APP_ROOT/index.js` :\r\n```\r\n[...]\r\n// Démarrage de l'application\r\nimport './application';\r\n\r\nimport React from 'react';\r\nimport dispatcher from 'focus-core/dispatcher';\r\ndispatcher.handleViewAction({\r\n  data: {\r\n    barContentLeftComponent: {\r\n        component: () => <div>TEST</div>\r\n    }\r\n  },\r\n  type: 'update'\r\n});\r\n```\r\nThis piece of code is highly inspired from the `clearHeader()` method in the `src/application/index.js` file. It will insert a `<div>TEST</div>` element in the `header-top-row-left` sub-structure.\r\n\r\n# Suggested behaviour\r\nExposing a `setHeader()` method which imports custom components as arguments would make the whole process lighter. It might clearer to name arguments as the sub-structures used in the header. Something like this :\r\n```\r\ndata: {\r\n    headerTopRowLeft: myHeaderTopRowLeftComponent\r\n    headerActions: myHeaderActionsComponent\r\n    ...\r\n}\r\n```\r\nThe header used in the app-demo might be a good default header too (instead of an empty header).\r\n\r\nIt is also a good opportunity to migrate the `src/application` bundle to somewhere in `components`.\r\n\r\n# Versions \r\nFocus-core : 0.12.3\r\nFocus-components : 0.8.5"},"comment":{"url":"https://api.github.com/repos/KleeGroup/focus-components/issues/comments/175587502","html_url":"https://github.com/KleeGroup/focus-components/issues/909#issuecomment-175587502","issue_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/909","id":175587502,"user":{"login":"pierr","id":286966,"avatar_url":"https://avatars.githubusercontent.com/u/286966?v=3","gravatar_id":"","url":"https://api.github.com/users/pierr","html_url":"https://github.com/pierr","followers_url":"https://api.github.com/users/pierr/followers","following_url":"https://api.github.com/users/pierr/following{/other_user}","gists_url":"https://api.github.com/users/pierr/gists{/gist_id}","starred_url":"https://api.github.com/users/pierr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pierr/subscriptions","organizations_url":"https://api.github.com/users/pierr/orgs","repos_url":"https://api.github.com/users/pierr/repos","events_url":"https://api.github.com/users/pierr/events{/privacy}","received_events_url":"https://api.github.com/users/pierr/received_events","type":"User","site_admin":false},"created_at":"2016-01-27T12:07:02Z","updated_at":"2016-01-27T12:07:02Z","body":"I also wad thinking maybe this coud be added as layout props such as an init function. It would be easier to understand."}}