geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
207 lines (206 loc) • 6.84 kB
JavaScript
import G, { useState as E } from "react";
import { FormValuesContext as L } from "./index.es133.js";
import { FormFieldType as r } from "./index.es134.js";
const B = ({
children: I,
initialValues: m = {},
onSubmit: c,
onAssetUpload: p,
onToggleImageEditor: T,
getRequestHeaders: V,
getCreateOptionExtraBody: A
}) => {
const [n, f] = E(m), [M, P] = E({}), b = (s, e) => {
f((a) => ({ ...a, [s]: e })), M[s] && P((a) => {
const t = { ...a };
return delete t[s], t;
});
}, O = (s) => {
f(() => s);
}, u = (s) => {
if (s.type === r.REPEATABLE_GROUP_FIELD) {
const a = `${s.id}||`, t = Object.keys(n).filter((i) => i.startsWith(a));
if (t.length === 0)
return { isValid: !1, errorMessage: "This field is required" };
for (const i of t) {
const o = { ...s.options.find(
(g) => g.id === i.split("||")[2]
), id: i }, { isValid: d, errorMessage: _ } = u(
o
);
if (!d)
return { isValid: !1, errorMessage: _ };
}
return { isValid: !0, errorMessage: "" };
}
const e = n[s.id];
if (s.required && e == null)
return { isValid: !1, errorMessage: "This field is required" };
if (!s.required && (e == null || e === ""))
return { isValid: !0, errorMessage: "" };
switch (s.type) {
case r.SHORT_TEXT:
case r.LONG_TEXT:
case r.SINGLE_VIDEO_PICKER_WITH_INPUT:
if (e === "")
return { isValid: !1, errorMessage: "This field cannot be empty" };
break;
case r.EMAIL:
if (e === "")
return { isValid: !1, errorMessage: "Email is required" };
if (!/^\S+@\S+\.\S+$/.test(e))
return {
isValid: !1,
errorMessage: "Please enter a valid email address"
};
break;
case r.NUMBER:
if (e === "")
return { isValid: !1, errorMessage: "Number is required" };
if (isNaN(Number(e)))
return { isValid: !1, errorMessage: "Please enter a valid number" };
break;
case r.MOBILE_NUMBER:
if (e === "")
return { isValid: !1, errorMessage: "Mobile number is required" };
if (!/^\d{10,15}$/.test(e.replace(/\D/g, "")))
return {
isValid: !1,
errorMessage: "Please enter a valid mobile number"
};
break;
case r.DATE_PICKER:
if (!e || e === "")
return { isValid: !1, errorMessage: "Date is required" };
break;
case r.SINGLE_COMBOBOX:
if (!e || e === "")
return {
isValid: !1,
errorMessage: "Please select or enter a value"
};
break;
case r.MULTI_COMBOBOX:
if (Array.isArray(e)) {
if (e.length === 0)
return {
isValid: !1,
errorMessage: "Please select at least one option"
};
} else if (typeof e == "string" && (!e || e.split(",").filter(Boolean).length === 0))
return {
isValid: !1,
errorMessage: "Please select at least one option"
};
break;
case r.CREATABLE_MULTI_COMBOBOX: {
const a = Array.isArray(e) ? e : typeof e == "string" ? e.split(",").filter(Boolean) : [], t = s.minSelected ?? 0, i = s.maxSelected;
if (t > 0 && a.length < t)
return {
isValid: !1,
errorMessage: i != null ? `Select at least ${t} option(s) (max ${i})` : `Select at least ${t} option(s)`
};
if (i != null && a.length > i)
return {
isValid: !1,
errorMessage: `Select at most ${i} option(s)`
};
if (s.required && a.length === 0)
return {
isValid: !1,
errorMessage: "This field is required"
};
break;
}
case r.CHECKBOX_GROUP:
case r.RADIO_GROUP:
if (!e || e === "")
return { isValid: !1, errorMessage: "Please select an option" };
break;
case r.RADIO_GROUP_WITH_OPTIONAL_INPUT: {
const a = e;
if (!a || !a.radio_value)
return { isValid: !1, errorMessage: "Please select an option" };
if (a.radio_value === s.inputTriggerOptionValue && !a.input_value)
return {
isValid: !1,
errorMessage: "Please provide additional information for your selection"
};
break;
}
case r.SINGLE_IMAGE_PICKER:
if (!e || !e.public_url)
return { isValid: !1, errorMessage: "Please upload an image" };
break;
case r.SINGLE_VIDEO_PICKER:
if (!e || !e.public_url)
return { isValid: !1, errorMessage: "Please upload a video" };
break;
case r.MULTI_IMAGE_PICKER:
if (!Array.isArray(e) || e.length === 0)
return {
isValid: !1,
errorMessage: "Please upload at least one image"
};
break;
case r.MULTI_VIDEO_PICKER:
if (!Array.isArray(e) || e.length === 0)
return {
isValid: !1,
errorMessage: "Please upload at least one video"
};
break;
case r.TAGGABLE_MULTI_IMAGE_PICKER:
case r.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT: {
if (!Array.isArray(e) || e.length === 0)
return {
isValid: !1,
errorMessage: "Please upload at least one image"
};
if (e.some((i) => !i.tag))
return {
isValid: !1,
errorMessage: "Please add tags to all uploaded images"
};
break;
}
}
return { isValid: !0, errorMessage: "" };
}, y = {
values: n,
errors: M,
setValue: b,
setFormValues: O,
submitForm: () => {
c && c(n);
},
onAssetUpload: p,
validateField: u,
validateStep: (s) => {
let e = !0;
const a = {}, t = {};
return s.sections.forEach((i) => {
i.fields.forEach((l) => {
t[l.id] = l;
});
}), Object.entries(t).forEach(([i, l]) => {
if (l.required) {
const { isValid: o, errorMessage: d } = u(l);
o || (a[l.id] = d, e = !1);
}
if ((l.type === r.TAGGABLE_MULTI_IMAGE_PICKER || l.type === r.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT) && !l.required) {
const o = n[l.id];
Array.isArray(o) && o.length > 0 && o.some((g) => !g.tag) && (a[l.id] = "Please add tags to all uploaded images", e = !1);
}
}), { isStepValid: e, errors: a };
},
onToggleImageEditor: T,
getRequestHeaders: V,
getCreateOptionExtraBody: A
};
return /* @__PURE__ */ G.createElement(L.Provider, { value: y }, I);
};
export {
B as FormValuesProvider
};
//# sourceMappingURL=index.es111.js.map