react-cropper
Version:
Cropper as React Component
2 lines (1 loc) • 3.03 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("cropperjs"),o=function(){return o=Object.assign||function(e){for(var r,o=1,t=arguments.length;o<t;o++)for(var n in r=arguments[o])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},o.apply(this,arguments)};function t(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}var n=["aspectRatio","autoCrop","autoCropArea","background","center","checkCrossOrigin","checkOrientation","cropBoxMovable","cropBoxResizable","data","dragMode","guides","highlight","initialAspectRatio","minCanvasHeight","minCanvasWidth","minContainerHeight","minContainerWidth","minCropBoxHeight","minCropBoxWidth","modal","movable","preview","responsive","restore","rotatable","scalable","toggleDragModeOnDblclick","viewMode","wheelZoomRatio","zoomOnTouch","zoomOnWheel","zoomable","cropstart","cropmove","cropend","crop","zoom","ready"],a={opacity:0,maxWidth:"100%"},c=e.forwardRef((function(c,i){var l=t(c,[]),s=l.dragMode,u=void 0===s?"crop":s,p=l.src,d=l.style,f=l.className,v=l.crossOrigin,m=l.scaleX,g=l.scaleY,y=l.enable,b=l.zoomTo,h=l.rotateTo,O=l.alt,T=void 0===O?"picture":O,z=l.ready,x=l.onInitialized,C=t(l,["dragMode","src","style","className","crossOrigin","scaleX","scaleY","enable","zoomTo","rotateTo","alt","ready","onInitialized"]),w={scaleY:g,scaleX:m,enable:y,zoomTo:b,rotateTo:h},j=function(){for(var r=[],o=0;o<arguments.length;o++)r[o]=arguments[o];var t=e.useRef(null);return e.useEffect((function(){r.forEach((function(e){e&&("function"==typeof e?e(t.current):e.current=t.current)}))}),[r]),t}(i,e.useRef(null));e.useEffect((function(){var e;(null===(e=j.current)||void 0===e?void 0:e.cropper)&&"number"==typeof b&&j.current.cropper.zoomTo(b)}),[l.zoomTo]),e.useEffect((function(){var e;(null===(e=j.current)||void 0===e?void 0:e.cropper)&&void 0!==p&&j.current.cropper.reset().clear().replace(p)}),[p]),e.useEffect((function(){if(null!==j.current){var e=new r(j.current,o(o({dragMode:u},C),{ready:function(e){null!==e.currentTarget&&function(e,r){void 0===r&&(r={});var o=r.enable,t=void 0===o||o,n=r.scaleX,a=void 0===n?1:n,c=r.scaleY,i=void 0===c?1:c,l=r.zoomTo,s=void 0===l?0:l,u=r.rotateTo;t?e.enable():e.disable(),e.scaleX(a),e.scaleY(i),void 0!==u&&e.rotateTo(u),s>0&&e.zoomTo(s)}(e.currentTarget.cropper,w),z&&z(e)}}));x&&x(e)}return function(){var e,r;null===(r=null===(e=j.current)||void 0===e?void 0:e.cropper)||void 0===r||r.destroy()}}),[j]);var E=function(e){return n.reduce((function(e,r){var o=e,n=r;return o[n],t(o,["symbol"==typeof n?n:n+""])}),e)}(o(o({},C),{crossOrigin:v,src:p,alt:T}));return e.createElement("div",{style:d,className:f},e.createElement("img",o({},E,{style:a,ref:j})))}));exports.Cropper=c,exports.default=c;