@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
88 lines • 4.46 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { actionIcon } from "../RcsbGroupMembers/Components/Slider";
import { SearchQueryContextManager as SQCM } from "./SearchQueryContextManager";
import { UrlTools } from "../../../RcsbUtils/Helpers/UrlTools";
import Draggable from 'react-draggable';
export class SearchQueryComponentFactory {
static getGroupSearchComponent(groupProvenanceId, groupId, searchQuery) {
if (SearchQueryComponentFactory.unique) {
SearchQueryComponentFactory.unique = false;
return _jsx(RcsbGroupSearchQueryComponent, { groupProvenanceId: groupProvenanceId, groupId: groupId, searchQuery: searchQuery });
}
else {
return _jsx(_Fragment, {});
}
}
}
SearchQueryComponentFactory.unique = true;
class RcsbGroupSearchQueryComponent extends React.Component {
constructor(props) {
super(props);
this.COMPONENT_NAME = "group-search-query-component";
this.URL_STATE_PARAMETER_NAME = "searchQueryState";
this.URL_REQUEST_PARAMETER_NAME = "request";
this.draggableNodeRef = React.createRef();
this.state = {
index: 0,
searchQueryList: [this.props.searchQuery]
};
SQCM.setConfig(Object.assign({}, this.props));
}
render() {
return (_jsx(Draggable, { nodeRef: this.draggableNodeRef, children: _jsx("div", { ref: this.draggableNodeRef, className: "position-fixed", style: { zIndex: 1024, left: "calc(50% - 700px)", width: 120, top: "50%" }, children: _jsxs("div", { className: "border px-1 pt-1 shadow bg-white", children: [_jsx("div", { className: "text-center py-2 bg-secondary bg-gradient text-white", style: { cursor: "grab" }, children: "Query History" }), _jsxs("div", { className: "d-flex flex-row", style: { height: 30 }, children: [_jsx("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(-1), children: actionIcon("prev") }), _jsxs("div", { className: "text-center text-nowrap flex-grow-1 my-auto", children: [this.state.index + 1, " / ", this.state.searchQueryList.length] }), _jsx("div", { className: "text-center my-auto", onClick: () => this.browseSearchQuery(+1), children: actionIcon("next") })] })] }) }) }));
}
componentDidMount() {
this.subscribe();
this.checkUrlState();
}
componentWillUnmount() {
this.unsubscribe();
}
unsubscribe() {
this.subscription.unsubscribe();
}
subscribe() {
this.subscription = SQCM.subscribe((o) => {
this.addSearchQuery(o);
});
}
checkUrlState() {
const urlParams = UrlTools.decodeUrlParameters();
if (!urlParams)
return;
const urlState = urlParams.find(p => p.key === this.URL_STATE_PARAMETER_NAME);
if (urlState) {
this.setState(urlState.value);
const searchQuery = urlState.value.searchQueryList[urlState.value.index];
if (searchQuery)
SQCM.setConfig({ searchQuery });
}
}
addSearchQuery(o) {
if (!o.searchQuery)
return;
if (o.searchQuery && o.attributeName != this.COMPONENT_NAME)
this.setState({ searchQueryList: [...this.state.searchQueryList.slice(0, this.state.index + 1), o.searchQuery], index: this.state.searchQueryList.slice(0, this.state.index + 1).length }, () => { if (o.searchQuery)
this.encodeUrlParameters(o.searchQuery); });
}
browseSearchQuery(n) {
return __awaiter(this, void 0, void 0, function* () {
const index = this.state.index + n;
if (index >= 0 && index < this.state.searchQueryList.length) {
this.setState({ index: index }, () => __awaiter(this, void 0, void 0, function* () {
this.encodeUrlParameters(this.state.searchQueryList[this.state.index]);
yield SQCM.replaceSearchQuery(this.COMPONENT_NAME, this.state.searchQueryList[this.state.index]);
}));
}
});
}
encodeUrlParameters(query) {
UrlTools.encodeUrlParameterList([
{ key: this.URL_REQUEST_PARAMETER_NAME, value: query },
{ key: this.URL_STATE_PARAMETER_NAME, value: this.state }
]);
}
}
//# sourceMappingURL=RcsbGroupSeacrhQueryComponent.js.map