geostyler/dist/Component/Symbolizers/Symbolizers.js

Framework for styling geodata

import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { useState as N } from "react";
import { DndContext as h, closestCenter as z } from "@dnd-kit/core";
import { SortableContext as v, arrayMove as A } from "@dnd-kit/sortable";
/* empty css                */
import { Divider as w, Card as f, Button as x } from "antd";
import u from "lodash-es/cloneDeep.js";
import d from "lodash-es/uniqueId.js";
import { SymbolizerCard as I } from "../SymbolizerCard/SymbolizerCard.js";
import { PlusOutlined as C } from "@ant-design/icons";
import R from "../../Util/SymbolizerUtil.js";
import { SortableItem as j } from "../SortableItem/SortableItem.js";
import { useDragDropSensors as O } from "../../hook/UseDragDropSensors.js";
import { RemovableItem as _ } from "../RemovableItem/RemovableItem.js";
import { useGeoStylerLocale as q } from "../../context/GeoStylerContext/GeoStylerContext.js";
const Y = ({
  symbolizers: s,
  onSymbolizersChange: m = () => {
  },
  onEditSymbolizerClick: S = () => {
  }
}) => {
  const n = q("Symbolizers"), [i, g] = N(!1), k = () => {
    g(!i);
  }, D = (r) => {
    const o = u(s);
    o.splice(r, 1), m(o);
  }, a = () => {
    const r = u(s);
    r.push(R.defaultSymbolizer), m(r);
  }, b = s.map((r, o) => /* @__PURE__ */ e(
    I,
    {
      symbolizer: r,
      onSymbolizerClick: () => {
        S(o);
      }
    },
    d("symbolizer")
  )).map((r, o) => {
    const l = d("symbolizer");
    return /* @__PURE__ */ e(
      _,
      {
        onRemoveClick: () => {
          D(o);
        },
        children: r
      },
      l
    );
  }).map((r, o) => {
    const l = d("symbolizer"), c = o + 1;
    return /* @__PURE__ */ e(
      j,
      {
        id: c,
        children: r
      },
      l
    );
  }), p = (r) => {
    const { active: o, over: l } = r;
    if (o.id !== l.id) {
      const c = A([...s], o.id - 1, l.id - 1);
      m(c);
    }
  }, y = O();
  return /* @__PURE__ */ t("div", { className: "gs-symbolizers", children: [
    /* @__PURE__ */ e("div", { className: "gs-symbolizers-header", children: /* @__PURE__ */ e("h2", { children: n.symbolizersTitle }) }),
    /* @__PURE__ */ e(w, {}),
    /* @__PURE__ */ t("div", { className: "gs-symbolizers-content", children: [
      /* @__PURE__ */ t("div", { className: `${i ? "gs-symbolizers-grid" : "gs-symbolizers-list"}`, children: [
        i && /* @__PURE__ */ e(
          h,
          {
            onDragEnd: p,
            sensors: y,
            collisionDetection: z,
            children: /* @__PURE__ */ t(
              v,
              {
                items: s.map((r, o) => o + 1),
                children: [
                  b,
                  /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
                    f,
                    {
                      className: "gs-symbolizer-card gs-add-button",
                      hoverable: !0,
                      onClick: a,
                      children: /* @__PURE__ */ e(C, {})
                    }
                  ) })
                ]
              }
            )
          }
        ),
        !i && /* @__PURE__ */ e(
          h,
          {
            onDragEnd: p,
            sensors: y,
            collisionDetection: z,
            children: /* @__PURE__ */ e(
              v,
              {
                items: s.map((r, o) => o + 1),
                children: b
              }
            )
          }
        )
      ] }),
      !i && /* @__PURE__ */ e("div", { className: "gs-symbolizer-card", children: /* @__PURE__ */ e(
        f,
        {
          className: "gs-symbolizer-card gs-add-button",
          hoverable: !0,
          onClick: a,
          children: /* @__PURE__ */ e(C, {})
        }
      ) })
    ] }),
    /* @__PURE__ */ e("div", { className: "gs-symbolizers-footer", children: /* @__PURE__ */ e(
      x,
      {
        type: "link",
        onClick: k,
        children: i ? n.hide : n.showAll
      }
    ) })
  ] });
};
export {
  Y as Symbolizers
};