@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
248 lines (247 loc) • 7.9 kB
JavaScript
import { jsx as e, jsxs as h, Fragment as q } from "react/jsx-runtime";
import A, { useState as x, useRef as D, useEffect as V, useImperativeHandle as j, useCallback as I } from "react";
import { Container as N, Grid as i, Form as P, TextArea as L, Button as k, Message as O, Input as M, Label as U, Icon as B } from "semantic-ui-react";
import { COUNTRY_OPTIONS as $ } from "../../utils/countries.js";
import { reset as G, sendShowCaseForm as H } from "../reducers/embeddable.js";
import { connect as K } from "react-redux";
import { useDropzone as Y } from "react-dropzone";
import _ from "../../conf/config.json.js";
const J = $.map((o) => ({
flag: o.flag.toLocaleLowerCase(),
value: o.text,
text: o.text
}));
A.createRef();
function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
const [r, c] = x([]), [n, s] = x([]), l = I((m) => {
c([...r, ...m]), s([]);
}, [r]), u = I((m) => {
s([...m]);
}, [r]), {
acceptedFiles: v,
getRootProps: w,
getInputProps: b,
open: E
} = Y({ accept: "application/pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif", maxFiles: 5, multiple: !0, onDrop: l, onDropRejected: u });
j(g, () => ({
name: a,
reset: () => {
c([]);
},
hasErrors: () => r.length == 0,
value: () => r
}));
const y = (m) => {
const d = [...r];
d.splice(m, 1), c(d);
}, z = r.length === 0;
return /* @__PURE__ */ h(q, { children: [
n && n[0] && n[0].errors && /* @__PURE__ */ e(N, { fluid: !0, className: `upload files ${z ? "error" : ""}`, children: /* @__PURE__ */ e("div", { className: "error-messages", children: /* @__PURE__ */ e("ul", { style: {}, children: n[0].errors.map((m, d) => /* @__PURE__ */ e("li", { children: "File type not allowed. File type must be - application/-pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif " }, d)) }) }) }),
/* @__PURE__ */ h(N, { fluid: !0, className: "upload files", children: [
/* @__PURE__ */ h("div", { ...w({ className: "dropzone" }), children: [
/* @__PURE__ */ e("input", { ...b() }),
/* @__PURE__ */ h("p", { children: [
"Drag 'n' drop files here, or click select button to select files. The maximum file size allowed is ",
_.maxUploadFileSize,
"MB."
] }),
r.length > 0 ? /* @__PURE__ */ e("ul", { children: r.map((m, d) => /* @__PURE__ */ h("li", { children: [
/* @__PURE__ */ e(U, { color: "green", icon: "file", children: m.name }),
/* @__PURE__ */ e(B, { color: "red", name: "remove", size: "large", onClick: (C) => {
C.stopPropagation(), y(d);
} })
] }, d)) }) : null
] }),
/* @__PURE__ */ e(k, { secondary: !0, onClick: E, children: "Select" })
] })
] });
}
const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r, icon: c, inputRef: n }) => {
const [s, l] = x(null), [u, v] = x(!0);
return V(() => {
a && s == null ? v(!0) : v(!1);
}, [s]), j(n, () => ({
name: g,
reset: () => {
l(null);
},
value: () => s,
hasErrors: () => (console.log(u), u)
})), /* @__PURE__ */ e(
P.Dropdown,
{
value: s,
error: u && r,
name: g,
onChange: (w, b) => {
l(b.value);
},
multiple: !1,
search: !0,
selection: !0,
options: o,
placeholder: f
}
);
}, S = ({ placeholder: o, name: f, icon: g, required: a, pattern: r, as: c, inputRef: n, showValidation: s }) => {
const [l, u] = x(""), [v, w] = x(!0);
return V(() => {
a && l.trim() == "" || r && !r.test(l) ? w(!0) : w(!1);
}, [l]), j(n, () => ({
name: f,
reset: () => {
u("");
},
hasErrors: () => v,
value: () => l
})), /* @__PURE__ */ e(
c || M,
{
value: l,
error: v && s,
onChange: (E) => u(E.target.value),
name: f,
icon: g,
iconPosition: "left",
placeholder: o
}
);
}, X = (o) => {
const [f, g] = x({});
D();
const a = D({}), r = (t) => {
const R = Object.keys(a.current).map((p) => a.current[p]), T = R.map((p) => p.hasErrors()).reduce((p, F) => p || F);
if (f.files, T)
g((p) => ({ ...p, showValidation: !0 }));
else {
const p = {};
R.forEach((F) => p[F.name] = F.value()), o.onSubmit(p), setTimeout(() => {
c();
}, 5e3);
}
}, c = () => {
Object.keys(a.current).map((R) => a.current[R]).forEach((R) => {
R.reset();
}), g({ showValidation: !1, status: null }), o.onReset();
}, n = (t) => {
t && (a.current[t.name] = t);
}, {
status: s,
organization: l = "Organization",
name: u = "Name",
email: v = "Email",
country: w = "Country",
message: b = "Message",
resetlabel: E = "Reset",
submitlabel: y = "Submit",
successmessage: z = "Thanks for submitting your data",
failuremessage: m = "Something didn't go well, please try again later",
editing: d
} = o, { showValidation: C, token: te, reset: re } = f;
return /* @__PURE__ */ e(N, { fluid: !0, className: "viz showcase", children: /* @__PURE__ */ h(i, { columns: 1, className: C ? "validated" : "", children: [
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
S,
{
inputRef: (t) => n(t),
showValidation: C,
required: !0,
icon: "building",
name: "organization",
placeholder: l
}
) }),
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
S,
{
inputRef: (t) => n(t),
showValidation: C,
required: !0,
icon: "user",
name: "name",
placeholder: u
}
) }),
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
S,
{
inputRef: (t) => n(t),
showValidation: C,
required: !0,
pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
icon: "envelope",
placeholder: v,
name: "email"
}
) }),
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(P.Field, { children: /* @__PURE__ */ e(
W,
{
inputRef: (t) => n(t),
showValidation: C,
name: "country",
required: !0,
options: J,
placeholder: w
}
) }) }),
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
Q,
{
inputRef: (t) => n(t),
showValidation: C,
name: "files"
}
) }),
/* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
S,
{
inputRef: (t) => n(t),
placeholder: b,
name: "message",
as: L
}
) }),
/* @__PURE__ */ h(i.Row, { children: [
/* @__PURE__ */ h(i.Column, { textAlign: "left", width: 12, verticalAlign: "bottom", className: "form-buttons", children: [
/* @__PURE__ */ e(
k,
{
className: "btn-reset",
onClick: (t) => c(),
children: E
}
),
/* @__PURE__ */ e(
k,
{
secondary: !0,
onClick: (t) => r(),
children: y
}
)
] }),
(s == "OK" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
" ",
/* @__PURE__ */ e(
O,
{
success: !0,
content: /* @__PURE__ */ e("p", { children: z })
}
)
] }),
(s == "ERROR" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
" ",
/* @__PURE__ */ e(O, { negative: !0, children: /* @__PURE__ */ e("p", { children: m }) })
] })
] })
] }) });
}, Z = (o, f) => ({
status: o.getIn(["embeddable", "showCase", "status"])
}), ee = {
onSubmit: H,
onReset: G
}, me = K(Z, ee)(X);
export {
me as default
};