@devgateway/dvz-ui-react/dist/cjs/embeddable/showcase/index.js

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.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),t=require("semantic-ui-react"),z=require("../../countries.js"),y=require("../reducers/embeddable.js"),k=require("react-redux"),G=require("react-dropzone"),N=require("../../conf/config.json.js"),I=z.COUNTRY_OPTIONS.map(l=>({flag:l.flag.toLocaleLowerCase(),value:l.text,text:l.text}));r.createRef();function O({onSelectionChange:l,showValidation:x,inputRef:f,name:c}){const[n,u]=r.useState([]),[o,i]=r.useState([]),a=r.useCallback(m=>{u([...n,...m]),i([])},[n]),d=r.useCallback(m=>{i([...m])},[n]),{acceptedFiles:g,getRootProps:v,getInputProps:C,open:w}=G.useDropzone({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:a,onDropRejected:d});r.useImperativeHandle(f,()=>({name:c,reset:()=>{u([])},hasErrors:()=>n.length==0,value:()=>n}));const E=m=>{const p=[...n];p.splice(m,1),u(p)},F=n.length===0;return e.jsxs(e.Fragment,{children:[o&&o[0]&&o[0].errors&&e.jsx(t.Container,{fluid:!0,className:`upload files ${F?"error":""}`,children:e.jsx("div",{className:"error-messages",children:e.jsx("ul",{style:{},children:o[0].errors.map((m,p)=>e.jsx("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 "},p))})})}),e.jsxs(t.Container,{fluid:!0,className:"upload files",children:[e.jsxs("div",{...v({className:"dropzone"}),children:[e.jsx("input",{...C()}),e.jsxs("p",{children:["Drag 'n' drop files here, or click select button to select files. The maximum file size allowed is ",N.default.maxUploadFileSize,"MB."]}),n.length>0?e.jsx("ul",{children:n.map((m,p)=>e.jsxs("li",{children:[e.jsx(t.Label,{color:"green",icon:"file",children:m.name}),e.jsx(t.Icon,{color:"red",name:"remove",size:"large",onClick:j=>{j.stopPropagation(),E(p)}})]},p))}):null]}),e.jsx(t.Button,{secondary:!0,onClick:w,children:"Select"})]})]})}const D=({options:l,placeholder:x,name:f,required:c,showValidation:n,icon:u,inputRef:o})=>{const[i,a]=r.useState(null),[d,g]=r.useState(!0);return r.useEffect(()=>{c&&i==null?g(!0):g(!1)},[i]),r.useImperativeHandle(o,()=>({name:f,reset:()=>{a(null)},value:()=>i,hasErrors:()=>(console.log(d),d)})),e.jsx(t.Form.Dropdown,{value:i,error:d&&n,name:f,onChange:(v,C)=>{a(C.value)},multiple:!1,search:!0,selection:!0,options:l,placeholder:x})},S=({placeholder:l,name:x,icon:f,required:c,pattern:n,as:u,inputRef:o,showValidation:i})=>{const[a,d]=r.useState(""),[g,v]=r.useState(!0);r.useEffect(()=>{c&&a.trim()==""||n&&!n.test(a)?v(!0):v(!1)},[a]),r.useImperativeHandle(o,()=>({name:x,reset:()=>{d("")},hasErrors:()=>g,value:()=>a}));const C=u||t.Input;return e.jsx(C,{value:a,error:g&&i,onChange:w=>d(w.target.value),name:x,icon:f,iconPosition:"left",placeholder:l})},P=l=>{const[x,f]=r.useState({});r.useRef();const c=r.useRef({}),n=s=>{const b=Object.keys(c.current).map(h=>c.current[h]),q=b.map(h=>h.hasErrors()).reduce((h,R)=>h||R);if(x.files,q)f(h=>({...h,showValidation:!0}));else{const h={};b.forEach(R=>h[R.name]=R.value()),l.onSubmit(h),setTimeout(()=>{u()},5e3)}},u=()=>{Object.keys(c.current).map(b=>c.current[b]).forEach(b=>{b.reset()}),f({showValidation:!1,status:null}),l.onReset()},o=s=>{s&&(c.current[s.name]=s)},{status:i,organization:a="Organization",name:d="Name",email:g="Email",country:v="Country",message:C="Message",resetlabel:w="Reset",submitlabel:E="Submit",successmessage:F="Thanks for submitting your data",failuremessage:m="Something didn't go well, please try again later",editing:p}=l,{showValidation:j,token:A,reset:B}=x;return e.jsx(t.Container,{fluid:!0,className:"viz showcase",children:e.jsxs(t.Grid,{columns:1,className:j?"validated":"",children:[e.jsx(t.Grid.Column,{children:e.jsx(S,{inputRef:s=>o(s),showValidation:j,required:!0,icon:"building",name:"organization",placeholder:a})}),e.jsx(t.Grid.Column,{children:e.jsx(S,{inputRef:s=>o(s),showValidation:j,required:!0,icon:"user",name:"name",placeholder:d})}),e.jsx(t.Grid.Column,{children:e.jsx(S,{inputRef:s=>o(s),showValidation:j,required:!0,pattern:/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,icon:"envelope",placeholder:g,name:"email"})}),e.jsx(t.Grid.Column,{children:e.jsx(t.Form.Field,{children:e.jsx(D,{inputRef:s=>o(s),showValidation:j,name:"country",required:!0,options:I,placeholder:v})})}),e.jsx(t.Grid.Column,{children:e.jsx(O,{inputRef:s=>o(s),showValidation:j,name:"files"})}),e.jsx(t.Grid.Column,{children:e.jsx(S,{inputRef:s=>o(s),placeholder:C,name:"message",as:t.TextArea})}),e.jsxs(t.Grid.Row,{children:[e.jsxs(t.Grid.Column,{textAlign:"left",width:12,verticalAlign:"bottom",className:"form-buttons",children:[e.jsx(t.Button,{className:"btn-reset",onClick:s=>u(),children:w}),e.jsx(t.Button,{secondary:!0,onClick:s=>n(),children:E})]}),(i=="OK"||p)&&e.jsxs(t.Grid.Column,{width:16,children:[" ",e.jsx(t.Message,{success:!0,content:e.jsx("p",{children:F})})]}),(i=="ERROR"||p)&&e.jsxs(t.Grid.Column,{width:16,children:[" ",e.jsx(t.Message,{negative:!0,children:e.jsx("p",{children:m})})]})]})]})})},T=(l,x)=>({status:l.getIn(["embeddable","showCase","status"])}),V={onSubmit:y.sendShowCaseForm,onReset:y.reset},M=k.connect(T,V)(P);exports.default=M;