https://nouw.com/assets/UploadArea-DFKCttdh.js

1import{Aa as e,Di as t,Ei as n,Ia as r,Oi as i,Qi as a,Ti as o,_a as s,ea as c,fi as l,j as u,ki as d,ra as f,ya as p}from"./index-BovpZL4f.js";import{t as m}from"./media-D_qGv2tZ.js";var h=r(e(),1),g=r(f(),1),_=r(c(),1),v=p(),y=class extends h.PureComponent{elem;dragElem;constructor(e){super(e),this.state={dragging:!1,direction:void 0,isLoading:!1,mediaRenderedDimensions:{width:0,height:0},containerDimensions:{width:0,height:0},position:{x:0,y:0}},this.elem=h.createRef(),this.dragElem=h.createRef()}resetState=()=>{this.setState({dragging:!1,direction:void 0,isLoading:!1,mediaRenderedDimensions:{width:0,height:0},containerDimensions:{width:0,height:0},position:{x:0,y:0}})};componentDidMount(){this.dragElem.current&&this.bindArea(this.dragElem.current),this.props.media&&this.setMediaProperties()}componentDidUpdate(e){this.props.media?e.media!==this.props.media&&this.setMediaProperties():this.resetState()}componentWillUnmount(){this.dragElem.current&&this.unBindArea(this.dragElem.current)}setMediaProperties=()=>{let{cropRatio:e,media:t}=this.props;if(this.setState({isLoading:!0}),this.setState({isLoading:!1}),!t||!this.elem.current)return;let n=this.elem.current.clientWidth,r=Math.round(n/e),i=n/r,a=t.Width/t.Height,o;a>i+.01&&(o=`horizontal`),a<i-.01&&(o=`vertical`);let s=o===`horizontal`?{height:r,width:Math.round(r/t.Height*t.Width)}:{width:n,height:Math.round(n/t.Width*t.Height)},c=o===`horizontal`?{y:0,x:s.width/2*-1+n/2}:{y:s.height/2*-1+r/2,x:0};this.setState({direction:o,containerDimensions:{width:n,height:r},mediaRenderedDimensions:s,position:c},this.onMediaChange)};bindArea=e=>{e.addEventListener(`pointerdown`,this.handlePointerDown),document.body.addEventListener(`pointerup`,this.handlePointerUp),document.body.addEventListener(`pointermove`,this.handlePointerMove)};unBindArea=e=>{e.removeEventListener(`pointerdown`,this.handlePointerDown),document.body.removeEventListener(`pointerup`,this.handlePointerUp),document.body.removeEventListener(`pointermove`,this.handlePointerMove)};handlePointerDown=e=>{this.setState(t=>({dragging:!0,movedDistance:{x:0,y:0},startCoordinates:{x:t.direction===`horizontal`?e.clientX:0,y:t.direction===`vertical`?e.clientY:0},startPosition:{...t.position}}))};handlePointerUp=()=>{this.setState({dragging:!1,startCoordinates:void 0,startPosition:void 0},()=>{let{movedDistance:e}=this.state;e&&(e.y!==0||e.x!==0)&&this.onMediaChange()})};onMediaChange=()=>{let{media:e,cropRatio:t}=this.props,{position:n,mediaRenderedDimensions:r,direction:i}=this.state;if(!e)return;let a=e.Width/r.width,o=0,s=0;n.x<0&&(o=Math.round(n.x*-1*a)),n.y<0&&(s=Math.round(n.y*-1*a));

1let c=e.Width,l=e.Height;i===`horizontal`&&(c=Math.round(e.Height*t)),i===`vertical`&&(l=Math.round(e.Width/t)),this.props.onChange&&this.props.onChange({...e,cutX:o,cutY:s,sideX:c,sideY:l})};handlePointerMove=(0,_.default)(e=>{if(!this.state.dragging)return;let{startCoordinates:t,startPosition:n,direction:r}=this.state;if(!t||!n)return;let i={x:r===`horizontal`?e.clientX-t.x:0,y:r===`vertical`?e.clientY-t.y:0},a=this.getLimitedPosition({x:n.x+i.x,y:n.y+i.y});this.setState({movedDistance:{x:a.x-n.x,y:a.y-n.y},position:a})},50);getLimitedPosition=({x:e,y:t})=>{let{mediaRenderedDimensions:n,containerDimensions:r}=this.state,i=(n.width-r.width)*-1,a=(n.height-r.height)*-1;return{x:Math.max(i,Math.min(0,e)),y:Math.max(a,Math.min(0,t))}};render(){let{media:e,className:t,cropRatio:n}=this.props,{direction:r,mediaRenderedDimensions:i,position:a,isLoading:o}=this.state,s=`auto`;return r===`horizontal`&&(s=`pan-y`),r===`vertical`&&(s=`pan-x`),(0,v.jsxs)(`div`,{className:(0,g.default)(`croparea`,{loading:o,"ew-resize":r===`horizontal`,"ns-resize":r===`vertical`,"screen-overflow":i.width>window.innerWidth},t),"touch-action":s,style:{touchAction:s,paddingTop:parseFloat((100/n).toString()).toFixed(3)+`%`},ref:this.elem,children:[(0,v.jsx)(`div`,{className:`mask`,children:(0,v.jsx)(`div`,{style:{width:`${i.width}px`,height:`${i.height}px`,position:`absolute`,top:`${a.y}px`,left:`${a.x}px`},children:!!e&&(0,v.jsx)(u,{srcWidth:i.width,srcHeight:i.height,picture:e,style:{width:`100%`,height:`100%`}})})}),(0,v.jsxs)(`div`,{ref:this.dragElem,className:`markers`,style:{width:`${i.width}px`,height:`${i.height}px`,position:`absolute`,top:`${a.y}px`,left:`${a.x}px`},children:[(0,v.jsx)(`div`,{}),(0,v.jsx)(`div`,{}),(0,v.jsx)(`div`,{}),(0,v.jsx)(`div`,{})]})]})}},b=({className:e,accept:r,multiple:c,children:f,withText:p,withButton:_,croppable:b,media:x,cropRatio:S,uploadAreaElem:C,capture:w,onChange:T,isLoading:E,disabled:D,...O})=>{let k=(0,h.useRef)(null),[A,j]=(0,h.useState)(!1),[M,N]=(0,h.useState)(!1),[P,F]=(0,h.useState)(b?x:void 0),[I,L]=(0,h.useState)([]),[R,z]=(0,h.useState)([]),[B,V]=(0,h.useState)(!1);(0,h.useEffect)(()=>(G(C),()=>{W(C)}),[C]),(0,h.useEffect)(()=>{x&&!b&&F(void 0)},[x,b]);let H=(0,h.useRef)(null),U=(0,h.useRef)(!1),W=e=>{let t=e||k.current;t&&(t.removeEventListener(`dragover`,K),t.removeEventListener(`dragleave`,q),t.removeEventListener(`drop`,J))},G=e=>{U.current=!1,document.body.addEventListener(`dragstart`,()=>{U.current=!0}),document.body.addEventListener(`dragend`,()=>{U.current=!1});let t=e||k.current;t&&(t.addEventListener(`dragover`,K),t.addEventListener(`dragleave`,q),t.addEventListener(`drop`,J))},K=e=>{e.stopPropagation(),e.preventDefault(),clearTimeout(H.current),U.current||N(!0)},q=e=>{H.current=setTimeout(()=>{e.stopPropagation(),e.preventDefault(),N(!1)},100)},J=e=>{e.preventDefault(),e.stopPropagation(),U.current||(N(!1),X([...e.dataTransfer.files]))},Y=(e,t)=>{X(t)},X=async e=>{if(c&&b)throw Error(`Component does not support multiple files together with crop`);I.length>0&&T([]);let i=t(r),a=e.map((e,t)=>{let r=n(e);return t>0&&!c?{file:r,error:`to_many`}:o(i,r.type)?{file:r}:{file:r,error:`invalid_format`}}),s=a.filter(e=>!e.error),l=a.filter(e=>!!e.error);if(L(s),z(l),l.length>0&&V(!0),s.length>0){let e=s[0];if(b){let t=await m([e.file]);t.length&&F({Url:t[0].Url,Poster:e.file.type.startsWith(`video/`)?` `:void 0,Width:t[0].Width,Height:t[0].Height,Name:``})}if(!b){let e=T(s.map(e=>({...e,cutX:0,cutY:0,sideX:0,sideY:0})));e instanceof Promise&&(j(!0),e.then(()=>j(!1)).catch(()=>j(!1)))}}},Z=e=>{T([{...e,file:I.length>0?I[0].file:void 0}])},Q=()=>{V(!1)},$=S&&S>0?100/S:0;return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(d,{isOpen:B,onClose:Q,invalid:R,accept:r,multiple:c}),(0,v.jsxs)(`div`,{className:(0,g.default)(`upload-area`,{"supports-drag":a(),droppable:M,loading:A||E,croppable:b},e),ref:k,...O,children:[!P&&(0,v.jsxs)(`div`,{style:{padding:b?parseFloat(($/2).toString()).toFixed(3)+`% 0`:``,height:b?`0`:``},children:[a()&&p&&(0,v.jsx)(`span`,{children:(0,v.jsx)(s,{id:`drop_images_here`})}),_&&(0,v.jsxs)(l,{accept:r,capture:w,multiple:c,type:`file`,onChange:Y,disabled:D,className:(0,g.default)({loading:A}),children:[(0,v.jsx)(i,{id:w===`environment`?`camera`:`upload`}

1),(0,v.jsx)(`span`,{children:(0,v.jsx)(s,{id:b?`choose`:w===`environment`?`camera`:`upload`})})]})]}),!!b&&!!P&&(0,v.jsx)(y,{media:P,cropRatio:S||0,onChange:Z}),!b&&!!P&&(0,v.jsx)(`div`,{children:(0,v.jsx)(u,{picture:P})}),f]})]})};export{b as t};