react-crop-comp/index.js

[](https://badge.fury.io/js/react-crop-component) 

"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_html2canvas=_interopRequireDefault(require("html2canvas")),_reactDom=require("react-dom");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;return _getRequireWildcardCache=function(){return a},a}function _interopRequireWildcard(a){if(a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var b=_getRequireWildcardCache();if(b&&b.has(a))return b.get(a);var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a)if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;f&&(f.get||f.set)?Object.defineProperty(c,e,f):c[e]=a[e]}return c.default=a,b&&b.set(a,c),c}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(a,b){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(a)){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var CropPortal=function(a){var b=a.children,c=a.selector,d=a.onLoad;//eslint-disable-line react-hooks/exhaustive-deps
return(0,_react.useEffect)(function(){d()},[]),/*#__PURE__*/(0,_reactDom.createPortal)(b,c)},CropComponent=function(a){var b=a.modalClassName,c=a.portalId,d=void 0===c?"canvas-portal":c,e=a.Component,f=a.canvasConfigs,g=a.imgStyle,h=a.buttonGroupStyle,i=void 0===h?{display:"flex",alignItems:"center",justifyContent:"space-between"}:h,j=a.buttonStyle,k=void 0===j?{padding:8,margin:8,background:"#273CAF",color:"#fff",border:"none",outline:"none"}:j,l=a.filename,m=void 0===l?"download.png":l,n=a.modalStyle,o=void 0===n?{position:"fixed",left:0,top:0,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",bottom:0,right:0,background:"rgba(3, 2, 38, 0.8)",zIndex:9999}:n,p=a.downloadStyle,q=void 0===p?{padding:8,margin:8,background:"#36C2CE",color:"#fff"}:p,r=a.DownloadButton,s=void 0===r?function(a){var b=a.canvasElement,c=a.onClick;return/*#__PURE__*/_react.default.createElement("a",{onClick:c,href:b&&b.toDataURL(),download:m,style:q},"DOWNLOAD")}:r,t=a.CancelButton,u=void 0===t?function(a){var b=a.onClick;return/*#__PURE__*/_react.default.createElement("button",{style:k,onClick:b},"CANCEL")}:t,v=a.CropButton,w=void 0===v?function(a){var b=a.onClick;return/*#__PURE__*/_react.default.createElement("button",{style:k,onClick:b},"CROP COMPONENT")}:v,x=(0,_react.useState)(!1),y=_slicedToArray(x,2),z=y[0],A=y[1],B=(0,_react.useState)(null),C=_slicedToArray(B,2),D=C[0],E=C[1],F=document.getElementById(d);return F.style="position: fixed;top: 100%",/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement(w,{onClick:function onClick(){return A(!0)}}),z&&/*#__PURE__*/_react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/_react.default.createElement(CropPortal,{onLoad:function onLoad(){return(0,_html2canvas.default)(F,f).then(function(a){E(a)})},selector:F,children:D?null:/*#__PURE__*/_react.default.createElement(e,null)}),D&&/*#__PURE__*/_react.default.createElement("div",{style:o},/*#__PURE__*/_react.default.createElement("img",{style:g,src:D&&D.toDataURL(),alt:"Cropped Component"}),/*#__PURE__*/_react.default.createElement("div",{style:i},/*#__PURE__*/_react.default.createElement(u,{onClick:function onClick(){A(!1),E(null)}}),/*#__PURE__*/_react.default.createElement(s,{canvasElement:D,onClick:function onClick(){E(null),A(!1)}})))))},_default=CropComponent;exports.default=_default;