Source: node_modules/react-aiot/src/components/Header.js

/** @module react-aiot/components/Header */
import React from 'react';
import { Toolbar, Creatable, Spin } from '.';

/**
 * Render the header with headline, {@link module:react-aiot/components/Creatable|Creatable buttons} buttons
 * and {@link module:react-aiot/components/Toolbar|Toolbar}. In this part the sticky component is ensured and
 * you do not have to worry about it.
 * 
 * @param {object} props Properties
 * @param {React.Element|string} props.headline The headline
 * @param {object} [props.creatable] The creatables configuration
 * @param {object<key,object>} props.creatable.buttons The buttons. The key is the unique
 *      button key and the object represents the {@link module:react-aiot/components/Creatable|Creatable} properties.
 * @param {object} props.creatable.backButton If isCreatableLinkCancel is true this button is showed ({@link module:react-aiot/components/Creatable|Creatable} properties)
 * @param {boolean} [props.isCreatableLinkDisabled] Allows to disable all creatable buttons
 * @param {boolean} [props.isCreatableLinkCancel] If true the props.creatable.backButton is parsed as Creatable button
 * @param {boolean} [props.isToolbarActive] If true the toolbar buttons are enabled (see {@link module:react-aiot/components/Toolbar|Toolbar})
 * @param {boolean} [props.isToolbarBusy] If true the toolbar is overlayed with a spinning loader (see {@link module:react-aiot/components/Toolbar|Toolbar})
 * @param {object} [props.toolbar] The toolbar configuration (see {@link module:react-aiot/components/Toolbar|Toolbar})
 * @param {object<key,object>} [props.toolbar.buttons] The toolbar buttons
 * @param {object} [props.toolbar.backButton] The toolbar back button. Is showed if toolbarActiveButton is set
 * @param {string} [props.toolbarActiveButton] The active toolbar button (must match the same as the object key of the button)
 * @param {boolean} [props.isBusyHeader] If true the header is overlayed with a spinning loader
 */
export default ({
    headline,
    creatable,
    isCreatableLinkDisabled,
    isCreatableLinkCancel,
    isToolbarActive,
    isToolbarBusy,
    toolbar,
    toolbarActiveButton,
    isBusyHeader
}) => <Spin spinning={ !!isBusyHeader } size="small">
    <div className="aiot-tree-headline">
        { headline }
        { !isCreatableLinkCancel ? Object.keys(creatable.buttons).map(key => 
            ( <Creatable key={ key } type={ key } {...creatable.buttons[key]} isCreatableLinkDisabled={ isCreatableLinkDisabled } /> ) )
            : <Creatable { ...creatable.backButton } type="_aio_cancel" /> }
    </div>
    <Toolbar isToolbarActive={ isToolbarActive } isToolbarBusy={ isToolbarBusy } buttons={ toolbar.buttons }
        backButton={ toolbar.backButton } activeButton={ toolbarActiveButton } />
</Spin>;