geostyler
Version:
Framework for styling geodata
108 lines (107 loc) • 3.74 kB
JavaScript
import { jsxs as f, Fragment as j, jsx as e } from "react/jsx-runtime";
import E, { useCallback as h } from "react";
import { Tooltip as G, Form as d } from "antd";
import { IconSelectorWindow as O } from "../../IconSelectorWindow/IconSelectorWindow.js";
/* empty css */
import { PictureOutlined as P } from "@ant-design/icons";
import { isSprite as l } from "geostyler-style";
import { StringExpressionInput as R } from "../../../ExpressionInput/StringExpressionInput/StringExpressionInput.js";
import { FieldSet as U } from "../../../FieldSet/FieldSet.js";
import { NumberExpressionInput as n } from "../../../ExpressionInput/NumberExpressionInput/NumberExpressionInput.js";
import { useGeoStylerLocale as k } from "../../../../context/GeoStylerContext/GeoStylerContext.js";
const X = ({
onChange: t,
value: i,
iconLibraries: p,
tooltipLabel: w = "Open Gallery",
spriteTooltipLabel: I = "Use sprite",
placeholder: x = "URL to image",
windowless: S = !1,
disableSprite: b = !1,
onIconLibrariesClick: g = () => {
}
}) => {
const c = k("ImageField"), [F, a] = E.useState(!1), N = () => {
S ? g() : a(!0);
}, y = h(() => {
l(i) ? t == null || t(i.source) : t == null || t({
source: i,
position: [0, 0],
size: [0, 0]
});
}, [i, t]), o = h((s, r) => {
if (!t)
return;
const m = structuredClone(i) || {}, V = r === "x" || r === "width" ? 0 : 1, W = r === "x" || r === "y" ? "position" : "size";
r === "source" ? m.source = s : m[W][V] = s, t(m);
}, [i, t]), z = () => {
a(!1);
}, u = l(i) ? i.source : i;
return /* @__PURE__ */ f(j, { children: [
/* @__PURE__ */ f("div", { className: "editor-field gs-image-field", children: [
/* @__PURE__ */ e(
R,
{
className: p ? "gs-image-field-gallery-addon" : void 0,
value: u,
inputProps: {
placeholder: x,
addonAfter: p && /* @__PURE__ */ e(G, { title: w, children: /* @__PURE__ */ e(P, { className: "gs-image-field-gallery-icon", type: "picture", onClick: N }) })
},
onChange: (s) => {
l(i) ? o(s, "source") : t == null || t(s);
}
}
),
!b && /* @__PURE__ */ e(U, { title: I, checked: l(i), onCheckChange: y, children: l(i) && /* @__PURE__ */ f("div", { className: "spriterow", children: [
/* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
d.Item,
{
label: c.sprite.x,
colon: !1,
children: /* @__PURE__ */ e(n, { value: i.position[0], onChange: (s) => o(s, "x") })
}
) }),
/* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
d.Item,
{
label: c.sprite.y,
colon: !1,
children: /* @__PURE__ */ e(n, { value: i.position[1], onChange: (s) => o(s, "y") })
}
) }),
/* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
d.Item,
{
label: c.sprite.width,
colon: !1,
children: /* @__PURE__ */ e(n, { value: i.size[0], onChange: (s) => o(s, "width") })
}
) }),
/* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
d.Item,
{
label: c.sprite.height,
colon: !1,
children: /* @__PURE__ */ e(n, { value: i.size[1], onChange: (s) => o(s, "height") })
}
) })
] }) })
] }),
/* @__PURE__ */ e(
O,
{
open: F,
onClose: z,
iconLibraries: p,
selectedIconSrc: u,
onIconSelect: (s) => {
t && t(s);
}
}
)
] });
};
export {
X as ImageField
};