@gowiz/searchbar
Version:
Different search bars powered by Gowiz search engine technology
102 lines • 6.05 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SecondaryActionClass = exports.Highlight = exports.InLocalStorage = void 0;
const react_1 = __importDefault(require("react"));
const react_device_detect_1 = require("react-device-detect");
const storage_1 = require("../util/storage");
const highlight_1 = require("../util/highlight");
const react_addons_shallow_compare_1 = __importDefault(require("react-addons-shallow-compare"));
const icons_1 = require("../assets/icons");
exports.InLocalStorage = ({ showResultsSearchIcon, useCashing, useDarkTheme = false, result }) => {
const classname = useDarkTheme ? 'result_icon dark_result_icon' : 'result_icon';
if (!showResultsSearchIcon) {
return react_1.default.createElement("div", { className: classname });
}
const icon = storage_1.searchTermInLocalStorage(result) && useCashing ? react_1.default.createElement(icons_1.TimeIcon, null) : react_1.default.createElement(icons_1.SearchIcon, null);
return react_1.default.createElement("div", { className: classname }, icon);
};
exports.Highlight = ({ text, query }) => {
const parts = highlight_1.getHighlightParts(text, query);
if (parts.length < 2) {
return react_1.default.createElement("span", null, text);
}
return (react_1.default.createElement("span", null, parts.map((part, i) => (react_1.default.createElement("span", { key: i, style: i === 1 ? { fontWeight: 'bold' } : {} }, part)))));
};
exports.SecondaryActionClass = ({ tabIndexStart, result, onRemove, onClick, useDarkTheme = false, isSmallScreen }) => {
const _searchTermInLocalStorage = storage_1.searchTermInLocalStorage(result);
const classname = useDarkTheme ? 'secondary_action_icon dark_secondary_action_icon' : 'secondary_action_icon';
if (_searchTermInLocalStorage) {
return (react_1.default.createElement("div", { tabIndex: tabIndexStart + 1, className: classname, defaultValue: result, "aria-readonly": 'true', title: 'Remove ' + result + ' from search history', onClick: () => onRemove(result) },
react_1.default.createElement(icons_1.CancelIcon, null)));
}
if (isSmallScreen) {
return (react_1.default.createElement("div", { tabIndex: tabIndexStart + 1, className: classname, defaultValue: result, "aria-readonly": 'true', title: 'Add ' + result + ' to your searchbar', onClick: () => onClick(result) },
react_1.default.createElement(icons_1.LeftArrowIcon, null)));
}
return react_1.default.createElement("div", { className: classname });
};
class Results extends react_1.default.Component {
shouldComponentUpdate(nextProps, nextState) {
const queryIsNotLongEnough = nextProps.query == undefined || nextProps.query.length == 0;
if (queryIsNotLongEnough) {
return true;
}
else if (this.props.query !== nextProps.query) {
return true;
}
else if (nextProps.results != this.props.results) {
return true;
}
return react_addons_shallow_compare_1.default(this, nextProps, nextState);
}
forceUpdateMe() {
this.forceUpdate();
}
getListElementClass(result) {
const value_is_equal = this.props.query === result;
if (value_is_equal) {
return this.props.useDarkTheme ? 'dark_highlight_search_suggestion' : 'highlight_search_suggestion';
}
return this.props.useDarkTheme ? 'dark_search_suggestion' : 'search_suggestion';
}
render() {
let { query = '', onSelect, onRemove, onClick, showResultsSearchIcon = true, useCashing = true, useDarkTheme = false, hasSearched = false, results = [], maxResults = 10, } = this.props;
let myResults = results;
let myResultsLength = myResults == null ? 0 : myResults.length;
let queryLength = query == null ? 0 : query.length;
if (myResultsLength < 1) {
if (useCashing && queryLength == 0 && hasSearched) {
myResults = storage_1.getSearchTermsInLocalStorage();
myResultsLength = myResults.length;
}
if (myResultsLength < 1) {
return null;
}
}
const props = {
query: query,
onSelect: onSelect,
onRemove: onRemove,
onClick: onClick,
showResultsSearchIcon: showResultsSearchIcon,
useCashing: useCashing,
results: myResults,
maxResults: maxResults,
hasSearched: hasSearched,
};
const class_name = useDarkTheme ? 'ellipsis dark_ellipsis' : 'ellipsis';
const isSmallScreen = screen.availWidth < 480 || react_device_detect_1.isMobile;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "input_to_results" }),
react_1.default.createElement("ul", null, myResults.map((result, index) => (react_1.default.createElement("li", { className: this.getListElementClass(result), key: result, tabIndex: 2 + index, onClick: (e) => onSelect(e), onSelect: () => onSelect(result) },
react_1.default.createElement(exports.InLocalStorage, { useDarkTheme: useDarkTheme, result: result, showResultsSearchIcon: props.showResultsSearchIcon, useCashing: props.useCashing }),
react_1.default.createElement("div", { className: class_name, title: 'Search for ' + result + ' on Gowiz' },
react_1.default.createElement(exports.Highlight, { query: props.query, text: result })),
react_1.default.createElement(exports.SecondaryActionClass, { useDarkTheme: useDarkTheme, tabIndexStart: 2 + index, result: result, onRemove: (e) => onRemove(e), onClick: onClick, isSmallScreen: isSmallScreen })))))));
}
}
exports.default = Results;
//# sourceMappingURL=result.js.map