From 09304f00b61407b47a6078f849e6519186a10aec Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Tue, 28 Sep 2021 11:42:09 -0400
Subject: [PATCH] Factor out AttachmentEditor.

---
 lib/pages/creature-page/core.tsx | 59 +++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/lib/pages/creature-page/core.tsx b/lib/pages/creature-page/core.tsx
index 19e1e04..ad3121b 100644
--- a/lib/pages/creature-page/core.tsx
+++ b/lib/pages/creature-page/core.tsx
@@ -320,15 +320,11 @@ const AttachmentIndicesWidget: React.FC<{
   );
 };
 
-function CreaturePartEditor<T extends CreatureSymbol>({
+function AttachmentEditor<T extends CreatureSymbol>({
   creature,
   onChange,
   idPrefix,
-}: {
-  creature: T;
-  onChange: (symbol: T) => void;
-  idPrefix: string;
-}): JSX.Element {
+}: CreatureEditorProps<T>): JSX.Element {
   const specs = creature.data.specs || {};
   const getAttachmentIndex = (attachment: AttachedCreatureSymbol) => {
     const index = creature.attachments.indexOf(attachment);
@@ -361,20 +357,7 @@ function CreaturePartEditor<T extends CreatureSymbol>({
 
   return (
     <>
-      <div className="thingy">
-        <VocabularyWidget
-          label="Symbol"
-          id={`${idPrefix}symbol`}
-          value={creature.data}
-          onChange={(data) => onChange({ ...creature, data })}
-          choices={SvgVocabulary}
-        />
-      </div>
-      <Checkbox
-        label="Invert colors"
-        value={creature.invertColors}
-        onChange={(invertColors) => onChange({ ...creature, invertColors })}
-      />
+      {" "}
       {ATTACHMENT_POINT_TYPES.map((type) => {
         if (type === "anchor") return null;
         const points = specs[type] || [];
@@ -443,6 +426,42 @@ function CreaturePartEditor<T extends CreatureSymbol>({
   );
 }
 
+type CreatureEditorProps<T extends CreatureSymbol> = {
+  creature: T;
+  onChange: (symbol: T) => void;
+  idPrefix: string;
+};
+
+function CreaturePartEditor<T extends CreatureSymbol>({
+  creature,
+  onChange,
+  idPrefix,
+}: CreatureEditorProps<T>): JSX.Element {
+  return (
+    <>
+      <div className="thingy">
+        <VocabularyWidget
+          label="Symbol"
+          id={`${idPrefix}symbol`}
+          value={creature.data}
+          onChange={(data) => onChange({ ...creature, data })}
+          choices={SvgVocabulary}
+        />
+      </div>
+      <Checkbox
+        label="Invert colors"
+        value={creature.invertColors}
+        onChange={(invertColors) => onChange({ ...creature, invertColors })}
+      />
+      <AttachmentEditor
+        creature={creature}
+        onChange={onChange}
+        idPrefix={idPrefix}
+      />
+    </>
+  );
+}
+
 const CreatureEditorWidget: React.FC<{
   creature: CreatureSymbol;
   onChange: (symbol: CreatureSymbol) => void;