react-sync-board 0.6.0 → 0.6.1

package/dist/cjs/index.js

@@ -4138,10 +4138,6 @@ var useItemList = function useItemList() {
   return items;
 };
 
-var useSelectedItems = function useSelectedItems() {
-  return recoil.useRecoilValue(SelectedItemsAtom);
-};
-
 /**
  * Run effect only when component is unmounted.
  *
@@ -4329,6 +4325,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
+
+
+  React.useEffect(useDebouncedCallback(callback, deps, delay, maxWait), deps);
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Like `useEffect`, but passed function is throttled.
@@ -4473,6 +4491,45 @@ function useResizeObserver(target, callback, enabled) {
   }, [target, ro]);
 }
 
+var useDebouncedItems = function useDebouncedItems() {
+  var items = recoil.useRecoilValue(AllItemsSelector);
+
+  var _React$useState = React__default['default'].useState(items),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      debouncedItems = _React$useState2[0],
+      setDebouncedItems = _React$useState2[1];
+
+  var updateDebouncedItems = recoil.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 recoil.useRecoilValue(SelectedItemsAtom);
+};
+
 var isMacOS = function isMacOS() {
   var userAgent = navigator.userAgent.toLowerCase();
   return /mac os ?x 10/.test(userAgent);
@@ -5347,8 +5404,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;
   }
 
@@ -8686,8 +8741,10 @@ var getActionsFromItem = function getActionsFromItem(item, itemMap) {
 };
 
 var useAvailableActions = function useAvailableActions() {
+  var itemMap = recoil.useRecoilValue(ItemMapAtom);
+
   var _useRecoilValue = recoil.useRecoilValue(ConfigurationAtom),
-      itemMap = _useRecoilValue.itemTemplates;
+      itemTemplates = _useRecoilValue.itemTemplates;
 
   var selected = recoil.useRecoilValue(SelectedItemsAtom);
 
@@ -8697,6 +8754,13 @@ var useAvailableActions = function useAvailableActions() {
       setAvailableActions = _React$useState2[1];
 
   var isMountedRef = React__default['default'].useRef(false);
+  React__default['default'].useEffect(function () {
+    // Mounted guard
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
   var getItemListOrSelected = recoil.useRecoilCallback(function (_ref) {
     var snapshot = _ref.snapshot;
     return /*#__PURE__*/function () {
@@ -8744,19 +8808,12 @@ var useAvailableActions = function useAvailableActions() {
       };
     }();
   }, []);
-  React__default['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['default'].useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  var updateAvailableActions = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var _yield$getItemListOrS, _yield$getItemListOrS2, selectedItemIds, selectedItemList, allActions;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -8786,13 +8843,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;
@@ -8806,11 +8863,11 @@ var useAvailableActions = function useAvailableActions() {
         }
       }
     }, _callee2);
-  })), [getItemListOrSelected, itemMap]); // Update available actions when selection change
+  })), [getItemListOrSelected, itemTemplates]); // Update available actions when selection change
 
-  React__default['default'].useEffect(function () {
-    updateAvailableActions();
-  }, [updateAvailableActions, selected]);
+  React__default['default'].useEffect(updateAvailableActions, [updateAvailableActions, selected]); // Debounced update available actions when items change
+
+  useDebouncedEffect(updateAvailableActions, [itemMap, updateAvailableActions], 300);
   return {
     availableActions: availableActions
   };
@@ -9395,7 +9452,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()
       });
@@ -9470,6 +9531,7 @@ exports.useAvailableActions = useAvailableActions;
 exports.useBoardConfig = useBoardConfig;
 exports.useBoardPosition = useDim;
 exports.useBoardState = useBoardState;
+exports.useDebouncedItems = useDebouncedItems;
 exports.useItemActions = useItemActions;
 exports.useItemInteraction = useItemInteraction;
 exports.useItems = useItemList;