@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/Canvas.js

@@ -2,203 +2,184 @@
 
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _Shapes = require("../types/Shapes");
-
-var _draw = require("../utils/draw");
-
-var _Mode = require("../types/Mode");
-
-var _transform = require("../utils/transform");
+var _canvas = require("../utils/canvas");
 
 var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
 
-var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
+var _useDrawableCanvas = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
 
-var _icons = require("../constants/icons");
+var _shapes = require("../utils/shapes");
 
-var _tools = require("../types/tools");
+var _text = require("../utils/shapes/text");
 
-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); }
+var _grid = require("../utils/shapes/grid");
 
-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); }
 
-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 _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 _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 renderDrawCanvas = function renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) {
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
+const renderDrawCanvas = (drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape) => {
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
   drawCtx.clearRect(0, 0, width, height);
+  (0, _canvas.initCanvasContext)(drawCtx);
+  gridFormat && (0, _grid.drawGrid)(drawCtx, width, height, scaleRatio, canvasOffset, gridFormat);
 
-  for (var i = shapes.length - 1; i >= 0; i--) {
-    if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
-      (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    if (selectionMode.mode !== 'textedition' || shapes[i] !== selectedShape) {
+      (0, _shapes.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
     }
   }
 };
 
-var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) {
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
+const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) => {
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
   selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+  selectedShape && activeTool.type !== 'brush' && (0, _shapes.drawShapeSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
-    scaleRatio: scaleRatio,
-    canvasOffset: canvasOffset,
-    selectionPadding: selectionPadding,
-    selectionWidth: selectionWidth,
-    selectionColor: selectionColor,
-    withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
+    scaleRatio,
+    canvasOffset,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    withAnchors: selectionMode.mode !== 'textedition'
   });
 };
 
-var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCanvasBox",
-  "class": "s9czb9p"
+  class: "s9czb9p"
 });
-var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCanvasContainer",
-  "class": "s1538eht"
+  class: "s1538eht"
 });
-var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
   name: "StyledDrawCanvas",
-  "class": "s101qxdc"
+  class: "s101qxdc"
 });
-var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
   name: "StyledSelectionCanvas",
-  "class": "sa4oq48",
+  class: "sa4oq48",
   vars: {
-    "sa4oq48-0": [function (_ref) {
-      var cursor = _ref.cursor;
+    "sa4oq48-0": [_ref => {
+      let {
+        cursor
+      } = _ref;
       return cursor;
     }]
   }
 });
 
-var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
-  var withGrid = _ref2.withGrid,
-      canGrow = _ref2.canGrow,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      canvasSize = _ref2.canvasSize,
-      shapes = _ref2.shapes,
-      addShape = _ref2.addShape,
-      updateSingleShape = _ref2.updateSingleShape,
-      selectedShape = _ref2.selectedShape,
-      setSelectedShape = _ref2.setSelectedShape,
-      saveShapes = _ref2.saveShapes,
-      activeTool = _ref2.activeTool,
-      setActiveTool = _ref2.setActiveTool,
-      canvasOffsetStartPosition = _ref2.canvasOffsetStartPosition,
-      setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
-      canvasOffset = _ref2.canvasOffset,
-      setCanvasOffset = _ref2.setCanvasOffset,
-      isInsideComponent = _ref2.isInsideComponent,
-      selectionMode = _ref2.selectionMode,
-      setSelectionMode = _ref2.setSelectionMode,
-      selectionWidth = _ref2.selectionWidth,
-      selectionColor = _ref2.selectionColor,
-      selectionPadding = _ref2.selectionPadding,
-      isEditMode = _ref2.isEditMode;
-  var drawCanvasRef = (0, _react.useRef)(null);
-  var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return drawCanvasRef.current;
+const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    gridFormat,
+    canGrow,
+    disabled = false,
+    canvasSize,
+    shapes,
+    addShape,
+    updateSingleShape,
+    selectedShape,
+    setSelectedShape,
+    saveShapes,
+    activeTool,
+    setActiveTool,
+    canvasOffsetStartPosition,
+    setCanvasOffsetStartPosition,
+    canvasOffset,
+    setCanvasOffset,
+    isInsideComponent,
+    selectionMode,
+    setSelectionMode,
+    selectionWidth,
+    selectionColor,
+    selectionPadding,
+    isEditMode,
+    isShiftPressed
+  } = _ref2;
+  const drawCanvasRef = (0, _react.useRef)(null);
+  const selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+  (0, _react.useImperativeHandle)(ref, () => drawCanvasRef.current);
+  const {
+    hoverMode
+  } = (0, _useDrawableCanvas.default)({
+    disabled,
+    addShape,
+    canvasSize,
+    drawCanvasRef,
+    setActiveTool,
+    shapes,
+    selectionMode,
+    activeTool,
+    isInsideComponent,
+    setCanvasOffset,
+    selectedShape,
+    selectionCanvasRef,
+    canvasOffsetStartPosition,
+    setSelectedShape,
+    setCanvasOffsetStartPosition,
+    updateSingleShape,
+    gridFormat,
+    canvasOffset,
+    saveShapes,
+    setSelectionMode,
+    selectionPadding,
+    isShiftPressed
   });
+  const updateSelectedShapeText = (0, _react.useCallback)(newText => {
+    var _drawCanvasRef$curren;
 
-  var _useDrawableCanvas = (0, _useDrawableCanvas2["default"])({
-    disabled: disabled,
-    addShape: addShape,
-    canvasSize: canvasSize,
-    drawCanvasRef: drawCanvasRef,
-    setActiveTool: setActiveTool,
-    shapes: shapes,
-    selectionMode: selectionMode,
-    activeTool: activeTool,
-    isInsideComponent: isInsideComponent,
-    setCanvasOffset: setCanvasOffset,
-    selectedShape: selectedShape,
-    selectionCanvasRef: selectionCanvasRef,
-    canvasOffsetStartPosition: canvasOffsetStartPosition,
-    setSelectedShape: setSelectedShape,
-    setCanvasOffsetStartPosition: setCanvasOffsetStartPosition,
-    updateSingleShape: updateSingleShape,
-    canvasOffset: canvasOffset,
-    saveShapes: saveShapes,
-    setSelectionMode: setSelectionMode,
-    selectionPadding: selectionPadding
-  }),
-      hoverMode = _useDrawableCanvas.hoverMode;
-
-  var updateSelectedShapeText = (0, _react.useCallback)(function (newText) {
-    var _drawCanvasRef$curren, _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
-
-    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== _Shapes.ShapeEnum.text) return;
-    var ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
+    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== 'text') return;
+    const ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
     if (!ctx) return;
-
-    var newShape = _fp["default"].set('value', newText, selectedShape);
-
-    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
-
-    var resizedShape = _objectSpread(_objectSpread({}, newShape), {}, {
-      width: newWidth,
-      height: newShape.fontSize * newShape.value.length
-    });
-
-    updateSingleShape(resizedShape);
-  }, [updateSingleShape, selectedShape]);
-  (0, _react.useEffect)(function () {
+    const newShape = (0, _text.resizeTextShapeWithNewContent)(ctx, selectedShape, newText, canvasOffset);
+    updateSingleShape(newShape);
+  }, [updateSingleShape, selectedShape, canvasOffset]);
+  (0, _react.useEffect)(() => {
     var _drawCanvasRef$curren2;
 
-    var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
-    drawCtx && window.requestAnimationFrame(function () {
-      return renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape);
-    });
-  }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
-  (0, _react.useEffect)(function () {
+    const drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    drawCtx && window.requestAnimationFrame(() => renderDrawCanvas(drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape));
+  }, [shapes, gridFormat, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
+  (0, _react.useEffect)(() => {
     var _selectionCanvasRef$c;
 
-    var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    selectionCtx && window.requestAnimationFrame(function () {
-      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
-    });
+    const selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
+    selectionCtx && window.requestAnimationFrame(() => renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape));
   }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
-  return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
-    "data-grid": withGrid,
+  return /*#__PURE__*/_react.default.createElement(StyledCanvasBox, null, /*#__PURE__*/_react.default.createElement(StyledCanvasContainer, {
     "data-grow": canGrow
-  }, /*#__PURE__*/_react["default"].createElement(StyledDrawCanvas, {
+  }, /*#__PURE__*/_react.default.createElement(StyledDrawCanvas, {
     ref: drawCanvasRef,
     "data-grow": canGrow,
     width: canvasSize.width,
     height: canvasSize.height
-  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+  }), isEditMode && /*#__PURE__*/_react.default.createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
     width: canvasSize.width,
     height: canvasSize.height,
     "data-grow": canGrow,
-    cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
-  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+    cursor: activeTool.type !== 'selection' && activeTool.type !== 'move' || hoverMode.mode === 'resize' ? 'crosshair' : activeTool.type === 'move' || hoverMode.mode === 'translate' ? 'move' : hoverMode.mode === 'rotate' ? 'grab' : 'default'
+  }), isEditMode && selectionMode.mode === 'textedition' && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === 'text' && /*#__PURE__*/_react.default.createElement(_EditTextBox.default, {
     scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,
@@ -209,4 +190,4 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 });
 
 var _default = Canvas;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Button.js

@@ -5,50 +5,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _excluded = ["hidden", "disabled", "selected", "icon", "children", "className", "title", "onClick"],
-    _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
-var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
+const StyledButton = /*#__PURE__*/(0, _react2.styled)('button')({
   name: "StyledButton",
-  "class": "sq3bzv4"
+  class: "sq3bzv4"
 });
-var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledButtonContent = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledButtonContent",
-  "class": "sst453j"
+  class: "sst453j"
 });
-var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledIcon = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledIcon",
-  "class": "s1q5lsc2"
+  class: "s1q5lsc2"
 });
-var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledChildren = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledChildren",
-  "class": "s1dis2j8"
+  class: "s1dis2j8"
 });
 
-var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   if (props.type === 'file' || props.type === 'color') {
-    var _props$hidden = props.hidden,
-        hidden = _props$hidden === void 0 ? false : _props$hidden,
-        _props$disabled = props.disabled,
-        disabled = _props$disabled === void 0 ? false : _props$disabled,
-        _props$selected = props.selected,
-        selected = _props$selected === void 0 ? false : _props$selected,
-        icon = props.icon,
-        children = props.children,
-        className = props.className,
-        title = props.title,
-        onClick = props.onClick,
-        fileProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-    return /*#__PURE__*/_react["default"].createElement(StyledButton, {
+    const {
+      hidden = false,
+      disabled = false,
+      selected = false,
+      icon,
+      children,
+      className,
+      title,
+      onClick,
+      ...fileProps
+    } = props;
+    return /*#__PURE__*/_react.default.createElement(StyledButton, {
       as: "label",
       className: className,
       title: title,
@@ -56,42 +51,38 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       "data-disabled": +disabled,
       "data-selected": +selected,
       "data-hidden": +hidden
-    }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
+    }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: ref,
       disabled: disabled
-    }, fileProps)), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+    }, fileProps)), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
       dangerouslySetInnerHTML: {
         __html: icon
       }
     })));
   } else {
-    var _ref = props,
-        _ref$hidden = _ref.hidden,
-        _hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-        _ref$disabled = _ref.disabled,
-        _disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        _ref$selected = _ref.selected,
-        _selected = _ref$selected === void 0 ? false : _ref$selected,
-        _icon = _ref.icon,
-        _children = _ref.children,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'button' : _ref$type,
-        _fileProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
-
-    return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
+    const {
+      hidden = false,
+      disabled = false,
+      selected = false,
+      icon,
+      children,
+      type = 'button',
+      ...fileProps
+    } = props;
+    return /*#__PURE__*/_react.default.createElement(StyledButton, (0, _extends2.default)({
       ref: ref,
-      disabled: _disabled,
-      "data-disabled": +_disabled,
-      "data-selected": +_selected,
-      "data-hidden": +_hidden,
+      disabled: disabled,
+      "data-disabled": +disabled,
+      "data-selected": +selected,
+      "data-hidden": +hidden,
       type: type
-    }, _fileProps), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, _children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, _children), _icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+    }, fileProps), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
       dangerouslySetInnerHTML: {
-        __html: _icon
+        __html: icon
       }
     })));
   }
 });
 
 var _default = Button;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Loading.js

@@ -1,66 +1,57 @@
 "use strict";
 
-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 _react = require("@linaria/react");
 
+var _app = require("../../constants/app");
+
+var _loading = require("../../constants/loading");
+
 var _style = require("../../constants/style");
 
 var _react2 = _interopRequireWildcard(require("react"));
 
-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 TRANSITION_DURATION = 300;
-var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledLoading = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledLoading",
-  "class": "s9j48u3"
+  class: "s9j48u3"
 });
-var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledLoader = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledLoader",
-  "class": "s4auclc"
+  class: "s4auclc"
 });
-var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledShape = /*#__PURE__*/(0, _react.styled)('div')({
   name: "StyledShape",
-  "class": "s1l3fbq"
+  class: "s1l3fbq"
 });
 
-var Loading = function Loading(_ref) {
-  var _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
-
-  var _useState = (0, _react2.useState)('hidden'),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      loadingState = _useState2[0],
-      setLoadingState = _useState2[1];
-
-  (0, _react2.useEffect)(function () {
+const Loading = _ref => {
+  let {
+    isLoading = false
+  } = _ref;
+  const [loadingState, setLoadingState] = (0, _react2.useState)('hidden');
+  (0, _react2.useEffect)(() => {
     if (isLoading) {
       setLoadingState('visible');
     } else {
       setLoadingState('fadeOut');
-      var fadeOutTimeout = setTimeout(function () {
-        return setLoadingState('hidden');
-      }, TRANSITION_DURATION);
-      return function () {
+      const fadeOutTimeout = setTimeout(() => setLoadingState('hidden'), _loading.LOADING_TRANSITION_DURATION);
+      return () => {
         clearTimeout(fadeOutTimeout);
       };
     }
   }, [isLoading]);
-  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2["default"].createElement(StyledLoading, {
+  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2.default.createElement(StyledLoading, {
     "data-loading": loadingState
-  }, /*#__PURE__*/_react2["default"].createElement(StyledLoader, null, /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null)));
+  }, /*#__PURE__*/_react2.default.createElement(StyledLoader, null, /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null)));
 };
 
 var _default = Loading;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Modal.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,33 +13,34 @@ var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledModal = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledModal",
-  "class": "s1c8tp02"
+  class: "s1c8tp02"
 });
-var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledPanel",
-  "class": "svkxpz4"
+  class: "svkxpz4"
 });
-var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledMask = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledMask",
-  "class": "s1s9jyyg"
+  class: "s1s9jyyg"
 });
 
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-      onClose = _ref.onClose,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'center' : _ref$position,
-      className = _ref.className;
-  return /*#__PURE__*/_react["default"].createElement(StyledModal, {
+const Modal = _ref => {
+  let {
+    children,
+    onClose,
+    position = 'center',
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledModal, {
     "data-position": position
-  }, /*#__PURE__*/_react["default"].createElement(StyledMask, {
+  }, /*#__PURE__*/_react.default.createElement(StyledMask, {
     onClick: onClose
-  }), /*#__PURE__*/_react["default"].createElement(StyledPanel, {
+  }), /*#__PURE__*/_react.default.createElement(StyledPanel, {
     className: className
   }, children));
 };
 
 var _default = Modal;
-exports["default"] = _default;
+exports.default = _default;