@bigfishtv/cockpit/src/components/table/IndexBulkhead.js

import React from 'react'

import { titleCase } from '../../utils/stringUtils'
import { renderComponent } from '../../utils/componentUtils'
import Bulkhead from '../page/Bulkhead'

const IndexBulkhead = props => {
	const { model, title } = props
	return <Bulkhead title={title || titleCase(model)} Toolbar={<IndexToolbar {...props} />} />
}

const IndexToolbar = props => {
	const {
		selection,
		onCreate,
		onDelete,
		onImport,
		onExport,
		onDuplicate,
		creatable = true,
		deletable = true,
		duplicable = false,
		importable = false,
		exportable = false,
		customButtons,
	} = props
	return (
		<div className="flex">
			{renderComponent(customButtons, props)}
			{exportable && (
				<button type="button" onClick={onExport} className="button button-large">
					Export {selection.selectAllGlobal || selection.count === 0 ? 'All' : selection.count}
				</button>
			)}
			{importable && (
				<button type="button" onClick={onImport} className="button button-large">
					Import
				</button>
			)}
			{duplicable && selection.count === 1 && (
				<button type="button" onClick={onDuplicate} className="button button-large">
					Duplicate
				</button>
			)}
			{deletable && selection.count > 0 && (
				<button type="button" onClick={onDelete} className="button button-large error">
					Delete ({selection.count})
				</button>
			)}
			{creatable && (
				<button type="button" onClick={onCreate} className="button button-large button-secondary">
					Add new
				</button>
			)}
		</div>
	)
}

export default IndexBulkhead