synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
234 lines (233 loc) • 8.92 kB
JavaScript
import { jsx as r, jsxs as p } from "react/jsx-runtime";
import "../../utils/PermissionLevelToAccessType.js";
import "../../utils/SynapseConstants.js";
import { Component as _, createRef as S } from "react";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { ColumnMultiValueFunction as y, ColumnTypeEnum as u, ColumnSingleValueFilterOperator as C } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@tanstack/react-query";
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import { Collapse as g } from "@mui/material";
import "@sage-bionetworks/synapse-client";
import { isColumnSingleValueQueryFilter as I, isColumnMultiValueFunctionQueryFilter as N } from "../../utils/types/IsType.js";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css */
import "react-router";
import { CSSTransition as T } from "react-transition-group";
import F from "../IconSvg/IconSvg.js";
import { useGetQueryMetadata as Q } from "../QueryWrapper/useGetQueryMetadata.js";
class R extends _ {
searchFormRef;
radioFormRef;
constructor(e) {
super(e), this.state = {
show: !1,
didUpdateRanLast: !1,
searchText: "",
columnName: this.props.defaultColumn ?? ""
}, this.searchFormRef = S(), this.radioFormRef = S();
}
componentDidMount() {
document.addEventListener("click", this.handleClickOutsideForm);
}
componentDidUpdate(e) {
!e.queryVisualizationContext?.showSearchBar && this.props.queryVisualizationContext?.showSearchBar && (this.setState({
show: !0,
didUpdateRanLast: !0
}), this.searchFormRef?.current?.querySelector("input")?.focus());
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClickOutsideForm);
}
handleClickOutsideForm = (e) => {
// @ts-expect-error
!this.searchFormRef.current?.contains(e?.target) && // @ts-expect-error
!this.radioFormRef.current?.contains(e?.target) && (this.state.didUpdateRanLast ? this.setState({
didUpdateRanLast: !1
}) : this.setState({
show: !1
}));
};
search = (e) => {
e.preventDefault();
const { searchText: n } = this.state;
let { columnName: o } = this.state;
const { searchable: c, lockedColumn: m } = this.props;
o === "" && (c ? o = c.filter(
(s) => s !== m?.columnName
)[0] : o = this.props.columnModels?.filter((i) => i.name !== m?.columnName).filter((i) => this.isSupportedColumn(i))?.[0].name ?? ""), this.setState({
show: !1
});
const { executeQueryRequest: h, getCurrentQueryRequest: d } = this.props.queryContext, l = d(), { additionalFilters: a = [] } = l.query, t = a.findIndex((s) => !!(I(s) || N(s) && s.columnName === o));
if (t === -1) {
const s = this.props.columnModels?.filter((i) => i.name === o)[0];
if (s?.columnType.endsWith("_LIST")) {
const i = {
columnName: o,
function: y.HAS_LIKE,
_function: y.HAS_LIKE,
values: [`%${n}%`],
concreteType: "org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter"
};
a.push(i);
} else if (s?.columnType == u.ENTITYID) {
const i = {
columnName: o,
operator: C.EQUAL,
values: [`${n.toLowerCase().replace("syn", "")}`],
concreteType: "org.sagebionetworks.repo.model.table.ColumnSingleValueQueryFilter"
};
a.push(i);
} else {
const i = {
columnName: o,
operator: C.LIKE,
values: [`%${n}%`],
concreteType: "org.sagebionetworks.repo.model.table.ColumnSingleValueQueryFilter"
};
a.push(i);
}
} else
a[t].values.push(`%${n}%`);
l.query.additionalFilters = a, h(l);
};
handleChange = (e) => {
this.setState({
searchText: e.currentTarget.value
});
};
isSupportedColumn = (e) => {
switch (e?.columnType) {
case u.FILEHANDLEID:
case u.DATE:
case u.DATE_LIST:
case u.USERID:
return !1;
default:
return !0;
}
};
isSupportedColumnAndInProps = (e) => {
if (this.isSupportedColumn(e)) {
const { searchable: n } = this.props;
return n?.some((o) => o === e?.name);
}
return !1;
};
render() {
const {
searchable: e,
lockedColumn: n,
columnModels: o,
queryVisualizationContext: { showSearchBar: c, getColumnDisplayName: m }
} = this.props, { searchText: h, show: d, columnName: l } = this.state;
let a = [];
return e ? a = e.map((t) => o?.find((s) => s.name === t)).filter(this.isSupportedColumnAndInProps).map((t) => t.name) : o && (a = o?.filter(this.isSupportedColumn).map((t) => t.name)), a.length && n?.columnName && (a = a.filter(
(t) => t !== n?.columnName
)), /* @__PURE__ */ p("div", { className: "QueryWrapperSearchInput", children: [
/* @__PURE__ */ r(g, { in: c, children: /* @__PURE__ */ p(
"form",
{
className: "QueryWrapperSearchInput__searchbar",
onSubmit: this.search,
onClick: () => {
this.setState({ show: !0 });
},
ref: this.searchFormRef,
children: [
/* @__PURE__ */ r("span", { className: "QueryWrapperSearchInput__searchbar__searchicon", children: /* @__PURE__ */ r(F, { icon: "search" }) }),
/* @__PURE__ */ r(
"input",
{
onChange: this.handleChange,
onClick: () => {
this.setState({
show: !0
});
},
placeholder: "Enter Search Terms",
value: h,
type: "text"
}
),
this.state.searchText.length > 0 && /* @__PURE__ */ r(
"button",
{
className: "QueryWrapperSearchInput__searchbar__clearbutton",
type: "button",
onClick: () => {
this.setState({
searchText: ""
});
},
children: /* @__PURE__ */ r(F, { icon: "close" })
}
)
]
}
) }),
/* @__PURE__ */ r("div", { className: "QueryWrapperSearchInput__dropdown_pos", children: /* @__PURE__ */ r(
T,
{
nodeRef: this.radioFormRef,
in: d,
classNames: "QueryWrapperSearchInput__animate_dropdown",
timeout: { enter: 0, exit: 300 },
children: /* @__PURE__ */ p(
"form",
{
ref: this.radioFormRef,
className: "QueryWrapperSearchInput__column-select QueryWrapperSearchInput__animate_height",
children: [
/* @__PURE__ */ r("p", { className: "deemphasized", children: /* @__PURE__ */ r("i", { children: " Search In Field: " }) }),
a.map((t, s) => {
const i = m(t);
return /* @__PURE__ */ r("div", { className: "radio", children: /* @__PURE__ */ r("label", { children: /* @__PURE__ */ p("span", { children: [
/* @__PURE__ */ r(
"input",
{
id: t,
type: "radio",
value: t,
checked: l === "" && s === 0 || l === t,
onClick: () => {
this.searchFormRef?.current?.querySelector("input")?.focus(), this.setState({
columnName: t
});
}
}
),
/* @__PURE__ */ r("span", { children: i })
] }) }) }, `search-field-${t}-${s}`);
})
]
}
)
}
) })
] });
}
}
function ne(f) {
const { data: e } = Q();
return /* @__PURE__ */ r(R, { ...f, columnModels: e?.columnModels });
}
export {
ne as default
};
//# sourceMappingURL=SearchV2.js.map