synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
68 lines • 4.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FullTextSearch = void 0;
var tslib_1 = require("tslib");
var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var core_1 = require("@material-ui/core");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var QueryWrapper_1 = require("./QueryWrapper");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faSearch);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faTimes);
// See PLFM-7011
var MIN_SEARCH_QUERY_LENGTH = 3;
function FullTextSearch(props) {
var _a;
var _b = (0, react_1.useState)(''), searchText = _b[0], setSearchText = _b[1];
var searchInputRef = (0, react_1.useRef)(null);
var showSearchBar = (_a = props === null || props === void 0 ? void 0 : props.topLevelControlsState) === null || _a === void 0 ? void 0 : _a.showSearchBar;
(0, react_1.useEffect)(function () {
var _a;
if (showSearchBar) {
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
}, [showSearchBar]);
var search = function (event) {
var _a;
event.preventDefault();
// The HTML validation doesn't trim the string, so we add an extra check.
// We don't auto-trim the form text ourselves because the user may still be focused on the input.
if (searchText.trim().length < MIN_SEARCH_QUERY_LENGTH) {
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity("Search term must have a minimum of " + MIN_SEARCH_QUERY_LENGTH + " characters");
}
else {
var executeQueryRequest = props.executeQueryRequest, getLastQueryRequest = props.getLastQueryRequest;
var lastQueryRequestDeepClone = getLastQueryRequest();
var _b = lastQueryRequestDeepClone.query.additionalFilters, additionalFilters = _b === void 0 ? [] : _b;
var textMatchesQueryFilter = {
concreteType: 'org.sagebionetworks.repo.model.table.TextMatchesQueryFilter',
searchExpression: searchText,
};
additionalFilters.push(textMatchesQueryFilter);
lastQueryRequestDeepClone.query.additionalFilters = additionalFilters;
executeQueryRequest(lastQueryRequestDeepClone);
}
};
var handleChange = function (event) {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
setSearchText(event.currentTarget.value);
};
var topLevelControlsState = props.topLevelControlsState;
var showFacetFilter = topLevelControlsState === null || topLevelControlsState === void 0 ? void 0 : topLevelControlsState.showFacetFilter;
return (react_1.default.createElement("div", { className: "SearchV2 " + (showFacetFilter
? QueryWrapper_1.QUERY_FILTERS_EXPANDED_CSS
: QueryWrapper_1.QUERY_FILTERS_COLLAPSED_CSS) },
react_1.default.createElement(core_1.Collapse, { in: topLevelControlsState === null || topLevelControlsState === void 0 ? void 0 : topLevelControlsState.showSearchBar, timeout: { enter: 300, exit: 300 } },
react_1.default.createElement("form", { className: "SearchV2__searchbar", onSubmit: search },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "SearchV2__searchbar__searchicon", size: 'sm', icon: 'search' }),
react_1.default.createElement("input", { ref: searchInputRef, minLength: MIN_SEARCH_QUERY_LENGTH, onChange: handleChange, placeholder: "Enter Search Terms", value: searchText, type: "text" }),
searchText.length > 0 && (react_1.default.createElement("button", { className: "SearchV2__searchbar__clearbutton", type: "button", onClick: function () {
setSearchText('');
} },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "SRC-primary-text-color", icon: "times" })))))));
}
exports.FullTextSearch = FullTextSearch;
exports.default = FullTextSearch;
//# sourceMappingURL=FullTextSearch.js.map