From a45dc6efda76c293d90ea0d63cb8907c1d3462e8 Mon Sep 17 00:00:00 2001
From: angrylid <31571456+angryLid@users.noreply.github.com>
Date: Sat, 29 Oct 2022 20:02:51 +0800
Subject: [PATCH] feat: add animation to ProfileNew component (#252)

* chore: add .vscode to .gitignore

* feat: add animation to ProfileNew component
---
 .gitignore                             |   1 +
 src/components/profile/profile-new.tsx | 157 ++++++++++++-------------
 src/components/profile/smoother.tsx    |  30 +++++
 3 files changed, 109 insertions(+), 79 deletions(-)
 create mode 100644 src/components/profile/smoother.tsx

diff --git a/.gitignore b/.gitignore
index 04bd12c80..c9e2fb916 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ dist-ssr
 *.local
 update.json
 scripts/_env.sh
+.vscode
diff --git a/src/components/profile/profile-new.tsx b/src/components/profile/profile-new.tsx
index 74543161e..ff7945f81 100644
--- a/src/components/profile/profile-new.tsx
+++ b/src/components/profile/profile-new.tsx
@@ -21,6 +21,7 @@ import { Settings } from "@mui/icons-material";
 import { createProfile } from "@/services/cmds";
 import Notice from "../base/base-notice";
 import FileInput from "./file-input";
+import { Smoother } from "./smoother";
 
 interface Props {
   open: boolean;
@@ -93,100 +94,98 @@ const ProfileNew = (props: Props) => {
       <DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
 
       <DialogContent sx={{ width: 336, pb: 1 }}>
-        <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
-          <InputLabel>Type</InputLabel>
-          <Select
-            autoFocus
-            label={t("Type")}
-            value={form.type}
-            onChange={(e) => setForm({ type: e.target.value })}
-          >
-            <MenuItem value="remote">Remote</MenuItem>
-            <MenuItem value="local">Local</MenuItem>
-            <MenuItem value="script">Script</MenuItem>
-            <MenuItem value="merge">Merge</MenuItem>
-          </Select>
-        </FormControl>
-
-        <TextField
-          {...textFieldProps}
-          label={t("Name")}
-          autoComplete="off"
-          value={form.name}
-          onChange={(e) => setForm({ name: e.target.value })}
-        />
-
-        <TextField
-          {...textFieldProps}
-          label={t("Descriptions")}
-          autoComplete="off"
-          value={form.desc}
-          onChange={(e) => setForm({ desc: e.target.value })}
-        />
+        <Smoother>
+          <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
+            <InputLabel>Type</InputLabel>
+            <Select
+              autoFocus
+              label={t("Type")}
+              value={form.type}
+              onChange={(e) => setForm({ type: e.target.value })}
+            >
+              <MenuItem value="remote">Remote</MenuItem>
+              <MenuItem value="local">Local</MenuItem>
+              <MenuItem value="script">Script</MenuItem>
+              <MenuItem value="merge">Merge</MenuItem>
+            </Select>
+          </FormControl>
 
-        {form.type === "remote" && (
           <TextField
             {...textFieldProps}
-            label={t("Subscription URL")}
+            label={t("Name")}
             autoComplete="off"
-            value={form.url}
-            onChange={(e) => setForm({ url: e.target.value })}
+            value={form.name}
+            onChange={(e) => setForm({ name: e.target.value })}
           />
-        )}
 
-        {form.type === "local" && (
-          <FileInput onChange={(val) => (fileDataRef.current = val)} />
-        )}
-
-        {showOpt && (
           <TextField
             {...textFieldProps}
-            label="User Agent"
+            label={t("Descriptions")}
             autoComplete="off"
-            value={option.user_agent}
-            onChange={(e) => setOption({ user_agent: e.target.value })}
+            value={form.desc}
+            onChange={(e) => setForm({ desc: e.target.value })}
           />
-        )}
 
-        {form.type === "remote" && showOpt && (
-          <FormControlLabel
-            label={t("Use System Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.with_proxy}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    self_proxy: c ? false : o.self_proxy,
-                    with_proxy: c,
-                  }))
+          {form.type === "remote" && (
+            <TextField
+              {...textFieldProps}
+              label={t("Subscription URL")}
+              autoComplete="off"
+              value={form.url}
+              onChange={(e) => setForm({ url: e.target.value })}
+            />
+          )}
+
+          {form.type === "local" && (
+            <FileInput onChange={(val) => (fileDataRef.current = val)} />
+          )}
+
+          {form.type === "remote" && showOpt && (
+            <>
+              <TextField
+                {...textFieldProps}
+                label="User Agent"
+                autoComplete="off"
+                value={option.user_agent}
+                onChange={(e) => setOption({ user_agent: e.target.value })}
+              />
+              <FormControlLabel
+                label={t("Use System Proxy")}
+                labelPlacement="start"
+                sx={{ ml: 0, my: 1 }}
+                control={
+                  <Switch
+                    color="primary"
+                    checked={option.with_proxy}
+                    onChange={(_e, c) =>
+                      setOption((o) => ({
+                        self_proxy: c ? false : o.self_proxy,
+                        with_proxy: c,
+                      }))
+                    }
+                  />
                 }
               />
-            }
-          />
-        )}
-
-        {form.type === "remote" && showOpt && (
-          <FormControlLabel
-            label={t("Use Clash Proxy")}
-            labelPlacement="start"
-            sx={{ ml: 0, my: 1 }}
-            control={
-              <Switch
-                color="primary"
-                checked={option.self_proxy}
-                onChange={(_e, c) =>
-                  setOption((o) => ({
-                    with_proxy: c ? false : o.with_proxy,
-                    self_proxy: c,
-                  }))
+              <FormControlLabel
+                label={t("Use Clash Proxy")}
+                labelPlacement="start"
+                sx={{ ml: 0, my: 1 }}
+                control={
+                  <Switch
+                    color="primary"
+                    checked={option.self_proxy}
+                    onChange={(_e, c) =>
+                      setOption((o) => ({
+                        with_proxy: c ? false : o.with_proxy,
+                        self_proxy: c,
+                      }))
+                    }
+                  />
                 }
               />
-            }
-          />
-        )}
+            </>
+          )}
+        </Smoother>
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
diff --git a/src/components/profile/smoother.tsx b/src/components/profile/smoother.tsx
new file mode 100644
index 000000000..1a1a2dcf6
--- /dev/null
+++ b/src/components/profile/smoother.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+export const Smoother: React.FC = ({ children }) => {
+  const self = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (typeof window.getComputedStyle == "undefined") return;
+    const element = self.current;
+    if (!element) return;
+    var height = window.getComputedStyle(element).height;
+    element.style.transition = "none";
+    element.style.height = "auto";
+    var targetHeight = window.getComputedStyle(element).height;
+    element.style.height = height;
+
+    setTimeout(() => {
+      element.style.transition = "height .5s";
+      element.style.height = targetHeight;
+    }, 0);
+  });
+  return (
+    <div
+      ref={self}
+      style={{
+        overflowY: "hidden",
+      }}
+    >
+      {children}
+    </div>
+  );
+};