@yorab/react-paint 0.2.2

package/dist/hooks/useShapes.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _data = require("../utils/data");
+
+var useShapes = function useShapes() {
+  var onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp["default"].noop;
+  var shapesRef = (0, _react.useRef)([]);
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedShape = _useState2[0],
+      setSelectedShape = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    states: [{
+      shapes: [],
+      selectedShape: undefined
+    }],
+    cursor: 0
+  }),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      savedShapes = _useState4[0],
+      setSavedShapes = _useState4[1];
+
+  var canGoBackward = savedShapes.cursor > 0;
+  var canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
+  var canClear = shapesRef.current.length > 0;
+  var saveShapes = (0, _react.useCallback)(function () {
+    setSavedShapes(function (prevSavedShaped) {
+      return _fp["default"].isEqual(_fp["default"].get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
+        states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
+          shapes: shapesRef.current,
+          selectedShape: selectedShape
+        }]),
+        cursor: prevSavedShaped.cursor + 1
+      };
+    });
+  }, [selectedShape]);
+  var addShape = (0, _react.useCallback)(function (newShape) {
+    shapesRef.current = [newShape].concat((0, _toConsumableArray2["default"])(shapesRef.current));
+  }, []);
+  var addPictureShape = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileOrUrl) {
+      var maxSize,
+          pictureShape,
+          _args = arguments;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              maxSize = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
+              _context.next = 3;
+              return (0, _data.createPicture)(fileOrUrl, maxSize);
+
+            case 3:
+              pictureShape = _context.sent;
+              addShape(pictureShape);
+              return _context.abrupt("return", pictureShape);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [addShape]);
+  var updateShape = (0, _react.useCallback)(function (updatedShape) {
+    var withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    shapesRef.current = shapesRef.current.map(function (marker) {
+      return marker.id === (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) ? updatedShape : marker;
+    });
+    setSelectedShape(function (prevSelectedShape) {
+      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape;
+    });
+    withSave && saveShapes();
+  }, [selectedShape, saveShapes]);
+  var updateShapes = (0, _react.useCallback)(function (newShapes) {
+    var pureShapes = newShapes.map(function (shape) {
+      return _fp["default"].omit(['chosen'], shape);
+    });
+    shapesRef.current = pureShapes;
+    saveShapes();
+  }, [saveShapes]);
+  var removeShape = (0, _react.useCallback)(function (shape) {
+    setSelectedShape(function (prevSelectedShape) {
+      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape;
+    });
+    shapesRef.current = _fp["default"].remove({
+      id: shape.id
+    }, shapesRef.current);
+    saveShapes();
+  }, [saveShapes]);
+  var backwardShape = (0, _react.useCallback)(function () {
+    setSavedShapes(function (prevSavedShaped) {
+      var newCursor = Math.max(0, prevSavedShaped.cursor - 1);
+      shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
+      setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
+      return _fp["default"].set('cursor', newCursor, prevSavedShaped);
+    });
+  }, []);
+  var forwardShape = (0, _react.useCallback)(function () {
+    setSavedShapes(function (prevSavedShaped) {
+      var newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
+      shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
+      setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
+      return _fp["default"].set('cursor', newCursor, prevSavedShaped);
+    });
+  }, []);
+  var clearShapes = (0, _react.useCallback)(function () {
+    var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setSelectedShape(undefined);
+    shapesRef.current = shapesToInit;
+    setSavedShapes(function (prevSavedShaped) {
+      return clearHistory ? {
+        states: [{
+          shapes: shapesToInit,
+          selectedShape: undefined
+        }],
+        cursor: 0
+      } : {
+        states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
+          shapes: shapesToInit,
+          selectedShape: undefined
+        }]),
+        cursor: prevSavedShaped.cursor + 1
+      };
+    });
+  }, []);
+  var moveShapes = (0, _react.useCallback)(function (firstShapeId, lastShapeId) {
+    var shapes = shapesRef.current;
+
+    var firstShapeIndex = _fp["default"].findIndex({
+      id: firstShapeId
+    }, shapes);
+
+    var lastShapeIndex = _fp["default"].findIndex({
+      id: lastShapeId
+    }, shapes); // todo utils
+
+
+    if (firstShapeIndex < lastShapeIndex) {
+      updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex + 1, shapes.length, shapes))));
+    } else {
+      updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, lastShapeIndex, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, shapes.length, shapes))));
+    }
+  }, [updateShapes]);
+  var toggleShapeVisibility = (0, _react.useCallback)(function (shape) {
+    var shapes = shapesRef.current;
+
+    var shapeIndex = _fp["default"].findIndex({
+      id: shape.id
+    }, shapes);
+
+    if (shapeIndex < 0) return;
+
+    var newShape = _fp["default"].set('visible', shape.visible === false, shape);
+
+    setSelectedShape(function (prevSelectedShape) {
+      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
+    });
+    updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
+  }, [updateShapes]);
+  var toggleShapeLock = (0, _react.useCallback)(function (shape) {
+    var shapes = shapesRef.current;
+
+    var shapeIndex = _fp["default"].findIndex({
+      id: shape.id
+    }, shapes);
+
+    if (shapeIndex < 0) return;
+
+    var newShape = _fp["default"].set('locked', !shape.locked, shape);
+
+    setSelectedShape(function (prevSelectedShape) {
+      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
+    });
+    updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
+  }, [updateShapes]);
+  (0, _react.useEffect)(function () {
+    onDataChanged();
+  }, [onDataChanged, savedShapes]);
+  return {
+    shapesRef: shapesRef,
+    selectedShape: selectedShape,
+    addShape: addShape,
+    addPictureShape: addPictureShape,
+    moveShapes: moveShapes,
+    saveShapes: saveShapes,
+    setSelectedShape: setSelectedShape,
+    toggleShapeVisibility: toggleShapeVisibility,
+    toggleShapeLock: toggleShapeLock,
+    removeShape: removeShape,
+    updateShape: updateShape,
+    backwardShape: backwardShape,
+    forwardShape: forwardShape,
+    clearShapes: clearShapes,
+    canGoBackward: canGoBackward,
+    canGoForward: canGoForward,
+    canClear: canClear
+  };
+};
+
+var _default = useShapes;
+exports["default"] = _default;

package/dist/hooks/useSnackbar.d.ts

@@ -0,0 +1,16 @@
+import { SnackbarTypeEnum } from 'constants/snackbar';
+export declare type SnackBarType = {
+    id: string;
+    type: SnackbarTypeEnum;
+    text: string;
+    duration: number;
+};
+declare const useSnackbar: () => {
+    snackbarList: SnackBarType[];
+    addSnackbar: ({ type, duration, text }: {
+        type?: SnackbarTypeEnum | undefined;
+        duration?: number | undefined;
+        text: string;
+    }) => void;
+};
+export default useSnackbar;

package/dist/hooks/useSnackbar.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _snackbar = require("../constants/snackbar");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _react = require("react");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var useSnackbar = function useSnackbar() {
+  var timers = (0, _react.useRef)([]);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      snackbarList = _useState2[0],
+      setSnackbarList = _useState2[1];
+
+  var removeSnackbar = function removeSnackbar(id) {
+    setSnackbarList(function (prev) {
+      return _fp["default"].remove({
+        id: id
+      }, prev);
+    });
+  };
+
+  var addSnackbar = function addSnackbar(_ref) {
+    var _ref$type = _ref.type,
+        type = _ref$type === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.type : _ref$type,
+        _ref$duration = _ref.duration,
+        duration = _ref$duration === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration : _ref$duration,
+        text = _ref.text;
+    var newSnackbar = {
+      id: _fp["default"].uniqueId('snackbar_'),
+      duration: duration,
+      type: type,
+      text: text
+    };
+    setSnackbarList(function (prev) {
+      return [].concat((0, _toConsumableArray2["default"])(prev), [newSnackbar]);
+    });
+    timers.current = [].concat((0, _toConsumableArray2["default"])(timers.current), [setTimeout(function () {
+      return removeSnackbar(newSnackbar.id);
+    }, duration)]);
+  };
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _iterator = _createForOfIteratorHelper(timers.current),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var timer = _step.value;
+          clearTimeout(timer);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+  }, []);
+  return {
+    snackbarList: snackbarList,
+    addSnackbar: addSnackbar
+  };
+};
+
+var _default = useSnackbar;
+exports["default"] = _default;