Differential D4057 Diff 13126 web/modals/chat/sidebar-list-modal.react.js

Changeset View

Standalone View

web/modals/chat/sidebar-list-modal.react.js

	Show All 20 Lines
	};			};

	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,			setSearchState,
	searchIndex,			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 onChangeSearchText = React.useCallback(
	(event: SyntheticEvent<HTMLInputElement>) => {
	const searchText = event.currentTarget.value;
	setSearchState({
	text: searchText,
	results: new Set(searchIndex.getSearchResults(searchText)),
	});
	},
	[searchIndex, setSearchState],
	);

	const clearQuery = React.useCallback(			const clearQuery = React.useCallback(
	(event: SyntheticEvent<HTMLAnchorElement>) => {			(event: SyntheticEvent<HTMLAnchorElement>) => {
	event.preventDefault();			event.preventDefault();
	setSearchState({ text: '', results: new Set() });			setSearchState({ text: '', results: new Set() });
	},			},
	[setSearchState],			[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}
	/>			/>
	</a>			</a>
	);			);
	}			}

				const handleOnChangeSearchText = React.useCallback(
				(event: SyntheticEvent<HTMLInputElement>) => {
				const { value } = event.currentTarget;
				onChangeSearchInputText(value);
				},
				[onChangeSearchInputText],
				);

	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={searchState.text}
	onChange={onChangeSearchText}			onChange={handleOnChangeSearchText}
	/>			/>
	{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;