zim-fuzzysearch
Version:
Client side fuzzy search combined with seperate configurable result highlighting.
43 lines (42 loc) • 2.19 kB
JavaScript
import React from "react";
import { useFuzzyResult } from "../../hooks/useFuzzyResult";
import { useFuzzyInput } from "../../hooks/useFuzzyInput";
import { usePagination } from "../../hooks/usePagination";
import PageBar from "./PageBar";
import ResultPage from "./ResultPage";
var Result = function (_a) {
var markOptions = _a.markOptions, searchedVal = _a.searchedVal;
var _b = useFuzzyResult(), fuzzyResult = _b.fuzzyResult, onSelect = _b.onSelect, resultCountLabel = _b.resultCountLabel;
var _c = usePagination(fuzzyResult ? fuzzyResult : null, 7), pageTuples = _c.pageTuples, getCurPageTuple = _c.getCurPageTuple, nextPage = _c.nextPage, prevPage = _c.prevPage, goToPage = _c.goToPage, getPageSection = _c.getPageSection;
// via context could also use the input value from user
var inputVal = useFuzzyInput().inputVal;
// when result changes -> set active page to first.
React.useEffect(function () {
if (!getPageSection)
return;
// when result changes -> reset page to one.
try {
getPageSection();
goToPage(0);
}
catch (e) {
return;
}
}, [fuzzyResult]);
var renderEmptyResult = function () {
try {
//@ts-ignore
return React.createElement("h6", null, fuzzyResult.length === 0 ? (resultCountLabel ? resultCountLabel : "Got results: ") + " 0" : "");
}
catch (e) {
return null;
}
};
return React.createElement(React.Fragment, null,
renderEmptyResult(),
fuzzyResult && pageTuples ? (React.createElement("div", { className: "zim-fuzzy--result-main" },
React.createElement(ResultPage, { inputVal: inputVal, curPage: getPageSection(), onSelect: onSelect, searchResult: fuzzyResult, markOptions: markOptions, searchedVal: searchedVal }),
React.createElement("br", null),
React.createElement(PageBar, { nextPage: nextPage, prevPage: prevPage, pageTuples: pageTuples, curPageTuple: getCurPageTuple(), onPageSelect: function (ind) { return goToPage(ind); } }))) : null);
};
export default Result;