@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
55 lines (54 loc) • 1.95 kB
JavaScript
/* modal-header.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./modal-header.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { Flex } from '@atlaskit/primitives/compiled';
import { CloseButton } from './close-button';
import { useModal } from './hooks';
const styles = {
header: "_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1i6y _85i5pxbi _1q511ejb",
flex: "_2lx21sbv _1bsb1osq",
titleContainer: "_1ul9idpf"
};
/**
* __Modal header__
*
* A modal header contains the title of the modal and can contain other React elements such as a close button.
*
* - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
* - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
*/
const ModalHeader = props => {
const {
children,
testId: userDefinedTestId,
hasCloseButton = false
} = props;
const {
hasProvidedOnClose,
onClose,
testId: modalTestId
} = useModal();
const testId = userDefinedTestId || modalTestId && `${modalTestId}--header`;
// Only show if an onClose was provided for the modal dialog
const shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
return /*#__PURE__*/React.createElement("div", {
"data-testid": testId,
className: ax([styles.header])
}, shouldShowCloseButton ? /*#__PURE__*/React.createElement(Flex, {
gap: "space.200",
justifyContent: "space-between",
xcss: styles.flex
}, /*#__PURE__*/React.createElement(Flex, {
justifyContent: "end"
}, /*#__PURE__*/React.createElement(CloseButton, {
onClick: onClose,
testId: modalTestId
})), /*#__PURE__*/React.createElement(Flex, {
justifyContent: "start",
alignItems: "center",
xcss: styles.titleContainer
}, children)) : children);
};
export default ModalHeader;