Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 11:42:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add animation to ProfileNew component (#252)

Browse Source 
* chore: add .vscode to .gitignore

* feat: add animation to ProfileNew component
This commit is contained in:
angrylid 2022-10-29 20:02:51 +08:00 committed by GitHub
parent 9e56b9fbb5
commit a45dc6efda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ dist-ssr
*.local *.local
update.json update.json
scripts/_env.sh scripts/_env.sh
.vscode

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

@ -21,6 +21,7 @@ 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;
@ -93,100 +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 }}>
<FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}> <Smoother>
<InputLabel>Type</InputLabel> <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
<Select <InputLabel>Type</InputLabel>
autoFocus <Select
label={t("Type")} autoFocus
value={form.type} label={t("Type")}
onChange={(e) => setForm({ type: e.target.value })} value={form.type}
> onChange={(e) => setForm({ type: e.target.value })}
<MenuItem value="remote">Remote</MenuItem> >
<MenuItem value="local">Local</MenuItem> <MenuItem value="remote">Remote</MenuItem>
<MenuItem value="script">Script</MenuItem> <MenuItem value="local">Local</MenuItem>
<MenuItem value="merge">Merge</MenuItem> <MenuItem value="script">Script</MenuItem>
</Select> <MenuItem value="merge">Merge</MenuItem>
</FormControl> </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 <TextField
{...textFieldProps} {...textFieldProps}
label={t("Subscription URL")} label={t("Name")}
autoComplete="off" autoComplete="off"
value={form.url} value={form.name}
onChange={(e) => setForm({ url: e.target.value })} onChange={(e) => setForm({ name: e.target.value })}
/> />
)}
{form.type === "local" && (
<FileInput onChange={(val) => (fileDataRef.current = val)} />
)}
{showOpt && (
<TextField <TextField
{...textFieldProps} {...textFieldProps}
label="User Agent" label={t("Descriptions")}
autoComplete="off" autoComplete="off"
value={option.user_agent} value={form.desc}
onChange={(e) => setOption({ user_agent: e.target.value })} onChange={(e) => setForm({ desc: e.target.value })}
/> />
)}
{form.type === "remote" && showOpt && ( {form.type === "remote" && (
<FormControlLabel <TextField
label={t("Use System Proxy")} {...textFieldProps}
labelPlacement="start" label={t("Subscription URL")}
sx={{ ml: 0, my: 1 }} autoComplete="off"
control={ value={form.url}
<Switch onChange={(e) => setForm({ url: e.target.value })}
color="primary" />
checked={option.with_proxy} )}
onChange={(_e, c) =>
setOption((o) => ({ {form.type === "local" && (
self_proxy: c ? false : o.self_proxy, <FileInput onChange={(val) => (fileDataRef.current = val)} />
with_proxy: c, )}
}))
{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"
sx={{ ml: 0, my: 1 }}
{form.type === "remote" && showOpt && ( control={
<FormControlLabel <Switch
label={t("Use Clash Proxy")} color="primary"
labelPlacement="start" checked={option.self_proxy}
sx={{ ml: 0, my: 1 }} onChange={(_e, c) =>
control={ setOption((o) => ({
<Switch with_proxy: c ? false : o.with_proxy,
color="primary" self_proxy: c,
checked={option.self_proxy} }))
onChange={(_e, c) => }
setOption((o) => ({ />
with_proxy: c ? false : o.with_proxy,
self_proxy: c,
}))
} }
/> />
} </>
/> )}
)} </Smoother>
</DialogContent> </DialogContent>
<DialogActions sx={{ px: 2, pb: 2, position: "relative" }}> <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

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

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