mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-07 09:25:27 +00:00
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -9,225 +9,225 @@ import { determineFileSize } from "../../../../lib/fileSize";
|
||||
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
|
||||
|
||||
interface Props {
|
||||
state: UploadState;
|
||||
addFile: () => void;
|
||||
removeFile: (index: number) => void;
|
||||
state: UploadState;
|
||||
addFile: () => void;
|
||||
removeFile: (index: number) => void;
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
flex-direction: column;
|
||||
background: var(--message-box);
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
flex-direction: column;
|
||||
background: var(--message-box);
|
||||
`;
|
||||
|
||||
const Carousel = styled.div`
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
const Entry = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
span.fn {
|
||||
margin: auto;
|
||||
font-size: 0.8em;
|
||||
overflow: hidden;
|
||||
max-width: 180px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
span.fn {
|
||||
margin: auto;
|
||||
font-size: 0.8em;
|
||||
overflow: hidden;
|
||||
max-width: 180px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
span.size {
|
||||
font-size: 0.6em;
|
||||
color: var(--tertiary-foreground);
|
||||
text-align: center;
|
||||
}
|
||||
span.size {
|
||||
font-size: 0.6em;
|
||||
color: var(--tertiary-foreground);
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const Description = styled.div`
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
font-size: 0.9em;
|
||||
align-items: center;
|
||||
color: var(--secondary-foreground);
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
font-size: 0.9em;
|
||||
align-items: center;
|
||||
color: var(--secondary-foreground);
|
||||
`;
|
||||
|
||||
const Divider = styled.div`
|
||||
width: 4px;
|
||||
height: 130px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--tertiary-background);
|
||||
width: 4px;
|
||||
height: 130px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--tertiary-background);
|
||||
`;
|
||||
|
||||
const EmptyEntry = styled.div`
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
place-items: center;
|
||||
background: var(--primary-background);
|
||||
transition: 0.1s ease background-color;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
place-items: center;
|
||||
background: var(--primary-background);
|
||||
transition: 0.1s ease background-color;
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
`;
|
||||
|
||||
const PreviewBox = styled.div`
|
||||
display: grid;
|
||||
grid-template: "main" 100px / minmax(100px, 1fr);
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
grid-template: "main" 100px / minmax(100px, 1fr);
|
||||
justify-items: center;
|
||||
|
||||
background: var(--primary-background);
|
||||
background: var(--primary-background);
|
||||
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
|
||||
.icon,
|
||||
.overlay {
|
||||
grid-area: main;
|
||||
}
|
||||
.icon,
|
||||
.overlay {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.icon {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.overlay {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
transition: 0.1s ease opacity;
|
||||
}
|
||||
transition: 0.1s ease opacity;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function FileEntry({
|
||||
file,
|
||||
remove,
|
||||
index,
|
||||
file,
|
||||
remove,
|
||||
index,
|
||||
}: {
|
||||
file: File;
|
||||
remove?: () => void;
|
||||
index: number;
|
||||
file: File;
|
||||
remove?: () => void;
|
||||
index: number;
|
||||
}) {
|
||||
if (!file.type.startsWith("image/"))
|
||||
return (
|
||||
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
|
||||
<PreviewBox onClick={remove}>
|
||||
<EmptyEntry className="icon">
|
||||
<File size={36} />
|
||||
</EmptyEntry>
|
||||
<div class="overlay">
|
||||
<XCircle size={36} />
|
||||
</div>
|
||||
</PreviewBox>
|
||||
<span class="fn">{file.name}</span>
|
||||
<span class="size">{determineFileSize(file.size)}</span>
|
||||
</Entry>
|
||||
);
|
||||
if (!file.type.startsWith("image/"))
|
||||
return (
|
||||
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
|
||||
<PreviewBox onClick={remove}>
|
||||
<EmptyEntry className="icon">
|
||||
<File size={36} />
|
||||
</EmptyEntry>
|
||||
<div class="overlay">
|
||||
<XCircle size={36} />
|
||||
</div>
|
||||
</PreviewBox>
|
||||
<span class="fn">{file.name}</span>
|
||||
<span class="size">{determineFileSize(file.size)}</span>
|
||||
</Entry>
|
||||
);
|
||||
|
||||
const [url, setURL] = useState("");
|
||||
const [url, setURL] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let url: string = URL.createObjectURL(file);
|
||||
setURL(url);
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [file]);
|
||||
useEffect(() => {
|
||||
let url: string = URL.createObjectURL(file);
|
||||
setURL(url);
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [file]);
|
||||
|
||||
return (
|
||||
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
|
||||
<PreviewBox onClick={remove}>
|
||||
<img class="icon" src={url} alt={file.name} />
|
||||
<div class="overlay">
|
||||
<XCircle size={36} />
|
||||
</div>
|
||||
</PreviewBox>
|
||||
<span class="fn">{file.name}</span>
|
||||
<span class="size">{determineFileSize(file.size)}</span>
|
||||
</Entry>
|
||||
);
|
||||
return (
|
||||
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
|
||||
<PreviewBox onClick={remove}>
|
||||
<img class="icon" src={url} alt={file.name} />
|
||||
<div class="overlay">
|
||||
<XCircle size={36} />
|
||||
</div>
|
||||
</PreviewBox>
|
||||
<span class="fn">{file.name}</span>
|
||||
<span class="size">{determineFileSize(file.size)}</span>
|
||||
</Entry>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FilePreview({ state, addFile, removeFile }: Props) {
|
||||
if (state.type === "none") return null;
|
||||
if (state.type === "none") return null;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Carousel>
|
||||
{state.files.map((file, index) => (
|
||||
<>
|
||||
{index === CAN_UPLOAD_AT_ONCE && <Divider />}
|
||||
<FileEntry
|
||||
index={index}
|
||||
file={file}
|
||||
key={file.name}
|
||||
remove={
|
||||
state.type === "attached"
|
||||
? () => removeFile(index)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{state.type === "attached" && (
|
||||
<EmptyEntry onClick={addFile}>
|
||||
<Plus size={48} />
|
||||
</EmptyEntry>
|
||||
)}
|
||||
</Carousel>
|
||||
{state.type === "uploading" && (
|
||||
<Description>
|
||||
<Share size={24} />
|
||||
<Text id="app.main.channel.uploading_file" /> (
|
||||
{state.percent}%)
|
||||
</Description>
|
||||
)}
|
||||
{state.type === "sending" && (
|
||||
<Description>
|
||||
<Share size={24} />
|
||||
Sending...
|
||||
</Description>
|
||||
)}
|
||||
{state.type === "failed" && (
|
||||
<Description>
|
||||
<X size={24} />
|
||||
<Text id={`error.${state.error}`} />
|
||||
</Description>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
return (
|
||||
<Container>
|
||||
<Carousel>
|
||||
{state.files.map((file, index) => (
|
||||
<>
|
||||
{index === CAN_UPLOAD_AT_ONCE && <Divider />}
|
||||
<FileEntry
|
||||
index={index}
|
||||
file={file}
|
||||
key={file.name}
|
||||
remove={
|
||||
state.type === "attached"
|
||||
? () => removeFile(index)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{state.type === "attached" && (
|
||||
<EmptyEntry onClick={addFile}>
|
||||
<Plus size={48} />
|
||||
</EmptyEntry>
|
||||
)}
|
||||
</Carousel>
|
||||
{state.type === "uploading" && (
|
||||
<Description>
|
||||
<Share size={24} />
|
||||
<Text id="app.main.channel.uploading_file" /> (
|
||||
{state.percent}%)
|
||||
</Description>
|
||||
)}
|
||||
{state.type === "sending" && (
|
||||
<Description>
|
||||
<Share size={24} />
|
||||
Sending...
|
||||
</Description>
|
||||
)}
|
||||
{state.type === "failed" && (
|
||||
<Description>
|
||||
<X size={24} />
|
||||
<Text id={`error.${state.error}`} />
|
||||
</Description>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user