From 92107e222e6f626463d0062896037cfe104bb1bc Mon Sep 17 00:00:00 2001
From: gabek <gabek@users.noreply.github.com>
Date: Fri, 30 Sep 2022 16:43:28 +0000
Subject: [PATCH] Prettified Code!

---
 .../js/components/external-action-modal.js    | 226 +++++++++---------
 1 file changed, 113 insertions(+), 113 deletions(-)

diff --git a/webroot/js/components/external-action-modal.js b/webroot/js/components/external-action-modal.js
index bf7924919..0ce35b026 100644
--- a/webroot/js/components/external-action-modal.js
+++ b/webroot/js/components/external-action-modal.js
@@ -5,124 +5,124 @@ import MicroModal from '/js/web_modules/micromodal/dist/micromodal.min.js';
 const html = htm.bind(h);
 
 export default class ExternalActionModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      iframeLoaded: false,
-    };
+	constructor(props) {
+		super(props);
+		this.state = {
+			iframeLoaded: false,
+		};
 
-    this.setIframeLoaded = this.setIframeLoaded.bind(this);
-  }
-  componentDidMount() {
-    // initialize and display Micromodal on mount
-    try {
-      MicroModal.init({
-        awaitCloseAnimation: false,
-        awaitOpenAnimation: true, //  if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal.
-      });
-      MicroModal.show('external-actions-modal', {
-        onClose: this.props.onClose,
-      });
-    } catch (e) {
-      console.error('modal error: ', e);
-    }
-  }
+		this.setIframeLoaded = this.setIframeLoaded.bind(this);
+	}
+	componentDidMount() {
+		// initialize and display Micromodal on mount
+		try {
+			MicroModal.init({
+				awaitCloseAnimation: false,
+				awaitOpenAnimation: true, //  if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal.
+			});
+			MicroModal.show('external-actions-modal', {
+				onClose: this.props.onClose,
+			});
+		} catch (e) {
+			console.error('modal error: ', e);
+		}
+	}
 
-  setIframeLoaded() {
-    this.setState({
-      iframeLoaded: true,
-    });
-  }
+	setIframeLoaded() {
+		this.setState({
+			iframeLoaded: true,
+		});
+	}
 
-  render() {
-    const { action, useIframe = true, customContent = null } = this.props;
-    const { url, title, description } = action;
-    const { iframeLoaded } = this.state;
-    const iframeStyle = iframeLoaded
-      ? null
-      : { backgroundImage: 'url(/img/loading.gif)' };
+	render() {
+		const { action, useIframe = true, customContent = null } = this.props;
+		const { url, title, description } = action;
+		const { iframeLoaded } = this.state;
+		const iframeStyle = iframeLoaded
+			? null
+			: { backgroundImage: 'url(/img/loading.gif)' };
 
-    return html`
-      <div
-        class="modal micromodal-slide"
-        id="external-actions-modal"
-        aria-hidden="true"
-      >
-        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-          <div
-            id="modal-container"
-            class="modal__container rounded-md"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="modal-1-title"
-          >
-            <header
-              id="modal-header"
-              class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
-            >
-              <h2
-                id="external-action-modal-header"
-                class="modal__title text-indigo-600 font-semibold"
-              >
-                ${title || description}
-              </h2>
-              <button
-                class="modal__close"
-                aria-label="Close modal"
-                data-micromodal-close
-              ></button>
-            </header>
-            <div
-              id="modal-content-content"
-              class="modal-content-content rounded-b-md"
-            >
-              ${useIframe
-                ? html`
-                    <div
-                      id="modal-content"
-                      class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
-                    >
-                      <iframe
-                        id="external-modal-iframe"
-                        style=${{ iframeStyle }}
-                        class="bg-gray-100 bg-center bg-no-repeat"
-                        width="100%"
-                        allowpaymentrequest="true"
-                        allowfullscreen="false"
-                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-                        src=${url}
-                        onload=${this.setIframeLoaded}
-                      />
-                    </div>
-                  `
-                : customContent}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
+		return html`
+			<div
+				class="modal micromodal-slide"
+				id="external-actions-modal"
+				aria-hidden="true"
+			>
+				<div class="modal__overlay" tabindex="-1" data-micromodal-close>
+					<div
+						id="modal-container"
+						class="modal__container rounded-md"
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="modal-1-title"
+					>
+						<header
+							id="modal-header"
+							class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
+						>
+							<h2
+								id="external-action-modal-header"
+								class="modal__title text-indigo-600 font-semibold"
+							>
+								${title || description}
+							</h2>
+							<button
+								class="modal__close"
+								aria-label="Close modal"
+								data-micromodal-close
+							></button>
+						</header>
+						<div
+							id="modal-content-content"
+							class="modal-content-content rounded-b-md"
+						>
+							${useIframe
+								? html`
+										<div
+											id="modal-content"
+											class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
+										>
+											<iframe
+												id="external-modal-iframe"
+												style=${{ iframeStyle }}
+												class="bg-gray-100 bg-center bg-no-repeat"
+												width="100%"
+												allowpaymentrequest="true"
+												allowfullscreen="false"
+												sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+												src=${url}
+												onload=${this.setIframeLoaded}
+											/>
+										</div>
+								  `
+								: customContent}
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
 }
 
 export function ExternalActionButton({ action, onClick, label = '' }) {
-  const { title, icon, color = undefined, description } = action;
-  const logo =
-    icon &&
-    html`
-      <span class="external-action-icon"><img src=${icon} alt="" /></span>
-    `;
-  const bgcolor = color && { backgroundColor: `${color}` };
-  const handleClick = () => onClick(action);
-  return html`
-    <button
-      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded"
-      onClick=${handleClick}
-      style=${bgcolor}
-      aria-label=${description}
-      title=${description || title}
-    >
-      ${logo}
-      <span class="external-action-label">${label || title}</span>
-    </button>
-  `;
+	const { title, icon, color = undefined, description } = action;
+	const logo =
+		icon &&
+		html`
+			<span class="external-action-icon"><img src=${icon} alt="" /></span>
+		`;
+	const bgcolor = color && { backgroundColor: `${color}` };
+	const handleClick = () => onClick(action);
+	return html`
+		<button
+			class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded"
+			onClick=${handleClick}
+			style=${bgcolor}
+			aria-label=${description}
+			title=${description || title}
+		>
+			${logo}
+			<span class="external-action-label">${label || title}</span>
+		</button>
+	`;
 }