# XlReactTabSystem

This element helps you to create tabs with different skins.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)


### Exports
```
- XlReactTabSystemContainer
- XlReactTabSystem
```

### Playground

* [Tabs](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/tabs)

## Properties

- **actions** - The list of actions which will be shown in dropdown located on the right side of tab panel.
        You can specify the text for this option and the action, what will be performed on clicking that option.
        
- **activeTabId** - Makes specific tab active
- **data** - the list of tabs shown to the user:
    - **fullTitle** -  the name of title which be displayed on tab hover
    - **iconUrl** - displayed icon in the tab before tab title
    - **loading** - if true displays spinner in the tab content pane
    - **pristine** - if false displays the asterisk in the tab on the right side
    - **tabId** - unique tab identifier
    - **title** - displayed tab title
    - **viewType** - tells to the tab system which tab definition (layout) to use. 
Layout will be looked up from provided *tabDefinitions*. 
- **loaderElement** - React element if provided will be displayed instead of default spinner
- **onCloseTab** - this function is invoked when to click on tab's cross
- **onNewTab** - this function is invoked when to click on "+" which should create a new tab
- **onTabSelected** - this function is invoked when to click on not active tab
- **skin** - one of the skins which be applied. Possible options: _blue_, _default_, _none_, _underlined_
- **tabDefinitions** - The list of layouts how the tab content will be displayed.
Example of tab definition:

```jsx

export const menuDefinitions = (hideEntityPanel, typeSystem) => ({
    [menuData.EXPLORER.name]: {
        renderContent: () =>
            <ExplorerLayout hideEntityPanel={hideEntityPanel} typeSystem={typeSystem}/>
    },
    [menuData.REPORTS.name]: {renderContent: () => <ReportsLayout/>},
    [menuData.USER_MANAGEMENT.name]: {renderContent: () => <UserManagementLayout/>},
    [ExtensionTypeId]: {renderContent: (tab) => <iframe className="extension-layout" src={tab.extensionEntryPoint}/>}
});
```


So it should be an object, where each key represents tab definition (tab content layout) name, and value of it should 
be an object with required *renderContent* function which should return the React element displayed the layout.

### Example

Example of using the component:

```jsx 
const aboutBoxTabs = [{
    pristine: true,
    tabId: 'version',
    title: 'Version',
    viewType: 'Version'
}, {
    pristine: true,
    tabId: 'license',
    title: 'License',
    viewType: 'License'
}];

const handleTabSelected = (tabId) => {
    this.props.selectTab(tabId); // which eventually calls saga and there selectedTab is updated
};

const aboutBoxTabDefinitions = (serverInfo) => ({
    [aboutBoxTabTypes.LICENSE]: {renderContent: () => <LicenseInfo {...serverInfo.licenseInfo}/>},
    [aboutBoxTabTypes.VERSION]: {renderContent: () => <VersionInfo serverVersion={serverInfo.version}/>}
});

<XlReactTabSystem
    activeTabId={this.props.selectedTab} // value is taken from redux store
    data={aboutBoxTabs}
    onTabSelected={this.handleTabSelected}
    skin="underlined"
    tabDefinitions={aboutBoxTabDefinitions(serverInfo)}
/>
```
