@yorab/react-paint 0.6.3 → 0.6.6

package/dist/hooks/useDrag.js

@@ -1,43 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
-var useDrag = function useDrag(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      ref = _ref.ref,
-      shape = _ref.shape,
-      layoutDragging = _ref.layoutDragging,
-      setLayoutDragging = _ref.setLayoutDragging,
-      handleSelect = _ref.handleSelect,
-      onMoveShapes = _ref.onMoveShapes;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOver = _useState2[0],
-      setIsOver = _useState2[1];
-
-  (0, _react.useEffect)(function () {
+const useDrag = _ref => {
+  let {
+    disabled = false,
+    ref,
+    shape,
+    layoutDragging,
+    setLayoutDragging,
+    handleSelect,
+    onMoveShapes
+  } = _ref;
+  const [isOver, setIsOver] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     if (!layoutDragging) setIsOver(false);
   }, [layoutDragging]);
-  (0, _react.useEffect)(function () {
-    var layoutRef = ref.current;
+  (0, _react.useEffect)(() => {
+    const layoutRef = ref.current;
     if (!layoutRef) return;
 
-    var handleDragEnd = function handleDragEnd() {
+    const handleDragEnd = () => {
       setLayoutDragging(undefined);
     };
 
-    var handleDragOver = function handleDragOver(e) {
+    const handleDragOver = e => {
       if (e.preventDefault) {
         e.preventDefault();
       }
@@ -45,7 +37,7 @@ var useDrag = function useDrag(_ref) {
       return false;
     };
 
-    var handleDragStart = function handleDragStart(e) {
+    const handleDragStart = e => {
       handleSelect(shape);
       if (!e.dataTransfer) return;
       e.dataTransfer.effectAllowed = 'move';
@@ -53,15 +45,15 @@ var useDrag = function useDrag(_ref) {
       setLayoutDragging(shape.id);
     };
 
-    var handleDragEnter = function handleDragEnter() {
+    const handleDragEnter = () => {
       layoutDragging !== shape.id && setIsOver(true);
     };
 
-    var handleDragLeave = function handleDragLeave() {
+    const handleDragLeave = () => {
       setIsOver(false);
     };
 
-    var handleDrop = function handleDrop(e) {
+    const handleDrop = e => {
       e.stopPropagation(); // stops the browser from redirecting.
 
       if (e.dataTransfer) {
@@ -80,7 +72,7 @@ var useDrag = function useDrag(_ref) {
       layoutRef.addEventListener('drop', handleDrop);
     }
 
-    return function () {
+    return () => {
       if (!disabled) {
         layoutRef.removeEventListener('dragstart', handleDragStart);
         layoutRef.removeEventListener('dragend', handleDragEnd);
@@ -92,9 +84,9 @@ var useDrag = function useDrag(_ref) {
     };
   }, [disabled, ref, shape, setLayoutDragging, handleSelect, onMoveShapes, layoutDragging]);
   return {
-    isOver: isOver
+    isOver
   };
 };
 
 var _default = useDrag;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useDrawableCanvas.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -29,100 +27,91 @@ var _tools = require("../types/tools");
 
 var _tools2 = require("../constants/tools");
 
-var _useDoubleClick2 = _interopRequireDefault(require("./useDoubleClick"));
+var _useDoubleClick = _interopRequireDefault(require("./useDoubleClick"));
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) {
+const handleMove = (e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) => {
   if (activeTool.type === _tools.ActionsEnum.move && canvasOffsetStartPosition !== undefined) {
-    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
-
-    setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
+    const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
+    setCanvasOffset([cursorPosition[0] - canvasOffsetStartPosition[0], cursorPosition[1] - canvasOffsetStartPosition[1]]);
   }
 
   if (selectedShape == undefined) return;
   if (selectedShape.locked) return;
-  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
+  const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
-  if (selectionMode.mode === _Mode.SelectionModeLib["default"] || selectionMode.mode === _Mode.SelectionModeLib.textedition) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
-      mode: _Mode.SelectionModeLib["default"]
+  if (selectionMode.mode === _Mode.SelectionModeLib.default || selectionMode.mode === _Mode.SelectionModeLib.textedition) {
+    const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
+      mode: _Mode.SelectionModeLib.default
     };
     setHoverMode(positionIntersection);
   } else {
     var _canvasRef$current;
 
-    var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
+    const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
     if (!ctx) return;
-
-    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
-
-    updateSingleShape(_newShape);
-    setSelectedShape(_newShape);
+    const newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
+    updateSingleShape(newShape);
+    setSelectedShape(newShape);
   }
 };
 
-var useDrawableCanvas = function useDrawableCanvas(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      addShape = _ref.addShape,
-      canvasSize = _ref.canvasSize,
-      drawCanvasRef = _ref.drawCanvasRef,
-      setActiveTool = _ref.setActiveTool,
-      shapes = _ref.shapes,
-      selectionMode = _ref.selectionMode,
-      activeTool = _ref.activeTool,
-      isInsideComponent = _ref.isInsideComponent,
-      setCanvasOffset = _ref.setCanvasOffset,
-      selectedShape = _ref.selectedShape,
-      selectionCanvasRef = _ref.selectionCanvasRef,
-      canvasOffsetStartPosition = _ref.canvasOffsetStartPosition,
-      setSelectedShape = _ref.setSelectedShape,
-      setCanvasOffsetStartPosition = _ref.setCanvasOffsetStartPosition,
-      updateSingleShape = _ref.updateSingleShape,
-      canvasOffset = _ref.canvasOffset,
-      saveShapes = _ref.saveShapes,
-      setSelectionMode = _ref.setSelectionMode,
-      selectionPadding = _ref.selectionPadding;
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
-
-  var _useState = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      hoverMode = _useState2[0],
-      setHoverMode = _useState2[1];
-
-  var _useDoubleClick = (0, _useDoubleClick2["default"])(),
-      registerDoubleClickEvent = _useDoubleClick.registerDoubleClickEvent,
-      unRegisterDoubleClickEvent = _useDoubleClick.unRegisterDoubleClickEvent;
-
-  (0, _react.useEffect)(function () {
-    var handleMouseMove = function handleMouseMove(e) {
-      return window.requestAnimationFrame(function () {
-        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding);
-      });
-    };
+const useDrawableCanvas = _ref => {
+  let {
+    disabled = false,
+    addShape,
+    canvasSize,
+    drawCanvasRef,
+    setActiveTool,
+    shapes,
+    selectionMode,
+    activeTool,
+    isInsideComponent,
+    setCanvasOffset,
+    selectedShape,
+    selectionCanvasRef,
+    canvasOffsetStartPosition,
+    setSelectedShape,
+    setCanvasOffsetStartPosition,
+    updateSingleShape,
+    canvasOffset,
+    saveShapes,
+    setSelectionMode,
+    selectionPadding
+  } = _ref;
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
+  const [hoverMode, setHoverMode] = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib.default
+  });
+  const {
+    registerDoubleClickEvent,
+    unRegisterDoubleClickEvent
+  } = (0, _useDoubleClick.default)();
+  (0, _react.useEffect)(() => {
+    const handleMouseMove = e => window.requestAnimationFrame(() => handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding));
 
     if (isInsideComponent) {
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('touchmove', handleMouseMove);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('mousemove', handleMouseMove);
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
   }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
-  (0, _react.useEffect)(function () {
-    var handleMouseUp = function handleMouseUp() {
+  (0, _react.useEffect)(() => {
+    const handleMouseUp = () => {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
 
-      if (selectionMode.mode !== _Mode.SelectionModeLib["default"]) {
+      if (selectionMode.mode !== _Mode.SelectionModeLib.default) {
         setSelectionMode({
-          mode: _Mode.SelectionModeLib["default"]
+          mode: _Mode.SelectionModeLib.default
         });
         saveShapes();
       }
@@ -133,67 +122,64 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       document.addEventListener('touchend', handleMouseUp);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('mouseup', handleMouseUp);
         document.removeEventListener('touchend', handleMouseUp);
       }
     };
   }, [isInsideComponent, selectionMode, saveShapes, setSelectionMode]);
-  (0, _react.useEffect)(function () {
-    var ref = selectionCanvasRef.current;
+  (0, _react.useEffect)(() => {
+    const ref = selectionCanvasRef.current;
     if (!ref) return;
     if (disabled) return;
 
-    var handleMouseDown = function handleMouseDown(e) {
+    const handleMouseDown = e => {
       e.preventDefault();
-      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
+      const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
       if (activeTool.type === _tools.ActionsEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
-            shape = _selectShape.shape,
-            mode = _selectShape.mode;
-
+        const {
+          shape,
+          mode
+        } = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding);
         setSelectedShape(shape);
         setSelectionMode(mode);
       } else if (activeTool.type === _tools.ActionsEnum.move) {
         setCanvasOffsetStartPosition(cursorPosition);
       }
 
-      if (_fp["default"].includes(activeTool.type, _Shapes.ShapeEnum)) {
+      if (_fp.default.includes(activeTool.type, _Shapes.ShapeEnum)) {
         var _drawCanvasRef$curren;
 
-        var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
+        const drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
         if (!drawCtx) return;
 
         if (activeTool.type === _Shapes.ShapeEnum.brush) {
           if (!!selectedShape) {
-            var _newShape2 = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
-
-            updateSingleShape(_newShape2);
-            setSelectedShape(_newShape2);
+            const newShape = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
+            updateSingleShape(newShape);
+            setSelectedShape(newShape);
           } else {
-            var _newShape3 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
-
-            if (!_newShape3) return;
-            addShape(_newShape3);
-            setSelectedShape(_newShape3);
+            const newShape = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
+            if (!newShape) return;
+            addShape(newShape);
+            setSelectedShape(newShape);
           }
 
           setSelectionMode({
             mode: _Mode.SelectionModeLib.brush
           });
         } else {
-          var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
-
-          if (!_newShape4) return;
-          addShape(_newShape4);
+          const newShape = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
+          if (!newShape) return;
+          addShape(newShape);
           setActiveTool(_tools2.SELECTION_TOOL);
-          setSelectedShape(_newShape4);
+          setSelectedShape(newShape);
           setSelectionMode({
             mode: _Mode.SelectionModeLib.resize,
             cursorStartPosition: cursorPosition,
-            originalShape: _newShape4,
+            originalShape: newShape,
             anchor: activeTool.type === _Shapes.ShapeEnum.line || activeTool.type === _Shapes.ShapeEnum.polygon || activeTool.type === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
           });
         }
@@ -206,19 +192,19 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     ref.addEventListener('touchstart', handleMouseDown, {
       passive: false
     });
-    return function () {
+    return () => {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
   }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
-  (0, _react.useEffect)(function () {
-    var ref = selectionCanvasRef.current;
+  (0, _react.useEffect)(() => {
+    const ref = selectionCanvasRef.current;
     if (!ref) return;
 
-    var handleDoubleClick = function handleDoubleClick(e) {
+    const handleDoubleClick = e => {
       if (activeTool.type === _tools.ActionsEnum.selection) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
-          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
+          const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
           if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding)) {
             setSelectionMode({
@@ -232,15 +218,15 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
     if (isInsideComponent) {
       registerDoubleClickEvent(ref, handleDoubleClick);
-      return function () {
+      return () => {
         unRegisterDoubleClickEvent(ref);
       };
     }
   }, [registerDoubleClickEvent, unRegisterDoubleClickEvent, isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
-    hoverMode: hoverMode
+    hoverMode
   };
 };
 
 var _default = useDrawableCanvas;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useKeyboard.js

@@ -5,11 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -19,42 +15,36 @@ var _data = require("../utils/data");
 
 var _keyboard = require("../types/keyboard");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var useKeyboard = function useKeyboard(_ref) {
-  var isInsideComponent = _ref.isInsideComponent,
-      selectedShape = _ref.selectedShape,
-      isEditingText = _ref.isEditingText,
-      setSelectedShape = _ref.setSelectedShape,
-      removeShape = _ref.removeShape,
-      pasteShape = _ref.pasteShape,
-      updateShape = _ref.updateShape,
-      backwardShape = _ref.backwardShape,
-      forwardShape = _ref.forwardShape;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      copiedShape = _useState2[0],
-      setCopiedShape = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    var handleCopy = function handleCopy(e) {
+const useKeyboard = _ref => {
+  let {
+    isInsideComponent,
+    selectedShape,
+    isEditingText,
+    setSelectedShape,
+    removeShape,
+    pasteShape,
+    updateShape,
+    backwardShape,
+    forwardShape
+  } = _ref;
+  const [copiedShape, setCopiedShape] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    const handleCopy = e => {
       if (!selectedShape) return;
       if (isEditingText) return;
       e.preventDefault();
-      setCopiedShape(_objectSpread({}, selectedShape));
+      setCopiedShape({ ...selectedShape
+      });
     };
 
-    var handlePaste = function handlePaste(e) {
+    const handlePaste = e => {
       if (!copiedShape) return;
       if (isEditingText) return;
       e.preventDefault();
       pasteShape((0, _data.copyShape)(copiedShape));
     };
 
-    var handleKeyDown = function handleKeyDown(e) {
+    const handleKeyDown = e => {
       if (e.metaKey || e.ctrlKey) {
         if (e.key === _keyboard.KeyboardCode.Z) {
           e.preventDefault();
@@ -80,19 +70,19 @@ var useKeyboard = function useKeyboard(_ref) {
 
       switch (e.key) {
         case _keyboard.KeyboardCode.ArrowLeft:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] - 1, selectedShape.translation[1]], selectedShape));
+          updateShape(_fp.default.set('translation', [selectedShape.translation[0] - 1, selectedShape.translation[1]], selectedShape));
           break;
 
         case _keyboard.KeyboardCode.ArrowRight:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] + 1, selectedShape.translation[1]], selectedShape));
+          updateShape(_fp.default.set('translation', [selectedShape.translation[0] + 1, selectedShape.translation[1]], selectedShape));
           break;
 
         case _keyboard.KeyboardCode.ArrowDown:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] + 1], selectedShape));
+          updateShape(_fp.default.set('translation', [selectedShape.translation[0], selectedShape.translation[1] + 1], selectedShape));
           break;
 
         case _keyboard.KeyboardCode.ArrowUp:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] - 1], selectedShape));
+          updateShape(_fp.default.set('translation', [selectedShape.translation[0], selectedShape.translation[1] - 1], selectedShape));
           break;
 
         case _keyboard.KeyboardCode.Delete:
@@ -108,7 +98,7 @@ var useKeyboard = function useKeyboard(_ref) {
       document.addEventListener(_keyboard.KeyboardCommand.Paste, handlePaste);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('keydown', handleKeyDown);
         document.removeEventListener(_keyboard.KeyboardCommand.Copy, handleCopy);
@@ -120,4 +110,4 @@ var useKeyboard = function useKeyboard(_ref) {
 };
 
 var _default = useKeyboard;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useResizeObserver.js

@@ -5,36 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _react = require("react");
 
-var useResizeObserver = function useResizeObserver(_ref) {
-  var onResized = _ref.onResized,
-      element = _ref.element;
-  (0, _react.useEffect)(function () {
-    var current = element.current;
+const useResizeObserver = _ref => {
+  let {
+    onResized,
+    element
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    const current = element.current;
     if (!current) return;
-    var resizeObserver = new ResizeObserver(function (entries) {
-      var _ref2 = _fp["default"].get('0.borderBoxSize', entries) ? _fp["default"].flow(_fp["default"].get('0.borderBoxSize'), _fp["default"].castArray, _fp["default"].first, function (el) {
+    const resizeObserver = new ResizeObserver(entries => {
+      const {
+        width,
+        height
+      } = _fp.default.get('0.borderBoxSize', entries) ? _fp.default.flow(_fp.default.get('0.borderBoxSize'), _fp.default.castArray, _fp.default.first, el => {
         return {
-          width: _fp["default"].get('inlineSize', el),
-          height: _fp["default"].get('blockSize', el)
+          width: _fp.default.get('inlineSize', el),
+          height: _fp.default.get('blockSize', el)
         };
-      })(entries) : _fp["default"].get('0.contentRect', entries),
-          width = _ref2.width,
-          height = _ref2.height;
-
+      })(entries) : _fp.default.get('0.contentRect', entries);
       onResized(width, height);
     });
     resizeObserver.observe(current);
-    return function () {
+    return () => {
       resizeObserver.unobserve(current);
     };
   }, [element, onResized]);
 };
 
 var _default = useResizeObserver;
-exports["default"] = _default;
+exports.default = _default;