ContentPanel.tsx

/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiHorizontalRule,
  EuiPanel,
  EuiTitle,
  EuiText,
} from '@elastic/eui';

interface ContentPanelProps {
  title?: string | JSX.Element;
  titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
  subTitleText?: string | JSX.Element;
  bodyStyles?: object;
  panelStyles?: object;
  horizontalRuleClassName?: string;
  actions?: React.ReactNode | React.ReactNode[];
  children: React.ReactNode | React.ReactNode[];
}

const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | null => {
  if (typeof subTitleText === 'string') {
    if (!subTitleText) return null;
    return (
      <EuiText size="s" color="subdued">
        {subTitleText}
      </EuiText>
    );
  }
  return subTitleText;
};

const ContentPanel: React.SFC<ContentPanelProps> = ({
  title = '',
  titleSize = 'm',
  subTitleText = '',
  bodyStyles = {},
  panelStyles = {},
  horizontalRuleClassName = '',
  actions,
  children,
}) => (
  <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
    <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
      <EuiFlexItem>
        {typeof title === 'string' ? (
          <EuiTitle size={titleSize}>
            <h3>{title}</h3>
          </EuiTitle>
        ) : (
          title
        )}
        {renderSubTitleText(subTitleText)}
      </EuiFlexItem>
      {actions ? (
        <EuiFlexItem grow={false}>
          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
            {Array.isArray(actions) ? (
              (actions as React.ReactNode[]).map(
                (action: React.ReactNode, idx: number): React.ReactNode => (
                  <EuiFlexItem key={idx}>{action}</EuiFlexItem>
                )
              )
            ) : (
              <EuiFlexItem>{actions}</EuiFlexItem>
            )}
          </EuiFlexGroup>
        </EuiFlexItem>
      ) : null}
    </EuiFlexGroup>

    <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />

    <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
  </EuiPanel>
);

export default ContentPanel;