Upgrade Mantine to Version 5 (#1930)
* Upgrade Mantine to v5.2.3 * Remove react-dropzone and replace with latest @mantine/dropzone * Fix issuespull/1951/head
Liang Yi
3 years ago
committed by
GitHub
parent
978b378683
commit
a0f8d75f04
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@
|
||||
export const RouterNames = {
|
||||
Auth: "/login",
|
||||
NotFound: "/not-found",
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import {
|
||||
faArrowUp,
|
||||
faFileCirclePlus,
|
||||
faXmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { createStyles, Group, Stack, Text } from "@mantine/core";
|
||||
import { Dropzone } from "@mantine/dropzone";
|
||||
import { FunctionComponent } from "react";
|
||||
|
||||
const useStyle = createStyles((theme) => {
|
||||
return {
|
||||
container: {
|
||||
pointerEvents: "none",
|
||||
minHeight: 220,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export const DropContent: FunctionComponent = () => {
|
||||
const { classes } = useStyle();
|
||||
|
||||
return (
|
||||
<Group position="center" spacing="xl" className={classes.container}>
|
||||
<Dropzone.Idle>
|
||||
<FontAwesomeIcon icon={faFileCirclePlus} size="2x" />
|
||||
</Dropzone.Idle>
|
||||
<Dropzone.Accept>
|
||||
<FontAwesomeIcon icon={faArrowUp} size="2x" />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<FontAwesomeIcon icon={faXmark} size="2x" />
|
||||
</Dropzone.Reject>
|
||||
<Stack spacing={0}>
|
||||
<Text size="lg">Upload Subtitles</Text>
|
||||
<Text color="dimmed" size="sm">
|
||||
Attach as many files as you like, you will need to select file
|
||||
metadata before uploading
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
@ -1,129 +0,0 @@
|
||||
import {
|
||||
faArrowUp,
|
||||
faFileCirclePlus,
|
||||
faXmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Box, createStyles, Overlay, Stack, Text } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { FunctionComponent, useMemo } from "react";
|
||||
import { DropzoneState } from "react-dropzone";
|
||||
|
||||
const useStyle = createStyles((theme) => {
|
||||
return {
|
||||
container: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
inner: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "hidden",
|
||||
margin: theme.spacing.md,
|
||||
borderRadius: theme.radius.md,
|
||||
borderWidth: "0.2rem",
|
||||
borderStyle: "dashed",
|
||||
borderColor: theme.colors.gray[7],
|
||||
backgroundColor: theme.fn.rgba(theme.colors.gray[0], 0.4),
|
||||
},
|
||||
accepted: {
|
||||
borderColor: theme.colors.brand[7],
|
||||
backgroundColor: theme.fn.rgba(theme.colors.brand[0], 0.6),
|
||||
},
|
||||
rejected: {
|
||||
borderColor: theme.colors.red[7],
|
||||
backgroundColor: theme.fn.rgba(theme.colors.red[0], 0.9),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export interface DropOverlayProps {
|
||||
state: DropzoneState;
|
||||
zIndex?: number;
|
||||
}
|
||||
|
||||
export const DropOverlay: FunctionComponent<DropOverlayProps> = ({
|
||||
state,
|
||||
children,
|
||||
zIndex = 10,
|
||||
}) => {
|
||||
const {
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
isDragActive,
|
||||
isDragAccept: accepted,
|
||||
isDragReject: rejected,
|
||||
} = state;
|
||||
|
||||
const { classes } = useStyle();
|
||||
|
||||
const visible = isDragActive;
|
||||
|
||||
const icon = useMemo(() => {
|
||||
if (accepted) {
|
||||
return faArrowUp;
|
||||
} else if (rejected) {
|
||||
return faXmark;
|
||||
} else {
|
||||
return faFileCirclePlus;
|
||||
}
|
||||
}, [accepted, rejected]);
|
||||
|
||||
const title = useMemo(() => {
|
||||
if (accepted) {
|
||||
return "Release to Upload";
|
||||
} else if (rejected) {
|
||||
return "Cannot Upload Files";
|
||||
} else {
|
||||
return "Upload Subtitles";
|
||||
}
|
||||
}, [accepted, rejected]);
|
||||
|
||||
const subtitle = useMemo(() => {
|
||||
if (accepted) {
|
||||
return "";
|
||||
} else if (rejected) {
|
||||
return "Some files are invalid";
|
||||
} else {
|
||||
return "Drop to upload";
|
||||
}
|
||||
}, [accepted, rejected]);
|
||||
|
||||
return (
|
||||
<Box sx={{ position: "relative" }} {...getRootProps()}>
|
||||
{/* Fix for some browsers. Some browsers need a input element to trigger the file browser panel */}
|
||||
<input {...getInputProps()} hidden />
|
||||
{visible && (
|
||||
<Box className={classes.container} style={{ zIndex }}>
|
||||
<Stack
|
||||
spacing="xs"
|
||||
className={clsx(classes.inner, {
|
||||
[classes.accepted]: accepted,
|
||||
[classes.rejected]: rejected,
|
||||
})}
|
||||
style={{ zIndex: zIndex + 1 }}
|
||||
>
|
||||
<Box>
|
||||
<FontAwesomeIcon icon={icon} size="3x" />
|
||||
</Box>
|
||||
<Text size="xl">{title}</Text>
|
||||
<Text color="gray" size="sm">
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Overlay zIndex={zIndex}></Overlay>
|
||||
</Box>
|
||||
)}
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
export { default as Action } from "./Action";
|
||||
export * from "./DropOverlay";
|
||||
export * from "./DropContent";
|
||||
export * from "./FileBrowser";
|
||||
export * from "./Selector";
|
||||
|
||||
Loading…
Reference in new issue