carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.09 kB
JavaScript
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as i,useRef as o,useEffect as a,createElement as l}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{InputBehaviour as d}from"../../__internal__/input-behaviour/input-behaviour.component.js";import p from"../../__internal__/form-field/form-field.component.js";import m from"../../hooks/__internal__/useUniqueId/index.js";import u from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import c from"../../__internal__/validation-message/validation-message.component.js";import{StyledHiddenFileInput as f,StyledFileInputPresentation as g}from"./file-input.style.js";import v from"../textbox/textbox.style.js";import{ButtonMinor as b}from"../button-minor/button-minor.component.js";import{Typography as y}from"../typography/typography.component.js";import{FileUploadStatus as h}from"./__internal__/file-upload-status/file-upload-status.component.js";import{Box as j}from"../box/box.component.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import{HintText as _}from"../../__internal__/hint-text/hint-text.component.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){x(e,t,r[t])}))}return e}function D(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=n.forwardRef(((n,x)=>{var{accept:w,buttonText:I,"data-element":T,"data-role":k,dragAndDropText:E,error:L,label:S,id:H,inputHint:A,isVertical:W,maxHeight:q,maxWidth:F,minHeight:C,minWidth:M="280px",name:R,onChange:V,required:U,uploadStatus:N=[],validationMessagePositionTop:z=!0}=n,B=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["accept","buttonText","data-element","data-role","dragAndDropText","error","label","id","inputHint","isVertical","maxHeight","maxWidth","minHeight","minWidth","name","onChange","required","uploadStatus","validationMessagePositionTop"]);const G=O(),J=I||G.fileInput.selectFile(),K=E||G.fileInput.dragAndDrop(),Q={maxHeight:q||void 0,maxWidth:F||M,minHeight:C,minWidth:M},[X,Y]=m(H,R),[Z,$]=i(!1),[ee,te]=i(!1),re=o(null),ne=e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&te(!0)},ie=e=>{e.preventDefault(),te(!1)};a((()=>(document.addEventListener("dragover",ne),document.addEventListener("drop",ie),document.addEventListener("dragleave",ie),()=>{document.removeEventListener("dragover",ne),document.removeEventListener("drop",ie),document.removeEventListener("dragleave",ie)})),[]);const oe=e=>{null==V||V(e)},{labelId:ae,validationId:le}=u({id:X,validationRedesignOptIn:!0,error:L,label:S}),se=Array.isArray(N)?N:[N],de=e(t,{children:[A&&r(_,{children:A}),e(j,{position:"relative",children:[z&&e(t,{children:[r(c,{error:L,validationId:le,validationMessagePositionTop:z,"data-role":"validation-message-top"}),L&&r(v,{warning:!1})]}),r(f,P(D(P({},U&&{required:U}),{accept:w,"aria-invalid":!!L,id:X,ref:e=>{re.current=e,"function"==typeof x?x(e):x&&(x.current=e)},name:Y,onChange:e=>{oe(e.target.files)},type:"file"}),B)),e(g,D(P({"data-role":"file-input-presentation",isDraggedOver:Z,isDraggingFile:ee,error:L,onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),$(!1)},onDragOver:e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&$(!0)},onDrop:e=>{e.preventDefault(),$(!1),oe(e.dataTransfer.files)},isVertical:W},Q),{children:[r(b,{buttonType:"primary",onClick:()=>{var e;null===(e=re.current)||void 0===e||e.click()},children:J}),r(y,{m:0,children:K})]})),!z&&e(t,{children:[r(c,{error:L,validationId:le,validationMessagePositionTop:z,"data-role":"validation-message-bottom"}),L&&r(v,{warning:!1})]})]})]});return r(d,{children:r(p,D(P({error:L,label:S,labelId:ae,id:X,isRequired:U,"data-component":"file-input","data-role":k,"data-element":T,validationRedesignOptIn:!0},s(B)),{children:0===se.length?de:se.map((e=>l(g,D(P({hasUploadStatus:!0},Q),{key:e.filename}),r(h,P({},e)))))}))})}));w.displayName="FileInput";export{w as FileInput,w as default};