first

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

@@ -0,0 +1,70 @@
+import React from "react";
+import classnames from "classnames";
+
+export default function Button(
+	{
+		id = "",
+		text = "",
+		color = "",
+		dashed = false,
+		icon = '',
+		loading = false,
+		ghost = false,
+		disabled = false,
+		href = "",
+		target = "",
+		className = "",
+		onClick = () => false,
+	}
+) {
+	function handleClick(e) {
+		e.preventDefault();
+
+		onClick();
+	}
+
+	function textTag() {
+		const iconTag = icon ? <span className={icon} aria-hidden="true"/> : "";
+		return (
+			<span className={classnames({"sui-loading-text": loading})}>
+				{iconTag} {text}
+			</span>
+		);
+	}
+
+	function loadingIcon() {
+		return loading
+			? <span className="sui-icon-loader sui-loading" aria-hidden="true"/>
+			: "";
+	}
+
+	let HtmlTag, props;
+	if (href) {
+		HtmlTag = 'a';
+		props = {href: href, target: target};
+	} else {
+		HtmlTag = 'button';
+		props = {
+			disabled: disabled,
+			onClick: e => handleClick(e)
+		};
+	}
+	const hasText = text && text.trim();
+
+	return (
+		<HtmlTag
+			{...props}
+			className={classnames(className, "sui-button-" + color, {
+				"sui-button-onload": loading,
+				"sui-button-ghost": ghost,
+				"sui-button-icon": !hasText,
+				"sui-button-dashed": dashed,
+				"sui-button": hasText
+			})}
+			id={id}
+		>
+			{textTag()}
+			{loadingIcon()}
+		</HtmlTag>
+	);
+}

wp-content/plugins/wp-smushit/_src/react/common/floating-notice-placeholder.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function FloatingNoticePlaceholder({id = ''}) {
+	return <div className="sui-floating-notices">
+		<div role="alert"
+			 id={id}
+			 className="sui-notice"
+			 aria-live="assertive">
+		</div>
+	</div>;
+}

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>;
+}

wp-content/plugins/wp-smushit/_src/react/common/progress-bar.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+export default function ProgressBar(
+	{
+		progress = 0,
+		stateMessage = ''
+	}
+) {
+	progress = Math.ceil(progress);
+	const progressPercentage = progress + "%";
+
+	return (
+		<React.Fragment>
+			<div className="sui-progress-block">
+				<div className="sui-progress">
+						<span className="sui-progress-icon" aria-hidden="true">
+							<span className="sui-icon-loader sui-loading"/>
+						</span>
+
+					<div className="sui-progress-text">{progressPercentage}</div>
+
+					<div className="sui-progress-bar">
+							<span
+								style={{
+									transition: progress === 0 ? false : "transform 0.4s linear 0s",
+									transformOrigin: "left center",
+									transform: `translateX(${progress - 100}%)`,
+								}}
+							/>
+					</div>
+				</div>
+			</div>
+			<div className="sui-progress-state">{stateMessage}</div>
+		</React.Fragment>
+	);
+}