zim-fuzzysearch
Version:
Client side fuzzy search combined with seperate configurable result highlighting.
74 lines (73 loc) • 4.37 kB
JavaScript
import React from "react";
import { useMarkJs } from "../../../hooks/useMark";
import { useFuzzyResult } from "../../../hooks/useFuzzyResult";
import { useFuzzyInput } from "../../../hooks/useFuzzyInput";
/**
* Renders indexed page section with higlighting using the mark.js hook.
* @param curPage array of data that represents one page
* @param onSelect function reference for what should happen when a result was chosen
* @param inputVal val that should be used for marking via mark.js
* @param searchResult original result
* @param markOptions options from mark that should be applied.
*/
var ResultPage = function (_a) {
var curPage = _a.curPage, onSelect = _a.onSelect, searchResult = _a.searchResult, inputVal = _a.inputVal, markOptions = _a.markOptions, searchedVal = _a.searchedVal;
var mark = useMarkJs(inputVal ? inputVal : undefined, markOptions).mark;
var _b = useFuzzyResult(), resultCountLabel = _b.resultCountLabel, tagConceptMap = _b.tagConceptMap, showResultGrid = _b.showResultGrid, onTagSelect = _b.onTagSelect, onFuseScoreToCssClass = _b.onFuseScoreToCssClass;
var inputCtx = useFuzzyInput();
//when page changes -> mark new page (mark needs a ref)
var divRef = React.useRef(null);
React.useEffect(function () {
if (!divRef.current)
return;
// when clickmode active -> use saved searchval (and not input directly)
if (inputCtx.clickMode) {
mark(divRef.current, searchedVal ? searchedVal : undefined);
}
else {
mark(divRef.current, inputVal ? inputVal : undefined);
}
// redraw with mark when page is rerendered AND when markoptions change
}, [JSON.stringify(curPage), markOptions]);
var handleTagClick = function (evt) {
//console.log(evt.currentTarget.textContent);
if (!tagConceptMap)
return;
var tagVal = evt.currentTarget.textContent;
//@ts-ignore
if (!tagConceptMap[tagVal])
return;
//@ts-ignore
var tagObj = tagConceptMap[tagVal];
if (onTagSelect) {
evt.preventDefault();
return onTagSelect(tagObj);
}
window.location.href = tagObj.url;
};
return searchResult ? (React.createElement(React.Fragment, null,
React.createElement("h6", null,
resultCountLabel,
searchResult.length),
React.createElement("div", { ref: divRef, className: "" + (showResultGrid ? "card-columns" : "") }, curPage.map(function (val, ind) { return (React.createElement("div", { className: "zim-fuzzy--result-div " + (showResultGrid ? "card" : "") + " " + (val.score ? onFuseScoreToCssClass(val.score) : ''), key: "ResultPage_div_" + ind },
React.createElement("div", { className: "" + (showResultGrid ? "card-body" : "") },
showResultGrid ? React.createElement("br", null) : null,
!showResultGrid ? React.createElement("a", { className: "a_result zim-fuzzy--result-crumb", key: "searchable_" + ind, onClick: onSelect
? function (evt) {
evt.preventDefault();
onSelect(val.item);
}
: undefined, href: val.item.value }, val.item.value) : null,
React.createElement("a", { href: val.item.value, onClick: onSelect
? function (evt) {
evt.preventDefault();
onSelect(val.item);
}
: undefined },
React.createElement("h3", { className: "zim-fuzzy--result-heading", key: "paginatedHeader_" + ind }, val.item.label)),
val.item.txt ? (React.createElement("p", { className: "zim-fuzzy--result-txt" }, showResultGrid ? (" " + val.item.txt).substring(0, 200) + "..." : val.item.txt)) : null,
React.createElement("p", null, val.item.tags
? val.item.tags.map(function (tag) { return (React.createElement("button", { key: val.item + "_" + tag, onClick: handleTagClick, className: "btn badge rounded-pill bg-light zim-fuzzy--result-tag" }, tag)); })
: null)))); })))) : null;
};
export default ResultPage;