From cf0f164efb2635e4cb3a2f0d2c975e1dbb6acab2 Mon Sep 17 00:00:00 2001 From: Daniel Salvagni Date: Thu, 7 Oct 2021 10:58:53 +0200 Subject: [PATCH] new dist --- dist/ProfilePicture.css | 2 +- dist/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/ProfilePicture.css b/dist/ProfilePicture.css index 7eb590a..91f060c 100644 --- a/dist/ProfilePicture.css +++ b/dist/ProfilePicture.css @@ -1,4 +1,4 @@ .YpD9o6H9LydyYmaPWOwt{position:absolute;left:0px;right:0px;top:0;bottom:0;color:#23395B;text-align:center;z-index:3;user-select:none;background:#FFF}._6IMSWtd3wtGGn2KgOcZIK{position:absolute;left:5px;right:5px;top:50%;transform:translateY(-50%)}.fe6xZVPr1kb0CJksW39zV{padding:0;font-size:0.9em}.eXEoGG26iwSi6UiZD8FI6{width:100%;position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:inherit} +._2oSbenaQCQZPXOD75Sj6nE{overflow:hidden;position:relative;border:1px solid #00B2CA;margin:0 auto;z-index:1}._2D3XigQoPKPCPCHAaOtqJP{border-radius:50%}._3m334JNOLa1lrKCCrXnNDG{border-radius:4px}._2oSbenaQCQZPXOD75Sj6nE img{display:none;user-select:none;position:relative} ._1Fq_tZ_l7SwH_r_a_SNOtA{position:relative;font-family:sans-serif;font-size:85%}._1zaTZoyOruLA27LomLt6fx ._34KU8GIMgtEHCcQX2pjZJE,._1KYh_YChgsCwB4c5gd4q1k ._34KU8GIMgtEHCcQX2pjZJE,._1Sok0Akre9PW5C22TIkrKD ._34KU8GIMgtEHCcQX2pjZJE{cursor:pointer}._1PTKmYTPmkH41HyPQ6Yp1q ._34KU8GIMgtEHCcQX2pjZJE,._1PTKmYTPmkH41HyPQ6Yp1q ._33ob_2Sxjrzz9VgWuEn9xb{cursor:move}._2Y6QsytFkIen8EZ8qRminO{display:none}._1Fq_tZ_l7SwH_r_a_SNOtA ._3pDZ7o2d3BEKT7GOFhs90M{text-align:center;margin-bottom:15px auto}._1Fq_tZ_l7SwH_r_a_SNOtA ._1Ou1tAFc1VCD4TNa0XwE7z{position:relative;background-repeat:no-repeat;background-color:transparent;padding:10% 0;user-select:none}._1Fq_tZ_l7SwH_r_a_SNOtA .GNSzzq7thIGJvQKQMnUF4{height:40px}._1Fq_tZ_l7SwH_r_a_SNOtA ._34iiqkc-jTKb3N7DvLLkwC{width:85%;vertical-align:middle;display:inline-block}._1Fq_tZ_l7SwH_r_a_SNOtA ._10Kns8R3VdHSGFrESIz-4B{text-align:center;width:15%;vertical-align:middle;display:inline-block}._1Fq_tZ_l7SwH_r_a_SNOtA ._1YelFC_KTV9aLijs9ogXcQ{background:transparent;border:0;cursor:pointer}._1DghVSjROos1S_s0jPt9TQ{cursor:move}._1DghVSjROos1S_s0jPt9TQ,._33ob_2Sxjrzz9VgWuEn9xb{position:absolute;top:0;left:0;right:0;bottom:0}._33ob_2Sxjrzz9VgWuEn9xb{width:100%;height:100%} -._2oSbenaQCQZPXOD75Sj6nE{overflow:hidden;position:relative;border:1px solid #00B2CA;margin:0 auto}._2D3XigQoPKPCPCHAaOtqJP{border-radius:50%}._3m334JNOLa1lrKCCrXnNDG{border-radius:4px}._2oSbenaQCQZPXOD75Sj6nE img{display:none;user-select:none;position:relative} ._1MKAF96uXJHSW-a1nWoriQ{position:relative;width:90%;margin:10px auto}.kWobJZ5IBLVJtFBD9JHAQ{-webkit-appearance:none;display:block;margin:0 auto;width:calc(100% - 40px);height:18px;background:transparent}.kWobJZ5IBLVJtFBD9JHAQ:focus::-ms-thumb{border-color:#23395B;box-shadow:0 0 1px 0px #23395B}.kWobJZ5IBLVJtFBD9JHAQ::-webkit-slider-thumb{-webkit-appearance:none}.kWobJZ5IBLVJtFBD9JHAQ::-moz-range-thumb{border-color:#23395B;box-shadow:0 0 1px 0px #23395B}.kWobJZ5IBLVJtFBD9JHAQ::-webkit-slider-thumb{border-color:#23395B;box-shadow:0 0 1px 0px #23395B;-webkit-appearance:none;margin-top:-9px;box-sizing:border-box;cursor:pointer;width:18px;height:18px;display:block;border-radius:50%;background:#eee;border:1px solid #23395B}.kWobJZ5IBLVJtFBD9JHAQ::-webkit-slider-thumb:hover{border-color:#3f67a5}.kWobJZ5IBLVJtFBD9JHAQ::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.kWobJZ5IBLVJtFBD9JHAQ::-ms-thumb{margin-top:0;box-sizing:border-box;cursor:pointer;width:18px;height:18px;display:block;border-radius:50%;background:#eee;border:1px solid #23395B}.kWobJZ5IBLVJtFBD9JHAQ::-ms-thumb:hover{border-color:#070b11}.kWobJZ5IBLVJtFBD9JHAQ::-moz-range-thumb{margin-top:0;box-sizing:border-box;cursor:pointer;width:18px;height:18px;display:block;border-radius:50%;background:#eee;border:1px solid #23395B}.kWobJZ5IBLVJtFBD9JHAQ::-moz-range-thumb::-moz-range-thumb:hover{border-color:#070b11}.kWobJZ5IBLVJtFBD9JHAQ::-webkit-slider-runnable-track{width:100%;height:1px;cursor:pointer;background:#eee;border:0}.kWobJZ5IBLVJtFBD9JHAQ::-moz-range-track{width:100%;height:1px;cursor:pointer;background:#eee;border:0}.kWobJZ5IBLVJtFBD9JHAQ::-ms-track{width:100%;height:1px;cursor:pointer;background:#eee;border:0}._23VzqtDiBsdmyddgDcP2FF,._2JJI18xT4B0iIKyuZLMpk9{position:absolute;transition:color 0.3s ease;fill:#23395B}._23VzqtDiBsdmyddgDcP2FF{left:-12px;top:0px}._2JJI18xT4B0iIKyuZLMpk9{right:-13px;top:-1px}._3L1oDMFmgTzTs8MCYm-pXt{fill:#a2b8db} diff --git a/dist/index.js b/dist/index.js index 59e9107..6fd841c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -module.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=4)}([function(e,t){e.exports=require("react")},function(e,t,a){e.exports=a(5)()},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=i(a(0)),n=i(a(1)),o=i(a(10));function i(e){return e&&e.__esModule?e:{default:e}}var s=function(e){var t={svg:{display:"inline-block",verticalAlign:"middle"},path:{fill:e.color,strokeWidth:e.strokeWidth}},a=o.default[e.name],n=["Icon Icon--"+e.name,e.className];return r.default.createElement("svg",{className:n.join(" "),style:t.svg,width:e.size+"px",height:e.size+"px",viewBox:"0 0 80 80"},r.default.createElement("path",{style:t.path,d:a}))};s.propTypes={name:n.default.string.isRequired,size:n.default.number,color:n.default.string,strokeWidth:n.default.string},s.defaultProps={size:16},t.default=s},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default={EMPTY:"EMPTY",LOADING:"LOADING",DRAGOVER:"DRAGOVER",INVALID_FILE_TYPE:"INVALID_FILE_TYPE",INVALID_IMAGE_SIZE:"INVALID_IMAGE_SIZE",LOADED:"LOADED"}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:d.default.EMPTY,t=r({},this.state);t.status=e,this.setState(t),this.props.onStatusChange.call(this,e),this.debug("[setStatus]",{status:e})}},{key:"dragStart",value:function(e){this.dragging=!0,this.draggingPosition.clientX=e.clientX,this.draggingPosition.clientY=e.clientY,e.touches&&(this.draggingPosition.clientX=e.touches[0].clientX,this.draggingPosition.clientY=e.touches[0].clientY),this.draggingPosition.x=this.draggingPosition.clientX-this.state.imageData.imageX,this.draggingPosition.y=this.draggingPosition.clientY-this.state.imageData.imageY,this.debug("[dragStart]",{draggingPosition:this.draggingPosition})}},{key:"onMovingEnd",value:function(){this.dragging=!1,this.debug("[mouseup, touchend]")}},{key:"onMoving",value:function(e){if(this.dragging){e.preventDefault();var t=r({},this.state),a=r({},t.imageData),n=!1;this.draggingPosition.clientX=e.clientX,this.draggingPosition.clientY=e.clientY,e.touches&&(this.draggingPosition.clientX=e.touches[0].clientX,this.draggingPosition.clientY=e.touches[0].clientY);var o=this.draggingPosition.clientY-this.draggingPosition.y,i=this.draggingPosition.clientX-this.draggingPosition.x;i=Math.min(i,0),o=Math.min(o,0),this.allowHorizontal()&&a.imageWidth+i>=this.props.cropSize&&(a.imageX=i,n=!0),this.allowVertical()&&a.imageHeight+o>=this.props.cropSize&&(a.imageY=o,n=!0),n&&(t.imageData=a,this.setState(t,this.renderImage.bind(this)),this.debug("[mousemove, touchstart]",r({},a,{refresh:n})))}}},{key:"registerImageEvents",value:function(){var e=this;["mouseup","touchend"].forEach((function(t){window.addEventListener(t,e.onMovingEnd,!1)})),["mousemove","touchmove"].forEach((function(t){window.addEventListener(t,e.onMoving,!1)}))}},{key:"handleDragOut",value:function(){this.setStatus(d.default.EMPTY),this.debug("[handleDragOut]")}},{key:"handleDragOver",value:function(){this.setStatus(d.default.DRAGOVER),this.debug("[handleDragOver]")}},{key:"handleZoom",value:function(e){this.scaleImage(Number(e.target.value)),this.props.onZoomChange.call(this,{zoom:e.target.value}),this.debug("[handleZoom]",{zoom:e.target.value})}},{key:"handleFileChange",value:function(e){this.readFile(e.target.files[0]),e.target.value="",this.debug("[handleFileChange]",{file:e.target.files[0]})}},{key:"handleTapToSelect",value:function(){this.inputFileRef.current.click(),this.debug("[handleTapToSelect]")}},{key:"handleOnDrop",value:function(e){this.readFile(e),this.debug("[handleOnDrop]",{file:e})}},{key:"handleRemove",value:function(){this.resetState(),this.props.onImageRemoved.call(this),this.debug("[onImageRemoved]")}},{key:"allowHorizontal",value:function(){return!this.props.constraints||"horizontal"===this.props.constraints}},{key:"allowVertical",value:function(){return!this.props.constraints||"vertical"===this.props.constraints}},{key:"readFile",value:function(e){var t=this;this.setStatus(d.default.LOADING),(0,h.fileReader)(e,{onLoadStart:function(){t.props.onImageLoading.call(t),t.debug("[onLoadStart]")},onError:function(e){t.props.onError.call(t),t.onError(e),t.debug("[onLoadStart]",{error:e})},onLoadEnd:function(a){var n=a.base64Image,o=r({},t.state);o.file=e,t.setState(o),t.processFile(n),t.debug("[onLoadEnd]",{data:a})}})}},{key:"processFile",value:function(e){var t=this;(0,g.processFile)(e,{minImageSize:this.props.minImageSize,maxImageSize:this.props.maxImageSize,onLoad:function(a){t.onImageDataLoaded(e,a),t.debug("[onLoad]",{data:a})},onError:function(e){t.props.onError.call(t),t.onError(e),t.debug("[onError]",{error:e})}})}},{key:"onImageDataLoaded",value:function(e,t){var a=r({},this.state);a.loadedData=t;var n=this.props,o=n.cropSize,i=n.minZoom,s=n.maxZoom,u=(0,v.fitToFrame)({cropSize:o,imageWidth:t.imageWidth,imageHeight:t.imageHeight,minZoom:i,maxZoom:s}),l=(0,v.centerImage)({cropSize:o,imageWidth:u.imageWidth,imageHeight:u.imageHeight,imageX:u.imageX,imageY:u.imageY});u.imageX=l.imageX,u.imageY=l.imageY,u.imageSrc=t.imageSrc,a.imageData=u,a.status=d.default.LOADED,this.setState(a,this.renderImage.bind(this)),this.props.onImageLoaded.call(this,{data:t}),this.debug("[onImageLoaded]",{data:t})}},{key:"scaleImage",value:function(e){var t=r({},this.state),a=r({},t.imageData),n=r({},t.loadedData),o=(0,v.scaleImage)(r({},a,{zoom:e,originalWidth:n.originalImageWidth,originalHeight:n.originalImageHeight,cropSize:this.props.cropSize}));t.imageData=r({},a,o,{zoom:e}),this.setState(t,this.renderImage.bind(this)),this.debug("[scaleImage]",{zoom:e,data:t.imageData})}},{key:"renderImage",value:function(){var e=this;if((0,_.renderToCanvas)(r({canvas:this.canvasRef.current,cropSize:this.props.cropSize,onError:function(t){e.onError(t),e.props.onError.call(e,t)}},this.state.imageData)),this.props.useHelper){var t=this.frameRef.current,a=t.offsetLeft,n=t.offsetTop,o=this.photoHelperRef.current,i=o.clientWidth,s=o.clientHeight;(0,_.updateHelper)(r({canvas:this.helperRef.current,cropSize:this.props.cropSize,onError:function(t){e.onError(t),e.props.onError.bind(e)},frameTop:n,frameLeft:a,canvasWidth:i,canvasHeight:s},this.state.imageData))}this.props.onImagePropertiesChange.bind(this,{data:r({},this.state.imageData)}),this.debug("[scalrenderImageeImage]",{data:r({},this.state.imagesData)})}},{key:"renderMessages",value:function(){switch(this.state.status){case d.default.EMPTY:case d.default.INVALID_FILE_TYPE:case d.default.INVALID_IMAGE_SIZE:return i.default.createElement(u.default,{onClick:this.handleTapToSelect.bind(this)},(0,p.default)(this.props.messages,this.state.status));case d.default.LOADED:return null;default:return i.default.createElement(u.default,null,(0,p.default)(this.props.messages,this.state.status))}}},{key:"onError",value:function(e){this.setStatus(e.error)}},{key:"getImageAsDataUrl",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return this.canvasRef.current.toDataURL(e)}},{key:"getData",value:function(){return r({},this.state.imageData)}},{key:"setImage",value:function(e){this.readFile(e)}},{key:"debug",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.props.debug&&console.log(e,r({},t))}},{key:"render",value:function(){var e=[b.default["profile-picture"],b.default["profile-picture--"+this.state.status]];return i.default.createElement("div",{className:e.join(" ")},i.default.createElement("div",{className:b.default["profile-picture__photo"]},i.default.createElement("div",{className:b.default.photo__helper,onMouseDown:this.props.useHelper?this.dragStart.bind(this):null,onTouchStart:this.props.useHelper?this.dragStart.bind(this):null,ref:this.photoHelperRef},i.default.createElement(f.default,{onDrop:this.handleOnDrop.bind(this),onDragOver:this.handleDragOver.bind(this),onDragOut:this.handleDragOut.bind(this)},this.props.useHelper?i.default.createElement("canvas",{className:b.default["profile-picture__canvas-helper"],ref:this.helperRef}):null,i.default.createElement(l.default,{frameRef:this.frameRef,size:this.props.cropSize,format:this.props.frameFormat},i.default.createElement("canvas",{onMouseDown:this.props.useHelper?null:this.dragStart.bind(this),onTouchStart:this.props.useHelper?null:this.dragStart.bind(this),width:this.props.cropSize,height:this.props.cropSize,className:b.default["profile-picture__canvas"],ref:this.canvasRef}),this.renderMessages()))),i.default.createElement("div",{className:b.default.photo__options},this.state.status===d.default.LOADED?i.default.createElement(o.Fragment,null,i.default.createElement("div",{className:b.default.options__zoom},i.default.createElement(c.default,{min:this.state.imageData.minZoom,max:this.state.imageData.maxZoom,value:this.state.imageData.zoom,onChange:this.handleZoom.bind(this)})),i.default.createElement("div",{className:b.default.options__remove},i.default.createElement("button",{className:b.default.remove__button,onClick:this.handleRemove.bind(this)},i.default.createElement(m.default,{name:"trash",size:20})))):null)),i.default.createElement("input",{className:b.default["profile-picture__input"],type:"file",accept:"image/jpg,image/jpeg,image/png,image/bmp,image/gif",ref:this.inputFileRef,onChange:this.handleFileChange.bind(this)}))}}]),t}(o.Component);y.propTypes={image:s.default.string,frameSize:s.default.number.isRequired,frameFormat:s.default.oneOf(["circle","square","rounded-square"]),cropSize:s.default.number.isRequired,minZoom:s.default.number.isRequired,maxZoom:s.default.number.isRequired,minImageSize:s.default.number.isRequired,maxImageSize:s.default.number.isRequired,useHelper:s.default.bool.isRequired,debug:s.default.bool.isRequired,messages:s.default.object,constraints:s.default.oneOf(["horizontal","vertical"]),onImagePropertiesChange:s.default.func,onImageLoading:s.default.func,onImageLoaded:s.default.func,onImageRemoved:s.default.func,onError:s.default.func,onZoomChange:s.default.func,onStatusChange:s.default.func},y.defaultProps={frameSize:160,frameFormat:"rounded-square",cropSize:160,minZoom:.1,maxZoom:2,minImageSize:320,maxImageSize:1e3,useHelper:!1,debug:!1,messages:{DEFAULT:"Drop your photo here or tap to select.",DRAGOVER:"Drop your photo",INVALID_FILE_TYPE:"Only images allowed.",INVALID_IMAGE_SIZE:"Your photo must be larger than 350px."},onImagePropertiesChange:function(){},onImageLoading:function(){},onImageLoaded:function(){},onError:function(){},onZoomChange:function(){},onStatusChange:function(){},onImageRemoved:function(){}},t.default=y},function(e,t,a){"use strict";var r=a(6);function n(){}function o(){}o.resetWarningCache=n,e.exports=function(){function e(e,t,a,n,o,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var a={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:n};return a.PropTypes=a,a}},function(e,t,a){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var a=0;a0&&void 0!==arguments[0]?arguments[0]:"IDLE",t=r({},this.state);t.status!==e&&("IDLE"===e&&"function"==typeof this.props.onDragOut&&this.props.onDragOut.call(this),"OVER"===e&&"function"==typeof this.props.onDragOver&&this.props.onDragOver.call(this),t.status=e,this.setState(t))}},{key:"render",value:function(){var e=this;return i.default.createElement("div",{ref:this.dropzoneElement,onDragEnter:function(){return e.setStatus("OVER")},onDragOver:function(){return e.setStatus("OVER")},onDragLeave:function(){return e.setStatus()},onDrop:this.handleDrop.bind(this)},this.props.children)}}]),t}(o.Component);l.propTypes={onDrop:s.default.func},l.defaultProps={onDrop:function(){},onDragOver:function(){},onDragOut:function(){}},t.default=l},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=a(0),n=u(r),o=u(a(3)),i=u(a(2)),s=u(a(17));function u(e){return e&&e.__esModule?e:{default:e}}t.default=function(e,t){switch(t){case o.default.EMPTY:return n.default.createElement("p",{className:s.default.message__text},e.DEFAULT);case o.default.LOADING:return n.default.createElement(i.default,{name:"loading",size:48});case o.default.DRAGOVER:return n.default.createElement(r.Fragment,null,n.default.createElement(i.default,{name:"upload",size:48}),n.default.createElement("p",{className:s.default.message__text},e.DRAGOVER));case o.default.INVALID_FILE_TYPE:return n.default.createElement(r.Fragment,null,n.default.createElement("p",{className:s.default.message__text},e.INVALID_FILE_TYPE),n.default.createElement("p",{className:s.default.message__text},e.DEFAULT));case o.default.INVALID_IMAGE_SIZE:return n.default.createElement(r.Fragment,null,n.default.createElement("p",{className:s.default.message__text},e.INVALID_IMAGE_SIZE),n.default.createElement("p",{className:s.default.message__text},e.DEFAULT));case o.default.LOADED:return null}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;tn.imageHeight/n.imageWidth?(e=(t=n.maxImageSize)/i,r=parseFloat(o)*e):(e=(r=n.maxImageSize)/o,t=parseFloat(i)*e);var s={imageSrc:a,newWidth:r,newHeight:t,imageWidth:o,imageHeight:i,originalImageWidth:o,originalImageHeight:i,imageX:0,imageY:0,ratio:e};return"function"==typeof n.onLoad?n.onLoad.call(void 0,s):void 0},a.src=e},t.INVALID_IMAGE_SIZE="INVALID_IMAGE_SIZE",t.isDataUrl=function(e){return!!(e=e.toString()).match(/^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i)}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;tt.imageHeight/t.imageWidth?(o=(a=t.cropSize)/t.imageHeight,n=parseFloat(t.imageWidth)*o):(o=(n=t.cropSize)/t.imageWidth,a=parseFloat(t.imageHeight)*o),{scaleRatio:o,minZoom:o,maxZoom:t.maxZoom-o,zoom:o,imageWidth:n,imageHeight:a}},t.centerImage=function(e){var t=r({cropSize:160,imageWidth:320,imageHeight:320,imageX:0,imageY:0},e);t.imageX=t.imageX||0,t.imageY=t.imageY||0;var a=Math.abs(t.imageX-(t.imageWidth-t.cropSize)/2),n=Math.abs(t.imageY-(t.imageHeight-t.cropSize)/2);return a=t.imageX-a,n=t.imageY-n,a=Math.min(a,0),n=Math.min(n,0),t.imageWidth+a0&&void 0!==arguments[0]?arguments[0]:d.default.EMPTY,t=r({},this.state);t.status=e,this.setState(t),this.props.onStatusChange.call(this,e),this.debug("[setStatus]",{status:e})}},{key:"dragStart",value:function(e){this.dragging=!0,this.draggingPosition.clientX=e.clientX,this.draggingPosition.clientY=e.clientY,e.touches&&(this.draggingPosition.clientX=e.touches[0].clientX,this.draggingPosition.clientY=e.touches[0].clientY),this.draggingPosition.x=this.draggingPosition.clientX-this.state.imageData.imageX,this.draggingPosition.y=this.draggingPosition.clientY-this.state.imageData.imageY,this.debug("[dragStart]",{draggingPosition:this.draggingPosition})}},{key:"onMovingEnd",value:function(){this.dragging=!1,this.debug("[mouseup, touchend]")}},{key:"onMoving",value:function(e){if(this.dragging){e.preventDefault();var t=r({},this.state),a=r({},t.imageData),n=!1;this.draggingPosition.clientX=e.clientX,this.draggingPosition.clientY=e.clientY,e.touches&&(this.draggingPosition.clientX=e.touches[0].clientX,this.draggingPosition.clientY=e.touches[0].clientY);var o=this.draggingPosition.clientY-this.draggingPosition.y,i=this.draggingPosition.clientX-this.draggingPosition.x;i=Math.min(i,0),o=Math.min(o,0),this.allowHorizontal()&&a.imageWidth+i>=this.props.cropSize&&(a.imageX=i,n=!0),this.allowVertical()&&a.imageHeight+o>=this.props.cropSize&&(a.imageY=o,n=!0),n&&(t.imageData=a,this.setState(t,this.renderImage.bind(this)),this.debug("[mousemove, touchstart]",r({},a,{refresh:n})))}}},{key:"registerImageEvents",value:function(){var e=this;["mouseup","touchend"].forEach((function(t){window.addEventListener(t,e.onMovingEnd,!1)})),["mousemove","touchmove"].forEach((function(t){window.addEventListener(t,e.onMoving,!1)}))}},{key:"handleDragOut",value:function(){this.setStatus(d.default.EMPTY),this.debug("[handleDragOut]")}},{key:"handleDragOver",value:function(){this.setStatus(d.default.DRAGOVER),this.debug("[handleDragOver]")}},{key:"handleZoom",value:function(e){this.scaleImage(Number(e.target.value)),this.props.onZoomChange.call(this,{zoom:e.target.value}),this.debug("[handleZoom]",{zoom:e.target.value})}},{key:"handleFileChange",value:function(e){this.readFile(e.target.files[0]),e.target.value="",this.debug("[handleFileChange]",{file:e.target.files[0]})}},{key:"handleTapToSelect",value:function(){this.inputFileRef.current.click(),this.debug("[handleTapToSelect]")}},{key:"handleOnDrop",value:function(e){this.readFile(e),this.debug("[handleOnDrop]",{file:e})}},{key:"handleRemove",value:function(){this.resetState(),this.props.onImageRemoved.call(this),this.debug("[onImageRemoved]")}},{key:"allowHorizontal",value:function(){return!this.props.constraints||"horizontal"===this.props.constraints}},{key:"allowVertical",value:function(){return!this.props.constraints||"vertical"===this.props.constraints}},{key:"readFile",value:function(e){var t=this;this.setStatus(d.default.LOADING),(0,h.fileReader)(e,{onLoadStart:function(){t.props.onImageLoading.call(t),t.debug("[onLoadStart]")},onError:function(e){t.props.onError.call(t),t.onError(e),t.debug("[onLoadStart]",{error:e})},onLoadEnd:function(a){var n=a.base64Image,o=r({},t.state);o.file=e,t.setState(o),t.processFile(n),t.debug("[onLoadEnd]",{data:a})}})}},{key:"processFile",value:function(e){var t=this;(0,g.processFile)(e,{minImageSize:this.props.minImageSize,maxImageSize:this.props.maxImageSize,onLoad:function(a){t.onImageDataLoaded(e,a),t.debug("[onLoad]",{data:a})},onError:function(e){t.props.onError.call(t),t.onError(e),t.debug("[onError]",{error:e})}})}},{key:"onImageDataLoaded",value:function(e,t){var a=r({},this.state);a.loadedData=t;var n=this.props,o=n.cropSize,i=n.minZoom,s=n.maxZoom,u=(0,v.fitToFrame)({cropSize:o,imageWidth:t.imageWidth,imageHeight:t.imageHeight,minZoom:i,maxZoom:s}),l=(0,v.centerImage)({cropSize:o,imageWidth:u.imageWidth,imageHeight:u.imageHeight,imageX:u.imageX,imageY:u.imageY});u.imageX=l.imageX,u.imageY=l.imageY,u.imageSrc=t.imageSrc,a.imageData=u,a.status=d.default.LOADED,this.setState(a,this.renderImage.bind(this)),this.props.onImageLoaded.call(this,{data:t}),this.debug("[onImageLoaded]",{data:t})}},{key:"scaleImage",value:function(e){var t=r({},this.state),a=r({},t.imageData),n=r({},t.loadedData),o=(0,v.scaleImage)(r({},a,{zoom:e,originalWidth:n.originalImageWidth,originalHeight:n.originalImageHeight,cropSize:this.props.cropSize}));t.imageData=r({},a,o,{zoom:e}),this.setState(t,this.renderImage.bind(this)),this.debug("[scaleImage]",{zoom:e,data:t.imageData})}},{key:"renderImage",value:function(){var e=this;if((0,_.renderToCanvas)(r({canvas:this.canvasRef.current,cropSize:this.props.cropSize,onError:function(t){e.onError(t),e.props.onError.call(e,t)}},this.state.imageData)),this.props.useHelper){var t=this.frameRef.current,a=t.offsetLeft,n=t.offsetTop,o=this.photoHelperRef.current,i=o.clientWidth,s=o.clientHeight;(0,_.updateHelper)(r({canvas:this.helperRef.current,cropSize:this.props.cropSize,onError:function(t){e.onError(t),e.props.onError.bind(e)},frameTop:n,frameLeft:a,canvasWidth:i,canvasHeight:s},this.state.imageData))}this.props.onImagePropertiesChange.bind(this,{data:r({},this.state.imageData)}),this.debug("[scalrenderImageeImage]",{data:r({},this.state.imagesData)})}},{key:"renderMessages",value:function(){switch(this.state.status){case d.default.EMPTY:case d.default.INVALID_FILE_TYPE:case d.default.INVALID_IMAGE_SIZE:return i.default.createElement(u.default,{onClick:this.handleTapToSelect.bind(this)},(0,p.default)(this.props.messages,this.state.status));case d.default.LOADED:return null;default:return i.default.createElement(u.default,null,(0,p.default)(this.props.messages,this.state.status))}}},{key:"onError",value:function(e){this.setStatus(e.error)}},{key:"getImageAsDataUrl",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return this.canvasRef.current.toDataURL(e)}},{key:"getData",value:function(){return r({},this.state.imageData)}},{key:"setImage",value:function(e){this.readFile(e)}},{key:"debug",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.props.debug&&console.log(e,r({},t))}},{key:"render",value:function(){var e=[b.default["profile-picture"],b.default["profile-picture--"+this.state.status]];return i.default.createElement("div",{className:e.join(" ")},i.default.createElement("div",{className:b.default["profile-picture__photo"]},i.default.createElement("div",{className:b.default.photo__helper,onMouseDown:this.props.useHelper?this.dragStart.bind(this):null,onTouchStart:this.props.useHelper?this.dragStart.bind(this):null,ref:this.photoHelperRef},i.default.createElement(f.default,{onDrop:this.handleOnDrop.bind(this),onDragOver:this.handleDragOver.bind(this),onDragOut:this.handleDragOut.bind(this)},this.props.useHelper?i.default.createElement("canvas",{className:b.default["profile-picture__canvas-helper"],ref:this.helperRef}):null,i.default.createElement(l.default,{frameRef:this.frameRef,size:this.props.cropSize,format:this.props.frameFormat},i.default.createElement("canvas",{onMouseDown:this.props.useHelper?null:this.dragStart.bind(this),onTouchStart:this.props.useHelper?null:this.dragStart.bind(this),width:this.props.cropSize,height:this.props.cropSize,className:b.default["profile-picture__canvas"],ref:this.canvasRef}),this.renderMessages()))),i.default.createElement("div",{className:b.default.photo__options},this.state.status===d.default.LOADED?i.default.createElement(o.Fragment,null,i.default.createElement("div",{className:b.default.options__zoom},i.default.createElement(c.default,{min:this.state.imageData.minZoom,max:this.state.imageData.maxZoom,value:this.state.imageData.zoom,onChange:this.handleZoom.bind(this)})),i.default.createElement("div",{className:b.default.options__remove},i.default.createElement("button",{className:b.default.remove__button,onClick:this.handleRemove.bind(this)},i.default.createElement(m.default,{name:"trash",size:20})))):null)),i.default.createElement("input",{className:b.default["profile-picture__input"],type:"file",accept:"image/jpg,image/jpeg,image/png,image/bmp,image/gif",ref:this.inputFileRef,onChange:this.handleFileChange.bind(this)}))}}]),t}(o.Component);y.propTypes={image:s.default.string,frameSize:s.default.number.isRequired,frameFormat:s.default.oneOf(["circle","square","rounded-square"]),cropSize:s.default.number.isRequired,minZoom:s.default.number.isRequired,maxZoom:s.default.number.isRequired,minImageSize:s.default.number.isRequired,maxImageSize:s.default.number.isRequired,useHelper:s.default.bool.isRequired,debug:s.default.bool.isRequired,messages:s.default.object,constraints:s.default.oneOf(["horizontal","vertical"]),onImagePropertiesChange:s.default.func,onImageLoading:s.default.func,onImageLoaded:s.default.func,onImageRemoved:s.default.func,onError:s.default.func,onZoomChange:s.default.func,onStatusChange:s.default.func},y.defaultProps={frameSize:160,frameFormat:"rounded-square",cropSize:160,minZoom:.1,maxZoom:2,minImageSize:320,maxImageSize:1e3,useHelper:!1,debug:!1,messages:{DEFAULT:"Drop your photo here or tap to select.",DRAGOVER:"Drop your photo",INVALID_FILE_TYPE:"Only images allowed.",INVALID_IMAGE_SIZE:"Your photo must be larger than 350px."},onImagePropertiesChange:function(){},onImageLoading:function(){},onImageLoaded:function(){},onError:function(){},onZoomChange:function(){},onStatusChange:function(){},onImageRemoved:function(){}},t.default=y},function(e,t,a){"use strict";var r=a(6);function n(){}function o(){}o.resetWarningCache=n,e.exports=function(){function e(e,t,a,n,o,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var a={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:n};return a.PropTypes=a,a}},function(e,t,a){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var a=0;a0&&void 0!==arguments[0]?arguments[0]:"IDLE",t=r({},this.state);t.status!==e&&("IDLE"===e&&"function"==typeof this.props.onDragOut&&this.props.onDragOut.call(this),"OVER"===e&&"function"==typeof this.props.onDragOver&&this.props.onDragOver.call(this),t.status=e,this.setState(t))}},{key:"render",value:function(){var e=this;return i.default.createElement("div",{ref:this.dropzoneElement,onDragEnter:function(){return e.setStatus("OVER")},onDragOver:function(){return e.setStatus("OVER")},onDragLeave:function(){return e.setStatus()},onDrop:this.handleDrop.bind(this)},this.props.children)}}]),t}(o.Component);l.propTypes={onDrop:s.default.func},l.defaultProps={onDrop:function(){},onDragOver:function(){},onDragOut:function(){}},t.default=l},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=a(0),n=u(r),o=u(a(3)),i=u(a(2)),s=u(a(17));function u(e){return e&&e.__esModule?e:{default:e}}t.default=function(e,t){switch(t){case o.default.EMPTY:return n.default.createElement("p",{className:s.default.message__text},e.DEFAULT);case o.default.LOADING:return n.default.createElement(i.default,{name:"loading",size:48});case o.default.DRAGOVER:return n.default.createElement(r.Fragment,null,n.default.createElement(i.default,{name:"upload",size:48}),n.default.createElement("p",{className:s.default.message__text},e.DRAGOVER));case o.default.INVALID_FILE_TYPE:return n.default.createElement(r.Fragment,null,n.default.createElement("p",{className:s.default.message__text},e.INVALID_FILE_TYPE),n.default.createElement("p",{className:s.default.message__text},e.DEFAULT));case o.default.INVALID_IMAGE_SIZE:return n.default.createElement(r.Fragment,null,n.default.createElement("p",{className:s.default.message__text},e.INVALID_IMAGE_SIZE),n.default.createElement("p",{className:s.default.message__text},e.DEFAULT));case o.default.LOADED:return null}}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;tn.imageHeight/n.imageWidth?(e=(t=n.maxImageSize)/i,r=parseFloat(o)*e):(e=(r=n.maxImageSize)/o,t=parseFloat(i)*e);var s={imageSrc:a,newWidth:r,newHeight:t,imageWidth:o,imageHeight:i,originalImageWidth:o,originalImageHeight:i,imageX:0,imageY:0,ratio:e};return"function"==typeof n.onLoad?n.onLoad.call(void 0,s):void 0},a.src=e},t.INVALID_IMAGE_SIZE="INVALID_IMAGE_SIZE",t.isDataUrl=function(e){return!!(e=e.toString()).match(/^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i)}},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;tt.imageHeight/t.imageWidth?(o=(a=t.cropSize)/t.imageHeight,n=parseFloat(t.imageWidth)*o):(o=(n=t.cropSize)/t.imageWidth,a=parseFloat(t.imageHeight)*o),{scaleRatio:o,minZoom:o,maxZoom:t.maxZoom-o,zoom:o,imageWidth:n,imageHeight:a}},t.centerImage=function(e){var t=r({cropSize:160,imageWidth:320,imageHeight:320,imageX:0,imageY:0},e);t.imageX=t.imageX||0,t.imageY=t.imageY||0;var a=Math.abs(t.imageX-(t.imageWidth-t.cropSize)/2),n=Math.abs(t.imageY-(t.imageHeight-t.cropSize)/2);return a=t.imageX-a,n=t.imageY-n,a=Math.min(a,0),n=Math.min(n,0),t.imageWidth+a