geostyler/dist/Component/RuleTable/RuleTable.js

Framework for styling geodata

import { jsx as r, jsxs as g } from "react/jsx-runtime";
import { useState as y, useRef as j, useEffect as Ie } from "react";
import { CqlParser as ve } from "geostyler-cql-parser";
import M from "lodash-es/get.js";
import ze from "lodash-es/set.js";
import Te from "lodash-es/cloneDeep.js";
import { Tooltip as S, Table as ke, Button as O, Popover as P, Input as F, Space as Ne } from "antd";
/* empty css              */
import { FilterEditorWindow as Oe } from "../Filter/FilterEditorWindow/FilterEditorWindow.js";
import { SymbolizerEditorWindow as Ve } from "../Symbolizer/SymbolizerEditorWindow/SymbolizerEditorWindow.js";
import qe from "../../Util/FilterUtil.js";
import H from "../../Util/DataUtil.js";
import { BgColorsOutlined as Ke, BlockOutlined as Ue, EditOutlined as J, CopyOutlined as Le, CloseOutlined as Be } from "@ant-design/icons";
import { Renderer as We } from "../Renderer/Renderer/Renderer.js";
import { useGeoStylerData as Ge, useGeoStylerComposition as Q, useGeoStylerLocale as _e } from "../../context/GeoStylerContext/GeoStylerContext.js";
import { DndContext as je, closestCenter as Me } from "@dnd-kit/core";
import { useDragDropSensors as Pe } from "../../hook/UseDragDropSensors.js";
import { SortableContext as Fe, verticalListSortingStrategy as He, arrayMove as V } from "@dnd-kit/sortable";
import { DraggableRow as Je } from "../DraggableTableRow/DraggableTablerow.js";
import { InputScaleDenominator as Qe } from "../ScaleDenominator/InputScaleDenominator.js";
import { SelectScaleDenominator as Xe } from "../ScaleDenominator/SelectScaleDenominator.js";
import { ElseRuleField as Ye } from "../Symbolizer/Field/ElseRuleField/ElseRuleField.js";
const gt = (X) => {
  var B, W;
  const c = Ge(), q = c == null ? void 0 : c.scaleDenominators, Y = Q("Rule"), Z = Q("Style"), $ = { ...X, ...Y }, {
    amountField: R,
    duplicateField: x,
    filterField: w,
    scalesField: D,
    nameField: E,
    /** show actions column by default if disableMultiEdit is true */
    actionsField: h = {
      visibility: Z.disableMultiEdit === !0
    },
    elseRuleField: I,
    onRulesChange: v,
    rendererType: A = "OpenLayers",
    rules: l,
    onCloneRule: z,
    onRemoveRule: T,
    // The composableProps include the antd table props
    ...a
  } = $, s = _e("RuleTable"), [b, K] = y(), [ee, k] = y(), [te, N] = y(), [re, ne] = y(), [oe, le] = y(), [ie, se] = y(), U = () => l.map(() => crypto.randomUUID()), m = j(U()), ce = Pe(), { current: ae } = j(new ve());
  Ie(() => {
    let e = {};
    try {
      c && H.isVector(c) ? e = qe.calculateCountAndDuplicates(l, c) : e = {};
    } catch {
      ne(!0);
    }
    le(e == null ? void 0 : e.counts), se(e == null ? void 0 : e.duplicates);
  }, [l, c]), m.current.length < l.length && (m.current = U());
  const C = l == null ? void 0 : l.map((e, n) => ({
    ...e,
    key: m.current[n]
  })), me = (e) => {
    K(e), k(!0), N(!1);
  }, ue = (e, n, o) => {
    const t = () => {
      me(o);
    };
    return /* @__PURE__ */ g("div", { className: "gs-symbolizer-wrapper", children: [
      /* @__PURE__ */ r(
        We,
        {
          rendererType: A,
          symbolizers: n.symbolizers
        }
      ),
      /* @__PURE__ */ r(
        O,
        {
          className: "square-button",
          type: "primary",
          icon: /* @__PURE__ */ r(J, {}),
          onClick: t
        }
      )
    ] });
  }, de = (e, n, o) => /* @__PURE__ */ r(
    P,
    {
      content: n.name,
      title: s.nameColumnTitle,
      children: /* @__PURE__ */ r(
        F,
        {
          value: n.name,
          name: "name-renderer",
          onChange: (t) => {
            const i = t.target;
            p(o, "name", i.value);
          }
        }
      )
    }
  ), fe = (e, n, o) => {
    const t = ae.write(n.filter);
    let i;
    const d = /* @__PURE__ */ r(
      F.Search,
      {
        className: "gs-rule-table-filter-cell",
        name: "filter-renderer",
        value: t,
        onChange: () => {
        },
        enterButton: /* @__PURE__ */ r(J, {}),
        onSearch: () => {
          pe(o);
        }
      }
    );
    return t && t.length > 0 ? i = /* @__PURE__ */ r(
      P,
      {
        content: t,
        title: s.filterColumnTitle,
        children: d
      }
    ) : i = d, i;
  }, pe = (e) => {
    K(e), k(!1), N(!0);
  }, ye = (e, n, o) => {
    const t = M(n, "scaleDenominator");
    return q ? /* @__PURE__ */ r(
      Xe,
      {
        scaleDenominators: q,
        scaleDenominator: t,
        onChange: (i) => {
          p(o, "scaleDenominator", i);
        }
      }
    ) : /* @__PURE__ */ r(Qe, { scaleDenominator: t, onChange: (i) => {
      p(o, "scaleDenominator", i);
    } });
  }, he = (e, n, o) => {
    const t = M(n, "elseRule");
    return /* @__PURE__ */ r(
      "div",
      {
        className: "gs-rule-table-else-rule-renderer",
        children: /* @__PURE__ */ r(
          Ye,
          {
            value: t === void 0 ? !1 : t,
            onChange: (i) => {
              p(o, "elseRule", i);
            }
          }
        )
      }
    );
  }, be = (e, n, o) => {
    let t = "-";
    if (c && H.isVector(c))
      try {
        t = oe[o] || 0;
      } catch {
        t = "-";
      }
    return /* @__PURE__ */ r("div", { className: "ant-input gs-rule-table-numeric-cell amount-renderer", children: t });
  }, Ce = (e, n, o) => {
    let t = "-";
    if (c && l)
      try {
        t = ie[o];
      } catch {
        t = "-";
      }
    return /* @__PURE__ */ r("div", { className: "ant-input gs-rule-table-numeric-cell duplicates-renderer", children: t });
  }, ge = (e, n, o) => /* @__PURE__ */ g(Ne.Compact, { block: !0, children: [
    h.clone !== !1 && /* @__PURE__ */ r(
      O,
      {
        className: "gs-rule-table-action-buttons",
        icon: /* @__PURE__ */ r(Le, {}),
        title: s.actionCloneLabel,
        color: "default",
        variant: "text",
        onClick: () => z == null ? void 0 : z(o)
      }
    ),
    h.remove !== !1 && /* @__PURE__ */ r(
      O,
      {
        className: "gs-rule-table-action-buttons",
        icon: /* @__PURE__ */ r(Be, {}),
        color: "default",
        variant: "text",
        title: s.actionRemoveLabel,
        onClick: () => T == null ? void 0 : T(o),
        disabled: l.length <= 1
      }
    )
  ] }), Se = (e) => {
    p(b, "symbolizers", e);
  }, Re = (e) => {
    p(b, "filter", e);
  }, p = (e, n, o) => {
    const t = Te(l);
    ze(t[e], n, o), v && v(t);
  }, xe = () => {
    k(!1);
  }, we = () => {
    N(!1);
  }, u = [
    {
      title: /* @__PURE__ */ r(S, { title: s.symbolizersColumnTitle, children: /* @__PURE__ */ r(Ke, {}) }),
      dataIndex: "symbolizers",
      render: ue
    }
  ];
  (E == null ? void 0 : E.visibility) !== !1 && u.push({
    title: s.nameColumnTitle,
    dataIndex: "name",
    render: de
  }), (w == null ? void 0 : w.visibility) !== !1 && u.push({
    title: s.filterColumnTitle,
    dataIndex: "filter",
    render: fe
  }), (D == null ? void 0 : D.visibility) !== !1 && u.push({
    title: s.scalesColumnTitle,
    dataIndex: "scaleDenominator",
    render: ye
  }), (I == null ? void 0 : I.visibility) !== !1 && u.push({
    title: /* @__PURE__ */ r(S, { title: s.elseRuleColumnTitle, children: "≠" }),
    dataIndex: "elseRule",
    render: he
  }), (R == null ? void 0 : R.visibility) !== !1 && u.push({
    title: /* @__PURE__ */ r(S, { title: s.amountColumnTitle, children: "Σ" }),
    dataIndex: "amount",
    render: be
  }), (x == null ? void 0 : x.visibility) !== !1 && u.push({
    title: /* @__PURE__ */ r(S, { title: s.duplicatesColumnTitle, children: /* @__PURE__ */ r(Ue, {}) }),
    dataIndex: "duplicates",
    render: Ce
  }), (h == null ? void 0 : h.visibility) !== !1 && u.push({
    title: s.actionsColumnTitle,
    render: ge
  });
  const L = (e, n, o) => {
    var t, i;
    return (i = (t = a.rowSelection) == null ? void 0 : t.onChange) == null ? void 0 : i.call(t, e.map((d) => m.current.indexOf(d)), n, o);
  }, De = ({ active: e, over: n }) => {
    var d, G, _;
    if (e.id === (n == null ? void 0 : n.id))
      return;
    const o = C.findIndex((f) => f.key === e.id), t = C.findIndex((f) => f.key === (n == null ? void 0 : n.id)), i = (G = (d = a == null ? void 0 : a.rowSelection) == null ? void 0 : d.selectedRowKeys) == null ? void 0 : G.map(
      (f) => m.current[f]
    );
    m.current = V(m.current, o, t), v(V(l, o, t)), !(!a.rowSelection || ((_ = a.rowSelection.selectedRowKeys) == null ? void 0 : _.length) === 0) && L(
      i,
      V(C, o, t).filter((f) => i.includes(f.key)),
      null
    );
  };
  if (re)
    return /* @__PURE__ */ r("h1", { children: "An error occurred in the RuleTable UI." });
  const Ee = a.rowSelection ? {
    ...a.rowSelection,
    selectedRowKeys: a.rowSelection.selectedRowKeys.map((e) => m.current[e]),
    onChange: L
  } : void 0;
  return /* @__PURE__ */ g("div", { className: "gs-rule-table", children: [
    /* @__PURE__ */ r(je, { sensors: ce, collisionDetection: Me, onDragEnd: De, children: /* @__PURE__ */ r(Fe, { items: m.current, strategy: He, children: /* @__PURE__ */ r(
      ke,
      {
        columns: u,
        dataSource: C,
        pagination: !1,
        rowKey: "key",
        components: {
          header: {
            row: (e) => /* @__PURE__ */ g("tr", { children: [
              /* @__PURE__ */ r("th", {}),
              e.children
            ] })
          },
          body: {
            row: Je
          }
        },
        ...a,
        rowSelection: Ee
      }
    ) }) }),
    /* @__PURE__ */ r(
      Ve,
      {
        open: ee,
        onClose: xe,
        symbolizers: (B = l == null ? void 0 : l[b]) == null ? void 0 : B.symbolizers,
        onSymbolizersChange: Se
      }
    ),
    /* @__PURE__ */ r(
      Oe,
      {
        open: te,
        onClose: we,
        filter: (W = l == null ? void 0 : l[b]) == null ? void 0 : W.filter,
        onFilterChange: Re
      }
    )
  ] });
};
export {
  gt as RuleTable
};