geostyler/dist/Component/FunctionUI/FunctionUI.js

Framework for styling geodata

import { jsx as m, jsxs as b } from "react/jsx-runtime";
import { useCallback as d } from "react";
import { isGeoStylerFunction as P } from "geostyler-style";
import { FunctionNameCombo as $ } from "./FunctionNameCombo/FunctionNameCombo.js";
/* empty css               */
import { StringExpressionInput as E } from "../ExpressionInput/StringExpressionInput/StringExpressionInput.js";
import { NumberExpressionInput as S } from "../ExpressionInput/NumberExpressionInput/NumberExpressionInput.js";
import { BooleanExpressionInput as T } from "../ExpressionInput/BooleanExpressionInput/BooleanExpressionInput.js";
import { functionConfigs as g } from "./functionConfigs.js";
import { CaseInput as j } from "./CaseInput/CaseInput.js";
import { UnknownInput as I } from "./UnknownInput/UnknownInput.js";
import { StepInput as B } from "./StepInput/StepInput.js";
import { Tooltip as N, Button as F } from "antd";
import { useGeoStylerLocale as C } from "../../context/GeoStylerContext/GeoStylerContext.js";
import { MinusOutlined as G, PlusOutlined as V } from "@ant-design/icons";
const L = ({
  value: s,
  onChange: i,
  parentKey: h,
  type: c,
  onCancel: U
}) => {
  const u = C("FunctionUI"), k = s == null ? void 0 : s.name, y = d((t) => h ? `${h}-${t}` : t, [h]), a = d((t, e) => {
    const l = structuredClone(s);
    l.name === "pi" || l.name === "random" || (Array.isArray(l.args) || (l.args = []), l.args[e] = t, i == null || i(l));
  }, [i, s]), f = d((t, e, l) => {
    let r = [];
    l.name !== "pi" && l.name !== "random" && (r = l.args);
    const n = y(l.name);
    let p = /* @__PURE__ */ m(
      I,
      {
        forcedType: c,
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        },
        inputProps: {
          placeholder: t.placeholder
        }
      }
    );
    return t.type === "case" ? p = /* @__PURE__ */ m(
      j,
      {
        type: c,
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        }
      }
    ) : t.type === "step" ? p = /* @__PURE__ */ m(
      B,
      {
        type: c,
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        }
      }
    ) : t.type === "unknown" ? p = /* @__PURE__ */ m(
      I,
      {
        forcedType: c,
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        },
        inputProps: {
          placeholder: t.placeholder
        }
      }
    ) : P(r == null ? void 0 : r[e]) ? p = /* @__PURE__ */ m(
      L,
      {
        type: t.type,
        value: r[e],
        parentKey: n + "" + e,
        onChange: (o) => {
          a(o, e);
        },
        onCancel: () => {
          a(void 0, e);
        }
      }
    ) : t.type === "number" ? p = /* @__PURE__ */ m(
      S,
      {
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        },
        inputProps: {
          placeholder: t.placeholder
        }
      }
    ) : t.type === "string" ? p = /* @__PURE__ */ m(
      E,
      {
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        },
        inputProps: {
          placeholder: t.placeholder
        }
      }
    ) : t.type === "boolean" && (p = /* @__PURE__ */ m(
      T,
      {
        value: r == null ? void 0 : r[e],
        onChange: (o) => {
          a(o, e);
        },
        labelOn: t.label,
        labelOff: t.label
      }
    )), /* @__PURE__ */ b("div", { className: "gs-function-arg", children: [
      /* @__PURE__ */ m("i", { className: "tree-icon" }),
      p,
      t.infinite && /* @__PURE__ */ m(N, { title: u.remove, children: /* @__PURE__ */ m(
        F,
        {
          type: "text",
          className: "remove-argument-button",
          icon: /* @__PURE__ */ m(G, {}),
          onClick: () => {
            if (s.name === "pi" || s.name === "random")
              return;
            const o = structuredClone(s.args);
            o.splice(e, 1), i == null || i({
              ...s,
              args: o
            });
          }
        }
      ) })
    ] }, `${n}${e}`);
  }, [y, a, c, u, i, s]), w = d((t) => {
    const e = g.find((r) => r.name === t.name);
    let l = [];
    return s.name === "pi" || s.name === "random" ? null : (e.args[e.args.length - 1].infinite ? e.args.forEach((r, n) => {
      if (!r.infinite)
        l.push(f(r, n, t));
      else {
        const p = s.args ? s.args.length - n : 1;
        for (let o = 0; o < p; o++)
          l.push(f(r, n + o, t));
        l.push(
          /* @__PURE__ */ b("div", { className: "gs-function-arg", children: [
            /* @__PURE__ */ m("i", { className: "tree-icon" }),
            /* @__PURE__ */ m(N, { title: u.add, children: /* @__PURE__ */ m(
              F,
              {
                icon: /* @__PURE__ */ m(V, {}),
                onClick: () => {
                  const o = structuredClone(s.args[s.args.length - 1]);
                  i({
                    ...s,
                    args: [
                      ...s.args,
                      o
                    ]
                  });
                }
              }
            ) })
          ] }, `remove-argument-${n}`)
        );
      }
    }) : l = e.args.map((r, n) => f(r, n, t)), /* @__PURE__ */ m("div", { className: "gs-function-arguments", children: l }));
  }, [s, f, u, i]);
  function O(t) {
    const e = structuredClone(s);
    i == null || i({
      ...e,
      name: t
    });
  }
  return /* @__PURE__ */ b("div", { className: "gs-function-ui", children: [
    /* @__PURE__ */ m(
      $,
      {
        type: c,
        value: k,
        onChange: O,
        onCancel: U
      }
    ),
    s && w(s)
  ] });
};
export {
  L as FunctionUI
};