123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- import Toolbar from '@mui/material/Toolbar'
- import AppBar from '@mui/material/AppBar';
- import { makeStyles,Typography } from '@material-ui/core'
- import Button from '@mui/material/Button';
- import { useState } from 'react';
- import { useSelector,useDispatch } from 'react-redux';
- import IconButton from '@mui/material/IconButton';
- import ArrowBackIcon from '@mui/icons-material/ArrowBack';
- import Divider from '@mui/material/Divider';
- import Credentials from './Credentials'
- import Buttons from './Buttons'
- import PinnedBar from './PinnedBar';
- import { removeSelectedMessagesById } from '../../../../api-data';
- import { getChatMemo } from '../../../../redux/chat/selector';
- import { actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
- import { TPinnedMessages } from '../../../../typescript/redux/pinnedMessages/types';
- const useStyles = makeStyles({
- toolBar: {
- color: '#6e6d6d',
- display: 'flex',
- justifyContent: 'space-between',
- backgroundColor: '#ffffff',
- height:'7vh'
- },
- toolBarPinned: {
- color: '#6e6d6d',
- display: 'flex',
- alignItems: 'center',
- alignContent:'center',
- backgroundColor: '#ffffff',
- height: '7vh',
- cursor:'pointer'
- },
- pinnedBack: {
- display: 'flex',
- width:'100%',
- alignContent: 'center',
- alignItems: 'center',
- flexWrap: 'nowrap',
- },
- credentials: {
- background: '#fdfdfd',
- width:'100%',
- height: '100%',
- margin:'0 auto'
- },
- toolBarRight: {
- display: 'flex',
- },
- buttonDelete: {
- color: '#f8f8f8',
- backgroundColor:'#1d74c5',
- },
- modalDelete: {
- background: '#ffffff',
- position: 'absolute',
- content:'',
- width: '20%',
- height:'auto',
- left: '40%',
- bottom: '48.5%',
- borderRadius: 10,
- padding: 10,
- display: 'flex',
- flexDirection:'column'
- },
- overlay: {
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100vw',
- height: '100vh',
- zIndex: 100,
- backgroundColor: 'rgba(104, 105, 104, 0.6)',
- overflowY: 'hidden',
- },
- iconArrow: {
- '&:hover': {
- transform: 'rotate(360deg)',
- transition: 'all 250ms ease-out ',
- }
- },
- })
- interface IHeaderBar {
- chatDivRef: any | null,
- selectedArr: string[] | [],
- isSomeSelected: boolean,
- setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
- handleClearSelect: () => void,
- openPinned: boolean,
- pinnedMessagesMemo:TPinnedMessages
- }
- const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,pinnedMessagesMemo}:IHeaderBar) => {
- const classes = useStyles()
- const dispatch = useDispatch()
- const { companionId } = useSelector(getChatMemo)
- const [modal, setModal] = useState<boolean>(false)
- const handleClosePinned = (e: any) => {
- e.stopPropagation()
- dispatch(actionOpenPinned(false))
- }
- const handleOpenPinned = () => dispatch(actionOpenPinned(true))
- const handleOpenCredentials = (e: any) => {
- e.stopPropagation()
- dispatch(actionRightIsOpen('credentials'))
- }
- const handleOpenModal = (): void => setModal(true)
- const handleDeleteModal = (e: any) => {
- const id = e.target.id
- if (id === 'overlay') return setModal(false)
- if (id === 'cancel') {
- handleClearSelect()
- setModal(false)
- }
- if (id === 'delete') {
- removeSelectedMessagesById(companionId,selectedArr)
- handleClearSelect()
- setModal(false)
- }
- }
- return (<>
- {openPinned &&pinnedMessagesMemo.length > 0&&
- <AppBar position="static">
- <Toolbar className={classes.toolBarPinned}>
- <div onClick={handleOpenCredentials} className={classes.pinnedBack}>
- <IconButton onClick={handleClosePinned}
- aria-label="delete" size="medium">
- <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
- </IconButton>
- <Typography style={{ marginLeft:20, color: '#474747'}} variant="h6" color="initial">
- {`${pinnedMessagesMemo.length} pinned messages`}
- </Typography>
- </div>
- <Buttons setIsSomeSelected={setIsSomeSelected}/>
- </Toolbar>
- </AppBar>}
- {openPinned&&isSomeSelected&&<Divider variant="inset"/>}
- {!openPinned && !isSomeSelected &&
- <AppBar position="static">
- <Toolbar className={classes.toolBar}>
- <Credentials/>
- <div className={classes.toolBarRight}>
- <PinnedBar chatDivRef={chatDivRef} handleOpenPinned={handleOpenPinned}/>
- <Buttons setIsSomeSelected={setIsSomeSelected}/>
- </div>
- </Toolbar>
- </AppBar>}
- {isSomeSelected &&
- <AppBar position="static">
- <Toolbar className={classes.toolBar}>
- <Button color='primary' onClick={handleOpenModal}
- variant="contained" className={classes.buttonDelete}
- style={{visibility: selectedArr.length === 0 ? 'hidden' : 'visible',
- fontWeight:500}}>
- {`DELETE ${selectedArr.length}`}
- </Button>
- <Button onClick={handleClearSelect} style={{color:'#1d74c5',fontWeight:500}}>
- CANCEL
- </Button>
- </Toolbar>
- {modal &&
- <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
- <div className={classes.modalDelete}>
- <h3 style={{color: '#2c2c2c'}}>Delete messages</h3>
- <p style={{ color: '#050505' }}>Are you sure you want to delete messages?</p>
- <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
- DELETE MESSAGES
- </Button>
- <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
- CANCEL
- </Button>
- </div>
- </div>}
- </AppBar>}
- </>
- )
- }
- export default HeaderBar
|