synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
222 lines • 14.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
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.__importDefault)(require("react"));
var react_transition_group_1 = require("react-transition-group");
var unCamelCase_1 = require("../utils/functions/unCamelCase");
var synapseTypes_1 = require("../utils/synapseTypes");
var QueryFilter_1 = require("../utils/synapseTypes/Table/QueryFilter");
var QueryWrapper_1 = require("./QueryWrapper");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faCaretDown);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faCaretUp);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faSearch);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faTimes);
var Search = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Search, _super);
function Search(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.handleClickOutsideForm = function (event) {
var _a, _b;
if (
// @ts-ignore
!((_a = _this.searchFormRef.current) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.target)) &&
// @ts-ignore
!((_b = _this.radioFormRef.current) === null || _b === void 0 ? void 0 : _b.contains(event === null || event === void 0 ? void 0 : event.target))) {
if (_this.state.didUpdateRanLast) {
_this.setState({
didUpdateRanLast: false,
});
}
else {
_this.setState({
show: false,
});
}
}
};
_this.search = function (event) {
var _a, _b, _c, _d, _e;
// form completion by default causes the page to reload, so we prevent that
event.preventDefault();
var searchText = _this.state.searchText;
var columnName = _this.state.columnName;
var _f = _this.props, searchable = _f.searchable, lockedFacet = _f.lockedFacet;
if (columnName === '') {
if (searchable) {
// If searchable column names are defined in the config, grab the first one (that is not locked)
columnName = searchable.filter(function (colName) { return colName !== (lockedFacet === null || lockedFacet === void 0 ? void 0 : lockedFacet.facet); })[0];
}
else {
// Otherwise, get the first column model that can be searched.
// And for study details page: if lockedFacet is defined, remove it from the search
var searchableColumnModels = (_b = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.columnModels) === null || _b === void 0 ? void 0 : _b.filter(function (el) { return el.name !== (lockedFacet === null || lockedFacet === void 0 ? void 0 : lockedFacet.facet); }).filter(function (el) { return _this.isSupportedColumn(el); });
columnName = (_c = searchableColumnModels === null || searchableColumnModels === void 0 ? void 0 : searchableColumnModels[0].name) !== null && _c !== void 0 ? _c : '';
}
}
_this.setState({
show: false,
});
var _g = _this.props, executeQueryRequest = _g.executeQueryRequest, getLastQueryRequest = _g.getLastQueryRequest;
var lastQueryRequestDeepClone = getLastQueryRequest();
var _h = lastQueryRequestDeepClone.query.additionalFilters, additionalFilters = _h === void 0 ? [] : _h;
var indexOfColumn = additionalFilters.findIndex(function (el) {
if ((0, QueryFilter_1.isColumnSingleValueQueryFilter)(el) ||
((0, QueryFilter_1.isColumnMultiValueFunctionQueryFilter)(el) &&
el.columnName === columnName)) {
return true;
}
return false;
});
if (indexOfColumn === -1) {
// get the column model to figure out what kind of filter we should apply.
var columnModel = (_e = (_d = _this.props.data) === null || _d === void 0 ? void 0 : _d.columnModels) === null || _e === void 0 ? void 0 : _e.filter(function (el) { return el.name === columnName; })[0];
if (columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType.endsWith('_LIST')) {
var columnMultiValueQueryFilter = {
columnName: columnName,
function: QueryFilter_1.ColumnMultiValueFunction.HAS_LIKE,
values: ["%" + searchText + "%"],
concreteType: 'org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter',
};
additionalFilters.push(columnMultiValueQueryFilter);
}
else {
var columnSingleValueQueryFilter = {
columnName: columnName,
operator: QueryFilter_1.ColumnSingleValueFilterOperator.LIKE,
values: ["%" + searchText + "%"],
concreteType: 'org.sagebionetworks.repo.model.table.ColumnSingleValueQueryFilter',
};
additionalFilters.push(columnSingleValueQueryFilter);
}
}
else {
;
additionalFilters[indexOfColumn].values.push("%" + searchText + "%");
}
lastQueryRequestDeepClone.query.additionalFilters = additionalFilters;
executeQueryRequest(lastQueryRequestDeepClone);
};
_this.handleChange = function (event) {
_this.setState({
searchText: event.currentTarget.value,
});
};
_this.isSupportedColumn = function (columnModel) {
switch (columnModel === null || columnModel === void 0 ? void 0 : columnModel.columnType) {
case synapseTypes_1.ColumnType.FILEHANDLEID:
case synapseTypes_1.ColumnType.ENTITYID:
case synapseTypes_1.ColumnType.DATE:
case synapseTypes_1.ColumnType.DATE_LIST:
case synapseTypes_1.ColumnType.USERID:
return false;
default:
return true;
}
};
_this.isSupportedColumnAndInProps = function (columnModel) {
if (_this.isSupportedColumn(columnModel)) {
// return true if the searchable array contains this column name
var searchable = _this.props.searchable;
return searchable === null || searchable === void 0 ? void 0 : searchable.some(function (e) { return e === (columnModel === null || columnModel === void 0 ? void 0 : columnModel.name); });
}
return false;
};
_this.state = {
show: false,
didUpdateRanLast: false,
searchText: '',
columnName: (_a = _this.props.defaultColumn) !== null && _a !== void 0 ? _a : '',
};
_this.searchFormRef = react_1.default.createRef();
_this.radioFormRef = react_1.default.createRef();
return _this;
}
Search.prototype.componentDidMount = function () {
// @ts-ignore
document.addEventListener('click', this.handleClickOutsideForm);
};
Search.prototype.componentDidUpdate = function (prevProps) {
var _a, _b, _c, _d, _e;
if (!((_a = prevProps.topLevelControlsState) === null || _a === void 0 ? void 0 : _a.showSearchBar) &&
((_b = this.props.topLevelControlsState) === null || _b === void 0 ? void 0 : _b.showSearchBar)) {
this.setState({
show: true,
didUpdateRanLast: true,
});
(_e = (_d = (_c = this.searchFormRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.querySelector('input')) === null || _e === void 0 ? void 0 : _e.focus();
}
};
Search.prototype.componentWillUnmount = function () {
// @ts-ignore
document.removeEventListener('click', this.handleClickOutsideForm);
};
Search.prototype.render = function () {
var _this = this;
var _a;
var _b = this.props, data = _b.data, topLevelControlsState = _b.topLevelControlsState, facetAliases = _b.facetAliases, searchable = _b.searchable, lockedFacet = _b.lockedFacet;
var _c = this.state, searchText = _c.searchText, show = _c.show, columnName = _c.columnName;
var searchColumns = [];
// searchable specifies the order of the columns to search
if (searchable) {
searchColumns = searchable
.map(function (el) { var _a; return (_a = data === null || data === void 0 ? void 0 : data.columnModels) === null || _a === void 0 ? void 0 : _a.find(function (model) { return model.name === el; }); })
.filter(this.isSupportedColumnAndInProps)
.map(function (el) { return el.name; });
}
else if (data === null || data === void 0 ? void 0 : data.columnModels) {
searchColumns = (_a = data.columnModels) === null || _a === void 0 ? void 0 : _a.filter(this.isSupportedColumn).map(function (el) { return el.name; });
}
// For study details page: if lockedFacet is defined, remove it from the radio dropdown
if (searchColumns.length && (lockedFacet === null || lockedFacet === void 0 ? void 0 : lockedFacet.facet)) {
searchColumns = searchColumns.filter(function (el) { return el !== (lockedFacet === null || lockedFacet === void 0 ? void 0 : lockedFacet.facet); });
}
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 },
react_1.default.createElement("form", { className: "SearchV2__searchbar", onSubmit: this.search, onClick: function () {
_this.setState({ show: true });
}, ref: this.searchFormRef },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "SearchV2__searchbar__searchicon", size: 'sm', icon: 'search' }),
react_1.default.createElement("input", { onChange: this.handleChange, onClick: function () {
_this.setState({
show: true,
});
}, placeholder: "Enter Search Terms", value: searchText, type: "text" }),
this.state.searchText.length > 0 && (react_1.default.createElement("button", { className: "SearchV2__searchbar__clearbutton", type: "button", onClick: function () {
_this.setState({
searchText: '',
});
} },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "SRC-primary-text-color", icon: "times" }))))),
react_1.default.createElement("div", { className: "SearchV2__dropdown_pos" },
react_1.default.createElement(react_transition_group_1.CSSTransition, { in: show, classNames: "SearchV2__animate_dropdown", timeout: { enter: 0, exit: 300 } },
react_1.default.createElement("form", { ref: this.radioFormRef, className: "SearchV2__column-select SearchV2__animate_height" },
react_1.default.createElement("p", { className: "deemphasized" },
react_1.default.createElement("i", null, " Search In Field: ")),
searchColumns.map(function (name, index) {
var displayName = (0, unCamelCase_1.unCamelCase)(name, facetAliases);
var isSelected = (columnName === '' && index === 0) || columnName === name;
return (react_1.default.createElement("div", { className: "radio", key: "search-field-" + name + "-" + index },
react_1.default.createElement("label", null,
react_1.default.createElement("span", null,
react_1.default.createElement("input", { id: name, type: "radio", value: name, checked: isSelected, onClick: function () {
var _a, _b, _c;
(_c = (_b = (_a = _this.searchFormRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
_this.setState({
columnName: name,
});
} }),
react_1.default.createElement("span", null, displayName)))));
}))))));
};
return Search;
}(react_1.default.Component));
exports.default = Search;
//# sourceMappingURL=SearchV2.js.map