zim-fuzzysearch
Version:
Client side fuzzy search combined with seperate configurable result highlighting.
79 lines (78 loc) • 6.17 kB
JavaScript
import React from "react";
import { useFuzzyInput } from "../../hooks/useFuzzyInput";
import { useFuzzyResult } from "../../hooks/useFuzzyResult";
var Input = function (_a) {
var value = _a.value, onChange = _a.onChange, onSearchClick = _a.onSearchClick, _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.placeHolder, placeHolder = _c === void 0 ? "Search..." : _c;
// needed to pass input value to onClick at span
var inputRef = React.useRef(null);
var inputCtx = useFuzzyInput();
var resultCtx = useFuzzyResult();
// state to display filter
var _d = React.useState(false), showFilterTab = _d[0], setShowFilterTab = _d[1];
var checkIncludes = function (activeKeys, fuseKeys) {
return activeKeys.every(function (key) { return fuseKeys.includes(key); });
};
return (React.createElement(React.Fragment, null,
React.createElement("form", { className: "zim-fuzzy--input-form", onSubmit: onSearchClick
? function (evt) {
evt.preventDefault();
onSearchClick(inputRef.current ? inputRef.current.value : "");
if (inputCtx.onSearch)
inputCtx.onSearch(value ? value : "");
}
: function (evt) { return evt.preventDefault(); } },
React.createElement("div", { className: "input-group mb-3 zim-fuzzy--input-group" },
React.createElement("div", { className: "input-group-prepend" },
React.createElement("button", { className: "input-group-text", type: "submit" }, !loading ? (React.createElement("span", { className: "fa fa-search" })) : (React.createElement("div", { className: "spinner-border spinner-border-sm", role: "status" },
React.createElement("span", { className: "sr-only" }, "Loading..."))))),
React.createElement("input", { list: inputCtx.suggestions ? "" + inputCtx.suggestions[Object.keys(inputCtx.suggestions)[0]].value : undefined, name: inputCtx.suggestions ? "" + inputCtx.suggestions[Object.keys(inputCtx.suggestions)[0]].value : undefined, ref: inputRef, className: "form-control", value: value ? value : "", onChange: function (evt) { return onChange(evt.currentTarget.value); }, type: "text", disabled: loading, placeholder: !loading ? placeHolder : "..." }),
inputCtx.suggestions ? (React.createElement("datalist", { id: "" + inputCtx.suggestions[Object.keys(inputCtx.suggestions)[0]].value }, Object.keys(inputCtx.suggestions).map(function (sugg, i) { return (React.createElement("option", { key: "sugg_" + i, value: inputCtx.suggestions[sugg].value }, inputCtx.suggestions[sugg].label)); }))) : null,
React.createElement("div", { className: "input-group-append" },
resultCtx.tagConceptMap ? React.createElement("button", { type: "button", className: "input-group-text", onClick: function () {
if (showFilterTab)
inputCtx.setSelTag([]);
setShowFilterTab(!showFilterTab);
} },
React.createElement("span", null,
React.createElement("i", { className: "fa fa-filter XIcon", style: { cursor: "pointer" }, title: "Filter" }))) : null,
React.createElement("button", { type: "button", className: "input-group-text", onClick: function () {
onChange(null);
if (onSearchClick) {
onSearchClick("");
}
} },
React.createElement("span", null,
React.createElement("i", { className: "fa fa-times XIcon", style: { cursor: "pointer" }, title: "Delete" })))))),
resultCtx.tagConceptMap ? (React.createElement("select", { multiple: true, style: { display: showFilterTab ? 'block' : 'none', position: "relative" }, className: "float-right", onChange: function (evt) {
var selectedTags = [];
//@ts-ignore
for (var _i = 0, _a = evt.currentTarget.options; _i < _a.length; _i++) {
var option = _a[_i];
if (option.selected)
selectedTags.push(option.value);
}
return inputCtx.setSelTag(selectedTags);
} }, Object.keys(resultCtx.tagConceptMap).map(function (key, i) { return (React.createElement("option", { key: "tag_concept_" + i, value: key }, key)); }))) : null,
inputCtx.fuseKeyMap && inputCtx.fuseStateOptions.keys ? (React.createElement(React.Fragment, null,
React.createElement("ul", { className: "nav" },
React.createElement("li", { className: "nav-item" },
React.createElement("a", { className: "nav-link " + (checkIncludes(Object.keys(inputCtx.fuseKeyMap), inputCtx.fuseStateOptions.keys)
? "active"
: ""), href: "#s", onClick: function (evt) {
evt.preventDefault();
inputCtx.toggleFuseKey(Object.keys(inputCtx.fuseKeyMap));
} }, inputCtx.fuseKeyAllLabel)),
Object.keys(inputCtx.fuseKeyMap).map(function (fuseKey) { return (React.createElement("li", { key: fuseKey, className: "nav-item" },
React.createElement("a", { href: "#a", onClick: function (evt) {
evt.preventDefault();
inputCtx.toggleFuseKey([fuseKey]);
}, className: "nav-link " + (checkIncludes(inputCtx.fuseStateOptions.keys, [
fuseKey,
])
? "active"
: "") },
//@ts-ignore
inputCtx.fuseKeyMap[fuseKey].label))); })),
React.createElement("br", null))) : null));
};
export default Input;