@yorab/react-paint 0.7.6 → 0.9.0

package/dist/components/toolbox/MenuGroup.js

@@ -1,173 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Panel = _interopRequireDefault(require("../common/Panel"));
-
-var _react2 = require("@linaria/react");
-
-var _Tool = _interopRequireDefault(require("./Tool"));
-
-var _LoadFileTool = _interopRequireDefault(require("./LoadFileTool"));
-
-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 (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; }
-
-const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPanelContent",
-  class: "s1uphjfh"
-});
-const StyledRelative = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledRelative",
-  class: "s1e5a6k5"
-});
-
-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);
-  };
-
-  const addPicture = async file => {
-    setIsOpen(false);
-    await addPictureFromProps(file);
-  };
-
-  const openPanel = () => {
-    startTransition(() => {
-      setIsOpen(true);
-    });
-  };
-
-  const isActive = _fp.default.includes(activeTool.type, group === null || group === void 0 ? void 0 : group.tools);
-
-  const groupIcon = (_ref2 = isActive ? activeTool.icon : group.img) !== null && _ref2 !== void 0 ? _ref2 : group.title;
-  (0, _react.useEffect)(() => {
-    if (!isOpen) return;
-
-    const closePanel = () => {
-      setIsOpen(false);
-    };
-
-    document.addEventListener('click', closePanel);
-    return () => {
-      document.removeEventListener('click', closePanel);
-    };
-  }, [isOpen]);
-  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(_Panel.default, {
-    alignment: alignment,
-    position: "top"
-  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, {
-    "data-vertical": +vertical
-  }, 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, {
-    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, {
-    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, {
-    withText: true,
-    type: _tools.UPLOAD_PICTURE_TOOL,
-    disabled: disabled,
-    loadFile: addPicture,
-    img: _tools.UPLOAD_PICTURE_TOOL.icon,
-    accept: "image/png, image/gif, image/jpeg, image/svg+xml"
-  }), 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, {
-    withText: true,
-    type: _tools.LOAD_TOOL,
-    disabled: disabled,
-    loadFile: loadFile,
-    img: _tools.LOAD_TOOL.icon,
-    accept: "application/JSON"
-  }), /*#__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, {
-    withText: true,
-    disabled: disabled,
-    type: _tools.EXPORT_TOOL,
-    img: _tools.EXPORT_TOOL.icon,
-    isActive: activeTool.id === _tools.EXPORT_TOOL.id,
-    setActive: exportCanvasInFile
-  })))) : null;
-};
-
-var _default = MenuGroup;
-exports.default = _default;

package/dist/components/toolbox/PictureUrlInput.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Modal = _interopRequireDefault(require("../common/Modal"));
-
-var _react2 = require("@linaria/react");
-
-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; }
-
-const StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
-  name: "StyledInputModal",
-  class: "s95bkm9"
-});
-
-const PictureUrlModal = _ref => {
-  let {
-    togglePictureUrlModal,
-    addPicture
-  } = _ref;
-  const pictureUrlInputRef = (0, _react.useRef)(null);
-
-  const addPictureFromUrl = async e => {
-    var _pictureUrlInputRef$c;
-
-    e.preventDefault();
-    const url = (_pictureUrlInputRef$c = pictureUrlInputRef.current) === null || _pictureUrlInputRef$c === void 0 ? void 0 : _pictureUrlInputRef$c.value;
-
-    if (url) {
-      await addPicture(url);
-      togglePictureUrlModal();
-    }
-
-    return;
-  };
-
-  (0, _react.useEffect)(() => {
-    if (!pictureUrlInputRef.current) return;
-    pictureUrlInputRef.current.focus();
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(StyledInputModal, {
-    onClose: togglePictureUrlModal
-  }, /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: addPictureFromUrl
-  }, /*#__PURE__*/_react.default.createElement("label", null, "URL\xA0", /*#__PURE__*/_react.default.createElement("input", {
-    type: "text",
-    ref: pictureUrlInputRef
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: togglePictureUrlModal
-  }, "Annuler"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    type: "submit",
-    selected: true
-  }, "Ajouter")));
-};
-
-var _default = PictureUrlModal;
-exports.default = _default;

package/dist/components/toolbox/Tool.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-const Tool = _ref => {
-  var _type$label;
-
-  let {
-    type,
-    img,
-    isActive,
-    withText = false,
-    disabled = false,
-    setActive
-  } = _ref;
-
-  const handleClick = () => {
-    setActive(type);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: disabled,
-    selected: isActive,
-    onClick: handleClick,
-    title: (_type$label = type.label) !== null && _type$label !== void 0 ? _type$label : type.type,
-    icon: img,
-    children: withText ? type.label : undefined
-  });
-};
-
-var _default = Tool;
-exports.default = _default;

package/dist/components/toolbox/Toolbar.js

@@ -1,203 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _icons = require("../../constants/icons");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _toolbar = require("../../utils/toolbar");
-
-var _ToolbarGroup = _interopRequireDefault(require("./ToolbarGroup"));
-
-var _MenuGroup = _interopRequireDefault(require("./MenuGroup"));
-
-var _Tool = _interopRequireDefault(require("./Tool"));
-
-var _Modal = _interopRequireDefault(require("../common/Modal"));
-
-var _PictureUrlInput = _interopRequireDefault(require("./PictureUrlInput"));
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-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 (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; }
-
-const TOOL_WIDTH = 40;
-const StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledShrinkableTools",
-  class: "so6hnjf"
-});
-const StyledToolbox = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledToolbox",
-  class: "s1c1dllr"
-});
-const StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal.default)({
-  name: "StyledToolsModal",
-  class: "s1g032mh"
-});
-const TOOLBAR_STRUCTURE = [{
-  title: 'brush',
-  toolsType: ['brush'],
-  vertical: false
-}, {
-  title: 'lines',
-  toolsType: ['line', 'curve', 'polygon'],
-  vertical: false
-}, {
-  title: 'shapes',
-  toolsType: ['rect', 'square', 'circle', 'ellipse'],
-  vertical: false
-}, 'text'];
-
-const Toolbar = _ref => {
-  let {
-    width,
-    disabled = false,
-    activeTool,
-    hasActionToUndo = false,
-    hasActionToRedo = false,
-    hasActionToClear = false,
-    withLoadAndSave,
-    withExport,
-    clearCanvas,
-    setActiveTool: setActiveToolFromProps,
-    undoAction,
-    redoAction,
-    addPicture,
-    loadFile,
-    saveFile,
-    exportCanvasInFile,
-    availableTools,
-    withUrlPicture,
-    withUploadPicture
-  } = _ref;
-  const currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
-  const fullToolbarSize = (5 + currentStructure.length) * TOOL_WIDTH;
-  const withMenuToolbarSize = (2 + currentStructure.length) * TOOL_WIDTH;
-  const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
-  const [isPictureUrlModalOpen, setIsPictureUrlModalOpen] = (0, _react.useState)(false);
-  const [actionsInMenu, setActionsInMenu] = (0, _react.useState)(width < fullToolbarSize);
-  const [toolsInMenu, setToolsInMenu] = (0, _react.useState)(width < withMenuToolbarSize);
-
-  const toggleTools = () => {
-    setIsMenuOpen(prev => !prev);
-  };
-
-  const openPictureUrlModal = () => {
-    setIsPictureUrlModalOpen(true);
-  };
-
-  const togglePictureUrlModal = () => {
-    setIsPictureUrlModalOpen(prev => !prev);
-  };
-
-  const setActiveTool = tool => {
-    setActiveToolFromProps(tool);
-    setIsMenuOpen(false);
-  };
-
-  const setActiveToolFromId = toolId => {
-    var _availableTools$find;
-
-    setActiveTool((_availableTools$find = availableTools.find(tool => tool.id === toolId)) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
-  };
-
-  (0, _react.useEffect)(() => {
-    setActionsInMenu(width < fullToolbarSize);
-    setToolsInMenu(width < withMenuToolbarSize);
-  }, [width, fullToolbarSize, withMenuToolbarSize]);
-  const isAnyToolSelected = _fp.default.find({
-    type: activeTool
-  }, availableTools) !== undefined;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledToolbox, null, /*#__PURE__*/_react.default.createElement(StyledShrinkableTools, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
-    type: _tools.SELECTION_TOOL,
-    disabled: disabled,
-    img: _tools.SELECTION_TOOL.icon,
-    isActive: activeTool.id === _tools.SELECTION_TOOL.id,
-    setActive: setActiveTool
-  }), toolsInMenu ? /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: disabled,
-    onClick: toggleTools,
-    title: "Toggle tools",
-    icon: _icons.shapesIcon,
-    selected: isAnyToolSelected
-  }) : currentStructure.map((group, i) => /*#__PURE__*/_react.default.createElement(_ToolbarGroup.default, {
-    disabled: disabled,
-    key: i,
-    activeTool: activeTool,
-    group: group,
-    setActiveToolFromId: setActiveToolFromId
-  }))), !actionsInMenu && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tool.default, {
-    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, {
-    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, {
-    type: _tools.CLEAR_TOOL,
-    disabled: disabled || !hasActionToClear,
-    img: _tools.CLEAR_TOOL.icon,
-    isActive: activeTool.id === _tools.CLEAR_TOOL.id,
-    setActive: clearCanvas
-  })), /*#__PURE__*/_react.default.createElement(_MenuGroup.default, {
-    withActionsInMenu: actionsInMenu,
-    disabled: disabled,
-    vertical: true,
-    alignment: "right",
-    group: {
-      title: 'Menu',
-      img: _icons.menuIcon
-    },
-    activeTool: activeTool,
-    addPicture: addPicture,
-    loadFile: loadFile,
-    saveFile: saveFile,
-    togglePictureUrlModal: openPictureUrlModal,
-    exportCanvasInFile: exportCanvasInFile,
-    withUploadPicture: withUploadPicture,
-    withUrlPicture: withUrlPicture,
-    withLoadAndSave: withLoadAndSave,
-    withExport: withExport,
-    hasActionToUndo: hasActionToUndo,
-    hasActionToRedo: hasActionToRedo,
-    hasActionToClear: hasActionToClear,
-    undoAction: undoAction,
-    redoAction: redoAction,
-    clearCanvas: clearCanvas
-  })), isMenuOpen && /*#__PURE__*/_react.default.createElement(StyledToolsModal, {
-    onClose: toggleTools
-  }, availableTools.map((toolType, index) => toolType.type === 'picture' ? null : /*#__PURE__*/_react.default.createElement(_Tool.default, {
-    disabled: disabled,
-    key: index,
-    type: toolType,
-    img: toolType.icon,
-    withText: false,
-    isActive: activeTool.id === toolType.id,
-    setActive: setActiveTool
-  }))), isPictureUrlModalOpen && /*#__PURE__*/_react.default.createElement(_PictureUrlInput.default, {
-    togglePictureUrlModal: togglePictureUrlModal,
-    addPicture: addPicture
-  }));
-};
-
-var _default = Toolbar;
-exports.default = _default;

package/dist/components/toolbox/ToolbarGroup.js

@@ -1,134 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Panel = _interopRequireDefault(require("../common/Panel"));
-
-var _react2 = require("@linaria/react");
-
-var _Tool = _interopRequireDefault(require("./Tool"));
-
-var _dom = require("../../utils/dom");
-
-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; }
-
-const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPanelContent",
-  class: "s1bvz4xj"
-});
-const StyledRelative = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledRelative",
-  class: "siejlch"
-});
-
-const ToolbarGroup = _ref => {
-  var _group$toolsType, _ref2;
-
-  let {
-    activeTool,
-    alignment,
-    group,
-    disabled = false,
-    setActiveToolFromId
-  } = _ref;
-  const panelRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [, startTransition] = (0, _react.useTransition)();
-  const [localActiveTool, setLocalActiveTool] = (0, _react.useState)(undefined);
-
-  const setActiveTool = tool => {
-    setLocalActiveTool(tool);
-    setActiveToolFromId(tool.id);
-  };
-
-  (0, _react.useEffect)(() => {
-    if (!isOpen) return;
-
-    const closePanel = event => {
-      const isClickInsideToolbarGroup = (0, _dom.isEventInsideNode)(event, panelRef.current);
-      !isClickInsideToolbarGroup && setIsOpen(false);
-    };
-
-    document.addEventListener('mousedown', closePanel, {
-      passive: false
-    });
-    document.addEventListener('touchstart', closePanel, {
-      passive: false
-    });
-    return () => {
-      document.removeEventListener('mousedown', closePanel);
-      document.removeEventListener('touchstart', closePanel);
-    };
-  }, [isOpen]);
-
-  if ('type' in group) {
-    return /*#__PURE__*/_react.default.createElement(_Tool.default, {
-      disabled: disabled,
-      type: group,
-      img: group.icon,
-      isActive: activeTool.id === group.id,
-      setActive: setActiveTool
-    });
-  }
-
-  if (_fp.default.isEmpty(group.toolsType)) return null;
-
-  if (((_group$toolsType = group.toolsType) === null || _group$toolsType === void 0 ? void 0 : _group$toolsType.length) === 1) {
-    return /*#__PURE__*/_react.default.createElement(_Tool.default, {
-      disabled: disabled,
-      type: group.toolsType[0],
-      img: group.toolsType[0].icon,
-      isActive: activeTool.id === group.toolsType[0].id,
-      setActive: setActiveTool
-    });
-  }
-
-  const isActive = _fp.default.find({
-    type: activeTool.type
-  }, group === null || group === void 0 ? void 0 : group.toolsType) !== undefined;
-  const groupIcon = (_ref2 = localActiveTool ? localActiveTool.icon : group.toolsType && group.toolsType[0] && group.toolsType[0].icon) !== null && _ref2 !== void 0 ? _ref2 : group.title;
-
-  const openPanel = () => {
-    if (localActiveTool) setActiveToolFromId(localActiveTool.id);else group.toolsType && group.toolsType[0] && setActiveTool(group.toolsType[0]);
-    startTransition(() => {
-      setIsOpen(true);
-    });
-  };
-
-  return /*#__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(_Panel.default, {
-    alignment: alignment,
-    position: "top"
-  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, {
-    "data-vertical": +group.vertical,
-    ref: panelRef
-  }, group.toolsType.map((toolType, i) => /*#__PURE__*/_react.default.createElement(_Tool.default, {
-    disabled: disabled,
-    key: i,
-    type: toolType,
-    img: toolType.icon,
-    isActive: activeTool.id === toolType.id,
-    setActive: setActiveTool
-  })))));
-};
-
-var _default = ToolbarGroup;
-exports.default = _default;

package/dist/constants/app.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GRID_SMALL = exports.GRID_NONE = exports.GRID_MEDIUM = exports.GRID_LARGE = exports.DEFAULT_OPTIONS = exports.APP_NAME = void 0;
-
-var _shapes = require("./shapes");
-
-var _tools = require("./tools");
-
-const APP_NAME = 'react_paint';
-exports.APP_NAME = APP_NAME;
-const GRID_NONE = 0;
-exports.GRID_NONE = GRID_NONE;
-const GRID_SMALL = 1;
-exports.GRID_SMALL = GRID_SMALL;
-const GRID_MEDIUM = 2;
-exports.GRID_MEDIUM = GRID_MEDIUM;
-const GRID_LARGE = 3;
-exports.GRID_LARGE = GRID_LARGE;
-const DEFAULT_OPTIONS = {
-  layersManipulation: true,
-  grid: GRID_NONE,
-  canGrow: false,
-  canShrink: true,
-  withExport: true,
-  withLoadAndSave: true,
-  withUploadPicture: true,
-  withUrlPicture: false,
-  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
-  clearCallback: 'empty',
-  uiStyle: {
-    toolbarBackgroundColor: 'white',
-    dividerColor: '#36418129',
-    fontRadius: 8,
-    fontDisabledColor: '#3641812b',
-    fontDisabledBackgroundColor: 'transparent',
-    fontColor: '#364181',
-    fontBackgroundColor: 'transparent',
-    fontSelectedColor: 'white',
-    fontSelectedBackgroundColor: '#364181',
-    fontHoverColor: '#364181',
-    fontHoverBackgroundColor: '#afd8d8',
-    canvasBackgroundColor: 'white',
-    canvasSelectionColor: _shapes.SELECTION_DEFAULT_COLOR,
-    canvasSelectionWidth: _shapes.SELECTION_DEFAULT_WIDTH,
-    canvasSelectionPadding: _shapes.SELECTION_DEFAULT_PADDING
-  }
-};
-exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;