12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import BottomNavigation from '@mui/material/BottomNavigation';
- import BottomNavigationAction from '@mui/material/BottomNavigationAction';
- import { useState } from 'react';
- import { useSelector } from 'react-redux';
- import { makeStyles } from '@material-ui/core'
- import AudioList from './AudioList';
- import MediaList from './MediaList';
- import FilesList from './FilesList';
- import TextList from './TextList';
- import VideoList from './VideoList'
- import { getMessagesMemo } from '../../../../../../../redux/messages/selector'
- import { handleSort } from '../../../../../../../helpers';
- import { TMessages } from '../../../../../../../typescript/redux/messages/types'
- const useStyles = makeStyles({
- bottomNavigation: {
- boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
- },
- icon: {
- fontSize: 17,
- lineHeight: 0,
- marginBottom: 0,
- fontWeight:600
- },
- underline: {
- fontSize: 45,
- lineHeight: 0,
- },
- })
- const ProfileLists = ({sort}:{sort:boolean}) => {
- const classes = useStyles()
- const messagesMemo = useSelector(getMessagesMemo)
- const [isActive, setIsActive] = useState<number>(0)
- const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
- const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
- const Label = () => <span className={classes.underline}>__</span>
- const sortedMessages:TMessages = handleSort('updatedAt',messagesMemo,sort)
- return (
- <>
- <BottomNavigation
- showLabels
- value={isActive}
- onChange={handleIsActive}
- className={classes.bottomNavigation}
- >
- <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
- <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
- <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
- <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
- <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
- </BottomNavigation>
- {isActive === 0 && <FilesList messagesMemo={sortedMessages}/>}
- {isActive === 1 && <MediaList messagesMemo={sortedMessages}/>}
- {isActive === 2 && <TextList messagesMemo={sortedMessages}/>}
- {isActive === 3 && <AudioList messagesMemo={sortedMessages} />}
- {isActive === 4 && <VideoList messagesMemo={sortedMessages}/>}
- </>
- )
- }
- export default ProfileLists
|