diff --git a/src/components/profile/profile-new.tsx b/src/components/profile/profile-new.tsx
index ff7945f813600dadad6d10febe59be4e56d4a504..05a7815104bbced3c0db6fc5699b621f69e7a26d 100644
--- a/src/components/profile/profile-new.tsx
+++ b/src/components/profile/profile-new.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { useLockFn, useSetState } from "ahooks";
import {
Button,
+ Collapse,
Dialog,
DialogActions,
DialogContent,
@@ -21,7 +22,6 @@ 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;
@@ -94,98 +94,98 @@ const ProfileNew = (props: Props) => {
<DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
<DialogContent sx={{ width: 336, pb: 1 }}>
- <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>
+ <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 })}
+ />
+ {form.type === "remote" && (
<TextField
{...textFieldProps}
- label={t("Name")}
+ label={t("Subscription URL")}
autoComplete="off"
- value={form.name}
- onChange={(e) => setForm({ name: e.target.value })}
+ value={form.url}
+ onChange={(e) => setForm({ url: e.target.value })}
/>
+ )}
+
+ {form.type === "local" && (
+ <FileInput onChange={(val) => (fileDataRef.current = val)} />
+ )}
+ <Collapse
+ in={form.type === "remote" && showOpt}
+ timeout="auto"
+ unmountOnExit
+ >
<TextField
{...textFieldProps}
- label={t("Descriptions")}
+ label="User Agent"
autoComplete="off"
- value={form.desc}
- onChange={(e) => setForm({ desc: e.target.value })}
+ value={option.user_agent}
+ onChange={(e) => setOption({ user_agent: e.target.value })}
/>
-
- {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,
- }))
- }
- />
+ <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,
+ }))
}
/>
- <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>
+ }
+ />
+ </Collapse>
</DialogContent>
<DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>
diff --git a/src/components/profile/smoother.tsx b/src/components/profile/smoother.tsx
deleted file mode 100644
index 1a1a2dcf699a080cdd691ccce6ce2a3b9c3cce41..0000000000000000000000000000000000000000
--- a/src/components/profile/smoother.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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>
- );
-};