geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
190 lines (189 loc) • 7.68 kB
JavaScript
import e from "react";
import { Typography as s } from "./index.es19.js";
import { Checkbox as N } from "@radix-ui/react-checkbox";
import { AccordionDemo as I } from "./index.es4.js";
import { Badge as b } from "./index.es8.js";
import { FormFieldType as a } from "./index.es134.js";
const x = ({
structure: u,
values: o
}) => {
const E = (r, n) => {
if (r.type === a.REPEATABLE_GROUP_FIELD) {
const t = `${r.id}||`, c = /* @__PURE__ */ new Set();
Object.keys(o).forEach((i) => {
if (i.startsWith(t)) {
const m = i.match(new RegExp(`^${r.id}\\|\\|(\\d+)\\|\\|`));
m && m[1] && c.add(parseInt(m[1]));
}
});
const l = Array.from(c).sort((i, m) => i - m);
return l.length === 0 ? [] : l.flatMap((i) => r.options.map((m) => {
const d = `${r.id}||${i}||${m.id}`, _ = o[d], p = {
...m,
id: d
};
return /* @__PURE__ */ e.createElement(e.Fragment, { key: d }, g(p), E(p, _));
}));
}
if (n == null || n === "")
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-4" }, "Not answered");
switch (r.type) {
case a.SHORT_TEXT:
case a.LONG_TEXT:
case a.EMAIL:
case a.NUMBER:
case a.MOBILE_NUMBER:
case a.SINGLE_VIDEO_PICKER_WITH_INPUT:
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-1" }, n);
case a.DATE_PICKER:
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-1" }, new Date(n * 1e3).toLocaleDateString());
case a.SINGLE_COMBOBOX:
case a.RADIO_GROUP:
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-1" }, n);
case a.CHECKBOX_GROUP: {
const t = o[r.id];
return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-2" }, r.options.map((c) => /* @__PURE__ */ e.createElement("div", { key: c, className: "flex items-center space-x-2" }, /* @__PURE__ */ e.createElement(
N,
{
disabled: !0,
id: c,
checked: t?.split(",").includes(c)
}
), /* @__PURE__ */ e.createElement(s, { variant: "body1", className: "text-light-4" }, c))));
}
case a.MULTI_COMBOBOX:
case a.CREATABLE_MULTI_COMBOBOX:
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-1" }, typeof n == "string" ? n.split(",").join(", ") : null);
case a.RADIO_GROUP_WITH_OPTIONAL_INPUT: {
const t = n;
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-1" }, t.radio_value, t.input_value && t.radio_value === r.inputTriggerOptionValue && `: ${t.input_value}`);
}
case a.SINGLE_IMAGE_PICKER: {
const t = n;
return /* @__PURE__ */ e.createElement("div", { className: "mt-1" }, /* @__PURE__ */ e.createElement(
"a",
{
href: t.public_url,
target: "_blank",
rel: "noopener noreferrer"
},
/* @__PURE__ */ e.createElement(
"img",
{
src: t.public_url,
alt: r.name,
className: "object-cover w-full h-32 rounded-md hover:opacity-90"
}
)
));
}
case a.SINGLE_VIDEO_PICKER: {
const t = n;
return /* @__PURE__ */ e.createElement("div", { className: "mt-1" }, /* @__PURE__ */ e.createElement(
"video",
{
src: t.public_url,
controls: !0,
className: "w-full h-32 rounded-md"
},
/* @__PURE__ */ e.createElement(
"track",
{
kind: "captions",
label: "English captions",
srcLang: "en",
src: "",
default: !0
}
)
));
}
case a.MULTI_IMAGE_PICKER: {
const t = n;
return /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-1 gap-2 mt-1 sm:grid-cols-3 md:grid-cols-4" }, t.map((c, l) => /* @__PURE__ */ e.createElement(
"a",
{
key: l,
href: c.public_url,
target: "_blank",
rel: "noopener noreferrer"
},
/* @__PURE__ */ e.createElement(
"img",
{
src: c.public_url,
alt: r.name,
className: "object-cover w-full h-32 rounded-md hover:opacity-90"
}
)
)));
}
case a.MULTI_VIDEO_PICKER: {
const t = n;
return /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-1 gap-4 mt-1 sm:grid-cols-2" }, t.map((c, l) => /* @__PURE__ */ e.createElement("div", { key: l, className: "flex flex-col" }, /* @__PURE__ */ e.createElement(
"video",
{
src: c.public_url,
controls: !0,
className: "h-32 rounded-md"
},
/* @__PURE__ */ e.createElement(
"track",
{
kind: "captions",
label: "English captions",
srcLang: "en",
src: "",
default: !0
}
)
))));
}
case a.TAGGABLE_MULTI_IMAGE_PICKER:
case a.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT: {
const t = n;
return /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-1 gap-2 mt-1 sm:grid-cols-3 md:grid-cols-4" }, t.map((c, l) => /* @__PURE__ */ e.createElement("div", { key: l, className: "relative" }, /* @__PURE__ */ e.createElement(
"a",
{
key: l,
href: c.public_url,
target: "_blank",
rel: "noopener noreferrer"
},
/* @__PURE__ */ e.createElement(
"img",
{
src: c.public_url,
alt: r.name,
className: "object-cover w-full h-32 rounded-md hover:opacity-90"
}
)
), /* @__PURE__ */ e.createElement(
b,
{
className: "absolute bottom-2 right-2 ",
variant: "select"
},
c.tag && c.tag.length > 8 ? `${c.tag.substring(0, 8)}...` : c.tag
))));
}
default:
return /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-light-4" }, "Unsupported field type");
}
}, g = (r) => /* @__PURE__ */ e.createElement(s, { variant: "body1", className: "mb-1 text-light-3" }, r.name, r.required && /* @__PURE__ */ e.createElement("span", { className: "text-danger-1" }, "*"));
return /* @__PURE__ */ e.createElement("div", { className: "" }, u.steps.map((r) => /* @__PURE__ */ e.createElement(
I,
{
key: r.id,
trigger: /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ e.createElement(s, { variant: "h3", className: "text-light-2" }, r.name)),
triggerProps: { className: "mt-4 " },
contentProps: { className: "mt-4 p-2 bg-light-2 rounded" },
content: r.sections.map((n) => /* @__PURE__ */ e.createElement("div", { key: n.id, className: "mb-4" }, /* @__PURE__ */ e.createElement(s, { variant: "h3", className: "mb-2 text-light-2" }, n.name), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3" }, n.fields.map((t) => /* @__PURE__ */ e.createElement("div", { key: t.id, className: "last:border-b-0" }, g(t), E(t, o[t.id]))))))
}
)));
};
export {
x as FormReadOnlyView
};
//# sourceMappingURL=index.es109.js.map