@idea-fragments/react-components-zendesk 0.1.46 → 0.1.47

package/dist/media.js

@@ -363,7 +363,7 @@ return;}var point=Cropper.getMousePoint(e);var newZoom=_this.gestureZoomStart-1+
 var restrictedPosition=_this.props.restrictPosition?restrictPosition(_this.props.crop,_this.mediaSize,_this.state.cropSize,_this.props.zoom,_this.props.rotation):_this.props.crop;return computeCroppedArea(restrictedPosition,_this.mediaSize,_this.state.cropSize,_this.getAspect(),_this.props.zoom,_this.props.rotation,_this.props.restrictPosition);};_this.emitCropData=function(){var cropData=_this.getCropData();if(!cropData)return;var croppedAreaPercentages=cropData.croppedAreaPercentages,croppedAreaPixels=cropData.croppedAreaPixels;if(_this.props.onCropComplete){_this.props.onCropComplete(croppedAreaPercentages,croppedAreaPixels);}if(_this.props.onCropAreaChange){_this.props.onCropAreaChange(croppedAreaPercentages,croppedAreaPixels);}};_this.emitCropAreaChange=function(){var cropData=_this.getCropData();if(!cropData)return;var croppedAreaPercentages=cropData.croppedAreaPercentages,croppedAreaPixels=cropData.croppedAreaPixels;if(_this.props.onCropAreaChange){_this.props.onCropAreaChange(croppedAreaPercentages,croppedAreaPixels);}};_this.recomputeCropPosition=function(){if(!_this.state.cropSize)return;var newPosition=_this.props.restrictPosition?restrictPosition(_this.props.crop,_this.mediaSize,_this.state.cropSize,_this.props.zoom,_this.props.rotation):_this.props.crop;_this.props.onCropChange(newPosition);_this.emitCropData();};return _this;}Cropper.prototype.componentDidMount=function(){if(!this.currentDoc||!this.currentWindow)return;if(this.containerRef){if(this.containerRef.ownerDocument){this.currentDoc=this.containerRef.ownerDocument;}if(this.currentDoc.defaultView){this.currentWindow=this.currentDoc.defaultView;}this.initResizeObserver();// only add window resize listener if ResizeObserver is not supported. Otherwise, it would be redundant
 if(typeof window.ResizeObserver==='undefined'){this.currentWindow.addEventListener('resize',this.computeSizes);}this.props.zoomWithScroll&&this.containerRef.addEventListener('wheel',this.onWheel,{passive:false});this.containerRef.addEventListener('gesturestart',this.onGestureStart);}if(!this.props.disableAutomaticStylesInjection){this.styleRef=this.currentDoc.createElement('style');this.styleRef.setAttribute('type','text/css');if(this.props.nonce){this.styleRef.setAttribute('nonce',this.props.nonce);}this.styleRef.innerHTML=css_248z;this.currentDoc.head.appendChild(this.styleRef);}// when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
 if(this.imageRef.current&&this.imageRef.current.complete){this.onMediaLoad();}// set image and video refs in the parent if the callbacks exist
-if(this.props.setImageRef){this.props.setImageRef(this.imageRef);}if(this.props.setVideoRef){this.props.setVideoRef(this.videoRef);}};Cropper.prototype.componentWillUnmount=function(){var _a,_b;if(!this.currentDoc||!this.currentWindow)return;if(typeof window.ResizeObserver==='undefined'){this.currentWindow.removeEventListener('resize',this.computeSizes);}(_a=this.resizeObserver)===null||_a===void 0?void 0:_a.disconnect();if(this.containerRef){this.containerRef.removeEventListener('gesturestart',this.preventZoomSafari);}if(this.styleRef){(_b=this.styleRef.parentNode)===null||_b===void 0?void 0:_b.removeChild(this.styleRef);}this.cleanEvents();this.props.zoomWithScroll&&this.clearScrollEvent();};Cropper.prototype.componentDidUpdate=function(prevProps){var _a,_b,_c,_d,_e,_f,_g,_h,_j;if(prevProps.rotation!==this.props.rotation){this.computeSizes();this.recomputeCropPosition();}else if(prevProps.aspect!==this.props.aspect){this.computeSizes();}else if(prevProps.zoom!==this.props.zoom){this.recomputeCropPosition();}else if(((_a=prevProps.cropSize)===null||_a===void 0?void 0:_a.height)!==((_b=this.props.cropSize)===null||_b===void 0?void 0:_b.height)||((_c=prevProps.cropSize)===null||_c===void 0?void 0:_c.width)!==((_d=this.props.cropSize)===null||_d===void 0?void 0:_d.width)){this.computeSizes();}else if(((_e=prevProps.crop)===null||_e===void 0?void 0:_e.x)!==((_f=this.props.crop)===null||_f===void 0?void 0:_f.x)||((_g=prevProps.crop)===null||_g===void 0?void 0:_g.y)!==((_h=this.props.crop)===null||_h===void 0?void 0:_h.y)){this.emitCropAreaChange();}if(prevProps.zoomWithScroll!==this.props.zoomWithScroll&&this.containerRef){this.props.zoomWithScroll?this.containerRef.addEventListener('wheel',this.onWheel,{passive:false}):this.clearScrollEvent();}if(prevProps.video!==this.props.video){(_j=this.videoRef.current)===null||_j===void 0?void 0:_j.load();}};Cropper.prototype.getAspect=function(){var _a=this.props,cropSize=_a.cropSize,aspect=_a.aspect;if(cropSize){return cropSize.width/cropSize.height;}return aspect;};Cropper.prototype.onPinchStart=function(e){var pointA=Cropper.getTouchPoint(e.touches[0]);var pointB=Cropper.getTouchPoint(e.touches[1]);this.lastPinchDistance=getDistanceBetweenPoints(pointA,pointB);this.lastPinchRotation=getRotationBetweenPoints(pointA,pointB);this.onDragStart(getCenter(pointA,pointB));};Cropper.prototype.onPinchMove=function(e){var _this=this;if(!this.currentDoc||!this.currentWindow)return;var pointA=Cropper.getTouchPoint(e.touches[0]);var pointB=Cropper.getTouchPoint(e.touches[1]);var center=getCenter(pointA,pointB);this.onDrag(center);if(this.rafPinchTimeout)this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);this.rafPinchTimeout=this.currentWindow.requestAnimationFrame(function(){var distance=getDistanceBetweenPoints(pointA,pointB);var newZoom=_this.props.zoom*(distance/_this.lastPinchDistance);_this.setNewZoom(newZoom,center,{shouldUpdatePosition:false});_this.lastPinchDistance=distance;var rotation=getRotationBetweenPoints(pointA,pointB);var newRotation=_this.props.rotation+(rotation-_this.lastPinchRotation);_this.props.onRotationChange&&_this.props.onRotationChange(newRotation);_this.lastPinchRotation=rotation;});};Cropper.prototype.render=function(){var _this=this;var _a=this.props,image=_a.image,video=_a.video,mediaProps=_a.mediaProps,transform=_a.transform,_b=_a.crop,x=_b.x,y=_b.y,rotation=_a.rotation,zoom=_a.zoom,cropShape=_a.cropShape,showGrid=_a.showGrid,_c=_a.style,containerStyle=_c.containerStyle,cropAreaStyle=_c.cropAreaStyle,mediaStyle=_c.mediaStyle,_d=_a.classes,containerClassName=_d.containerClassName,cropAreaClassName=_d.cropAreaClassName,mediaClassName=_d.mediaClassName,objectFit=_a.objectFit;return React__default__default["default"].createElement("div",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,ref:function ref(el){return _this.containerRef=el;},"data-testid":"container",style:containerStyle,className:classNames('reactEasyCrop_Container',containerClassName)},image?React__default__default["default"].createElement("img",__assign$1({alt:"",className:classNames('reactEasyCrop_Image',objectFit==='contain'&&'reactEasyCrop_Contain',objectFit==='horizontal-cover'&&'reactEasyCrop_Cover_Horizontal',objectFit==='vertical-cover'&&'reactEasyCrop_Cover_Vertical',objectFit==='auto-cover'&&(this.mediaSize.naturalWidth>this.mediaSize.naturalHeight?'reactEasyCrop_Cover_Horizontal':'reactEasyCrop_Cover_Vertical'),mediaClassName)},mediaProps,{src:image,ref:this.imageRef,style:__assign$1(__assign$1({},mediaStyle),{transform:transform||"translate(".concat(x,"px, ").concat(y,"px) rotate(").concat(rotation,"deg) scale(").concat(zoom,")")}),onLoad:this.onMediaLoad})):video&&React__default__default["default"].createElement("video",__assign$1({autoPlay:true,loop:true,muted:true,className:classNames('reactEasyCrop_Video',objectFit==='contain'&&'reactEasyCrop_Contain',objectFit==='horizontal-cover'&&'reactEasyCrop_Cover_Horizontal',objectFit==='vertical-cover'&&'reactEasyCrop_Cover_Vertical',objectFit==='auto-cover'&&(this.mediaSize.naturalWidth>this.mediaSize.naturalHeight?'reactEasyCrop_Cover_Horizontal':'reactEasyCrop_Cover_Vertical'),mediaClassName)},mediaProps,{ref:this.videoRef,onLoadedMetadata:this.onMediaLoad,style:__assign$1(__assign$1({},mediaStyle),{transform:transform||"translate(".concat(x,"px, ").concat(y,"px) rotate(").concat(rotation,"deg) scale(").concat(zoom,")")}),controls:false}),(Array.isArray(video)?video:[{src:video}]).map(function(item){return React__default__default["default"].createElement("source",__assign$1({key:item.src},item));})),this.state.cropSize&&React__default__default["default"].createElement("div",{style:__assign$1(__assign$1({},cropAreaStyle),{width:this.state.cropSize.width,height:this.state.cropSize.height}),"data-testid":"cropper",className:classNames('reactEasyCrop_CropArea',cropShape==='round'&&'reactEasyCrop_CropAreaRound',showGrid&&'reactEasyCrop_CropAreaGrid',cropAreaClassName)}));};Cropper.defaultProps={zoom:1,rotation:0,aspect:4/3,maxZoom:MAX_ZOOM,minZoom:MIN_ZOOM,cropShape:'rect',objectFit:'contain',showGrid:true,style:{},classes:{},mediaProps:{},zoomSpeed:1,restrictPosition:true,zoomWithScroll:true};Cropper.getMousePoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)};};Cropper.getTouchPoint=function(touch){return{x:Number(touch.clientX),y:Number(touch.clientY)};};return Cropper;}(React__default__default["default"].Component);var CroppedVideoPlayer=styled__default["default"](function(_a){var _b;var onLoad=_a.onLoad,videoData=_a.videoData;var _c=__read(React__default.useState({x:0,y:0}),2),crop=_c[0],setCrop=_c[1];return jsxRuntime.jsx(Container$5,{children:jsxRuntime.jsx(Cropper,{aspect:1,crop:crop,initialCroppedAreaPixels:videoData.cropAreaPx,objectFit:"vertical-cover",onCropChange:setCrop,onMediaLoaded:onLoad,onTouchRequest:function(){return false;},onWheelRequest:function(){return false;},showGrid:false,video:videoData.dataURL,zoom:(_b=videoData.cropScale)!==null&&_b!==void 0?_b:1})});})(templateObject_1$c||(templateObject_1$c=__makeTemplateObject(["",""],["",""])),function(_a){var _css=_a._css;return _css;});var Container$5=styled__default["default"].div(templateObject_2$9||(templateObject_2$9=__makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  &&&& {\n    .reactEasyCrop_CropArea {\n      border: none;\n      box-shadow: none;\n      pointer-events: none;\n    }\n  }\n"],["\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  &&&& {\n    .reactEasyCrop_CropArea {\n      border: none;\n      box-shadow: none;\n      pointer-events: none;\n    }\n  }\n"])));var templateObject_1$c,templateObject_2$9;var propTypes$1={exports:{}};var reactIs={exports:{}};var reactIs_production_min={};/** @license React v16.13.1
+if(this.props.setImageRef){this.props.setImageRef(this.imageRef);}if(this.props.setVideoRef){this.props.setVideoRef(this.videoRef);}};Cropper.prototype.componentWillUnmount=function(){var _a,_b;if(!this.currentDoc||!this.currentWindow)return;if(typeof window.ResizeObserver==='undefined'){this.currentWindow.removeEventListener('resize',this.computeSizes);}(_a=this.resizeObserver)===null||_a===void 0?void 0:_a.disconnect();if(this.containerRef){this.containerRef.removeEventListener('gesturestart',this.preventZoomSafari);}if(this.styleRef){(_b=this.styleRef.parentNode)===null||_b===void 0?void 0:_b.removeChild(this.styleRef);}this.cleanEvents();this.props.zoomWithScroll&&this.clearScrollEvent();};Cropper.prototype.componentDidUpdate=function(prevProps){var _a,_b,_c,_d,_e,_f,_g,_h,_j;if(prevProps.rotation!==this.props.rotation){this.computeSizes();this.recomputeCropPosition();}else if(prevProps.aspect!==this.props.aspect){this.computeSizes();}else if(prevProps.zoom!==this.props.zoom){this.recomputeCropPosition();}else if(((_a=prevProps.cropSize)===null||_a===void 0?void 0:_a.height)!==((_b=this.props.cropSize)===null||_b===void 0?void 0:_b.height)||((_c=prevProps.cropSize)===null||_c===void 0?void 0:_c.width)!==((_d=this.props.cropSize)===null||_d===void 0?void 0:_d.width)){this.computeSizes();}else if(((_e=prevProps.crop)===null||_e===void 0?void 0:_e.x)!==((_f=this.props.crop)===null||_f===void 0?void 0:_f.x)||((_g=prevProps.crop)===null||_g===void 0?void 0:_g.y)!==((_h=this.props.crop)===null||_h===void 0?void 0:_h.y)){this.emitCropAreaChange();}if(prevProps.zoomWithScroll!==this.props.zoomWithScroll&&this.containerRef){this.props.zoomWithScroll?this.containerRef.addEventListener('wheel',this.onWheel,{passive:false}):this.clearScrollEvent();}if(prevProps.video!==this.props.video){(_j=this.videoRef.current)===null||_j===void 0?void 0:_j.load();}};Cropper.prototype.getAspect=function(){var _a=this.props,cropSize=_a.cropSize,aspect=_a.aspect;if(cropSize){return cropSize.width/cropSize.height;}return aspect;};Cropper.prototype.onPinchStart=function(e){var pointA=Cropper.getTouchPoint(e.touches[0]);var pointB=Cropper.getTouchPoint(e.touches[1]);this.lastPinchDistance=getDistanceBetweenPoints(pointA,pointB);this.lastPinchRotation=getRotationBetweenPoints(pointA,pointB);this.onDragStart(getCenter(pointA,pointB));};Cropper.prototype.onPinchMove=function(e){var _this=this;if(!this.currentDoc||!this.currentWindow)return;var pointA=Cropper.getTouchPoint(e.touches[0]);var pointB=Cropper.getTouchPoint(e.touches[1]);var center=getCenter(pointA,pointB);this.onDrag(center);if(this.rafPinchTimeout)this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);this.rafPinchTimeout=this.currentWindow.requestAnimationFrame(function(){var distance=getDistanceBetweenPoints(pointA,pointB);var newZoom=_this.props.zoom*(distance/_this.lastPinchDistance);_this.setNewZoom(newZoom,center,{shouldUpdatePosition:false});_this.lastPinchDistance=distance;var rotation=getRotationBetweenPoints(pointA,pointB);var newRotation=_this.props.rotation+(rotation-_this.lastPinchRotation);_this.props.onRotationChange&&_this.props.onRotationChange(newRotation);_this.lastPinchRotation=rotation;});};Cropper.prototype.render=function(){var _this=this;var _a=this.props,image=_a.image,video=_a.video,mediaProps=_a.mediaProps,transform=_a.transform,_b=_a.crop,x=_b.x,y=_b.y,rotation=_a.rotation,zoom=_a.zoom,cropShape=_a.cropShape,showGrid=_a.showGrid,_c=_a.style,containerStyle=_c.containerStyle,cropAreaStyle=_c.cropAreaStyle,mediaStyle=_c.mediaStyle,_d=_a.classes,containerClassName=_d.containerClassName,cropAreaClassName=_d.cropAreaClassName,mediaClassName=_d.mediaClassName,objectFit=_a.objectFit;return React__default__default["default"].createElement("div",{onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart,ref:function ref(el){return _this.containerRef=el;},"data-testid":"container",style:containerStyle,className:classNames('reactEasyCrop_Container',containerClassName)},image?React__default__default["default"].createElement("img",__assign$1({alt:"",className:classNames('reactEasyCrop_Image',objectFit==='contain'&&'reactEasyCrop_Contain',objectFit==='horizontal-cover'&&'reactEasyCrop_Cover_Horizontal',objectFit==='vertical-cover'&&'reactEasyCrop_Cover_Vertical',objectFit==='auto-cover'&&(this.mediaSize.naturalWidth>this.mediaSize.naturalHeight?'reactEasyCrop_Cover_Horizontal':'reactEasyCrop_Cover_Vertical'),mediaClassName)},mediaProps,{src:image,ref:this.imageRef,style:__assign$1(__assign$1({},mediaStyle),{transform:transform||"translate(".concat(x,"px, ").concat(y,"px) rotate(").concat(rotation,"deg) scale(").concat(zoom,")")}),onLoad:this.onMediaLoad})):video&&React__default__default["default"].createElement("video",__assign$1({autoPlay:true,loop:true,muted:true,className:classNames('reactEasyCrop_Video',objectFit==='contain'&&'reactEasyCrop_Contain',objectFit==='horizontal-cover'&&'reactEasyCrop_Cover_Horizontal',objectFit==='vertical-cover'&&'reactEasyCrop_Cover_Vertical',objectFit==='auto-cover'&&(this.mediaSize.naturalWidth>this.mediaSize.naturalHeight?'reactEasyCrop_Cover_Horizontal':'reactEasyCrop_Cover_Vertical'),mediaClassName)},mediaProps,{ref:this.videoRef,onLoadedMetadata:this.onMediaLoad,style:__assign$1(__assign$1({},mediaStyle),{transform:transform||"translate(".concat(x,"px, ").concat(y,"px) rotate(").concat(rotation,"deg) scale(").concat(zoom,")")}),controls:false}),(Array.isArray(video)?video:[{src:video}]).map(function(item){return React__default__default["default"].createElement("source",__assign$1({key:item.src},item));})),this.state.cropSize&&React__default__default["default"].createElement("div",{style:__assign$1(__assign$1({},cropAreaStyle),{width:this.state.cropSize.width,height:this.state.cropSize.height}),"data-testid":"cropper",className:classNames('reactEasyCrop_CropArea',cropShape==='round'&&'reactEasyCrop_CropAreaRound',showGrid&&'reactEasyCrop_CropAreaGrid',cropAreaClassName)}));};Cropper.defaultProps={zoom:1,rotation:0,aspect:4/3,maxZoom:MAX_ZOOM,minZoom:MIN_ZOOM,cropShape:'rect',objectFit:'contain',showGrid:true,style:{},classes:{},mediaProps:{},zoomSpeed:1,restrictPosition:true,zoomWithScroll:true};Cropper.getMousePoint=function(e){return{x:Number(e.clientX),y:Number(e.clientY)};};Cropper.getTouchPoint=function(touch){return{x:Number(touch.clientX),y:Number(touch.clientY)};};return Cropper;}(React__default__default["default"].Component);var CroppedVideoPlayer=styled__default["default"](function(_a){var _b;var onLoad=_a.onLoad,videoData=_a.videoData;var _c=__read(React__default.useState({x:0,y:0}),2),crop=_c[0],setCrop=_c[1];var _d=__read(React__default.useState("vertical-cover"),2),objectFit=_d[0],setObjectFit=_d[1];var processLoadedMedia=React__default.useCallback(function(_a){var naturalHeight=_a.naturalHeight,naturalWidth=_a.naturalWidth;setObjectFit(naturalHeight>=naturalWidth?"horizontal-cover":"vertical-cover");onLoad===null||onLoad===void 0?void 0:onLoad();},[onLoad]);return jsxRuntime.jsx(Container$5,{children:jsxRuntime.jsx(Cropper,{aspect:1,crop:crop,initialCroppedAreaPixels:videoData.cropAreaPx,objectFit:objectFit,onCropChange:setCrop,onMediaLoaded:processLoadedMedia,onTouchRequest:function(){return false;},onWheelRequest:function(){return false;},showGrid:false,video:videoData.dataURL,zoom:(_b=videoData.cropScale)!==null&&_b!==void 0?_b:1})});})(templateObject_1$c||(templateObject_1$c=__makeTemplateObject(["",""],["",""])),function(_a){var _css=_a._css;return _css;});var Container$5=styled__default["default"].div(templateObject_2$9||(templateObject_2$9=__makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  &&&& {\n    .reactEasyCrop_CropArea {\n      border: none;\n      box-shadow: none;\n      pointer-events: none;\n    }\n  }\n"],["\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  &&&& {\n    .reactEasyCrop_CropArea {\n      border: none;\n      box-shadow: none;\n      pointer-events: none;\n    }\n  }\n"])));var templateObject_1$c,templateObject_2$9;var propTypes$1={exports:{}};var reactIs={exports:{}};var reactIs_production_min={};/** @license React v16.13.1
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.