|
@@ -7,7 +7,8 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
|
|
|
import Switch from '@mui/material/Switch';
|
|
|
import { styled } from '@mui/material/styles';
|
|
|
import { makeStyles } from '@material-ui/core'
|
|
|
-import { useDispatch,useSelector } from "react-redux";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+import { useState } from 'react';
|
|
|
|
|
|
import { actionIsOpen } from '../../../../../../redux/control/action'
|
|
|
import { getMessages } from '../../../../../../redux/messages/selector'
|
|
@@ -51,7 +52,7 @@ const useStyles = makeStyles({
|
|
|
color: '#b1aeae',
|
|
|
height:'7vh'
|
|
|
},
|
|
|
- searchBar: {
|
|
|
+ searchBarActive: {
|
|
|
outline: '2px solid #2184f7',
|
|
|
color: '#2184f7',
|
|
|
},
|
|
@@ -69,9 +70,11 @@ interface ISearch {
|
|
|
const Search = ({handleSearch,value,setDate,date}:ISearch) => {
|
|
|
const dispatch = useDispatch()
|
|
|
const classes = useStyles()
|
|
|
- const { sort,companionId } = useSelector(getChat)
|
|
|
+ const { sort, companionId } = useSelector(getChat)
|
|
|
+ const [isFocus,setIsFocus] = useState<boolean>(false)
|
|
|
const messages = useSelector(getMessages)
|
|
|
const disabled = messages.length > 0 ? false : true
|
|
|
+ const handleFocus= () => !isFocus&&setIsFocus(true)
|
|
|
const handleOnOpen = () => setDate('')
|
|
|
const handleSort = () => {
|
|
|
sortChat(companionId)
|
|
@@ -83,14 +86,15 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
|
|
|
<IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
|
|
|
<CloseIcon fontSize='medium'/>
|
|
|
</IconButton>
|
|
|
- <SearchBar className={disabled?undefined:classes.searchBar}>
|
|
|
+ <SearchBar className={!isFocus||disabled?undefined:classes.searchBarActive}>
|
|
|
<SearchIconWrapper>
|
|
|
<SearchIcon />
|
|
|
</SearchIconWrapper>
|
|
|
<StyledInputBase
|
|
|
disabled={disabled}
|
|
|
onChange={handleSearch}
|
|
|
- placeholder="Search by request and date"
|
|
|
+ onFocus={handleFocus}
|
|
|
+ placeholder="Search"
|
|
|
value={value}
|
|
|
inputProps={{ 'aria-label': 'search' }}
|
|
|
/>
|
|
@@ -98,7 +102,8 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
|
|
|
<IconButton aria-label="delete" size="medium">
|
|
|
<StaticDatePicker disabled={disabled} date={date}
|
|
|
changeDate={setDate} handleOnOpen={handleOnOpen} />
|
|
|
- <CalendarTodayIcon fontSize='medium' />
|
|
|
+ <CalendarTodayIcon fontSize='medium'
|
|
|
+ style={{color:date?'#2184f7':'#b1aeae'}}/>
|
|
|
</IconButton>
|
|
|
<Switch onClick={handleSort} checked={sort} {...label} />
|
|
|
</Toolbar>
|