@kit-data-manager/react-search-component
Version:
All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.
70 lines • 3.17 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ReactSearchComponentContext } from "../components/ReactSearchComponentContext";
import { SearchConfigBuilder } from "../lib/config/SearchConfigBuilder";
import { arrayToObjectEntries } from "../lib/utils";
import { WithSearch } from "@elastic/react-search-ui";
import { useCallback, useMemo } from "react";
/**
* Extends the elasticsearch SearchContext with additional functionality. This provider automatically
* detects the SearchContext and uses it. When used outside a SearchContext, this provider silently does nothing.
* @param props
* @constructor
*/
export function ReactSearchComponentContextProvider(props) {
const connector = useMemo(() => {
try {
return new SearchConfigBuilder(props.config).buildConnector();
}
catch (e) {
console.error("Failed to build connector in ReactSearchComponentContextProvider", e);
return undefined;
}
}, [props.config]);
const searchForBackground = useCallback(async (query) => {
if (!connector)
return;
// Hacky but works
return connector.onSearch({ searchTerm: query, resultsPerPage: 20 }, {
result_fields: arrayToObjectEntries(props.config.indices[0].resultFields),
searchTerm: query,
search_fields: arrayToObjectEntries(props.config.indices[0].searchFields),
resultsPerPage: 20
});
}, [connector, props.config.indices]);
// Fallback for testing without elastic context
if (!connector) {
console.warn("Using fallback context for ReactSearchComponentContextProvider as elastic config is invalid. Elastic-related features will not work.");
return (_jsx(ReactSearchComponentContext.Provider, { value: {
searchTerm: "",
searchFor: () => { },
searchForBackground: async () => {
return undefined;
},
config: props.config
}, children: props.children }));
}
return (_jsx(WithSearch, { mapContextToProps: ({ searchTerm, setSearchTerm, clearFilters, setSort }) => ({
searchTerm,
setSearchTerm,
clearFilters,
setSort
}), children: ({ searchTerm, setSearchTerm, clearFilters, setSort }) => {
return (_jsx(ReactSearchComponentContext.Provider, { value: {
searchTerm: searchTerm ?? "",
searchFor: (query) => {
clearFilters();
setSearchTerm(query);
setSort([{ field: "_score", direction: "desc" }], "desc");
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
},
elasticConnector: connector,
searchForBackground,
config: props.config
}, children: props.children }));
} }));
}
//# sourceMappingURL=ReactSearchComponentContextProvider.js.map