stone-kit/dist/components/SummarySelect/ui/SummarySelect.js

uikit for redesign

import { jsxs as r, jsx as t, Fragment as b } from "react/jsx-runtime";
import { c as n } from "../../../index-YnD2EP-S.js";
import { NewIcon as p } from "../../NewIcon/ui/NewIcon.js";
import { Select as x } from "../../Select/ui/Select.js";
const A = "_root_99sc2_1", $ = "_nameWrapper_99sc2_8", j = "_size_large_99sc2_18", U = "_clearBtnWrapper_99sc2_25", F = "_clearBtn_99sc2_25", I = "_summaryList_99sc2_54", q = "_summaryOption_99sc2_66", E = "_summaryOptionSecondary_99sc2_88", G = "_categoryOption_99sc2_93", H = "_categoryOptionSecondary_99sc2_102", J = "_summaryCategory_99sc2_106", K = "_headerCategory_99sc2_116", M = "_categoryTitle_99sc2_122", Q = "_categoryTitleSecondary_99sc2_130", R = "_categoryOptions_99sc2_134", e = {
  root: A,
  nameWrapper: $,
  size_large: j,
  clearBtnWrapper: U,
  clearBtn: F,
  "clearBtn-size_medium": "_clearBtn-size_medium_99sc2_40",
  summaryList: I,
  "summaryList-size_small": "_summaryList-size_small_99sc2_59",
  "summaryList-size_medium": "_summaryList-size_medium_99sc2_62",
  summaryOption: q,
  summaryOptionSecondary: E,
  categoryOption: G,
  categoryOptionSecondary: H,
  summaryCategory: J,
  headerCategory: K,
  categoryTitle: M,
  categoryTitleSecondary: Q,
  categoryOptions: R
}, D = ({
  label: h = "",
  isShowReset: y,
  isShowCategoryDelete: v = !1,
  labelSize: z = "medium",
  isLoading: B = !1,
  clearPosition: _ = "top",
  chipVariant: m = "default",
  chipAdditionalClass: O = "",
  selectPaddingBottom: L,
  selectBetweenSize: C = "small",
  summaryCategoryClass: W = "",
  ...c
}) => {
  const f = y && _ === "bottom", d = (a) => {
    c.onChange && c.onChange(a);
  }, S = (a) => {
    a.filter((s) => s.value !== "selectAll").length === 0 ? d([]) : d(a);
  }, N = (a) => {
    const l = c.selectedValues?.filter((s) => s.value !== a) || [];
    S(l);
  }, u = () => {
    d([]);
  }, T = (a) => {
    const l = c.selectedValues?.filter((s) => s.value !== a.value).filter(
      (s) => !a.options.some((i) => i.value === s.value)
    ) ?? [];
    S(l);
  }, o = c.selectedValues?.filter((a) => a.value !== "selectAll"), k = o?.filter((a) => "options" in a);
  return /* @__PURE__ */ r("div", { className: e.root, children: [
    (y && _ === "top" || h) && /* @__PURE__ */ r("div", { className: n(e.nameWrapper, e[`size_${z}`]), children: [
      /* @__PURE__ */ t("div", { children: h }),
      y && _ === "top" && /* @__PURE__ */ t(
        "div",
        {
          className: e.clearBtn,
          onClick: u,
          children: "Очистить"
        }
      )
    ] }),
    /* @__PURE__ */ t(
      x,
      {
        ...c,
        isLoading: B,
        selectPaddingBottom: L,
        onChange: d
      }
    ),
    !v && c.mode === "options" && o && o.length > 0 && /* @__PURE__ */ r("div", { className: n(e.summaryList, e[`summaryList-size_${C}`]), children: [
      f && /* @__PURE__ */ t("div", { className: e.clearBtnWrapper, children: /* @__PURE__ */ t(
        "div",
        {
          className: e.clearBtn,
          onClick: u,
          children: "Очистить"
        }
      ) }),
      o.map((a) => /* @__PURE__ */ r(
        "div",
        {
          onClick: () => N(a.value.toString()),
          className: n(e.summaryOption, {
            [e.summaryOptionSecondary]: m === "secondary"
          }, O),
          children: [
            a.label,
            /* @__PURE__ */ t(
              p,
              {
                name: "close",
                size: m === "secondary" ? "20" : "16"
              }
            )
          ]
        },
        a.value
      ))
    ] }),
    !v && c.mode === "double" && /* @__PURE__ */ r(b, { children: [
      f && o && o.length > 0 && /* @__PURE__ */ t(
        "div",
        {
          className: n(e.clearBtn, e[`clearBtn-size_${C}`]),
          onClick: u,
          children: "Очистить"
        }
      ),
      k?.map((a, l) => {
        const s = a;
        return /* @__PURE__ */ r(
          "div",
          {
            className: n(e.summaryCategory, W),
            children: [
              /* @__PURE__ */ r("div", { className: e.headerCategory, children: [
                /* @__PURE__ */ t("div", { className: n(e.categoryTitle, {
                  [e.categoryTitleSecondary]: m === "secondary"
                }), children: s.label }),
                /* @__PURE__ */ t(
                  "div",
                  {
                    onClick: () => T(a),
                    className: e.clearBtn,
                    children: /* @__PURE__ */ t(
                      p,
                      {
                        name: "close",
                        size: "16"
                      }
                    )
                  }
                )
              ] }),
              /* @__PURE__ */ t("div", { className: e.categoryOptions, children: s.options.filter((i) => o?.some((g) => i.value === g.value)).map((i, g) => /* @__PURE__ */ r(
                "div",
                {
                  onClick: () => N(i.value.toString()),
                  className: n(
                    e.summaryOption,
                    e.categoryOption,
                    { [e.categoryOptionSecondary]: m === "secondary" },
                    O
                  ),
                  children: [
                    i.label,
                    /* @__PURE__ */ t(
                      p,
                      {
                        name: "close",
                        size: m === "secondary" ? "20" : "16"
                      }
                    )
                  ]
                },
                g
              )) })
            ]
          },
          l
        );
      })
    ] })
  ] });
};
export {
  D as SummarySelect
};