Changeset View
Changeset View
Standalone View
Standalone View
web/modals/chat/sidebar-list-modal.react.js
| Show All 19 Lines | 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 { | ||||
| listData, | listData, | ||||
| searchState, | searchState, | ||||
| setSearchState, | clearQuery, | ||||
| onChangeSearchInputText, | onChangeSearchInputText, | ||||
| } = useSearchSidebars(threadInfo); | } = 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], | ||||
| ); | ); | ||||
| const clearQuery = React.useCallback( | |||||
| (event: SyntheticEvent<HTMLAnchorElement>) => { | |||||
| event.preventDefault(); | |||||
| setSearchState({ text: '', results: new Set() }); | |||||
| }, | |||||
| [setSearchState], | |||||
| ); | |||||
| let clearQueryButton = null; | let clearQueryButton = null; | ||||
| if (searchState.text) { | if (searchState.text) { | ||||
| clearQueryButton = ( | clearQueryButton = ( | ||||
| <a href="#" onClick={clearQuery}> | <a href="#" onClick={clearQuery}> | ||||
| <FontAwesomeIcon | <FontAwesomeIcon | ||||
| icon={faTimesCircle} | icon={faTimesCircle} | ||||
| className={chatThreadListCSS.clearQuery} | className={chatThreadListCSS.clearQuery} | ||||
| /> | /> | ||||
| Show All 39 Lines | |||||