first

wp-content/plugins/wp-smushit/_src/react/common/modal.js

@@ -0,0 +1,133 @@
+import React, {useEffect} from 'react';
+import classnames from 'classnames';
+import SUI from 'SUI';
+import $ from 'jquery';
+
+const {__} = wp.i18n;
+
+export default function Modal(
+	{
+		id = '',
+		title = '',
+		description = '',
+		small = false,
+		headerActions = false,
+		focusAfterOpen = '',
+		focusAfterClose = 'container',
+		dialogClasses = [],
+		disableCloseButton = false,
+		enterDisabled = false,
+		beforeTitle = false,
+		onEnter = () => false,
+		onClose = () => false,
+		footer,
+		children
+	}
+) {
+	useEffect(() => {
+		SUI.openModal(
+			id,
+			focusAfterClose,
+			focusAfterOpen ? focusAfterOpen : getTitleId(),
+			false,
+			false
+		);
+
+		return () => SUI.closeModal();
+	}, []);
+
+	const handleKeyDown = (event) => {
+		const isTargetInput = $(event.target).is('.sui-modal.sui-active input');
+		if (isTargetInput && event.keyCode === 13) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (!enterDisabled && onEnter) {
+				onEnter(event);
+			}
+		}
+	}
+
+	function getTitleId() {
+		return id + '-modal-title';
+	}
+
+	function getHeaderActions() {
+		const closeButton = getCloseButton();
+		if (small) {
+			return closeButton;
+		} else if (headerActions) {
+			return headerActions;
+		} else {
+			return <div className="sui-actions-right">{closeButton}</div>
+		}
+	}
+
+	function getCloseButton() {
+		return <button id={id + '-close-button'}
+					   type="button"
+					   onClick={() => onClose()}
+					   disabled={disableCloseButton}
+					   className={classnames("sui-button-icon", {
+						   'sui-button-float--right': small
+					   })}>
+
+			<span className="sui-icon-close sui-md" aria-hidden="true"/>
+			<span className="sui-screen-reader-text">
+				{__('Close this dialog window', 'wds')}
+			</span>
+		</button>
+	}
+
+	function getDialogClasses() {
+		return Object.assign({}, {
+			'sui-modal-sm': small,
+			'sui-modal-lg': !small
+		}, dialogClasses);
+	}
+
+	return <div className={classnames('sui-modal', getDialogClasses())}
+				onKeyDown={e => handleKeyDown(e)}>
+		<div role="dialog"
+			 id={id}
+			 className={classnames('sui-modal-content', id + '-modal')}
+			 aria-modal="true"
+			 aria-labelledby={id + '-modal-title'}
+			 aria-describedby={id + '-modal-description'}>
+
+			<div className="sui-box" role="document">
+				<div className={classnames('sui-box-header', {
+					'sui-flatten sui-content-center sui-spacing-top--40': small
+				})}>
+					{beforeTitle}
+
+					<h3 id={getTitleId()}
+						className={classnames('sui-box-title', {
+							'sui-lg': small
+						})}>
+
+						{title}
+					</h3>
+
+					{getHeaderActions()}
+				</div>
+
+				<div className={classnames('sui-box-body', {
+					'sui-content-center': small
+				})}>
+					{description &&
+						<p className="sui-description"
+						   id={id + '-modal-description'}>
+							{description}
+						</p>}
+
+					{children}
+				</div>
+
+				{footer && <div className="sui-box-footer">
+					{footer}
+				</div>}
+			</div>
+		</div>
+	</div>;
+}