Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-15 19:22:26 +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
update.json
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 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>
<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>
<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("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" }}>

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