@coko/client/dist/ui/assignReviewers/SearchBox.js

Client side common code for coko apps

import { grid as e, th as t } from "../../toolkit/themeHelper.js";
import "../../toolkit/index.js";
import n from "../common/Button.js";
import r from "../common/Select.js";
import "../common/index.js";
import { useState as i } from "react";
import a from "styled-components";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/ui/assignReviewers/SearchBox.tsx
var c = a.div`
  display: flex;
  gap: ${e(1)};
  margin: 0 auto;
  width: 100%;

  /* stylelint-disable-next-line media-query-no-invalid */
  @media (min-width: ${t("mediaQueries.small")}) {
    padding: ${e(4)};
  }
`, l = a(r)`
  /* stylelint-disable selector-class-pattern */

  flex-grow: 1;

  .react-select__control {
    border: 0;
    box-shadow: ${t("colorBorder")} 0 0 0 1px;
    padding: 0 ${e(1)};
    transition: box-shadow 0.2s ease-in;
  }

  .react-select__control--is-focused {
    box-shadow: ${t("colorPrimary")} 0 0 0 2px;
  }

  .react-select__menu {
    margin-top: 4px;
  }
`, u = a(n)`
  height: 100%;
`, d = (e) => {
	let { additionalSearchFields: t = [], className: n, searchPlaceholder: r = "Add a reviewer to the list", onAdd: a, onSearch: d } = e, [f, p] = i([]), [m, h] = i(!1), [g, _] = i([]);
	return /* @__PURE__ */ s(c, {
		className: n,
		children: [/* @__PURE__ */ o(l, {
			async: !0,
			defaultOpen: !1,
			labelInValue: !0,
			loading: m,
			mode: "multiple",
			onChange: (e) => {
				p(e);
			},
			onSearch: (e) => {
				h(!0), d(e).then((n) => {
					if (!t.length || !n.length) {
						_(n);
						return;
					}
					let r = n.filter((t) => t.displayName.toLowerCase().includes(e.toLowerCase())), i = n.filter((t) => !t.displayName.toLowerCase().includes(e.toLowerCase())), a = [];
					r.length > 0 && a.push({
						label: "Reviewer Name",
						options: r.map((e) => ({
							...e,
							key: `displayName-${e.id}`
						}))
					}), t.forEach((t) => {
						if (t.items && Array.isArray(t.items)) t.items.forEach((n) => {
							if (!n.toLowerCase().includes(e.toLowerCase())) return;
							let r = i.filter((e) => e[t.value] !== void 0 && String(e[t.value]).includes(n));
							if (!r.length) return;
							let o = {
								label: `${t.label}: ${n}`,
								options: r.map((e) => ({
									...e,
									key: `${t.value}-${n}-${e.value}`
								}))
							};
							a.push(o);
						});
						else {
							let e = i.filter((e) => e[t.value] !== void 0 && e[t.value] !== !1);
							if (!e.length) return;
							let n = {
								label: t.label,
								options: e.map((e) => ({
									...e,
									key: `${t.value}-${e.value}`
								}))
							};
							a.push(n);
						}
					}), _(a);
				}).finally(() => {
					h(!1);
				});
			},
			options: g,
			placeholder: r,
			value: f
		}), /* @__PURE__ */ s(u, {
			"aria-labelledby": "reviewer-team",
			disabled: f.length === 0,
			onClick: () => {
				a(f.map((e) => e.value)).finally(() => {
					_([]), p([]);
				});
			},
			type: "primary",
			children: ["Add User", f.length > 1 && "s"]
		})]
	});
};
//#endregion
export { d as default };