@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/settings/Layouts.js

@@ -2,20 +2,16 @@
 
 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 = _interopRequireWildcard(require("react"));
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _useDrag2 = _interopRequireDefault(require("../../hooks/useDrag"));
+var _useDrag = _interopRequireDefault(require("../../hooks/useDrag"));
 
 var _icons = require("../../constants/icons");
 
@@ -27,105 +23,118 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Panel = _interopRequireDefault(require("../common/Panel"));
 
-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 StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledLayouts = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledLayouts",
-  "class": "su3a8bs"
+  class: "su3a8bs"
 });
-var StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledRemoveButton",
-  "class": "szboplp"
+  class: "szboplp"
 });
-var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledLayout = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledLayout",
-  "class": "sff5xt"
+  class: "sff5xt"
 });
-var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledVisibleButton",
-  "class": "sj3bift"
+  class: "sj3bift"
 });
-var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledLockedButton",
-  "class": "s10ip0a4"
+  class: "s10ip0a4"
 });
-var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyledGridButton",
-  "class": "s1j9uq9o"
+  class: "s1j9uq9o"
+});
+const StyledSubtitle = /*#__PURE__*/(0, _react2.styled)('span')({
+  name: "StyledSubtitle",
+  class: "s156ddbb"
 });
-var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSeparator",
-  "class": "s156ddbb"
+  class: "s11gt4hl"
 });
-var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
-  name: "StyledPanelLayouts",
-  "class": "s11gt4hl"
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
+  name: "StyledPanel",
+  class: "s13cxqhq"
 });
-var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledPanelContent",
+  class: "s1idv8qv"
+});
+const StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledScrollingContent",
-  "class": "s13cxqhq"
+  class: "s1mhvlda"
+});
+const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
+  name: "StyledRow",
+  class: "sr4amic"
 });
-var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledPlaceholder",
-  "class": "s1idv8qv"
+  class: "s13llc5i"
 });
 
-var Layout = function Layout(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      shape = _ref.shape,
-      selected = _ref.selected,
-      layoutDragging = _ref.layoutDragging,
-      toggleShapeVisibility = _ref.toggleShapeVisibility,
-      toggleShapeLock = _ref.toggleShapeLock,
-      setLayoutDragging = _ref.setLayoutDragging,
-      handleRemove = _ref.handleRemove,
-      handleSelect = _ref.handleSelect,
-      onMoveShapes = _ref.onMoveShapes;
-  var ref = (0, _react.useRef)(null);
-
-  var onRemove = function onRemove(e) {
+const Layout = _ref => {
+  let {
+    disabled = false,
+    shape,
+    selected,
+    layoutDragging,
+    toggleShapeVisibility,
+    toggleShapeLock,
+    setLayoutDragging,
+    handleRemove,
+    handleSelect,
+    onMoveShapes
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+
+  const onRemove = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     handleRemove(shape);
   };
 
-  var onSelect = function onSelect(e) {
+  const onSelect = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     handleSelect(shape);
   };
 
-  var onToggleShapeVisibility = function onToggleShapeVisibility(e) {
+  const onToggleShapeVisibility = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     toggleShapeVisibility(shape);
   };
 
-  var onToggleShapeLock = function onToggleShapeLock(e) {
+  const onToggleShapeLock = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     toggleShapeLock(shape);
   };
 
-  var _useDrag = (0, _useDrag2["default"])({
-    disabled: disabled,
-    ref: ref,
-    shape: shape,
-    layoutDragging: layoutDragging,
-    setLayoutDragging: setLayoutDragging,
-    handleSelect: handleSelect,
-    onMoveShapes: onMoveShapes
-  }),
-      isOver = _useDrag.isOver;
-
-  return /*#__PURE__*/_react["default"].createElement(StyledLayout, {
+  const {
+    isOver
+  } = (0, _useDrag.default)({
+    disabled,
+    ref,
+    shape,
+    layoutDragging,
+    setLayoutDragging,
+    handleSelect,
+    onMoveShapes
+  });
+  return /*#__PURE__*/_react.default.createElement(StyledLayout, {
     "data-disabled": +disabled,
     draggable: !disabled,
     "data-is-dragging": +(layoutDragging === shape.id),
@@ -133,25 +142,25 @@ var Layout = function Layout(_ref) {
     onClick: onSelect,
     "data-selected": +selected,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: (0, _style.getShapePicture)(shape.type)
     }
-  }), /*#__PURE__*/_react["default"].createElement("span", null, shape.id), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
+  }), /*#__PURE__*/_react.default.createElement("span", null, shape.id), /*#__PURE__*/_react.default.createElement(StyledSeparator, null), /*#__PURE__*/_react.default.createElement(StyledVisibleButton, {
     title: shape.visible ? 'Hide' : 'Show',
     "data-visible": shape.visible !== false,
     disabled: disabled,
     selected: selected,
     onClick: onToggleShapeVisibility,
     icon: shape.visible === false ? _icons.visibilityOffIcon : _icons.visibilityIcon
-  }), /*#__PURE__*/_react["default"].createElement(StyledLockedButton, {
+  }), /*#__PURE__*/_react.default.createElement(StyledLockedButton, {
     title: shape.locked ? 'Locked' : 'Unlocked',
     "data-locked": !!shape.locked,
     disabled: disabled,
     selected: selected,
     onClick: onToggleShapeLock,
     icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
-  }), /*#__PURE__*/_react["default"].createElement(StyledRemoveButton, {
+  }), /*#__PURE__*/_react.default.createElement(StyledRemoveButton, {
     title: "Remove",
     disabled: disabled,
     onClick: onRemove,
@@ -159,56 +168,47 @@ var Layout = function Layout(_ref) {
   }));
 };
 
-var Layouts = function Layouts(_ref2) {
-  var withGrid = _ref2.withGrid,
-      setWithGrid = _ref2.setWithGrid,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      shapes = _ref2.shapes,
-      removeShape = _ref2.removeShape,
-      toggleShapeVisibility = _ref2.toggleShapeVisibility,
-      toggleShapeLock = _ref2.toggleShapeLock,
-      selectedShape = _ref2.selectedShape,
-      moveShapes = _ref2.moveShapes,
-      selectShape = _ref2.selectShape,
-      isLayoutPanelShown = _ref2.isLayoutPanelShown;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      layoutDragging = _useState2[0],
-      setLayoutDragging = _useState2[1];
-
-  var onToggleGrid = function onToggleGrid() {
-    setWithGrid(function (prev) {
-      return !prev;
-    });
-  };
-
-  return isLayoutPanelShown ? /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
-    title: "Layers",
+const Layouts = _ref2 => {
+  let {
+    gridFormat,
+    setGridFormat,
+    disabled = false,
+    shapes,
+    removeShape,
+    toggleShapeVisibility,
+    toggleShapeLock,
+    selectedShape,
+    moveShapes,
+    selectShape,
+    isLayoutPanelShown
+  } = _ref2;
+  const [layoutDragging, setLayoutDragging] = (0, _react.useState)(undefined);
+  return isLayoutPanelShown ? /*#__PURE__*/_react.default.createElement(StyledPanel, {
     alignment: "right"
-  }, /*#__PURE__*/_react["default"].createElement(StyledScrollingContent, null, /*#__PURE__*/_react["default"].createElement(StyledGridButton, {
-    title: withGrid ? 'Grid on' : 'Grid off',
-    "data-grid": withGrid,
+  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, null, /*#__PURE__*/_react.default.createElement(StyledScrollingContent, null, /*#__PURE__*/_react.default.createElement(StyledRow, null, /*#__PURE__*/_react.default.createElement(StyledSubtitle, null, "Grid"), /*#__PURE__*/_react.default.createElement(StyledGridButton, {
+    icon: _icons.gridOffIcon,
+    selected: gridFormat === 0,
+    disabled: disabled,
+    onClick: () => setGridFormat(0)
+  }), ['S', 'M', 'L'].map((value, index) => /*#__PURE__*/_react.default.createElement(StyledGridButton, {
+    key: value,
+    selected: gridFormat === index + 1,
     disabled: disabled,
-    onClick: onToggleGrid,
-    icon: withGrid ? _icons.gridOnIcon : _icons.gridOffIcon
-  }, "Toggle grid"), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, null, "No layer yet") : _fp["default"].map(function (shape) {
-    return /*#__PURE__*/_react["default"].createElement(Layout, {
-      key: shape.id,
-      shape: shape,
-      disabled: disabled,
-      layoutDragging: layoutDragging,
-      setLayoutDragging: setLayoutDragging,
-      selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
-      handleSelect: selectShape,
-      handleRemove: removeShape,
-      onMoveShapes: moveShapes,
-      toggleShapeVisibility: toggleShapeVisibility,
-      toggleShapeLock: toggleShapeLock
-    });
-  }, shapes)))) : null;
+    onClick: () => setGridFormat(index + 1)
+  }, value))), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react.default.createElement(StyledPlaceholder, null, "No layer yet") : _fp.default.map(shape => /*#__PURE__*/_react.default.createElement(Layout, {
+    key: shape.id,
+    shape: shape,
+    disabled: disabled,
+    layoutDragging: layoutDragging,
+    setLayoutDragging: setLayoutDragging,
+    selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
+    handleSelect: selectShape,
+    handleRemove: removeShape,
+    onMoveShapes: moveShapes,
+    toggleShapeVisibility: toggleShapeVisibility,
+    toggleShapeLock: toggleShapeLock
+  }), shapes))))) : null;
 };
 
 var _default = Layouts;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/LineArrowField.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"));
 
@@ -17,36 +17,39 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledLeftTriangle",
-  "class": "s1xxj4yl"
+  class: "s1xxj4yl"
 });
-var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledRightTriangle",
-  "class": "sbd6jc8"
+  class: "sbd6jc8"
 });
-var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
-  "class": "scawaat"
+  class: "scawaat"
 });
 
-var LineArrowOption = function LineArrowOption(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+const LineArrowOption = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledOption, {
     "data-type": children
-  }, /*#__PURE__*/_react["default"].createElement(StyledLeftTriangle, null), /*#__PURE__*/_react["default"].createElement(StyledRightTriangle, null));
+  }, /*#__PURE__*/_react.default.createElement(StyledLeftTriangle, null), /*#__PURE__*/_react.default.createElement(StyledRightTriangle, null));
 };
 
-var LineArrowField = function LineArrowField(_ref2) {
-  var selectedSettings = _ref2.selectedSettings,
-      setSelectedSettings = _ref2.setSelectedSettings,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      values = _ref2.values,
-      defaultValue = _ref2.defaultValue,
-      valueChanged = _ref2.valueChanged;
-  if (_fp["default"].isEmpty(values)) return null;
-  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+const LineArrowField = _ref2 => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    disabled = false,
+    values,
+    defaultValue,
+    valueChanged
+  } = _ref2;
+  if (_fp.default.isEmpty(values)) return null;
+  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineArrowOption,
@@ -61,4 +64,4 @@ var LineArrowField = function LineArrowField(_ref2) {
 };
 
 var _default = LineArrowField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/LineTypeField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.LineTypeOption = void 0;
+exports.default = exports.LineTypeOption = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,34 +17,37 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledLine = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledLine",
-  "class": "s1qssg4n"
+  class: "s1qssg4n"
 });
-var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
-  "class": "se26iq6"
+  class: "se26iq6"
 });
 
-var LineTypeOption = function LineTypeOption(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+const LineTypeOption = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledOption, {
     "data-type": children
-  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
+  }, /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null));
 };
 
 exports.LineTypeOption = LineTypeOption;
 
-var LineTypeField = function LineTypeField(_ref2) {
-  var selectedSettings = _ref2.selectedSettings,
-      setSelectedSettings = _ref2.setSelectedSettings,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      values = _ref2.values,
-      defaultValue = _ref2.defaultValue,
-      valueChanged = _ref2.valueChanged;
-  if (_fp["default"].isEmpty(values)) return null;
-  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+const LineTypeField = _ref2 => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    disabled = false,
+    values,
+    defaultValue,
+    valueChanged
+  } = _ref2;
+  if (_fp.default.isEmpty(values)) return null;
+  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineTypeOption,
@@ -59,4 +62,4 @@ var LineTypeField = function LineTypeField(_ref2) {
 };
 
 var _default = LineTypeField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/PointsNumberField.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 _icons = require("../../constants/icons");
 
@@ -13,18 +13,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _RangeField = _interopRequireDefault(require("./RangeField"));
 
-var PointsNumberField = function PointsNumberField(_ref) {
-  var selectedSettings = _ref.selectedSettings,
-      setSelectedSettings = _ref.setSelectedSettings,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      min = _ref.min,
-      max = _ref.max,
-      step = _ref.step,
-      value = _ref.value,
-      valueChanged = _ref.valueChanged;
+const PointsNumberField = _ref => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    disabled = false,
+    min,
+    max,
+    step,
+    value,
+    valueChanged
+  } = _ref;
   if (min === max) return null;
-  return /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
+  return /*#__PURE__*/_react.default.createElement(_RangeField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     icon: _icons.polygonIcon,
@@ -41,4 +42,4 @@ var PointsNumberField = function PointsNumberField(_ref) {
 };
 
 var _default = PointsNumberField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/RangeField.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"));
 
@@ -21,74 +17,66 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Panel = _interopRequireDefault(require("../common/Panel"));
 
-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 StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
+const StyledLabel = /*#__PURE__*/(0, _react2.styled)('label')({
   name: "StyledLabel",
-  "class": "s9mugpt"
+  class: "s9mugpt"
 });
 
-var RangeField = function RangeField(_ref) {
-  var selectedSettings = _ref.selectedSettings,
-      setSelectedSettings = _ref.setSelectedSettings,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? "Choisissez l'intervalle" : _ref$title,
-      icon = _ref.icon,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      field = _ref.field,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 1 : _ref$value,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? 1 : _ref$min,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 20 : _ref$max,
-      _ref$step = _ref.step,
-      step = _ref$step === void 0 ? 1 : _ref$step,
-      _ref$unity = _ref.unity,
-      unity = _ref$unity === void 0 ? '' : _ref$unity,
-      valueChanged = _ref.valueChanged;
-  var roundValue = Math.round(value);
-
-  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      customKey = _useState2[0];
-
-  var handleChange = function handleChange(event) {
-    var parsedValue = _fp["default"].toNumber(event.target.value);
-
-    valueChanged(field, _fp["default"].isNaN(parsedValue) ? event.target.value : parsedValue);
+const RangeField = _ref => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    title = "Choisissez l'intervalle",
+    icon,
+    disabled = false,
+    field,
+    value = 1,
+    min = 1,
+    max = 20,
+    step = 1,
+    unity = '',
+    valueChanged
+  } = _ref;
+  const roundValue = Math.round(value);
+  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
+
+  const handleChange = event => {
+    const parsedValue = _fp.default.toNumber(event.target.value);
+
+    valueChanged(field, _fp.default.isNaN(parsedValue) ? event.target.value : parsedValue);
   };
 
-  var togglePanel = function togglePanel() {
-    setSelectedSettings(function (prev) {
+  const togglePanel = () => {
+    setSelectedSettings(prev => {
       return prev === customKey ? undefined : customKey;
     });
   };
 
-  var isPanelVisible = selectedSettings === customKey;
+  const isPanelVisible = selectedSettings === customKey;
   if (min === max) return null;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     selected: isPanelVisible,
     title: title,
     disabled: disabled,
     icon: icon,
     onClick: togglePanel
-  }), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
     title: title,
     alignment: "left",
     fitContainer: true
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledLabel, null, /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(StyledLabel, null, /*#__PURE__*/_react.default.createElement("input", {
     type: "range",
     min: min,
     max: max,
     step: step,
     value: value,
     onChange: handleChange
-  }), /*#__PURE__*/_react["default"].createElement("span", null, roundValue, unity)))));
+  }), /*#__PURE__*/_react.default.createElement("span", null, roundValue, unity)))));
 };
 
 var _default = RangeField;
-exports["default"] = _default;
+exports.default = _default;