react-sync-board 0.6.0 → 0.6.1

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, createContext, createElement, Fragment, useRef, useLayoutEffect, useEffect, useMemo, memo } from 'react';
+import React__default, { forwardRef, useContext, createContext, createElement, Fragment, useRef, useLayoutEffect, useEffect, useMemo, memo, useCallback } from 'react';
 import { atom, selector, useRecoilValue, useRecoilCallback, useRecoilState, useSetRecoilState, RecoilRoot } from 'recoil';
 
 function ownKeys(object, enumerableOnly) {
@@ -4110,10 +4110,6 @@ var useItemList = function useItemList() {
   return items;
 };
 
-var useSelectedItems = function useSelectedItems() {
-  return useRecoilValue(SelectedItemsAtom);
-};
-
 /**
  * Run effect only when component is unmounted.
  *
@@ -4301,6 +4297,28 @@ function useThrottledCallback(callback, deps, delay, noTrailing) {
   }, __spreadArray([delay, noTrailing], deps, true));
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Like `useEffect`, but passed function is debounced.
+ *
+ * @param callback Callback like for `useEffect`, but without ability to return
+ * a cleanup function.
+ * @param deps Dependencies list that will be passed to underlying `useEffect`
+ * and `useDebouncedCallback`.
+ * @param delay Debounce delay.
+ * @param maxWait Maximum amount of milliseconds that function can be delayed
+ * before it's force execution. 0 means no max wait.
+ */
+
+function useDebouncedEffect(callback, deps, delay, maxWait) {
+  if (maxWait === void 0) {
+    maxWait = 0;
+  } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(useDebouncedCallback(callback, deps, delay, maxWait), deps);
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Like `useEffect`, but passed function is throttled.
@@ -4445,6 +4463,45 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
+var useDebouncedItems = function useDebouncedItems() {
+  var items = useRecoilValue(AllItemsSelector);
+
+  var _React$useState = React__default.useState(items),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      debouncedItems = _React$useState2[0],
+      setDebouncedItems = _React$useState2[1];
+
+  var updateDebouncedItems = useRecoilCallback(function (_ref) {
+    var snapshot = _ref.snapshot;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var currentItemMap;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return snapshot.getPromise(AllItemsSelector);
+
+            case 2:
+              currentItemMap = _context.sent;
+              setDebouncedItems(currentItemMap);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, []);
+  useDebouncedEffect(updateDebouncedItems, [items], 300);
+  return debouncedItems;
+};
+
+var useSelectedItems = function useSelectedItems() {
+  return useRecoilValue(SelectedItemsAtom);
+};
+
 var isMacOS = function isMacOS() {
   var userAgent = navigator.userAgent.toLowerCase();
   return /mac os ?x 10/.test(userAgent);
@@ -5319,8 +5376,6 @@ var PositionedItem = function PositionedItem(_ref12) {
       rest = _objectWithoutProperties(_ref12, _excluded2);
 
   if (!rest.itemMap[state.type]) {
-    // eslint-disable-next-line no-console
-    console.warn("Item type ".concat(state.type, " not recognized!"));
     return null;
   }
 
@@ -8658,8 +8713,10 @@ var getActionsFromItem = function getActionsFromItem(item, itemMap) {
 };
 
 var useAvailableActions = function useAvailableActions() {
+  var itemMap = useRecoilValue(ItemMapAtom);
+
   var _useRecoilValue = useRecoilValue(ConfigurationAtom),
-      itemMap = _useRecoilValue.itemTemplates;
+      itemTemplates = _useRecoilValue.itemTemplates;
 
   var selected = useRecoilValue(SelectedItemsAtom);
 
@@ -8669,6 +8726,13 @@ var useAvailableActions = function useAvailableActions() {
       setAvailableActions = _React$useState2[1];
 
   var isMountedRef = React__default.useRef(false);
+  React__default.useEffect(function () {
+    // Mounted guard
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
   var getItemListOrSelected = useRecoilCallback(function (_ref) {
     var snapshot = _ref.snapshot;
     return /*#__PURE__*/function () {
@@ -8716,19 +8780,12 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React__default.useEffect(function () {
-    // Mounted guard
-    isMountedRef.current = true;
-    return function () {
-      isMountedRef.current = false;
-    };
-  }, []);
   /**
    * Returns available actions for selected items. An action is kept only if all
    * items have this exact same action with same parameters.
    */
 
-  var updateAvailableActions = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  var updateAvailableActions = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -8758,13 +8815,13 @@ var useAvailableActions = function useAvailableActions() {
 
           case 9:
             allActions = selectedItemList.reduce(function (acc, item) {
-              var itemActions = getActionsFromItem(item, itemMap);
+              var itemActions = getActionsFromItem(item, itemTemplates);
               return acc.filter(function (value) {
                 return itemActions.some(function (itemAction) {
                   return es6(value, itemAction);
                 });
               });
-            }, getActionsFromItem(selectedItemList[0], itemMap));
+            }, getActionsFromItem(selectedItemList[0], itemTemplates));
             setAvailableActions(allActions);
             _context2.next = 14;
             break;
@@ -8778,11 +8835,11 @@ var useAvailableActions = function useAvailableActions() {
         }
       }
     }, _callee2);
-  })), [getItemListOrSelected, itemMap]); // Update available actions when selection change
+  })), [getItemListOrSelected, itemTemplates]); // Update available actions when selection change
 
-  React__default.useEffect(function () {
-    updateAvailableActions();
-  }, [updateAvailableActions, selected]);
+  React__default.useEffect(updateAvailableActions, [updateAvailableActions, selected]); // Debounced update available actions when items change
+
+  useDebouncedEffect(updateAvailableActions, [itemMap, updateAvailableActions], 300);
   return {
     availableActions: availableActions
   };
@@ -9367,7 +9424,11 @@ var SyncBoard = function SyncBoard(_ref) {
     });
   }, [setConfiguration, uid]);
   useResizeObserver(boardWrapperRef, function () {
-    return setConfiguration(function (prev) {
+    if (!boardWrapperRef.current) {
+      return;
+    }
+
+    setConfiguration(function (prev) {
       return _objectSpread2(_objectSpread2({}, prev), {}, {
         boardWrapperRect: boardWrapperRef.current.getBoundingClientRect()
       });
@@ -9435,5 +9496,5 @@ var ConnectedSyncRoom = function ConnectedSyncRoom(_ref) {
   }, /*#__PURE__*/React__default.createElement(SubscribeUserEvents, null), children));
 };
 
-export { Board, ConnectedSyncBoard as BoardWrapper, ConnectedSyncRoom as RoomWrapper, useAvailableActions, useBoardConfig, useDim as useBoardPosition, useBoardState, useItemActions, useItemInteraction, useItemList as useItems, useMessage, useSelectedItems, useSelectionBox, useUsers, useWire };
+export { Board, ConnectedSyncBoard as BoardWrapper, ConnectedSyncRoom as RoomWrapper, useAvailableActions, useBoardConfig, useDim as useBoardPosition, useBoardState, useDebouncedItems, useItemActions, useItemInteraction, useItemList as useItems, useMessage, useSelectedItems, useSelectionBox, useUsers, useWire };
 //# sourceMappingURL=index.js.map