// @flow
/* eslint-disable react/no-multi-comp */
import ErrorIcon from '@atlaskit/icon/glyph/error';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import {
Header,
Title,
titleIconWrapperStyles,
TitleText
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
import React from 'react';
import { translate } from '../../../i18n';
import { Icon, IconClose } from '../../../icons';
const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
if (!appearance) {
return null;
}
const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
return (
);
};
type Props = {
id: string,
appearance?: 'danger' | 'warning',
heading: string,
hideCloseIconButton: boolean,
onClose: Function,
showKeyline: boolean,
isHeadingMultiline: boolean,
testId: string,
t: Function
}
/**
* A default header for modal-dialog components
*
* @export
* @class ModalHeader
* @extends {React.Component}
*/
class ModalHeader extends React.Component {
static defaultProps = {
isHeadingMultiline: true
};
/**
* Initializes a new {@code ModalHeader} instance.
*
* @param {*} props - The read-only properties with which the new instance
* is to be initialized.
*/
constructor(props) {
super(props);
// Bind event handler so it is only bound once for every instance.
this._onKeyPress = this._onKeyPress.bind(this);
}
_onKeyPress: (Object) => void;
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onKeyPress(e) {
if (this.props.onClose && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
this.props.onClose();
}
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
id,
appearance,
heading,
hideCloseIconButton,
onClose,
showKeyline,
isHeadingMultiline,
testId,
t
} = this.props;
if (!heading) {
return null;
}
return (
{heading}
{
!hideCloseIconButton &&
}
);
}
}
export default translate(ModalHeader);