From fb31dcbb8d8d0c61925d344e386b3fa473535689 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Mon, 25 Jul 2022 15:19:11 +0100
Subject: [PATCH] refactor controls to separate component

---
 src/controls.js | 113 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/edit.js     |  99 ++++--------------------------------------
 2 files changed, 122 insertions(+), 90 deletions(-)
 create mode 100644 src/controls.js

diff --git a/src/controls.js b/src/controls.js
new file mode 100644
index 0000000..b1b2f16
--- /dev/null
+++ b/src/controls.js
@@ -0,0 +1,113 @@
+import { InspectorControls, MediaPlaceholder } from "@wordpress/block-editor";
+import { __ } from "@wordpress/i18n";
+
+import {
+	__experimentalNumberControl as NumberControl,
+	Button,
+	ToggleControl,
+	Panel,
+	PanelBody,
+	PanelRow,
+} from "@wordpress/components";
+
+export default function Controls({
+	attributes,
+	setAttributes,
+	innerBlocks,
+	onCountChange,
+	isAnimating,
+	setIsAnimating,
+}) {
+	return (
+		<InspectorControls key="setting">
+			<div id="red-orbital-controls">
+				<Panel>
+					<PanelBody title="Settings" initialOpen={true}>
+						<PanelRow>
+							<legend className="blocks-base-control__label">
+								{__("Orbital count", "red-orbital")}
+							</legend>
+							<NumberControl
+								value={innerBlocks.length}
+								min={1}
+								max={12}
+								onChange={onCountChange}
+							/>
+						</PanelRow>
+
+						<PanelRow>
+							<MediaPlaceholder
+								onSelect={(img) => {
+									setAttributes({ imgUrl: img.url });
+								}}
+								allowedTypes={["image"]}
+								multiple={false}
+								mediaPreview={
+									attributes.imgUrl !== "" ? (
+										<div>
+											<img src={attributes.imgUrl} alt="" />
+											<Button
+												onClick={() => {
+													setAttributes({ imgUrl: "" });
+												}}
+												isSmall={true}
+												isDestructive={true}
+											>
+												Remove
+											</Button>
+										</div>
+									) : (
+										<p>No image selected.</p>
+									)
+								}
+							/>
+						</PanelRow>
+
+						<PanelRow></PanelRow>
+
+						<PanelRow>
+							<MediaPlaceholder
+								onSelect={(img) => {
+									setAttributes({ imgUrlHover: img.url });
+								}}
+								allowedTypes={["image"]}
+								multiple={false}
+								mediaPreview={
+									attributes.imgUrlHover !== "" ? (
+										<div>
+											<img src={attributes.imgUrlHover} alt="" />
+											<Button
+												onClick={() => {
+													setAttributes({ imgUrlHover: "" });
+												}}
+												isSmall={true}
+												isDestructive={true}
+											>
+												Remove
+											</Button>
+										</div>
+									) : (
+										<p>No image selected.</p>
+									)
+								}
+							/>
+						</PanelRow>
+					</PanelBody>
+				</Panel>
+				<Panel>
+					<PanelBody title="View Controls" initialOpen={true}>
+						<PanelRow>
+							<ToggleControl
+								label="Play"
+								checked={isAnimating}
+								onChange={() => {
+									setIsAnimating((state) => !state);
+								}}
+							/>
+						</PanelRow>
+					</PanelBody>
+				</Panel>
+			</div>
+		</InspectorControls>
+	);
+}
diff --git a/src/edit.js b/src/edit.js
index ae89ff2..1c2891c 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -1,6 +1,5 @@
 import { useSelect, dispatch } from "@wordpress/data";
 import { useState } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
 import {
 	useBlockProps,
 	InnerBlocks,
@@ -19,6 +18,7 @@ import { getSaveElement, createBlock } from "@wordpress/blocks";
 
 import "./editor.scss";
 
+import Controls from "./controls.js";
 import Orbiter from "./orbiter.js";
 
 export default function Edit({ attributes, setAttributes, clientId }) {
@@ -98,95 +98,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 
 	return (
 		<>
-			<InspectorControls key="setting">
-				<div id="red-orbital-controls">
-					<Panel>
-						<PanelBody title="Settings" initialOpen={true}>
-							<PanelRow>
-								<legend className="blocks-base-control__label">
-									{__("Orbital count", "red-orbital")}
-								</legend>
-								<NumberControl
-									value={innerBlocks.length}
-									min={1}
-									max={12}
-									onChange={onCountChange}
-								/>
-							</PanelRow>
-
-							<PanelRow>
-								<MediaPlaceholder
-									onSelect={(img) => {
-										console.log("onSelect", img);
-										setAttributes({ imgUrl: img.url });
-									}}
-									allowedTypes={["image"]}
-									multiple={false}
-									mediaPreview={
-										attributes.imgUrl !== "" ? (
-											<div>
-												<img src={attributes.imgUrl} alt="" />
-												<Button
-													onClick = {() => {setAttributes({ imgUrl: "" })}}
-													isSmall={true}
-													isDestructive={true}
-												>
-													Remove
-												</Button>
-										</div>
-										) : (
-											<p>No image selected.</p>
-										)
-									}
-								/>
-							</PanelRow>
-
-							<PanelRow>
-							</PanelRow>
-
-							<PanelRow>
-								<MediaPlaceholder
-									onSelect={(img) => {
-										console.log("onSelect", img);
-										setAttributes({ imgUrlHover: img.url });
-									}}
-									allowedTypes={["image"]}
-									multiple={false}
-									mediaPreview={
-										attributes.imgUrlHover !== "" ? (
-											<div>
-												<img src={attributes.imgUrlHover} alt="" />
-												<Button
-													onClick = {() => {setAttributes({ imgUrlHover: "" })}}
-													isSmall={true}
-													isDestructive={true}
-												>
-													Remove
-												</Button>
-										</div>
-										) : (
-											<p>No image selected.</p>
-										)
-									}
-								/>
-							</PanelRow>
-						</PanelBody>
-					</Panel>
-					<Panel>
-						<PanelBody title="View Controls" initialOpen={true}>
-							<PanelRow>
-								<ToggleControl
-									label="Play"
-									checked={isAnimating}
-									onChange={() => {
-										setIsAnimating((state) => !state);
-									}}
-								/>
-							</PanelRow>
-						</PanelBody>
-					</Panel>
-				</div>
-			</InspectorControls>
+			<Controls
+				setAttributes={setAttributes}
+				attributes={attributes}
+				innerBlocks={innerBlocks}
+				onCountChange={onCountChange}
+				isAnimating={isAnimating}
+				setIsAnimating={setIsAnimating}
+			/>
 
 			<div {...useBlockProps()}>
 				<div className="orbital-view">