geostyler/dist/Component/Rules/Rules.js

Framework for styling geodata

import { jsx as l, jsxs as S } from "react/jsx-runtime";
import { useState as D } from "react";
import { DndContext as O, closestCenter as V } from "@dnd-kit/core";
import { SortableContext as H, arrayMove as J } from "@dnd-kit/sortable";
import K from "../../Util/FilterUtil.js";
import P from "../../Util/DataUtil.js";
import { Button as r, Switch as Q, Divider as E } from "antd";
import a from "lodash-es/cloneDeep.js";
import h from "lodash-es/uniqueId.js";
import { Selectable as W } from "../Selectable/Selectable.js";
import { RuleCard as X } from "../RuleCard/RuleCard.js";
import { useDragDropSensors as Y } from "../../hook/UseDragDropSensors.js";
import { SortableItem as Z } from "../SortableItem/SortableItem.js";
import { RemovableItem as $ } from "../RemovableItem/RemovableItem.js";
import { useGeoStylerData as ee, useGeoStylerComposition as te, useGeoStylerLocale as le } from "../../context/GeoStylerContext/GeoStylerContext.js";
/* empty css          */
const be = (N) => {
  const m = ee(), A = te("Rules"), y = { ...N, ...A }, {
    disableClassification: x,
    onClassificationClick: R,
    onEditRuleClick: v,
    onEditSelectionClick: g,
    onRulesChange: s,
    rules: c
  } = y, o = le("Rules"), [n, f] = D(!1), [u, d] = D([]), G = () => {
    f(!n), d([]);
  }, I = () => {
    const e = {
      name: o.defaultRuleTitle,
      symbolizers: []
    }, t = a(c);
    t.push(e), s && s(t);
  }, M = () => {
    if (s) {
      const e = a(c).filter((t, i) => !u.includes(i));
      s(e);
    }
    d([]), f(!1);
  }, j = () => {
    if (s) {
      const e = a(c);
      u.forEach((t) => {
        e.push(a(e[t]));
      }), s(e);
    }
  }, w = () => {
    g && g(u), d([]), f(!1);
  }, T = () => {
    R && R();
  }, U = (e) => {
    d([...e]);
  }, _ = (e) => {
    v && v(e);
  }, q = (e) => {
    if (s) {
      const t = a(c);
      t.splice(e, 1), s(t);
    }
  };
  let p;
  m && P.isVector(m) && (p = K.calculateCountAndDuplicates(c, m));
  const b = c.map((e, t) => {
    let i;
    return p && (i = p.duplicates[t]), /* @__PURE__ */ l(
      X,
      {
        rule: e,
        duplicates: i,
        onClick: () => {
          n || _(t);
        }
      },
      h("rule")
    );
  }), z = b.map((e, t) => /* @__PURE__ */ l(
    $,
    {
      onRemoveClick: () => {
        q(t);
      },
      children: e
    },
    h("removableRule")
  )).map((e, t) => {
    const i = h("rule"), C = t + 1;
    return /* @__PURE__ */ l(
      Z,
      {
        id: C,
        children: e
      },
      i
    );
  }), k = [
    /* @__PURE__ */ l(
      r,
      {
        className: "gs-add-rule-button",
        onClick: I,
        children: o.addRule
      },
      0
    )
  ];
  x || k.push(
    /* @__PURE__ */ l(
      r,
      {
        className: "gs-classification-button",
        onClick: T,
        children: o.classification
      },
      1
    )
  );
  const B = [
    /* @__PURE__ */ l(
      r,
      {
        className: "gs-remove-rules-button",
        onClick: M,
        children: o.remove
      },
      0
    ),
    /* @__PURE__ */ l(
      r,
      {
        className: "gs-clone-rules-button",
        onClick: j,
        children: o.clone
      },
      1
    ),
    /* @__PURE__ */ l(
      r,
      {
        className: "gs-edit-rules-button",
        onClick: w,
        children: o.edit
      },
      2
    )
  ], F = (e) => {
    const { active: t, over: i } = e;
    if (t.id !== i.id) {
      const C = J([...c], t.id - 1, i.id - 1);
      s(C);
    }
  }, L = Y();
  return /* @__PURE__ */ S("div", { className: "gs-rules", children: [
    /* @__PURE__ */ S("div", { className: "gs-rules-header", children: [
      /* @__PURE__ */ l("h2", { children: o.rulesTitle }),
      /* @__PURE__ */ l(
        Q,
        {
          className: "gs-multi-select-toggle",
          onChange: G,
          checked: n,
          checkedChildren: o.multiEdit,
          unCheckedChildren: o.multiEdit
        }
      )
    ] }),
    /* @__PURE__ */ l(E, {}),
    /* @__PURE__ */ l("div", { className: "gs-rules-list", children: n ? /* @__PURE__ */ l(
      W,
      {
        selection: u,
        onSelectionChange: U,
        children: b
      }
    ) : /* @__PURE__ */ l(
      O,
      {
        onDragEnd: F,
        sensors: L,
        collisionDetection: V,
        children: /* @__PURE__ */ l(
          H,
          {
            items: c.map((e, t) => t + 1),
            children: z
          }
        )
      }
    ) }),
    /* @__PURE__ */ l(E, {}),
    /* @__PURE__ */ l("div", { className: "gs-rules-actions", children: n ? B : k })
  ] });
};
export {
  be as Rules
};