@cashub/ui 0.21.0 → 0.21.1

package/chart/utils/customTooltip.js

@@ -4,95 +4,80 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var customTooltip = function customTooltip(theme) {
+const customTooltip = theme => {
   // optimize: render in react way
   return function (context) {
     // Tooltip Element
-    var tooltipEl = document.getElementById('chartjs-tooltip'); // Create element on first render
+    let tooltipEl = document.getElementById('chartjs-tooltip');
 
+    // Create element on first render
     if (!tooltipEl) {
       tooltipEl = document.createElement('div');
       tooltipEl.id = 'chartjs-tooltip';
       tooltipEl.innerHTML = '<table></table>';
       document.body.appendChild(tooltipEl);
-    } // Hide tooltip, if no tooltip or no data
-
-
-    var tooltipModel = context.tooltip;
+    }
 
+    // Hide tooltip, if no tooltip or no data
+    const tooltipModel = context.tooltip;
     if (!tooltipModel || !tooltipModel.dataPoints || !tooltipModel.dataPoints[0] || tooltipModel.opacity === 0) {
       tooltipEl.style.display = 'none';
       return;
-    } // Set caret Position
-
+    }
 
+    // Set caret Position
     tooltipEl.classList.remove('above', 'below', 'no-transform');
-
     if (tooltipModel.yAlign) {
       tooltipEl.classList.add(tooltipModel.yAlign);
     } else {
       tooltipEl.classList.add('no-transform');
-    } // Set Text
-
+    }
 
+    // Set Text
     if (tooltipModel.body) {
-      var titleLines = tooltipModel.title || [];
-      var bodyLines = tooltipModel.body.map(function (bodyItem) {
+      const titleLines = tooltipModel.title || [];
+      const bodyLines = tooltipModel.body.map(bodyItem => {
         return bodyItem.lines;
       });
-      var innerHtml = '<thead>';
-      titleLines.forEach(function (title) {
+      let innerHtml = '<thead>';
+      titleLines.forEach(title => {
         innerHtml += "<tr><th>".concat(title, "</th></tr>");
       });
       innerHtml += '</thead><tbody>';
-      bodyLines.forEach(function (body) {
+      bodyLines.forEach(body => {
         innerHtml += "<tr><td>".concat(body, "</td></tr>");
       });
       innerHtml += '</tbody>';
-      var tableRoot = tooltipEl.querySelector('table');
+      const tableRoot = tooltipEl.querySelector('table');
       tableRoot.innerHTML = innerHtml;
-    } // `this` will be the overall tooltip
-
+    }
 
-    var position = context.chart.canvas.getBoundingClientRect(); // Display, position, and set styles for font
+    // `this` will be the overall tooltip
+    const position = context.chart.canvas.getBoundingClientRect();
 
+    // Display, position, and set styles for font
     tooltipEl.style.fontFamily = theme.fontFamily;
     tooltipEl.style.fontSize = theme.fontBody1;
     tooltipEl.style.display = 'block';
     tooltipEl.style.position = 'absolute';
     tooltipEl.style.boxShadow = theme.boxShadow;
-
-    var _tooltipModel$labelTe = _slicedToArray(tooltipModel.labelTextColors, 1);
-
-    tooltipEl.style.color = _tooltipModel$labelTe[0];
+    [tooltipEl.style.color] = tooltipModel.labelTextColors;
     tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
     tooltipEl.style.borderRadius = theme.borderRadius;
     tooltipEl.style.textAlign = 'center';
     tooltipEl.style.padding = "".concat(theme.spacerXS, " ").concat(theme.spacerS);
-    tooltipEl.style.pointerEvents = 'none'; // determine position is left or right
+    tooltipEl.style.pointerEvents = 'none';
 
+    // determine position is left or right
     if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
       tooltipEl.style.borderTopLeftRadius = 0;
       tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX + 8, "px");
     } else {
       tooltipEl.style.borderTopRightRadius = 0;
       tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2, "px");
-    } // determine position is top or bottom
-
+    }
 
+    // determine position is top or bottom
     if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
       tooltipEl.style.top = "".concat(position.top + window.pageYOffset + tooltipModel.caretY + 8, "px");
     } else {
@@ -100,6 +85,4 @@ var customTooltip = function customTooltip(theme) {
     }
   };
 };
-
-var _default = customTooltip;
-exports.default = _default;
+var _default = exports.default = customTooltip;

package/chart/utils/htmlLegendPlugin.js

@@ -4,22 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _reactChartjs = require("react-chartjs-2");
-
-var htmlLegendPlugin = {
+const htmlLegendPlugin = {
   id: 'htmlLegend',
-  afterUpdate: function afterUpdate(chart, args, options) {
-    var ul = getOrCreateLegendList(chart, options.containerID); // Remove old legend items
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(chart, options.containerID);
 
+    // Remove old legend items
     while (ul.firstChild) {
       ul.firstChild.remove();
-    } // Reuse the built-in legendItems generator
-
+    }
 
-    var items = chart.options.plugins.legend.labels.generateLabels(chart);
-    items.forEach(function (item) {
-      var li = document.createElement('li');
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+    items.forEach(item => {
+      const li = document.createElement('li');
       li.style.alignItems = 'center';
       li.style.cursor = 'pointer';
       li.style.display = 'flex';
@@ -27,22 +26,21 @@ var htmlLegendPlugin = {
       li.style.marginLeft = '16px';
       li.style.marginTop = '16px';
       li.style.color = _reactChartjs.defaults.color;
-
-      li.onclick = function () {
-        var type = chart.config.type;
-
+      li.onclick = () => {
+        const {
+          type
+        } = chart.config;
         if (type === 'pie' || type === 'doughnut') {
           // Pie and doughnut charts only have a single dataset and visibility is per item
           chart.toggleDataVisibility(item.index);
         } else {
           chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
         }
-
         chart.update();
-      }; // Color box
+      };
 
-
-      var boxSpan = document.createElement('span');
+      // Color box
+      const boxSpan = document.createElement('span');
       boxSpan.style.background = item.fillStyle;
       boxSpan.style.borderColor = item.strokeStyle;
       boxSpan.style.borderWidth = "".concat(item.lineWidth, "px");
@@ -50,15 +48,16 @@ var htmlLegendPlugin = {
       boxSpan.style.display = 'inline-block';
       boxSpan.style.height = '16px';
       boxSpan.style.marginRight = '8px';
-      boxSpan.style.width = '32px'; // Text
+      boxSpan.style.width = '32px';
 
-      var textContainer = document.createElement('p');
+      // Text
+      const textContainer = document.createElement('p');
       textContainer.style.color = item.fontColor;
       textContainer.style.margin = 0;
       textContainer.style.padding = 0;
       textContainer.style.wordBreak = 'break-all';
       textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
-      var text = document.createTextNode(item.text);
+      const text = document.createTextNode(item.text);
       textContainer.appendChild(text);
       li.appendChild(boxSpan);
       li.appendChild(textContainer);
@@ -66,11 +65,9 @@ var htmlLegendPlugin = {
     });
   }
 };
-
-var getOrCreateLegendList = function getOrCreateLegendList(chart, id) {
-  var legendContainer = document.getElementById(id);
-  var listContainer = legendContainer.querySelector('ul');
-
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer.querySelector('ul');
   if (!listContainer) {
     listContainer = document.createElement('ul');
     listContainer.style.display = 'flex';
@@ -81,9 +78,6 @@ var getOrCreateLegendList = function getOrCreateLegendList(chart, id) {
     listContainer.style.padding = 0;
     legendContainer.appendChild(listContainer);
   }
-
   return listContainer;
 };
-
-var _default = htmlLegendPlugin;
-exports.default = _default;
+var _default = exports.default = htmlLegendPlugin;

package/chart/utils/index.js

@@ -5,27 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "customTooltip", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customTooltip.default;
   }
 });
 Object.defineProperty(exports, "htmlLegendPlugin", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _htmlLegendPlugin.default;
   }
 });
 Object.defineProperty(exports, "padEmptyChartBar", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _padEmptyChartBar.default;
   }
 });
-
 var _customTooltip = _interopRequireDefault(require("./customTooltip"));
-
 var _padEmptyChartBar = _interopRequireDefault(require("./padEmptyChartBar"));
-
 var _htmlLegendPlugin = _interopRequireDefault(require("./htmlLegendPlugin"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/chart/utils/padEmptyChartBar.js

@@ -5,44 +5,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 // make chart bar seem like align left by pad empty bar at the end
-var padEmptyChartBar = {
+const padEmptyChartBar = {
   id: 'padEmptyChartBar',
   length: -1,
   // pad empty chart bar when data less than max bar number
-  beforeUpdate: function beforeUpdate(chart) {
+  beforeUpdate(chart) {
     this.length = -1;
-    var _chart$config$_config = chart.config._config,
-        data = _chart$config$_config.data,
-        options = _chart$config$_config.options;
-    var validLabels = data.labels.filter(function (label) {
-      return label !== null;
-    });
-    var maxBarNumber = options.plugins.padEmptyChartBar.maxBarNumber;
-
-    for (var index = validLabels.length; index < maxBarNumber; index += 1) {
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const validLabels = data.labels.filter(label => label !== null);
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
+    for (let index = validLabels.length; index < maxBarNumber; index += 1) {
       this.length = this.length === -1 ? index : this.length;
       data.labels[index] = null;
       data.datasets[0].data[index] = 0;
     }
   },
   // prevent padded empty chart bar to be drawn
-  afterUpdate: function afterUpdate(chart) {
-    var _chart$config$_config2 = chart.config._config,
-        data = _chart$config$_config2.data,
-        options = _chart$config$_config2.options;
-    var maxBarNumber = options.plugins.padEmptyChartBar.maxBarNumber;
-
+  afterUpdate(chart) {
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
     if (this.length === -1) {
       // restore draw function
-      for (var index = 0; index < maxBarNumber; index += 1) {// delete data.datasets[0]._meta[data.index].data[i].draw;
+      for (let index = 0; index < maxBarNumber; index += 1) {
+        // delete data.datasets[0]._meta[data.index].data[i].draw;
       }
     } else {
       // prevents new charts to be drawn
-      for (var _index = this.length; _index < data.maxBarNumber; _index += 1) {
-        data.datasets[0]._meta[data.index].data[_index].draw = function () {};
+      for (let index = this.length; index < data.maxBarNumber; index += 1) {
+        data.datasets[0]._meta[data.index].data[index].draw = () => {};
       }
     }
   }
 };
-var _default = padEmptyChartBar;
-exports.default = _default;
+var _default = exports.default = padEmptyChartBar;

package/container/FlexContainer.js

@@ -4,22 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n"])), function (_ref) {
-  var marginBottom = _ref.marginBottom;
+const FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n"])), _ref => {
+  let {
+    marginBottom
+  } = _ref;
   return marginBottom && 'margin-bottom: var(--spacing-l)';
-}, function (_ref2) {
-  var wrap = _ref2.wrap;
+}, _ref2 => {
+  let {
+    wrap
+  } = _ref2;
   return wrap && 'flex-wrap: wrap';
 });
-
-var _default = FlexContainer;
-exports.default = _default;
+var _default = exports.default = FlexContainer;

package/container/index.js

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "FlexContainer", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _FlexContainer.default;
   }
 });
-
 var _FlexContainer = _interopRequireDefault(require("./FlexContainer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cropper/Cropper.js

@@ -4,54 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 require("cropperjs/dist/cropper.css");
-
 var _cropperjs = _interopRequireDefault(require("cropperjs"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CropperWrapper = function CropperWrapper(_ref) {
-  var src = _ref.src,
-      _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? 'picture' : _ref$alt,
-      width = _ref.width,
-      height = _ref.height,
-      _ref$cropBoxResizable = _ref.cropBoxResizable,
-      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
-      onInitialized = _ref.onInitialized,
-      _ref$dragMode = _ref.dragMode,
-      dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode;
-  var imageRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var node = imageRef.current;
-
+const CropperWrapper = _ref => {
+  let {
+    src,
+    alt = 'picture',
+    width,
+    height,
+    cropBoxResizable = false,
+    onInitialized,
+    dragMode = 'move'
+  } = _ref;
+  const imageRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const node = imageRef.current;
     if (node !== null) {
-      var cropper = new _cropperjs.default(node, {
-        dragMode: dragMode,
+      const cropper = new _cropperjs.default(node, {
+        dragMode,
         viewMode: 1,
         initialAspectRatio: 9 / 16,
         background: true,
-        cropBoxResizable: cropBoxResizable,
+        cropBoxResizable,
         data: {
-          width: width,
-          height: height
+          width,
+          height
         }
       });
-
       if (onInitialized) {
         onInitialized(cropper);
       }
     }
-
-    return function () {
+    return () => {
       var _node$cropper;
-
-      node === null || node === void 0 ? void 0 : (_node$cropper = node.cropper) === null || _node$cropper === void 0 ? void 0 : _node$cropper.destroy();
+      node === null || node === void 0 || (_node$cropper = node.cropper) === null || _node$cropper === void 0 || _node$cropper.destroy();
     };
   }, [onInitialized, dragMode, width, height, cropBoxResizable]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -63,6 +52,4 @@ var CropperWrapper = function CropperWrapper(_ref) {
     })
   });
 };
-
-var _default = CropperWrapper;
-exports.default = _default;
+var _default = exports.default = CropperWrapper;

package/cropper/CropperModalHandler.js

@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _TitleModal = _interopRequireDefault(require("../modal/TitleModal"));
-
 var _CropImageModal = _interopRequireDefault(require("./subComponent/CropImageModal"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CropperModalHandler = function CropperModalHandler(_ref) {
-  var src = _ref.src,
-      file = _ref.file,
-      width = _ref.width,
-      height = _ref.height,
-      _ref$cropBoxResizable = _ref.cropBoxResizable,
-      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
-      onCrop = _ref.onCrop,
-      _onClose = _ref.onClose;
+const CropperModalHandler = _ref => {
+  let {
+    src,
+    file,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose
+  } = _ref;
   (0, _TitleModal.default)({
     size: 'normal',
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CropImageModal.default, {
@@ -33,15 +29,13 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
       height: height,
       cropBoxResizable: cropBoxResizable,
       onCrop: onCrop,
-      onClose: _onClose
+      onClose: onClose
     }),
-    onClose: function onClose(dismiss) {
-      if (dismiss === true && _onClose) {
-        _onClose();
+    onClose: dismiss => {
+      if (dismiss === true && onClose) {
+        onClose();
       }
     }
   });
 };
-
-var _default = CropperModalHandler;
-exports.default = _default;
+var _default = exports.default = CropperModalHandler;

package/cropper/index.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Cropper", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Cropper.default;
   }
 });
 Object.defineProperty(exports, "CropperModalHandler", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _CropperModalHandler.default;
   }
 });
-
 var _Cropper = _interopRequireDefault(require("./Cropper"));
-
 var _CropperModalHandler = _interopRequireDefault(require("./CropperModalHandler"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cropper/subComponent/CropImageModal.js

@@ -4,80 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _reactI18next = require("react-i18next");
-
 var _utils = require("@cashub/utils");
-
 var _Cropper = _interopRequireDefault(require("../Cropper"));
-
 var _Button = _interopRequireDefault(require("../../button/Button"));
-
 var _ButtonGroup = _interopRequireDefault(require("../../button/ButtonGroup"));
-
 var _TitleModal = _interopRequireDefault(require("../../modal/TitleModal"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var CropImageModal = function CropImageModal(_ref) {
-  var src = _ref.src,
-      mime = _ref.mime,
-      alt = _ref.alt,
-      width = _ref.width,
-      height = _ref.height,
-      _ref$cropBoxResizable = _ref.cropBoxResizable,
-      cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
-      onCrop = _ref.onCrop,
-      onClose = _ref.onClose,
-      close = _ref.close;
-
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      instance = _useState2[0],
-      setIntance = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      resizedImage = _useState4[0],
-      setResizedImage = _useState4[1];
-
-  var handleCrop = (0, _react.useCallback)(function () {
+const CropImageModal = _ref => {
+  let {
+    src,
+    mime,
+    alt,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose,
+    close
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [instance, setIntance] = (0, _react.useState)(null);
+  const [resizedImage, setResizedImage] = (0, _react.useState)(null);
+  const handleCrop = (0, _react.useCallback)(() => {
     onCrop(instance.getCroppedCanvas().toDataURL());
     close();
   }, [onCrop, instance, close]);
-  var handleInitialized = (0, _react.useCallback)(function (instance) {
+  const handleInitialized = (0, _react.useCallback)(instance => {
     setIntance(instance);
   }, []);
-
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     if (onClose) {
       onClose();
     }
-
     close();
   };
-
-  (0, _react.useEffect)(function () {
-    (0, _utils.resizeImage)(src, mime, width > height ? width : height, 'cover', function (resizedImageUrl) {
+  (0, _react.useEffect)(() => {
+    (0, _utils.resizeImage)(src, mime, width > height ? width : height, 'cover', resizedImageUrl => {
       setResizedImage(resizedImageUrl);
     });
   }, [src, mime, height, width]);
@@ -109,6 +76,4 @@ var CropImageModal = function CropImageModal(_ref) {
     })]
   });
 };
-
-var _default = CropImageModal;
-exports.default = _default;
+var _default = exports.default = CropImageModal;