geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
290 lines (289 loc) • 9.81 kB
JavaScript
import t from "react";
import { Input as m } from "./index.es11.js";
import { Checkbox as v } from "./index.es10.js";
import { RadioGroup as u, RadioGroupItem as p } from "./index.es13.js";
import { MultiCombobox as I } from "./index.es23.js";
import { SingleCombobox as _ } from "./index.es27.js";
import { CreatableMultiCombobox as C } from "./index.es28.js";
import { Textarea as x } from "./index.es16.js";
import { Typography as s } from "./index.es19.js";
import { Phone as O, Mail as T } from "lucide-react";
import { SingleImagePicker as y } from "./index.es141.js";
import { SingleVideoPicker as R } from "./index.es142.js";
import { MultiImagePicker as M } from "./index.es143.js";
import { MultiVideoPicker as P } from "./index.es144.js";
import { RepeatableGroup as N } from "./index.es145.js";
import { TaggableMultiImagePicker as B } from "./index.es146.js";
import { FormFieldType as c } from "./index.es134.js";
import { DatePicker as U } from "./index.es65.js";
import { TaggableImageUploadFieldWithInput as G } from "./index.es147.js";
import { useFormValues as L } from "./index.es133.js";
const f = ({ field: e }) => {
const {
values: o,
errors: i,
setValue: r,
getRequestHeaders: E,
getCreateOptionExtraBody: d
} = L(), g = () => {
switch (e.type) {
case c.SINGLE_COMBOBOX:
return /* @__PURE__ */ t.createElement(
_,
{
options: e.options.map((a) => ({
id: a,
name: a
})),
value: o[e.id],
onChange: (a) => r(e.id, a),
placeholder: e.placeholder
}
);
case c.CREATABLE_MULTI_COMBOBOX: {
const a = o[e.id]?.split(",").filter(Boolean) ?? [];
return /* @__PURE__ */ t.createElement(
C,
{
fieldId: e.id,
optionsUrl: e.optionsUrl,
createOptionUrl: e.createOptionUrl,
optionsRequestBody: e.optionsRequestBody,
createOptionRequestBody: e.createOptionRequestBody,
createOptionValueKey: e.createOptionValueKey,
createOptionExtraBody: e.skipCreateOptionExtraBody ? void 0 : d,
requestHeaders: E,
urlTemplateData: o,
value: a,
onChange: (n) => r(e.id, n.length > 0 ? n.join(",") : void 0),
placeholder: e.placeholder,
minSelected: e.minSelected,
maxSelected: e.maxSelected
}
);
}
case c.MULTI_COMBOBOX:
return /* @__PURE__ */ t.createElement(
I,
{
options: e.options.map((a) => ({
label: a,
value: a
})),
selected: o[e.id]?.split(",") || [],
onChange: (a) => {
a.length === 0 ? r(e.id, void 0) : r(e.id, a.join(","));
},
placeholder: e.placeholder
}
);
case c.RADIO_GROUP:
return /* @__PURE__ */ t.createElement(
u,
{
value: o[e.id],
onValueChange: (a) => r(e.id, a)
},
e.options.map((a) => /* @__PURE__ */ t.createElement("div", { key: a, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(p, { value: a, id: a }), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, a)))
);
case c.RADIO_GROUP_WITH_OPTIONAL_INPUT: {
const a = o[e.id];
return /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(
u,
{
value: a?.radio_value,
onValueChange: (n) => r(e.id, {
...a,
radio_value: n,
input_value: ""
})
},
e.options.map((n) => /* @__PURE__ */ t.createElement("div", { key: n, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(p, { value: n, id: n }), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, n)))
), e.inputTriggerOptionValue === a?.radio_value ? /* @__PURE__ */ t.createElement(
m,
{
id: e.id,
type: "text",
placeholder: e.inputFieldPlaceholder,
value: a?.input_value,
onChange: (n) => r(e.id, {
...a,
input_value: n.target.value
})
}
) : null);
}
case c.CHECKBOX_GROUP: {
const a = o[e.id];
return /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-2" }, e.options.map((n) => /* @__PURE__ */ t.createElement("div", { key: n, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(
v,
{
id: n,
checked: a?.split(",").includes(n),
onCheckedChange: (l) => {
l ? r(
e.id,
a ? `${a},${n}` : n
) : r(
e.id,
a?.split(",").filter((h) => h !== n).join(",")
);
}
}
), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, n))));
}
case c.DATE_PICKER: {
const a = o[e.id], n = a ? new Date(a * 1e3) : void 0;
return /* @__PURE__ */ t.createElement(
U,
{
variant: "single",
date: n,
onDateChange: (l) => {
l && r(e.id, Math.floor(l.valueOf() / 1e3));
}
}
);
}
case c.LONG_TEXT:
return /* @__PURE__ */ t.createElement(
x,
{
id: e.id,
placeholder: e.placeholder,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value)
}
);
case c.EMAIL:
return /* @__PURE__ */ t.createElement(
m,
{
type: "email",
id: e.id,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value),
placeholder: e.placeholder,
prefix: /* @__PURE__ */ t.createElement(T, { className: "stroke-gray-400", size: 20 })
}
);
case c.SHORT_TEXT:
return /* @__PURE__ */ t.createElement(
m,
{
id: e.id,
type: "text",
placeholder: e.placeholder,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value)
}
);
case c.MOBILE_NUMBER:
return /* @__PURE__ */ t.createElement(
m,
{
prefix: /* @__PURE__ */ t.createElement(O, { className: "stroke-gray-400", size: 20 }),
type: "tel",
id: e.id,
placeholder: e.placeholder,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value)
}
);
case c.NUMBER:
return /* @__PURE__ */ t.createElement(
m,
{
type: "number",
inputMode: "decimal",
pattern: "^\\d*\\.?\\d*$",
id: e.id,
placeholder: e.placeholder,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value)
}
);
case c.SINGLE_IMAGE_PICKER:
return /* @__PURE__ */ t.createElement(
y,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id]
}
);
case c.MULTI_IMAGE_PICKER:
return /* @__PURE__ */ t.createElement(
M,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id],
maxImages: e.max_items
}
);
case c.TAGGABLE_MULTI_IMAGE_PICKER:
return /* @__PURE__ */ t.createElement(
B,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id],
options: e.options,
maxImages: e.max_items
}
);
case c.SINGLE_VIDEO_PICKER:
return /* @__PURE__ */ t.createElement(
R,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id]
}
);
case c.MULTI_VIDEO_PICKER:
return /* @__PURE__ */ t.createElement(
P,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id],
maxVideos: e.max_items
}
);
case c.REPEATABLE_GROUP_FIELD:
return /* @__PURE__ */ t.createElement(N, { field: e });
case c.SINGLE_VIDEO_PICKER_WITH_INPUT:
return /* @__PURE__ */ t.createElement(
m,
{
id: e.id,
required: e.required,
type: "url",
placeholder: e.placeholder,
value: o[e.id],
onChange: (a) => r(e.id, a.target.value)
}
);
case c.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT:
return /* @__PURE__ */ t.createElement(
G,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id],
maxImages: e.max_items,
placeholder: e.placeholder
}
);
default:
return /* @__PURE__ */ t.createElement("div", null, "Unknown Field");
}
};
return /* @__PURE__ */ t.createElement("aside", { className: "flex flex-col gap-1" }, /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-2" }, e.name, e.required && /* @__PURE__ */ t.createElement("span", { className: "text-danger-1" }, "*")), g(), i[e.id] && /* @__PURE__ */ t.createElement("div", { className: "error-message" }, i[e.id]));
};
export {
f as FormField
};
//# sourceMappingURL=index.es138.js.map