59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import stl from './LiveSessionSearchField.module.css';
|
|
import { Input } from 'UI';
|
|
import LiveFilterModal from 'Shared/Filters/LiveFilterModal';
|
|
import { debounce } from 'App/utils';
|
|
import { edit as editFilter, addFilterByKeyAndValue } from 'Duck/liveSearch';
|
|
import { useStore } from 'App/mstore';
|
|
|
|
interface Props {
|
|
editFilter: typeof editFilter;
|
|
addFilterByKeyAndValue: (key: string, value: string) => void;
|
|
}
|
|
|
|
function LiveSessionSearchField(props: Props) {
|
|
const { searchStore } = useStore();
|
|
const debounceFetchFilterSearch = debounce(searchStore.fetchFilterSearch, 1000);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const onSearchChange = (e, { value }) => {
|
|
setSearchQuery(value);
|
|
debounceFetchFilterSearch({ q: value });
|
|
};
|
|
|
|
const onAddFilter = (filter) => {
|
|
props.addFilterByKeyAndValue(filter.key, filter.value);
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Input
|
|
// inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
|
|
className={stl.searchField}
|
|
onFocus={() => setShowModal(true)}
|
|
onBlur={() => setTimeout(setShowModal, 200, false)}
|
|
onChange={onSearchChange}
|
|
icon="search"
|
|
placeholder={'Find live sessions by user or metadata.'}
|
|
fluid
|
|
id="search"
|
|
type="search"
|
|
autoComplete="off"
|
|
/>
|
|
|
|
{showModal && (
|
|
<div className="absolute left-0 shadow-sm rounded-lg bg-white z-50">
|
|
<LiveFilterModal
|
|
searchQuery={searchQuery}
|
|
isMainSearch={true}
|
|
onFilterClick={onAddFilter}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(null, { editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);
|