[web] Convert `Modal` into functional component
ClosedPublic
Actions

Authored by • jacek on Apr 8 2022, 4:24 AM.

Details

Reviewers

tomek
atul
• benschac

Commits

rCOMM2986754c24d3: [web] Convert `Modal` into functional component

Summary

Convert exiting Modal component from class into functional component to simplify the logic and make future changes easier. No logic changes has been made.

Test Plan

All existing modals should work as before

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

• jacek created this revision.Apr 8 2022, 4:24 AM

Herald added subscribers: • abosh, • benschac, • karol and 4 others. · View Herald TranscriptApr 8 2022, 4:24 AM

Harbormaster completed remote builds in B8019: Diff 11224.Apr 8 2022, 4:30 AM

• jacek requested review of this revision.Apr 8 2022, 4:30 AM

• jacek added a child revision: D3669: [web] Redesign `Modal` to match Figma.Apr 8 2022, 6:01 AM

• jacek added a parent revision: D3666: [web] Center modals vertically.

• jacek added reviewers: tomek, atul, • benschac.Apr 8 2022, 6:06 AM

Looks good!

web/modals/modal.react.js
18 ↗	(On Diff #11224)	Setting the default when destructuring looks a lot cleaner than the old `defaultProps` approach.
32 ↗	(On Diff #11224)	Outside of the scope of this diff, but might be good to add a comment noting that `keyCode` 27 corresponds to the `ESC` key? I had a hunch, but still had to google to double check.

This revision is now accepted and ready to land.Apr 8 2022, 10:38 AM

• jacek added inline comments.Apr 10 2022, 11:40 PM

web/modals/modal.react.js
32 ↗	(On Diff #11224)	Good idea. I was thinking about adding the comment (as I also had to use https://keycode.info/ to check), but I forgot about it.

rebase

Harbormaster completed remote builds in B8194: Diff 11465.Apr 14 2022, 3:06 AM

rebase

Harbormaster completed remote builds in B8518: Diff 11877.Apr 25 2022, 10:35 AM

rebase

Harbormaster completed remote builds in B8553: Diff 11922.Apr 26 2022, 8:41 AM

Closed by commit rCOMM2986754c24d3: [web] Convert `Modal` into functional component (authored by • jacek). · Explain WhyApr 26 2022, 9:09 AM

This revision was automatically updated to reflect the committed changes.

• jacek added a commit: rCOMM2986754c24d3: [web] Convert `Modal` into functional component.

Revision Contents
Changeset List

Path

Size

web/

modals/

modal.react.js

166 lines

Diff 11933

View Options

web/modals/modal.react.js

	// @flow			// @flow

	import classNames from 'classnames';			import classNames from 'classnames';
	import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';

	import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';			import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
	import css from './modal.css';			import css from './modal.css';

	export type ModalSize = 'small' \| 'large';			export type ModalSize = 'small' \| 'large';
	type Props = {			type Props = {
	+name: React.Node,			+name: React.Node,
	+icon?: Icon,			+icon?: Icon,
	+onClose: () => void,			+onClose: () => void,
	+withCloseButton?: boolean,			+withCloseButton?: boolean,
	+children?: React.Node,			+children?: React.Node,
	+size?: ModalSize,			+size?: ModalSize,
	+fixedHeight?: boolean,			+fixedHeight?: boolean,
	};			};
	class Modal extends React.PureComponent<Props> {
	static defaultProps: { +size: ModalSize, fixedHeight: boolean } = {
	size: 'small',
	fixedHeight: true,
	};
	overlay: ?HTMLDivElement;

	componentDidMount() {
	invariant(this.overlay, 'overlay ref unset');
	this.overlay.focus();
	}

	render(): React.Node {			function Modal(props: Props): React.Node {
	const {			const {
	size,			size = 'small',
	children,			children,
	onClose,			onClose,
	fixedHeight,			fixedHeight,
	name,			name,
	icon,			icon,
	withCloseButton = true,			withCloseButton = true,
	} = this.props;			} = props;
				const overlayRef = React.useRef();

	const overlayClasses = classNames(css['modal-overlay'], {			const onBackgroundClick = React.useCallback(
				event => {
				if (event.target === overlayRef.current) {
				onClose();
				}
				},
				[onClose],
				);

				const onKeyDown = React.useCallback(
				event => {
				if (event.keyCode === 27) {
				onClose();
				}
				},
				[onClose],
				);

				React.useEffect(() => {
				if (overlayRef.current) {
				overlayRef.current.focus();
				}
				}, []);

				const overlayClasses = React.useMemo(
				() =>
				classNames(css['modal-overlay'], {
	[css['resizable-modal-overlay']]: !fixedHeight,			[css['resizable-modal-overlay']]: !fixedHeight,
	});			}),
	const modalContainerClasses = classNames(css['modal-container'], {			[fixedHeight],
				);
				const modalContainerClasses = React.useMemo(
				() =>
				classNames(css['modal-container'], {
	[css['large-modal-container']]: size === 'large',			[css['large-modal-container']]: size === 'large',
	});			}),
	const modalClasses = classNames(css['modal'], {			[size],
				);
				const modalClasses = React.useMemo(
				() =>
				classNames(css['modal'], {
	[css['fixed-height-modal']]: fixedHeight,			[css['fixed-height-modal']]: fixedHeight,
	});			}),
				[fixedHeight],
				);

	let headerIcon;			const cornerCloseButton = React.useMemo(() => {
	if (icon) {			if (!withCloseButton) {
	headerIcon = <SWMansionIcon size={24} icon={icon} />;			return null;
	}			}
				return (
	let cornerCloseButton;
	if (withCloseButton) {
	cornerCloseButton = (
	<span className={css['modal-close']} onClick={onClose}>			<span className={css['modal-close']} onClick={onClose}>
	<SWMansionIcon size={24} icon="cross" />			<SWMansionIcon size={24} icon="cross" />
	</span>			</span>
	);			);
				}, [onClose, withCloseButton]);

				const headerIcon = React.useMemo(() => {
				if (!icon) {
				return null;
	}			}
				return <SWMansionIcon size={24} icon={icon} />;
				}, [icon]);

	return (			return (
	<div			<div
	className={overlayClasses}			className={overlayClasses}
	ref={this.overlayRef}			ref={overlayRef}
	onClick={this.onBackgroundClick}			onClick={onBackgroundClick}
	tabIndex={0}			tabIndex={0}
	onKeyDown={this.onKeyDown}			onKeyDown={onKeyDown}
	>			>
	<div className={modalContainerClasses}>			<div className={modalContainerClasses}>
	<div className={modalClasses}>			<div className={modalClasses}>
	<div className={css['modal-header']}>			<div className={css['modal-header']}>
	{cornerCloseButton}			{cornerCloseButton}
	<h2>			<h2>
	{headerIcon}			{headerIcon}
	{name}			{name}
	</h2>			</h2>
	</div>			</div>
	{children}			{children}
	</div>			</div>
	</div>			</div>
	</div>			</div>
	);			);
	}			}

	overlayRef: (overlay: ?HTMLDivElement) => void = overlay => {
	this.overlay = overlay;
	};

	onBackgroundClick: (
	event: SyntheticEvent<HTMLDivElement>,
	) => void = event => {
	if (event.target === this.overlay) {
	this.props.onClose();
	}
	};

	onKeyDown: (
	event: SyntheticKeyboardEvent<HTMLDivElement>,
	) => void = event => {
	if (event.keyCode === 27) {
	this.props.onClose();
	}
	};
	}

	export default Modal;			export default Modal;

[web] Convert `Modal` into functional componentClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 11933

web/modals/modal.react.js

[web] Convert `Modal` into functional component
ClosedPublic
Actions

Revision Contents
Changeset List