/
AbstractModalHeader.tsx
82 lines (71 loc) · 1.83 KB
/
AbstractModalHeader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import PropTypes from 'prop-types';
import * as React from 'react';
import { useContext } from 'react';
import useEventCallback from '@restart/hooks/useEventCallback';
import CloseButton, { CloseButtonVariant } from './CloseButton';
import ModalContext from './ModalContext';
export interface AbstractModalHeaderProps
extends React.HTMLAttributes<HTMLDivElement> {
closeLabel?: string;
closeVariant?: CloseButtonVariant;
closeButton?: boolean;
onHide?: () => void;
}
const propTypes = {
/**
* Provides an accessible label for the close
* button. It is used for Assistive Technology when the label text is not
* readable.
*/
closeLabel: PropTypes.string,
/**
* Sets the variant for close button.
*/
closeVariant: PropTypes.oneOf<CloseButtonVariant>(['white']),
/**
* Specify whether the Component should contain a close button
*/
closeButton: PropTypes.bool,
/**
* A Callback fired when the close button is clicked. If used directly inside
* a ModalContext, the onHide will automatically be propagated up
* to the parent `onHide`.
*/
onHide: PropTypes.func,
};
const AbstractModalHeader = React.forwardRef<
HTMLDivElement,
AbstractModalHeaderProps
>(
(
{
closeLabel = 'Close',
closeVariant,
closeButton = false,
onHide,
children,
...props
},
ref,
) => {
const context = useContext(ModalContext);
const handleClick = useEventCallback(() => {
context?.onHide();
onHide?.();
});
return (
<div ref={ref} {...props}>
{children}
{closeButton && (
<CloseButton
aria-label={closeLabel}
variant={closeVariant}
onClick={handleClick}
/>
)}
</div>
);
},
);
AbstractModalHeader.propTypes = propTypes;
export default AbstractModalHeader;