1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import * as ReactDOM from 'react-dom';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
|
6 | import { canUseDOM } from '../../helpers';
|
7 | import { KEY_CODES } from '../../helpers/constants';
|
8 | import { AboutModalContainer } from './AboutModalContainer';
|
9 | export class AboutModal extends React.Component {
|
10 | constructor(props) {
|
11 | super(props);
|
12 | this.id = AboutModal.currentId++;
|
13 | this.ariaLabelledBy = `pf-about-modal-title-${this.id}`;
|
14 | this.ariaDescribedBy = `pf-about-modal-content-${this.id}`;
|
15 | this.handleEscKeyClick = (event) => {
|
16 | if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
|
17 | this.props.onClose();
|
18 | }
|
19 | };
|
20 | this.toggleSiblingsFromScreenReaders = (hide) => {
|
21 | const { appendTo } = this.props;
|
22 | const target = this.getElement(appendTo);
|
23 | const bodyChildren = target.children;
|
24 | for (const child of Array.from(bodyChildren)) {
|
25 | if (child !== this.state.container) {
|
26 | hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
|
27 | }
|
28 | }
|
29 | };
|
30 | this.getElement = (appendTo) => {
|
31 | if (typeof appendTo === 'function') {
|
32 | return appendTo();
|
33 | }
|
34 | return appendTo || document.body;
|
35 | };
|
36 | this.state = {
|
37 | container: undefined
|
38 | };
|
39 | if (props.brandImageSrc && !props.brandImageAlt) {
|
40 |
|
41 | console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified');
|
42 | }
|
43 | }
|
44 | componentDidMount() {
|
45 | const container = document.createElement('div');
|
46 | const target = this.getElement(this.props.appendTo);
|
47 | this.setState({ container });
|
48 | target.appendChild(container);
|
49 | target.addEventListener('keydown', this.handleEscKeyClick, false);
|
50 | if (this.props.isOpen) {
|
51 | target.classList.add(css(styles.backdropOpen));
|
52 | }
|
53 | else {
|
54 | target.classList.remove(css(styles.backdropOpen));
|
55 | }
|
56 | }
|
57 | componentDidUpdate() {
|
58 | const target = this.getElement(this.props.appendTo);
|
59 | if (this.props.isOpen) {
|
60 | target.classList.add(css(styles.backdropOpen));
|
61 | this.toggleSiblingsFromScreenReaders(true);
|
62 | }
|
63 | else {
|
64 | target.classList.remove(css(styles.backdropOpen));
|
65 | this.toggleSiblingsFromScreenReaders(false);
|
66 | }
|
67 | }
|
68 | componentWillUnmount() {
|
69 | const target = this.getElement(this.props.appendTo);
|
70 | if (this.state.container) {
|
71 | target.removeChild(this.state.container);
|
72 | }
|
73 | target.removeEventListener('keydown', this.handleEscKeyClick, false);
|
74 | target.classList.remove(css(styles.backdropOpen));
|
75 | }
|
76 | render() {
|
77 |
|
78 | const _a = this.props, { appendTo } = _a, props = __rest(_a, ["appendTo"]);
|
79 | const { container } = this.state;
|
80 | if (!canUseDOM || !container) {
|
81 | return null;
|
82 | }
|
83 | return ReactDOM.createPortal(React.createElement(AboutModalContainer, Object.assign({ aboutModalBoxHeaderId: this.ariaLabelledBy, aboutModalBoxContentId: this.ariaDescribedBy }, props)), container);
|
84 | }
|
85 | }
|
86 | AboutModal.displayName = 'AboutModal';
|
87 | AboutModal.currentId = 0;
|
88 | AboutModal.defaultProps = {
|
89 | className: '',
|
90 | isOpen: false,
|
91 | onClose: () => undefined,
|
92 | productName: '',
|
93 | trademark: '',
|
94 | backgroundImageSrc: '',
|
95 | noAboutModalBoxContentContainer: false,
|
96 | appendTo: null
|
97 | };
|
98 |
|
\ | No newline at end of file |