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