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