Changeset View
Changeset View
Standalone View
Standalone View
web/modals/chat/sidebar-list-modal.react.js
Show All 16 Lines | |||||
import Modal from '../modal.react'; | import Modal from '../modal.react'; | ||||
type Props = { | type Props = { | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
}; | }; | ||||
function SidebarListModal(props: Props): React.Node { | function SidebarListModal(props: Props): React.Node { | ||||
const { threadInfo } = props; | const { threadInfo } = props; | ||||
const { | const [searchText, setSearchText] = React.useState(''); | ||||
listData, | const { listData, onChangeSearchText, clearQuery } = useSearchSidebars( | ||||
searchState, | threadInfo, | ||||
onChangeSearchText, | searchText, | ||||
clearQuery, | setSearchText, | ||||
} = useSearchSidebars(threadInfo); | ); | ||||
const { popModal } = useModalContext(); | const { popModal } = useModalContext(); | ||||
const sidebars = React.useMemo( | const sidebars = React.useMemo( | ||||
() => | () => | ||||
listData.map(item => ( | listData.map(item => ( | ||||
<div | <div | ||||
className={classNames( | className={classNames( | ||||
chatThreadListCSS.thread, | chatThreadListCSS.thread, | ||||
chatThreadListCSS.sidebar, | chatThreadListCSS.sidebar, | ||||
)} | )} | ||||
key={item.threadInfo.id} | key={item.threadInfo.id} | ||||
onClick={popModal} | onClick={popModal} | ||||
> | > | ||||
<SidebarItem sidebarInfo={item} /> | <SidebarItem sidebarInfo={item} /> | ||||
</div> | </div> | ||||
)), | )), | ||||
[popModal, listData], | [popModal, listData], | ||||
); | ); | ||||
let clearQueryButton = null; | let clearQueryButton = null; | ||||
if (searchState.text) { | if (searchText) { | ||||
clearQueryButton = ( | clearQueryButton = ( | ||||
<a href="#" onClick={clearQuery}> | <a href="#" onClick={clearQuery}> | ||||
<FontAwesomeIcon | <FontAwesomeIcon | ||||
icon={faTimesCircle} | icon={faTimesCircle} | ||||
className={chatThreadListCSS.clearQuery} | className={chatThreadListCSS.clearQuery} | ||||
/> | /> | ||||
</a> | </a> | ||||
); | ); | ||||
} | } | ||||
return ( | return ( | ||||
<Modal name="Sidebars" onClose={popModal}> | <Modal name="Sidebars" onClose={popModal}> | ||||
<div | <div | ||||
className={classNames( | className={classNames( | ||||
globalCSS['modal-body'], | globalCSS['modal-body'], | ||||
globalCSS['resized-modal-body'], | globalCSS['resized-modal-body'], | ||||
)} | )} | ||||
> | > | ||||
<div> | <div> | ||||
<div className={chatThreadListCSS.search}> | <div className={chatThreadListCSS.search}> | ||||
<MagnifyingGlass className={chatThreadListCSS.searchVector} /> | <MagnifyingGlass className={chatThreadListCSS.searchVector} /> | ||||
<Input | <Input | ||||
type="text" | type="text" | ||||
placeholder="Search sidebars" | placeholder="Search sidebars" | ||||
value={searchState.text} | value={searchText} | ||||
onChange={onChangeSearchText} | onChange={onChangeSearchText} | ||||
/> | /> | ||||
{clearQueryButton} | {clearQueryButton} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<ul className={chatThreadListCSS.list}>{sidebars}</ul> | <ul className={chatThreadListCSS.list}>{sidebars}</ul> | ||||
</div> | </div> | ||||
</Modal> | </Modal> | ||||
); | ); | ||||
} | } | ||||
export default SidebarListModal; | export default SidebarListModal; |