bbd-react-autocomplete
Version:
A search box for React
199 lines (198 loc) • 12.9 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MAX_RESULTS = exports.DEFAULT_INPUT_DEBOUNCE = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = __importStar(require("react"));
var styled_components_1 = __importStar(require("styled-components"));
var config_1 = require("../config/config");
var Results_1 = __importDefault(require("./Results"));
var SearchInput_1 = __importDefault(require("./SearchInput"));
var utils_1 = require("../utils/utils");
exports.DEFAULT_INPUT_DEBOUNCE = 300;
exports.MAX_RESULTS = 10;
function ReactSearchAutocomplete(_a) {
var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.inputDebounce, inputDebounce = _c === void 0 ? exports.DEFAULT_INPUT_DEBOUNCE : _c, onSearch = _a.onSearch, _d = _a.onHover, onHover = _d === void 0 ? function () { } : _d, _e = _a.onSelect, onSelect = _e === void 0 ? function () { } : _e, _f = _a.onFocus, onFocus = _f === void 0 ? function () { } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { } : _g, _h = _a.showIcon, showIcon = _h === void 0 ? true : _h, _j = _a.showClear, showClear = _j === void 0 ? true : _j, _k = _a.maxResults, maxResults = _k === void 0 ? exports.MAX_RESULTS : _k, _l = _a.placeholder, placeholder = _l === void 0 ? '' : _l, _m = _a.autoFocus, autoFocus = _m === void 0 ? false : _m, _o = _a.styling, styling = _o === void 0 ? {} : _o, _p = _a.resultStringKeyName, resultStringKeyName = _p === void 0 ? 'name' : _p, _q = _a.inputSearchString, inputSearchString = _q === void 0 ? '' : _q, formatResult = _a.formatResult, _r = _a.showNoResults, showNoResults = _r === void 0 ? true : _r, _s = _a.showNoResultsText, showNoResultsText = _s === void 0 ? 'No results' : _s, _t = _a.maxLength, maxLength = _t === void 0 ? 0 : _t, className = _a.className, filterKey = _a.filterKey;
var theme = __assign(__assign({}, config_1.defaultTheme), styling);
var _u = (0, react_1.useState)(inputSearchString), searchString = _u[0], setSearchString = _u[1];
var _v = (0, react_1.useState)([]), results = _v[0], setResults = _v[1];
var _w = (0, react_1.useState)(-1), highlightedItem = _w[0], setHighlightedItem = _w[1];
var _x = (0, react_1.useState)(false), isSearchComplete = _x[0], setIsSearchComplete = _x[1];
var _y = (0, react_1.useState)(false), isTyping = _y[0], setIsTyping = _y[1];
var _z = (0, react_1.useState)(false), showNoResultsFlag = _z[0], setShowNoResultsFlag = _z[1];
var _0 = (0, react_1.useState)(false), showResponse = _0[0], setShowResponse = _0[1];
// useEffect(() => {
// setSearchString(inputSearchString);
// const timeoutId = setTimeout(
// () => setResults(fuseResults(inputSearchString)),
// 0,
// );
// return () => clearTimeout(timeoutId);
// }, [inputSearchString]);
(0, react_1.useEffect)(function () {
setResults(fuseResults(searchString));
searchString && fuseResults(searchString).length && setShowResponse(true);
}, [items]);
(0, react_1.useEffect)(function () {
if (showNoResults &&
searchString.length > 0 &&
!isTyping &&
results.length === 0 &&
!isSearchComplete) {
setShowNoResultsFlag(true);
}
else {
setShowNoResultsFlag(false);
}
}, [isTyping, showNoResults, isSearchComplete, searchString, results]);
var handleOnFocus = function () {
if (searchString) {
setResults([
items.filter(function (item) { var _a, _b, _c; return ((_c = (_b = (_a = item[filterKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf) === null || _c === void 0 ? void 0 : _c.call(_b, searchString.toLowerCase())) > -1; })
]);
}
else {
setResults(__spreadArray([], items, true));
}
};
var callOnSearch = function (keyword) {
setIsTyping(false);
setResults(fuseResults(keyword));
};
var handleOnSearch = react_1.default.useCallback(inputDebounce > 0
? (0, utils_1.debounce)(function (keyword) { return callOnSearch(keyword); }, inputDebounce)
: function (keyword) { return callOnSearch(keyword); }, [items]);
var handleOnClick = function (result) {
eraseResults();
onSelect(result);
setSearchString(result[resultStringKeyName]);
setHighlightedItem(0);
};
var fuseResults = function (keyword) {
return keyword.length ? items.filter(function (item) { var _a, _b; return ((_b = (_a = item === null || item === void 0 ? void 0 : item[filterKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf(keyword.toLowerCase())) > -1; }) : items;
};
var handleSetSearchString = function (_a) {
var target = _a.target;
var keyword = target.value;
setSearchString(keyword);
handleOnSearch(keyword);
setIsTyping(true);
if (isSearchComplete) {
setIsSearchComplete(false);
}
};
var eraseResults = function () {
setResults([]);
setIsSearchComplete(true);
};
var handleSetHighlightedItem = function (_a) {
var _b, _c;
var index = _a.index, event = _a.event;
var itemIndex = -1;
var setValues = function (index) {
setHighlightedItem(index);
(results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
};
if (index !== undefined) {
setHighlightedItem(index);
(results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
}
else if (event) {
switch (event.key) {
case 'Enter':
if (results.length > 0 && results[highlightedItem]) {
event.preventDefault();
onSelect(results[highlightedItem]);
var value = (_c = (_b = results[highlightedItem]) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : results[highlightedItem][resultStringKeyName];
setSearchString(value);
onSearch === null || onSearch === void 0 ? void 0 : onSearch(results[highlightedItem][resultStringKeyName], results);
}
else {
onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchString, results);
}
setHighlightedItem(-1);
eraseResults();
break;
case 'ArrowUp':
event.preventDefault();
itemIndex =
highlightedItem > -1 ? highlightedItem - 1 : results.length - 1;
setValues(itemIndex);
break;
case 'ArrowDown':
event.preventDefault();
itemIndex =
highlightedItem < results.length - 1 ? highlightedItem + 1 : -1;
setValues(itemIndex);
break;
default:
break;
}
}
};
return ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsx)(StyledReactSearchAutocomplete, __assign({ className: className }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "wrapper" }, { children: [(0, jsx_runtime_1.jsx)(SearchInput_1.default, { searchString: searchString, setSearchString: handleSetSearchString, eraseResults: function () {
setShowResponse(false);
}, autoFocus: autoFocus, onFocus: handleOnFocus, onClear: function () {
onClear();
setResults(items);
setShowResponse(false);
// if (defaultOptions.length) {
// setResults(defaultOptions);
// setShowResponse(true);
// }
}, placeholder: placeholder, showIcon: showIcon, showClear: showClear, setHighlightedItem: handleSetHighlightedItem, maxLength: maxLength, onClickInput: function () {
setShowResponse(true);
} }), showResponse && ((0, jsx_runtime_1.jsx)(Results_1.default, { results: results, onClick: handleOnClick, setSearchString: setSearchString, showIcon: showIcon, maxResults: maxResults, resultStringKeyName: resultStringKeyName, formatResult: formatResult, highlightedItem: highlightedItem, setHighlightedItem: handleSetHighlightedItem, showNoResultsFlag: showNoResultsFlag, showNoResultsText: showNoResultsText }))] })) })) })));
}
exports.default = ReactSearchAutocomplete;
var StyledReactSearchAutocomplete = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n height: ", ";\n\n .wrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n border: ", ";\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n font-size: ", ";\n font-family: ", ";\n\n z-index: ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n &:active {\n box-shadow: ", ";\n }\n &:focus-within {\n box-shadow: ", ";\n }\n }\n"], ["\n position: relative;\n\n height: ", ";\n\n .wrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n border: ", ";\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n font-size: ", ";\n font-family: ", ";\n\n z-index: ", ";\n\n &:hover {\n box-shadow: ", ";\n }\n &:active {\n box-shadow: ", ";\n }\n &:focus-within {\n box-shadow: ", ";\n }\n }\n"])), function (props) { return "".concat(parseInt(props.theme.height) + 2, "px"); }, function (props) { return props.theme.border; }, function (props) { return props.theme.borderRadius; }, function (props) { return props.theme.backgroundColor; }, function (props) { return props.theme.color; }, function (props) { return props.theme.fontSize; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.zIndex; }, function (props) { return props.theme.boxShadow; }, function (props) { return props.theme.boxShadow; }, function (props) { return props.theme.boxShadow; });
var templateObject_1;