FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(aboutmodal,wizard): append component to any element in DOM by boaz0 · Pull Request #3102 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(aboutmodal,wizard): append component to any element in DOM #3102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jschuler merged 1 commit into from
Oct 15, 2019
Conversation 6 Commits 1 Checks 0 Files changed
Merged

feat(aboutmodal,wizard): append component to any element in DOM #3102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension .snap  (1) .tsx  (3) All 2 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
      • AboutModal.test.tsx
      • AboutModal.tsx
      • Wizard.tsx
        • Wizard.test.tsx.snap
6 changes: 3 additions & 3 deletions packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { KEY_CODES } from '../../helpers/constants';

const mockListener = jest.spyOn(ReactDOM, 'createPortal');
jest.spyOn(document, 'createElement');
jest.spyOn(document, 'addEventListener');
jest.spyOn(document.body, 'addEventListener');

mockListener.mockImplementation(node => node as React.ReactPortal);

Expand Down Expand Up @@ -34,15 +34,15 @@ test('About Modal closes with escape', () => {
Test About Modal
</AboutModal>
);
const [event, handler] = (document.addEventListener as any).mock.calls[0];
const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
expect(event).toBe('keydown');
handler({ keyCode: KEY_CODES.ESCAPE_KEY });
expect(props.onClose).toBeCalled();
});

test('modal does not call onClose for esc key if it is not open', () => {
shallow(<AboutModal {...props} />);
const [event, handler] = (document.addEventListener as any).mock.calls[0];
const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
expect(event).toBe('keydown');
handler({ keyCode: KEY_CODES.ESCAPE_KEY });
expect(props.onClose).not.toBeCalled();
Expand Down
36 changes: 26 additions & 10 deletions packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export interface AboutModalProps {
backgroundImageSrc?: string;
/** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
noAboutModalBoxContentContainer?: boolean;
/** The parent container to append the modal to. Defaults to document.body */
appendTo?: HTMLElement | (() => HTMLElement);
}

interface ModalState {
Expand All @@ -46,7 +48,8 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
productName: '',
trademark: '',
backgroundImageSrc: '',
noAboutModalBoxContentContainer: false
noAboutModalBoxContentContainer: false,
appendTo: null as HTMLElement
};

constructor(props: AboutModalProps) {
Expand All @@ -68,42 +71,55 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
};

toggleSiblingsFromScreenReaders = (hide: boolean) => {
const bodyChildren = document.body.children;
const { appendTo } = this.props;
const target: HTMLElement = this.getElement(appendTo);
const bodyChildren = target.children;
for (const child of Array.from(bodyChildren)) {
if (child !== this.state.container) {
hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
}
}
};

getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
if (typeof appendTo === 'function') {
return appendTo();
}
return appendTo || document.body;
};

componentDidMount() {
const container = document.createElement('div');
const target: HTMLElement = this.getElement(this.props.appendTo);
this.setState({ container });
document.body.appendChild(container);
document.addEventListener('keydown', this.handleEscKeyClick, false);
target.appendChild(container);
target.addEventListener('keydown', this.handleEscKeyClick, false);
Comment thread
boaz0 marked this conversation as resolved.

if (this.props.isOpen) {
document.body.classList.add(css(styles.backdropOpen));
target.classList.add(css(styles.backdropOpen));
} else {
document.body.classList.remove(css(styles.backdropOpen));
target.classList.remove(css(styles.backdropOpen));
}
}

componentDidUpdate() {
const target: HTMLElement = this.getElement(this.props.appendTo);
if (this.props.isOpen) {
document.body.classList.add(css(styles.backdropOpen));
target.classList.add(css(styles.backdropOpen));
this.toggleSiblingsFromScreenReaders(true);
} else {
document.body.classList.remove(css(styles.backdropOpen));
target.classList.remove(css(styles.backdropOpen));
this.toggleSiblingsFromScreenReaders(false);
}
}

componentWillUnmount() {
const target: HTMLElement = this.getElement(this.props.appendTo);
if (this.state.container) {
document.body.removeChild(this.state.container);
target.removeChild(this.state.container);
}
document.removeEventListener('keydown', this.handleEscKeyClick, false);
target.removeEventListener('keydown', this.handleEscKeyClick, false);
target.classList.remove(css(styles.backdropOpen));
}

render() {
Expand Down
28 changes: 22 additions & 6 deletions packages/patternfly-4/react-core/src/components/Wizard/Wizard.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
cancelButtonText?: string;
/** (Unused if footer is controlled) aria-label for the close button */
ariaLabelCloseButton?: string;
/** The parent container to append the modal to. Defaults to document.body */
appendTo?: HTMLElement | (() => HTMLElement);
}

interface WizardState {
Expand Down Expand Up @@ -125,7 +127,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
width: null as string,
height: null as string,
footer: null as React.ReactNode,
onClose: () => undefined as any
onClose: () => undefined as any,
appendTo: null as HTMLElement
};
private container: HTMLDivElement;
private titleId: string;
Expand Down Expand Up @@ -161,7 +164,9 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
};

private toggleSiblingsFromScreenReaders = (hide: boolean): void => {
const bodyChildren = document.body.children;
const { appendTo } = this.props;
const target: HTMLElement = this.getElement(appendTo);
const bodyChildren = target.children;
for (const child of Array.from(bodyChildren)) {
if (child !== this.container) {
hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
Expand Down Expand Up @@ -294,23 +299,34 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
return steps;
};

getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
if (typeof appendTo === 'function') {
return appendTo();
}
return appendTo || document.body;
};

componentDidMount() {
const { appendTo } = this.props;
const target: HTMLElement = this.getElement(appendTo);
if (this.isModal) {
if (this.container) {
document.body.appendChild(this.container);
target.appendChild(this.container);
}
this.toggleSiblingsFromScreenReaders(true);
document.addEventListener('keydown', this.handleKeyClicks, false);
target.addEventListener('keydown', this.handleKeyClicks, false);
}
}

componentWillUnmount() {
const { appendTo } = this.props;
const target: HTMLElement = this.getElement(appendTo);
if (this.isModal) {
if (this.container) {
document.body.removeChild(this.container);
target.removeChild(this.container);
}
this.toggleSiblingsFromScreenReaders(false);
document.removeEventListener('keydown', this.handleKeyClicks, false);
target.removeEventListener('keydown', this.handleKeyClicks, false);
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ exports[`Wizard should match snapshot 1`] = `
}
>
<div
appendTo={null}
aria-describedby="pf-wizard-description-0"
aria-labelledby="pf-wizard-title-0"
aria-modal="true"
Expand Down
Back | FazBrowse Home | New Git URL