UNPKG

synapse-react-client

Version:

[![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synapse-react-client) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettie

143 lines (142 loc) 4.29 kB
import { jsxs as i, Fragment as v, jsx as t } from "react/jsx-runtime"; import { AddCircleTwoTone as w, HelpOutlineTwoTone as _ } from "@mui/icons-material"; import { Box as C, Typography as M, Stack as f, IconButton as j, InputLabel as O, TextField as L, Button as k, Tooltip as B, Alert as F } from "@mui/material"; import { RestrictableObjectType as I } from "@sage-bionetworks/synapse-types"; import { noop as N } from "lodash-es"; import { useState as x, useMemo as P } from "react"; import $ from "../IconSvg/IconSvg.js"; import { TeamBadgeOrError as H } from "./TeamBadgeOrError.js"; const U = (r) => `Team ${r} has already been added to this AR.`, W = (r) => `Parsing errors encountered. Invalid Team ID: ${r}`, X = "No teams selected.", q = "Remove from Access Requirement", g = "Enter Team IDs (i.e. 123, 456)", E = ""; function ee(r) { const { subjects: p, onUpdate: T, onUpdateTeamIDsTextbox: S = N } = r, [d, b] = x(E), [u, l] = x(null), n = P(() => p.filter((e) => e.type === I.TEAM ? e : null), [p]), h = (e) => { b(e), S(e); }, A = (e) => { const c = n.filter((o) => o.id !== e); T(c); }, y = (e) => { const c = e?.split(",").map((s) => s.trim()), o = [...new Set(c)]; if (o && o.length > 0) { const s = [...n]; for (const a of o) { const D = /^\d+$/.test(a), R = n.some((m) => m.id === a); if (D) if (R) { l(U(a)); return; } else { const m = { id: a, type: I.TEAM }; s.push(m); } else { l(W(a)); return; } } h(E), T(s); } l(null); }; return /* @__PURE__ */ i(v, { children: [ /* @__PURE__ */ i( C, { sx: { display: "flex", flexWrap: "wrap", gap: "0px 15px", pb: "10px" }, children: [ n.length === 0 && /* @__PURE__ */ t( M, { variant: "body1Italic", sx: { pb: 2 }, children: X } ), n.map((e) => /* @__PURE__ */ i( f, { direction: "row", "data-testid": "selected-team", sx: { alignItems: "center", pb: 1 }, children: [ /* @__PURE__ */ t(H, { teamId: e.id }), /* @__PURE__ */ t( j, { "aria-label": q, onClick: () => A(e.id), sx: { "&:hover": { color: "error.main" } }, children: /* @__PURE__ */ t($, { icon: "delete", fontSize: "inherit", wrap: !1 }) } ) ] }, e.id )) ] } ), /* @__PURE__ */ t(O, { htmlFor: "teamIDs", children: "Add Team IDs" }), /* @__PURE__ */ i( f, { direction: "row", sx: { gap: 1, alignItems: "center", mb: 2 }, children: [ /* @__PURE__ */ t( L, { id: "teamIDs", name: "teamIDs", placeholder: g, value: d, onChange: (e) => h(e.target.value), fullWidth: !0 } ), /* @__PURE__ */ t( k, { startIcon: /* @__PURE__ */ t(w, {}), variant: "outlined", sx: { flexShrink: 0, height: "53px" }, onClick: () => y(d), disabled: d === "", children: "Add Teams" } ), /* @__PURE__ */ t(B, { title: g, placement: "right", children: /* @__PURE__ */ t(_, { sx: { color: "grey.600" } }) }) ] } ), u && /* @__PURE__ */ t(F, { severity: "warning", children: u }) ] }); } export { g as HELP_TEXT, X as NO_TEAMS_SELECTED, q as REMOVE_TEXT, U as TEAM_ALREADY_SELECTED, W as TEAM_PARSING_ERROR, ee as default }; //# sourceMappingURL=TeamSubjectsSelector.js.map