@yorab/react-paint 0.6.3 → 0.6.6

package/dist/components/settings/ToggleField.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -17,34 +13,31 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var ToggleField = function ToggleField(_ref) {
-  var setSelectedSettings = _ref.setSelectedSettings,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      field = _ref.field,
-      icon = _ref.icon,
-      values = _ref.values,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? false : _ref$value,
-      valueChanged = _ref.valueChanged;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      customKey = _useState2[0];
+const ToggleField = _ref => {
+  let {
+    setSelectedSettings,
+    disabled = false,
+    field,
+    icon,
+    values,
+    value = false,
+    valueChanged
+  } = _ref;
+  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
 
-  var handleClick = function handleClick() {
-    setSelectedSettings(function (prev) {
+  const handleClick = () => {
+    setSelectedSettings(prev => {
       return prev === customKey ? undefined : customKey;
     });
     valueChanged(field, !value);
   };
 
   if (values.length !== 2) return null;
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: handleClick,
     selected: value,
     disabled: disabled,
@@ -53,4 +46,4 @@ var ToggleField = function ToggleField(_ref) {
 };
 
 var _default = ToggleField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/EditTextBox.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _style = require("../../constants/style");
 
@@ -21,70 +19,97 @@ var _string = require("../../utils/string");
 
 var _transform = require("../../utils/transform");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledEditBox",
-  "class": "se8ufj4",
+  class: "s1unz6yq",
   vars: {
-    "se8ufj4-0": [function (_ref) {
-      var transform = _ref.transform;
+    "s1unz6yq-0": [_ref => {
+      let {
+        transform
+      } = _ref;
       return transform;
     }],
-    "se8ufj4-1": [function (_ref2) {
-      var color = _ref2.color;
+    "s1unz6yq-1": [_ref2 => {
+      let {
+        color
+      } = _ref2;
       return color;
     }],
-    "se8ufj4-2": [function (_ref3) {
-      var padding = _ref3.padding;
+    "s1unz6yq-2": [_ref3 => {
+      let {
+        padding
+      } = _ref3;
       return padding;
     }, "px"],
-    "se8ufj4-3": [function (_ref4) {
-      var fontsize = _ref4.fontsize;
+    "s1unz6yq-3": [_ref4 => {
+      let {
+        fontsize
+      } = _ref4;
       return fontsize;
     }, "px"],
-    "se8ufj4-5": [function (_ref5) {
-      var fontfamily = _ref5.fontfamily;
+    "s1unz6yq-5": [_ref5 => {
+      let {
+        fontfamily
+      } = _ref5;
       return fontfamily;
     }],
-    "se8ufj4-6": [function (_ref6) {
-      var opacity = _ref6.opacity;
+    "s1unz6yq-6": [_ref6 => {
+      let {
+        opacity
+      } = _ref6;
       return opacity;
     }]
   }
 });
 
-var EditTextBox = function EditTextBox(_ref7) {
+const EditTextBox = _ref7 => {
   var _shape$style$strokeCo, _shape$style, _shape$style$globalAl, _shape$style2, _shape$style$fontFami, _shape$style3, _shape$style$fontBold, _shape$style4, _shape$style$fontItal, _shape$style5;
 
-  var _ref7$disabled = _ref7.disabled,
-      disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
-      scaleRatio = _ref7.scaleRatio,
-      shape = _ref7.shape,
-      defaultValue = _ref7.defaultValue,
-      updateValue = _ref7.updateValue,
-      selectionPadding = _ref7.selectionPadding;
-  var ref = (0, _react.useRef)(null);
-
-  var updateContentEditable = function updateContentEditable(e) {
+  let {
+    disabled = false,
+    scaleRatio,
+    shape,
+    defaultValue,
+    updateValue,
+    selectionPadding
+  } = _ref7;
+  const ref = (0, _react.useRef)(null);
+
+  const updateContentEditable = e => {
     updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
   };
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!ref.current) return;
-    ref.current.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
-    ref.current.focus();
+    const currentNode = ref.current;
+
+    const handlePaste = e => {
+      var _e$clipboardData;
+
+      e.preventDefault();
+      const text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
+      document.execCommand('insertText', false, text); //TODO use Clipboard API when ready
+    };
+
+    currentNode.addEventListener('paste', handlePaste);
+    currentNode.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
+    currentNode.focus();
+    return () => {
+      currentNode.removeEventListener('paste', handlePaste);
+    };
   }, [defaultValue]);
-  var position = (0, _react.useMemo)(function () {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
-        borders = _getShapeInfos.borders,
-        center = _getShapeInfos.center;
-
+  const position = (0, _react.useMemo)(() => {
+    const {
+      borders,
+      center
+    } = (0, _shapeData.getShapeInfos)(shape, selectionPadding);
     return (0, _intersect.getPointPositionBeforeCanvasTransformation)([borders.x, borders.y], [-shape.translation[0], -shape.translation[1]], shape.rotation, center);
   }, [shape, selectionPadding]);
-  return /*#__PURE__*/_react["default"].createElement(StyledEditBox, {
+  return /*#__PURE__*/_react.default.createElement(StyledEditBox, {
     ref: ref,
     transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
     fontsize: shape.fontSize * scaleRatio,
@@ -100,4 +125,4 @@ var EditTextBox = function EditTextBox(_ref7) {
 };
 
 var _default = EditTextBox;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/LoadFileTool.js

@@ -2,48 +2,46 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var LoadFileTool = function LoadFileTool(_ref) {
+const LoadFileTool = _ref => {
   var _type$label;
 
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$withText = _ref.withText,
-      withText = _ref$withText === void 0 ? false : _ref$withText,
-      loadFile = _ref.loadFile,
-      type = _ref.type,
-      img = _ref.img,
-      accept = _ref.accept;
-  var inputRef = (0, _react.useRef)(null);
-
-  var handleClick = function handleClick(event) {
+  let {
+    disabled = false,
+    withText = false,
+    loadFile,
+    type,
+    img,
+    accept
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+
+  const handleClick = event => {
     event.stopPropagation();
     if (inputRef.current) inputRef.current.value = '';
   };
 
-  var handleChange = function handleChange(event) {
+  const handleChange = event => {
     var _event$target$files;
 
-    var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.item(0);
+    const file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.item(0);
     if (!file) return;
     loadFile(file);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     ref: inputRef,
     type: "file",
     onClick: handleClick,
@@ -57,4 +55,4 @@ var LoadFileTool = function LoadFileTool(_ref) {
 };
 
 var _default = LoadFileTool;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/toolbox/MenuGroup.js

@@ -2,18 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -33,167 +25,139 @@ var _icons = require("../../constants/icons");
 
 var _tools = require("../../constants/tools");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
   name: "StyledPanel",
-  "class": "s1qu0ers"
+  class: "s1uphjfh"
 });
-var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "s1y35t9y"
+  class: "s1e5a6k5"
 });
 
-var MenuGroup = function MenuGroup(_ref) {
-  var _ref3;
-
-  var activeTool = _ref.activeTool,
-      withActionsInMenu = _ref.withActionsInMenu,
-      _ref$hasActionToUndo = _ref.hasActionToUndo,
-      hasActionToUndo = _ref$hasActionToUndo === void 0 ? false : _ref$hasActionToUndo,
-      _ref$hasActionToRedo = _ref.hasActionToRedo,
-      hasActionToRedo = _ref$hasActionToRedo === void 0 ? false : _ref$hasActionToRedo,
-      _ref$hasActionToClear = _ref.hasActionToClear,
-      hasActionToClear = _ref$hasActionToClear === void 0 ? false : _ref$hasActionToClear,
-      undoAction = _ref.undoAction,
-      redoAction = _ref.redoAction,
-      clearCanvas = _ref.clearCanvas,
-      alignment = _ref.alignment,
-      group = _ref.group,
-      _ref$vertical = _ref.vertical,
-      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      withLoadAndSave = _ref.withLoadAndSave,
-      withExport = _ref.withExport,
-      addPictureFromProps = _ref.addPicture,
-      loadFileFromProps = _ref.loadFile,
-      togglePictureUrlModal = _ref.togglePictureUrlModal,
-      saveFile = _ref.saveFile,
-      exportCanvasInFile = _ref.exportCanvasInFile,
-      withUploadPicture = _ref.withUploadPicture,
-      withUrlPicture = _ref.withUrlPicture;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useTransition = (0, _react.useTransition)(),
-      _useTransition2 = (0, _slicedToArray2["default"])(_useTransition, 2),
-      startTransition = _useTransition2[1];
-
-  var loadFile = function loadFile(file) {
+const MenuGroup = _ref => {
+  var _ref2;
+
+  let {
+    activeTool,
+    withActionsInMenu,
+    hasActionToUndo = false,
+    hasActionToRedo = false,
+    hasActionToClear = false,
+    undoAction,
+    redoAction,
+    clearCanvas,
+    alignment,
+    group,
+    vertical = false,
+    disabled = false,
+    withLoadAndSave,
+    withExport,
+    addPicture: addPictureFromProps,
+    loadFile: loadFileFromProps,
+    togglePictureUrlModal,
+    saveFile,
+    exportCanvasInFile,
+    withUploadPicture,
+    withUrlPicture
+  } = _ref;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [, startTransition] = (0, _react.useTransition)();
+
+  const loadFile = file => {
     setIsOpen(false);
     loadFileFromProps(file);
   };
 
-  var addPicture = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              setIsOpen(false);
-              _context.next = 3;
-              return addPictureFromProps(file);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function addPicture(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const addPicture = async file => {
+    setIsOpen(false);
+    await addPictureFromProps(file);
+  };
 
-  var openPanel = function openPanel() {
-    startTransition(function () {
+  const openPanel = () => {
+    startTransition(() => {
       setIsOpen(true);
     });
   };
 
-  var isActive = _fp["default"].includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
+  const isActive = _fp.default.includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
 
-  var groupIcon = (_ref3 = isActive ? activeTool.icon : group.img) !== null && _ref3 !== void 0 ? _ref3 : group.title;
-  (0, _react.useEffect)(function () {
+  const groupIcon = (_ref2 = isActive ? activeTool.icon : group.img) !== null && _ref2 !== void 0 ? _ref2 : group.title;
+  (0, _react.useEffect)(() => {
     if (!isOpen) return;
 
-    var closePanel = function closePanel() {
+    const closePanel = () => {
       setIsOpen(false);
     };
 
     document.addEventListener('click', closePanel);
-    return function () {
+    return () => {
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);
-  var withMenu = withActionsInMenu || withUploadPicture || withUrlPicture || withLoadAndSave || withExport;
-  return withMenu ? /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  const withMenu = withActionsInMenu || withUploadPicture || withUrlPicture || withLoadAndSave || withExport;
+  return withMenu ? /*#__PURE__*/_react.default.createElement(StyledRelative, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     selected: isActive,
     title: group.title,
     disabled: disabled,
     onClick: openPanel,
     icon: groupIcon
-  }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
+  }), isOpen && /*#__PURE__*/_react.default.createElement(StyledPanel, {
     vertical: vertical,
     alignment: alignment
-  }, withActionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }, withActionsInMenu && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     type: _tools.UNDO_TOOL,
     disabled: disabled || !hasActionToUndo,
     img: _tools.UNDO_TOOL.icon,
     isActive: activeTool.id === _tools.UNDO_TOOL.id,
     setActive: undoAction
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     type: _tools.REDO_TOOL,
     disabled: disabled || !hasActionToRedo,
     img: _tools.REDO_TOOL.icon,
     isActive: activeTool.id === _tools.REDO_TOOL.id,
     setActive: redoAction
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     type: _tools.CLEAR_TOOL,
     disabled: disabled || !hasActionToClear,
     img: _tools.CLEAR_TOOL.icon,
     isActive: activeTool.id === _tools.CLEAR_TOOL.id,
     setActive: clearCanvas
-  }), (withUploadPicture || withUrlPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withUploadPicture && /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), (withUploadPicture || withUrlPicture || withLoadAndSave) && /*#__PURE__*/_react.default.createElement("hr", null)), withUploadPicture && /*#__PURE__*/_react.default.createElement(_LoadFileTool.default, {
     withText: true,
     type: _tools.UPLOAD_PICTURE_TOOL,
     disabled: disabled,
     loadFile: addPicture,
     img: _tools.UPLOAD_PICTURE_TOOL.icon,
     accept: "image/png, image/gif, image/jpeg"
-  }), withUrlPicture && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), withUrlPicture && /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: disabled,
     selected: false,
     onClick: togglePictureUrlModal,
     title: "Add picture from URL",
     icon: _icons.publicIcon,
     children: "Add picture from URL"
-  }), (withUploadPicture || withUrlPicture) && withLoadAndSave && /*#__PURE__*/_react["default"].createElement("hr", null), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), (withUploadPicture || withUrlPicture) && withLoadAndSave && /*#__PURE__*/_react.default.createElement("hr", null), withLoadAndSave && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LoadFileTool.default, {
     withText: true,
     type: _tools.LOAD_TOOL,
     disabled: disabled,
     loadFile: loadFile,
     img: _tools.LOAD_TOOL.icon,
     accept: "application/JSON"
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     disabled: disabled,
     type: _tools.SAVE_TOOL,
     img: _tools.SAVE_TOOL.icon,
     isActive: activeTool.id === _tools.SAVE_TOOL.id,
     setActive: saveFile
-  })), withExport && /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  })), withExport && /*#__PURE__*/_react.default.createElement(_Tool.default, {
     withText: true,
     disabled: disabled,
     type: _tools.EXPORT_TOOL,
@@ -204,4 +168,4 @@ var MenuGroup = function MenuGroup(_ref) {
 };
 
 var _default = MenuGroup;
-exports["default"] = _default;
+exports.default = _default;