Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 46x 17x 17x 17x 46x 46x | import { IInputProps } from "react-dropzone-uploader";
import { palette } from "@palette";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { Text } from "@common/Text";
import { styled } from "@mui/material";
import { UploadIcon } from "@assets/rebrandIcons";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import React from "react";
import { showMessage } from "@common/Toast";
const Input = ({
accept,
onFiles,
getFilesFromEvent,
extra,
customText,
onDrop,
disabled,
}: IInputProps & { customText?: string; onDrop: any }) => {
const isRejected = extra.reject;
const { isDesktopView } = useCustomTheme();
return (
<Stack
height="100%"
width="100%"
alignItems="center"
justifyContent="center"
sx={{
height: "100%",
borderRadius: 12,
pointerEvents: disabled ? "none" : "initial",
}}
onDrop={(e) => {
onDrop && onDrop(e.dataTransfer?.files?.length);
}}
>
<Stack
height="100%"
width="100%"
component="label"
alignItems="center"
justifyContent="center"
sx={{
cursor: "pointer",
}}
>
<StyledContainer>
<UploadIcon />
{isDesktopView ? (
<Stack direction="row" spacing={0.5} mt={1} justifyContent="center">
<StyledText color={palette.neutral[80]}>
Drag and drop your files or
</StyledText>
<StyledText color="accent.3">click to browse</StyledText>
</Stack>
) : (
<Text color="accent.3" textAlign="center">
Tap to browse
</Text>
)}
<Text textAlign="center" color="neutral.70" variant="caption" mt={1}>
{customText}
</Text>
</StyledContainer>
<input
style={{ display: "none" }}
data-testid="file-upload-input"
type="file"
id="upload"
accept={accept}
onChange={async (e) => {
const chosenFiles = await getFilesFromEvent(e);
const validatedFiles = chosenFiles.filter(
(file) => file.name.length < 254,
);
if (validatedFiles.length < chosenFiles.length)
showMessage("Error", "File name too long");
if (validatedFiles.length > 0) {
onFiles(validatedFiles);
}
e.target.value = "";
}}
multiple
/>
</Stack>
</Stack>
);
};
const StyledContainer = styled(Box)({
textAlign: "center",
});
const StyledText = styled(Text)({
height: "100%",
});
export default React.memo(Input);
|