ant-header

Header component for projects based on antd library

Usage

Use <Header /> component in your app route to show app-wide tools and navigation menu button.

Minimal

<Header
  onSwitchSider={() => this.setState({ isSiderCollapsed: !isSiderCollapsed })}
  isSiderCollapsed={isSiderCollapsed}
  navMenu={<Sider />}
/>

Will render header with navigation menu button only.

Feedback button

<Header
  ...
  bugReporter={{
    apiUrl: 'myApi/bugs',
    supportEmail: '[email protected]'
  }}
/>

Will render feedback button with name taken from App.header.techSupport ('Support' by default).
When clicked will show Bug Reporter form. You can define translations for Bug Reporter form using these ids:

id: 'BugReporter.placeholder', defaultMessage: 'Leave us a message',
id: 'BugReporter.success', defaultMessage: 'Your message has been sent',
id: 'BugReporter.send', defaultMessage: 'Send',
id: 'BugReporter.help', defaultMessage: 'Don’t forget to describe what you did, what you saw happened and what you expected to happen. Please mention how critical it is.',
id: 'BugReporter.requiredWarning', defaultMessage: 'Please leave us a message',
id: 'BugReporter.sendError', defaultMessage: 'Error sending the message',
id: 'BugReporter.contactUs', defaultMessage: 'If you have problems leaving a message you can contact us via email directly:'

Locale selector

<Header
  ...
  localeSelector={{
    onSwitchLocale: l => console.info('locale switch call', l),
    locales: { en: { name: 'English' }, es: { name: 'Espanol' } },
  }}
/>

Will render locale selector dropdown where user can select app locale.

Profile menu

<Header
  ...
  profileMenu={{
    onProfilePageClick: () => console.info('go to profile page'),
    onSignOutClick: () => console.info('sign out'),
    username: 'John Doe',
  }}
/>

Will render profile menu dropdown titled by username. The dropdown will have two items: 'My profile' and 'Sign out'. They could be translated by declaring these ids:

id: 'App.header.signOut', defaultMessage: 'Sign Out',
id: 'App.header.myProfile', defaultMessage: 'My Profile'

Custom content

<Header ...>
  <div>Custom content</div>
</Header>

Will render custom content in the center of the header.

Compact view

<Header
  bugReporter=...
  localeSelector=...
  profileMenu=...
  isCompact={true}
/>

Will render buttons in compact mode: no text, icons only.

Sider popover

<Header
  isSiderPopover={true}
/>

Will render navigation menu as a popover

API

props

| Prop | Type | Default | Description | ---------------- | ---------------------------- | ----------- | ------------ | hasSider | bool | false | If true show Sider button | navMenu | element | undefined | Content to show in the navigation popover | onSwitchSider | func | undefined | Fired when the navigation button is clicked | isSiderCollapsed | bool | true | Affects the navigation button icon | isSiderPopover | bool | false | If true, the navMenu content will be presented in a popover when the navigation button is clicked | isCompact | bool | false | If true, will show tools buttons without text, icons only | extra | element or array of elements | undefined | Show extra components near the buttons | bugReporter | object | undefined | When defined will show Bug Reporter button | localeSelector | object | undefined | When defined will show Locale Selector | profileMenu | object | undefined | When defined will show Profile Menu

bugReporter props

| Prop | Type | Description |------------------|--------|------------ | *apiUrl | string | The URL where to post bug report message | *supportEmail | string | Email address to show in the bug reporter form

localeSelector props

| Prop | Type | Description |--------------------|----------|------------- | *locales | object | Object key should be lang name ('en', 'es', ...) and the value is { name } object. name will be displayed in the menu. | *onSwitchLocale | func | Called when dropdown item is selected. Receives lang name as an argument.

profileMenu props

| Prop | Type | Description |------------------------|--------|-------------- | *username | string | User name to show as a button title | *onProfilePageClick | func | Called when 'My Profile' item is clicked | *onSignOutClick | func | Called when 'Sign out' item is clicked

Contributing

See CONTRIBUTING.md for how to develop a component.