Refactor: Make schema and folder items styled components in `CreateSc…

…hemaDialog`
nk2028 · Oct 30, 2024 · 827d867 · 827d867
1 parent 6f1b7e4
commit 827d867
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 57 deletions.
diff --git a/src/Components/CreateSchemaDialog.tsx b/src/Components/CreateSchemaDialog.tsx
@@ -73,56 +73,23 @@ const Explorer = styled.div`
   > ul {
     margin-left: 0;
   }
-  button {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-    * {
-      transition:
-        color 100ms,
-        background-color 100ms;
-    }
-    &:hover *,
-    &:focus * {
-      color: #0078e7;
-    }
+`;
+const SchemaItem = styled.button`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  * {
+    transition:
+      color 100ms,
+      background-color 100ms;
   }
-  details {
-    summary {
-      display: flex;
-      align-items: center;
-      outline: none;
-      &::-moz-focus-inner {
-        border: none;
-        padding: 0;
-      }
-      &::marker {
-        display: none;
-      }
-      transition: color 100ms;
-      &:hover,
-      &:focus {
-        color: #0078e7;
-      }
-    }
-    .marker-open {
-      display: none;
-    }
-    .marker-close {
-      display: block;
-    }
-    &[open] {
-      .marker-open {
-        display: block;
-      }
-      .marker-close {
-        display: none;
-      }
-    }
+  &:hover *,
+  &:focus * {
+    color: #0078e7;
   }
 `;
-const FileName = styled.div<{ selected: boolean }>`
+const SchemaName = styled.div<{ selected: boolean }>`
   flex: 1;
   color: #333;
   margin-left: 0.125rem;
@@ -251,16 +218,16 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
     return Object.entries(folder).map(([name, sample]) => {
       return typeof sample === "string" ? (
         <li key={name}>
-          <button
+          <SchemaItem
             onClick={() => {
               const name = normalizeFileName(createSchemaName);
               if (!name || name === getDefaultFileName(createSchemaSample))
                 setCreateSchemaName(getDefaultFileName(sample) + ".js");
               setCreateSchemaSample(sample);
             }}>
             <FontAwesomeIcon icon={faFileCode} fixedWidth />
-            <FileName selected={createSchemaSample === sample}>{name}</FileName>
-          </button>
+            <SchemaName selected={createSchemaSample === sample}>{name}</SchemaName>
+          </SchemaItem>
         </li>
       ) : (
         <ExplorerFolder key={name} name={name}>
@@ -306,16 +273,16 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
         <Explorer>
           <ul>
             <li>
-              <button
+              <SchemaItem
                 onClick={() => {
                   const name = normalizeFileName(createSchemaName);
                   if (!name || name === getDefaultFileName(createSchemaSample))
                     setCreateSchemaName(getDefaultFileName("") + ".js");
                   setCreateSchemaSample("");
                 }}>
                 <FontAwesomeIcon icon={faFile} fixedWidth />
-                <FileName selected={!createSchemaSample}>新增空白方案……</FileName>
-              </button>
+                <SchemaName selected={!createSchemaSample}>新增空白方案……</SchemaName>
+              </SchemaItem>
             </li>
             {recursiveFolder(samples)}
           </ul>

diff --git a/src/Components/ExplorerFolder.tsx b/src/Components/ExplorerFolder.tsx
@@ -1,17 +1,48 @@
+import styled from "@emotion/styled";
 import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import type { ReactNode } from "../consts";
 
+const FolderItem = styled.summary`
+  display: flex;
+  align-items: center;
+  outline: none;
+  transition: color 100ms;
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+  &::marker {
+    display: none;
+  }
+  &:hover,
+  &:focus {
+    color: #0078e7;
+  }
+`;
+const ExpandedIcon = styled(FontAwesomeIcon)`
+  display: none;
+  details[open] & {
+    display: block;
+  }
+`;
+const CollapsedIcon = styled(FontAwesomeIcon)`
+  display: block;
+  details[open] & {
+    display: none;
+  }
+`;
+
 export default function ExplorerFolder({ name, children }: { name: string; children: ReactNode }) {
   return (
     <li>
       <details open>
-        <summary>
-          <FontAwesomeIcon className="marker-open" icon={faAngleDown} fixedWidth />
-          <FontAwesomeIcon className="marker-close" icon={faAngleRight} fixedWidth />
+        <FolderItem>
+          <ExpandedIcon icon={faAngleDown} fixedWidth />
+          <CollapsedIcon icon={faAngleRight} fixedWidth />
           <span>{name}</span>
-        </summary>
+        </FolderItem>
         <ul>{children}</ul>
       </details>
     </li>