src/components/ui/Modal/ModalHeader.tsx (33 lines of code) (raw):
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { FC, HTMLAttributes } from 'react';
import { BaseProps } from '../Base';
import IconButton from '../Button/IconButton';
import Remove from '../icons/Remove';
import { useModalContext } from './ModalContext';
import { StyledModalHeader } from './Styled';
export interface ModalHeaderProps
extends Omit<HTMLAttributes<HTMLDivElement>, 'css'>,
BaseProps {
/** The title of the header in the modal. */
title: string;
/** Whether or not the close icon is shown on the modal. */
displayClose?: boolean;
}
export const ModalHeader: FC<React.PropsWithChildren<ModalHeaderProps>> = ({
tag: Tag = 'div',
displayClose = true,
title,
...rest
}) => {
const context = useModalContext();
const handleClick = () => {
return context && context.onClose();
};
return (
<StyledModalHeader {...rest}>
<Tag className="ch-title" id={context.labelID}>
{title}
</Tag>
{displayClose && context?.dismissible && (
<span className="ch-close-button">
<IconButton label="Close" icon={<Remove />} onClick={handleClick} />
</span>
)}
</StyledModalHeader>
);
};
export default ModalHeader;