12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- import List from '@mui/material/List';
- import ListItem from '@mui/material/ListItem';
- import ListItemText from '@mui/material/ListItemText';
- import ListItemAvatar from '@mui/material/ListItemAvatar';
- import Avatar from '@mui/material/Avatar';
- import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
- import Divider from '@mui/material/Divider';
- import { makeStyles } from '@material-ui/core'
- import AlertInfo from '../../../../../reusableComponents/AlertInfo';
- import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
- import { TMessages } from '../../../../../../typescript/redux/messages/types'
- const useStyles = makeStyles({
- container: {
- position: 'absolute',
- animationDuration: '0.2s',
- animationDirection: 'normal',
- animation: `$moveElement`,
- },
- folderIcon: {
- margin: 'auto 0px',
- color: '#54b0fc',
- },
- listItem: {
- cursor:'pointer',
- '&:hover': {
- backgroundColor: '#f0f0f0',
- }
- },
- '@keyframes moveElement': {
- '0%': { left: '100%'},
- '100%': { left: '0%'},
- },
- })
- interface IFilesList {
- openPinned: boolean,
- filteredAndSorted: TMessages,
- handleScrollToTheMessage: (_id:string) => void,
- }
- const FilesList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IFilesList) => {
- const classes = useStyles()
-
- return filteredAndSorted.length > 0 ?(
- <List className={classes.container}>
- {filteredAndSorted.map(({createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
- <div key={createdAt}>
- <ListItem onClick={() => handleScrollToTheMessage(_id)}
- alignItems="flex-start" className={classes.listItem}>
- <ListItemAvatar>
- <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
- sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
- {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
- </Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={fullType}
- secondary={timeStampEU(createdAt)}
- />
- <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />
- </ListItem>
- <Divider variant="inset"/>
- </div>)}
- </List>
- ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Files yet!`}/>
- }
- export default FilesList
|