geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
234 lines (233 loc) • 7.98 kB
JavaScript
import t from "react";
import { Input as m } from "./index.es9.js";
import { Checkbox as v } from "./index.es8.js";
import { RadioGroup as u, RadioGroupItem as p } from "./index.es11.js";
import { MultiCombobox as g } from "./index.es21.js";
import { SingleCombobox as h } from "./index.es25.js";
import { Textarea as _ } from "./index.es14.js";
import { Typography as s } from "./index.es17.js";
import { Phone as C, Mail as I } from "lucide-react";
import { SingleImagePicker as x } from "./index.es151.js";
import { SingleVideoPicker as O } from "./index.es152.js";
import { MultiImagePicker as N } from "./index.es153.js";
import { MultiVideoPicker as P } from "./index.es154.js";
import { RepeatableGroup as M } from "./index.es155.js";
import { TaggableMultiImagePicker as R } from "./index.es156.js";
import { FormFieldType as c } from "./index.es147.js";
import { DatePicker as T } from "./index.es61.js";
import { useFormValues as y } from "./index.es146.js";
const q = ({ field: e }) => {
const { values: o, errors: i, setValue: r } = y(), E = () => {
switch (e.type) {
case c.SINGLE_COMBOBOX:
return /* @__PURE__ */ t.createElement(
h,
{
options: e.options.map((a) => ({
id: a,
name: a
})),
value: o[e.id],
onChange: (a) => r(e.id, a),
placeholder: e.placeholder
}
);
case c.MULTI_COMBOBOX:
return /* @__PURE__ */ t.createElement(
g,
{
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((d) => d !== 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(
T,
{
variant: "single",
date: n,
onDateChange: (l) => {
l && r(e.id, Math.floor(l.valueOf() / 1e3));
}
}
);
}
case c.LONG_TEXT:
return /* @__PURE__ */ t.createElement(
_,
{
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(I, { 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(C, { 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(
x,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id]
}
);
case c.MULTI_IMAGE_PICKER:
return /* @__PURE__ */ t.createElement(
N,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id]
}
);
case c.TAGGABLE_MULTI_IMAGE_PICKER:
return /* @__PURE__ */ t.createElement(
R,
{
id: e.id,
onChange: (a) => r(e.id, a),
value: o[e.id],
options: e.options
}
);
case c.SINGLE_VIDEO_PICKER:
return /* @__PURE__ */ t.createElement(
O,
{
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]
}
);
case c.REPEATABLE_GROUP_FIELD:
return /* @__PURE__ */ t.createElement(M, { field: e });
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" }, "*")), E(), i[e.id] && /* @__PURE__ */ t.createElement("div", { className: "error-message" }, i[e.id]));
};
export {
q as FormField
};
//# sourceMappingURL=index.es150.js.map