purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: remove smoother

Browse Source
This commit is contained in:
GyDi 2022-10-29 20:05:55 +08:00
parent a45dc6efda
commit 4649454282
No known key found for this signature in database
GPG Key ID: 58B15242BA8277A6
2 changed files with 79 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/profile/profile-new.tsx
View File

@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { useLockFn, useSetState } from "ahooks"; import { useLockFn, useSetState } from "ahooks";
import { import {
Button, Button,
Collapse,
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
@ -21,7 +22,6 @@ import { Settings } from "@mui/icons-material";
import { createProfile } from "@/services/cmds"; import { createProfile } from "@/services/cmds";
import Notice from "../base/base-notice"; import Notice from "../base/base-notice";
import FileInput from "./file-input"; import FileInput from "./file-input";
import { Smoother } from "./smoother";
interface Props { interface Props {
open: boolean; open: boolean;
@ -94,98 +94,98 @@ const ProfileNew = (props: Props) => {
<DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle> <DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
<DialogContent sx={{ width: 336, pb: 1 }}> <DialogContent sx={{ width: 336, pb: 1 }}>
<Smoother> <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
<FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}> <InputLabel>Type</InputLabel>
<InputLabel>Type</InputLabel> <Select
<Select autoFocus
autoFocus label={t("Type")}
label={t("Type")} value={form.type}
value={form.type} onChange={(e) => setForm({ type: e.target.value })}
onChange={(e) => setForm({ type: e.target.value })} >
> <MenuItem value="remote">Remote</MenuItem>
<MenuItem value="remote">Remote</MenuItem> <MenuItem value="local">Local</MenuItem>
<MenuItem value="local">Local</MenuItem> <MenuItem value="script">Script</MenuItem>
<MenuItem value="script">Script</MenuItem> <MenuItem value="merge">Merge</MenuItem>
<MenuItem value="merge">Merge</MenuItem> </Select>
</Select> </FormControl>
</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 <TextField
{...textFieldProps} {...textFieldProps}
label={t("Name")} label={t("Subscription URL")}
autoComplete="off" autoComplete="off"
value={form.name} value={form.url}
onChange={(e) => setForm({ name: e.target.value })} 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 <TextField
{...textFieldProps} {...textFieldProps}
label={t("Descriptions")} label="User Agent"
autoComplete="off" autoComplete="off"
value={form.desc} value={option.user_agent}
onChange={(e) => setForm({ desc: e.target.value })} onChange={(e) => setOption({ user_agent: e.target.value })}
/> />
<FormControlLabel
{form.type === "remote" && ( label={t("Use System Proxy")}
<TextField labelPlacement="start"
{...textFieldProps} sx={{ ml: 0, my: 1 }}
label={t("Subscription URL")} control={
autoComplete="off" <Switch
value={form.url} color="primary"
onChange={(e) => setForm({ url: e.target.value })} checked={option.with_proxy}
/> onChange={(_e, c) =>
)} setOption((o) => ({
self_proxy: c ? false : o.self_proxy,
{form.type === "local" && ( with_proxy: c,
<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 Clash Proxy")} />
labelPlacement="start" <FormControlLabel
sx={{ ml: 0, my: 1 }} label={t("Use Clash Proxy")}
control={ labelPlacement="start"
<Switch sx={{ ml: 0, my: 1 }}
color="primary" control={
checked={option.self_proxy} <Switch
onChange={(_e, c) => color="primary"
setOption((o) => ({ checked={option.self_proxy}
with_proxy: c ? false : o.with_proxy, onChange={(_e, c) =>
self_proxy: c, setOption((o) => ({
})) with_proxy: c ? false : o.with_proxy,
} self_proxy: c,
/> }))
} }
/> />
</> }
)} />
</Smoother> </Collapse>
</DialogContent> </DialogContent>
<DialogActions sx={{ px: 2, pb: 2, position: "relative" }}> <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

30
src/components/profile/smoother.tsx
View File

@ -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>
);
};