ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-12 03:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update FileCollection: File Entry

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-03 13:57:35 +02:00
parent 12a8e9e289
commit 084f666ff1
1 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
client/src/components/FileCollection.tsx
View file

@ -1,4 +1,13 @@
import React, { FC } from "react"; import React, { FC } from "react";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import ImageIcon from "@material-ui/icons/Image";
import WorkIcon from "@material-ui/icons/Work";
import BeachAccessIcon from "@material-ui/icons/BeachAccess";
import { AppFile } from "../types/AppFile"; import { AppFile } from "../types/AppFile";
type IProps = { type IProps = {
@ -6,10 +15,21 @@ type IProps = {
filterText: string; filterText: string;
}; };
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
})
);
export const FileCollection: FC<IProps> = ({ files, filterText }) => { export const FileCollection: FC<IProps> = ({ files, filterText }) => {
const classes = useStyles();
return ( return (
<>
<ul className="collection"> <List className={classes.root}>
{files.length === 0 ? ( {files.length === 0 ? (
<FileEntry /> <FileEntry />
) : ( ) : (
@ -21,8 +41,8 @@ export const FileCollection: FC<IProps> = ({ files, filterText }) => {
) )
.map((file: AppFile) => <FileEntry file={file} key={file.id} />) .map((file: AppFile) => <FileEntry file={file} key={file.id} />)
)} )}
</ul> </List>
</>
); );
}; };
@ -32,16 +52,19 @@ type IFProps = {
export const FileEntry: FC<IFProps> = ({ file }) => { export const FileEntry: FC<IFProps> = ({ file }) => {
return ( return (
<li className="collection-item avatar"> <ListItem>
{/* <img src={require("../images/user_1.jpg")} alt="" className="circle" /> */} <ListItemAvatar>
<i className="material-icons circle indigo lighten-1">folder</i> <Avatar>
<span className="title">{file ? file.name : "Add your first file"}</span> <WorkIcon />
<p> </Avatar>
{file ? file.size : 0}kb {file ? file.format : "pdf"} </ListItemAvatar>
</p> <ListItemText primary={file ? file.name : "Add your first file"} secondary={`${file ? file.size : 0}kb ${file ? file.format : "pdf"}`} />
<a href="#!" className="secondary-content"> </ListItem>
<i className="material-icons">more_vert</i>
</a>
</li>
); );
}; };