53 lines
1.2 KiB
React
53 lines
1.2 KiB
React
import React from 'react';
|
|
import composeClassName from './classNames';
|
|
|
|
const PanelHeader = ({
|
|
className = '',
|
|
leading = null,
|
|
title = null,
|
|
titleTag = 'h2',
|
|
titleProps = {},
|
|
actions = null,
|
|
}) => {
|
|
const headerClassName = composeClassName('panel-header', className);
|
|
|
|
const renderTitle = () => {
|
|
if (title == null) {
|
|
return null;
|
|
}
|
|
|
|
if (React.isValidElement(title)) {
|
|
if (title.type === React.Fragment) {
|
|
return (
|
|
<span className="panel-header__title" {...titleProps}>
|
|
{title}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const mergedClassName = composeClassName('panel-header__title', title.props.className || '');
|
|
return React.cloneElement(title, {
|
|
...titleProps,
|
|
className: mergedClassName,
|
|
});
|
|
}
|
|
|
|
const HeadingTag = titleTag;
|
|
return (
|
|
<HeadingTag className="panel-header__title" {...titleProps}>
|
|
{title}
|
|
</HeadingTag>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={headerClassName}>
|
|
{leading ? <div className="panel-header__leading">{leading}</div> : null}
|
|
{renderTitle()}
|
|
{actions ? <div className="panel-header__actions">{actions}</div> : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PanelHeader;
|