@react-fabric/data 1.0.0-beta.0

package/dist/esm/tree/useTree.js

@@ -0,0 +1,181 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDebounce } from '@react-fabric/core';
+import { EMPTY_ARRAY } from '@react-fabric/utilities';
+import memoizeOne from 'memoize-one';
+import { useRef, useReducer, useEffect, useCallback } from 'react';
+import { refactorTree, makeTreeMap, flattenTree, filterTree, updateSelection, updateChecked } from './utils.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createItemList = memoizeOne(function (items) {
+  return items;
+});
+var useTree = function useTree(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? EMPTY_ARRAY : _ref$items,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? EMPTY_ARRAY : _ref$checked,
+    selected = _ref.selected,
+    matcher = _ref.matcher,
+    onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked;
+  var componentEvents = useRef({
+    onSelect: onSelect,
+    onChecked: onChecked
+  });
+  var itemList = createItemList(items);
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "load") {
+        state.items = refactorTree(action.items);
+        state.itemMap = makeTreeMap(state.items);
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "toggleExpand") {
+        var node = state.itemMap.get(action.id);
+        node && (node.open = !node.open);
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "expand") {
+        // TODO: check if children available, if not call onLoad to fetch node children
+        var _node = state.itemMap.get(action.id);
+        _node && (_node.open = true);
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "expandAll") {
+        // TODO: prevent opening dynamic nodes that dont have children
+        state.itemMap.forEach(function (node) {
+          !node.leaf && (node.open = true);
+        });
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "collapseAll") {
+        state.itemMap.forEach(function (node) {
+          !node.leaf && (node.open = false);
+        });
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "filter") {
+        filterTree(state.itemMap, action.query, matcher);
+        state.tree = flattenTree(state.items);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "select") {
+        var _componentEvents$curr, _componentEvents$curr2;
+        if (state.selected) {
+          updateSelection(state.itemMap, state.selected);
+        }
+        updateSelection(state.itemMap, action.id, true);
+        state.tree = flattenTree(state.items);
+        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selected: action.id
+        });
+      }
+      if (action.type === "toggleCheck") {
+        var _componentEvents$curr3, _componentEvents$curr4;
+        updateChecked(state.itemMap, action.id);
+        var checkList = [[], []];
+        Array.from(state.itemMap.values()).filter(function (node) {
+          return node.checked === 1;
+        }).forEach(function (node) {
+          return checkList[node.leaf ? 0 : 1].push(node.id);
+        });
+        (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, checkList[0], checkList[1]);
+        return _objectSpread({}, state);
+      }
+      if (action.type === "checked") {
+        action.id.forEach(function (id) {
+          return updateChecked(state.itemMap, id);
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          checked: action.id
+        });
+      }
+      return state;
+    }, {
+      itemMap: new Map(),
+      items: [],
+      tree: [],
+      checked: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  useEffect(function () {
+    componentEvents.current = {
+      onSelect: onSelect,
+      onChecked: onChecked
+    };
+  }, [onSelect, onChecked]);
+  useEffect(function () {
+    dispatch({
+      type: "load",
+      items: itemList
+    });
+  }, [itemList]);
+  useEffect(function () {
+    selected && dispatch({
+      type: "select",
+      id: selected
+    });
+  }, [selected]);
+  useEffect(function () {
+    checked && dispatch({
+      type: "checked",
+      id: checked
+    });
+  }, [checked]);
+  var toggleExpand = useCallback(function (id) {
+    dispatch({
+      type: "toggleExpand",
+      id: id
+    });
+  }, []);
+  var toggleCheck = useCallback(function (id) {
+    dispatch({
+      type: "toggleCheck",
+      id: id
+    });
+  }, []);
+  var select = useCallback(function (id) {
+    dispatch({
+      type: "select",
+      id: id
+    });
+  }, []);
+  var expandAll = useCallback(function () {
+    dispatch({
+      type: "expandAll"
+    });
+  }, []);
+  var collapseAll = useCallback(function () {
+    dispatch({
+      type: "collapseAll"
+    });
+  }, []);
+  var onFilter = useDebounce(function (query) {
+    dispatch({
+      type: "filter",
+      query: query
+    });
+  }, []);
+  return {
+    tree: state.tree,
+    toggleExpand: toggleExpand,
+    expandAll: expandAll,
+    collapseAll: collapseAll,
+    toggleCheck: toggleCheck,
+    select: select,
+    onFilter: onFilter
+  };
+};
+
+export { useTree };

package/dist/esm/tree/utils.js

@@ -0,0 +1,140 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { isString, matchString, compareValues } from '@react-fabric/utilities';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var sorter = function sorter(a, b) {
+  if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
+  return compareValues()(a.label, b.label);
+};
+var getChildren = function getChildren() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return list.map(function (item) {
+    return [item].concat(_toConsumableArray(getChildren(item.children)));
+  }).flat(99).filter(Boolean);
+};
+var getIntermediate = function getIntermediate() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var checks = list.map(function (item) {
+    return item.checked;
+  });
+  var someOff = checks.includes(0);
+  var someInt = checks.includes(2);
+  var someOn = checks.includes(1);
+  return someOff && someOn || someInt ? 2 : someOn ? 1 : 0;
+};
+
+// convert node item to internal node used by the tree
+var refactorTree = function refactorTree(nodes) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    level: 0,
+    parent: undefined
+  };
+  var list = [];
+  nodes.sort(sorter).forEach(function (node) {
+    list.push(_objectSpread(_objectSpread({
+      open: false,
+      level: options.level,
+      parent: options.parent,
+      checked: 0,
+      loaded: false,
+      loading: false,
+      filtered: false,
+      lines: []
+    }, node), {}, {
+      leaf: !!node.leaf,
+      children: node.children && refactorTree(node.children, {
+        level: options.level + 1,
+        parent: node.id
+      })
+    }));
+  });
+  return list;
+};
+var makeTreeMap = function makeTreeMap(nodes) {
+  var map = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
+  nodes.forEach(function (node) {
+    if (map.has(node.id)) throw new Error("Node with id [".concat(node.id, "] already exists, please make sure all ids are unique"));
+    map.set(node.id, node);
+    node.children && makeTreeMap(node.children, map);
+  });
+  return map;
+};
+
+// make flat list to be rendered by virtual list
+var flattenTree = function flattenTree(nodes) {
+  var lines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var list = [];
+  var filtered = nodes.filter(function (node) {
+    return !node.filtered;
+  });
+  filtered.forEach(function (node, idx) {
+    node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
+    list.push(node);
+    (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
+      return !child.filtered;
+    }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+  });
+  return list;
+};
+var updateSelection = function updateSelection(nodes, id, selected) {
+  var node = nodes.get(id);
+  if (node) {
+    // change selection
+    node.selected = selected;
+    // update all parent childSelected flag
+    var parent = node.parent;
+    while (parent) {
+      var parentNode = nodes.get(parent);
+      parentNode && (parentNode.childSelected = selected);
+      selected && parentNode && (parentNode.open = true);
+      parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+    }
+  }
+};
+var updateChecked = function updateChecked(list, id) {
+  var node = list.get(id);
+  if (node) {
+    node.checked = node.checked === 1 ? 0 : 1;
+    // check all children
+    node.children && getChildren(node.children).forEach(function (child) {
+      return child.checked = node.checked;
+    });
+    var parent = node.parent;
+    while (parent) {
+      var parentNode = list.get(parent);
+      parentNode && (parentNode.checked = getIntermediate(parentNode.children));
+      parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+    }
+  }
+};
+var filterTree = function filterTree(nodes, query, matcher) {
+  nodes.forEach(function (node) {
+    if (query) {
+      if (node.parentFiltered) return;
+      node.filtered = !(matcher ? matcher(node.data, query) : isString(node.queryable) ? matchString(node.queryable, query) : isString(node.label) && matchString(node.label, query));
+      if (!node.filtered) {
+        var parent = node.parent;
+        while (parent) {
+          var parentNode = nodes.get(parent);
+          parentNode && (parentNode.filtered = false);
+          parentNode && (parentNode.childFiltered = true);
+          parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
+        }
+        node.children && getChildren(node.children).forEach(function (child) {
+          child.parentFiltered = true;
+          child.filtered = false;
+        });
+      }
+    } else {
+      node.filtered = false;
+      node.childFiltered = undefined;
+      node.parentFiltered = undefined;
+    }
+  });
+};
+
+export { filterTree, flattenTree, makeTreeMap, refactorTree, updateChecked, updateSelection };

package/dist/esm/virtual/Gallery.js

@@ -0,0 +1,229 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useEffectDebugger, useDebounce, Skeleton } from '@react-fabric/core';
+import { debounce } from '@react-fabric/utilities';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import classNames from 'classnames';
+import memoizeOne from 'memoize-one';
+import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, useLayoutEffect, useImperativeHandle, memo } from 'react';
+import { Scroller } from './Scroller.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var createItemList = memoizeOne(function (items) {
+  return items;
+});
+var _VirtualGallery = function _VirtualGallery(_ref) {
+  var _virtualItems$3;
+  var items = _ref.items,
+    children = _ref.children,
+    columns = _ref.columns,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "md" : _ref$padding,
+    _ref$defaultHeight = _ref.defaultHeight,
+    height = _ref$defaultHeight === void 0 ? 48 : _ref$defaultHeight,
+    _ref$defaultWidth = _ref.defaultWidth,
+    width = _ref$defaultWidth === void 0 ? 48 : _ref$defaultWidth,
+    hideScroller = _ref.hideScroller,
+    initialScroll = _ref.initialScroll,
+    loading = _ref.loading,
+    onLoadMore = _ref.onLoadMore,
+    onScroll = _ref.onScroll,
+    galleryRef = _ref.galleryRef;
+  var count = useDeferredValue(items.length);
+  var extraSize = useMemo(function () {
+    return onLoadMore ? 64 : 0;
+  }, [onLoadMore]);
+  var itemList = createItemList(items.map(function (item, idx) {
+    return {
+      index: idx,
+      data: item,
+      isLast: idx + 1 === items.length
+    };
+  }));
+  var scrollerRef = useRef(null);
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnCount = _useState2[0],
+    setColumnCount = _useState2[1];
+  var columnMap = useMemo(function () {
+    return new Array(columnCount).fill(0).map(function (_, idx) {
+      return idx;
+    });
+  }, [columnCount]);
+  useEffectDebugger(function () {
+    if (scrollerRef.current) {
+      var el = scrollerRef.current;
+      var handler = function handler() {
+        var _el$offsetWidth;
+        setColumnCount(columns !== null && columns !== void 0 ? columns : Math.max(1, Math.floor((((_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 800) - 32) / width)));
+      };
+      var ob = new ResizeObserver(handler);
+      handler();
+      ob.observe(el);
+      return function () {
+        ob.unobserve(el);
+        ob.disconnect();
+      };
+    }
+  }, [scrollerRef.current, columns, width], "virtualGallery recalculate view count");
+  var virtualizer = useVirtualizer({
+    count: Math.ceil(count / columnCount),
+    getScrollElement: function getScrollElement() {
+      return scrollerRef.current;
+    },
+    estimateSize: function estimateSize() {
+      return height;
+    }
+  });
+  var virtualItems = virtualizer.getVirtualItems();
+  var currentIndex = useRef(0);
+  useEffect(function () {
+    var _virtualItems$1$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+  }, [virtualItems]);
+  var calculateActiveScroll = useCallback(function () {
+    var _scrollerRef$current;
+    var _ref2 = (_scrollerRef$current = scrollerRef.current) !== null && _scrollerRef$current !== void 0 ? _scrollerRef$current : {},
+      _ref2$scrollTop = _ref2.scrollTop,
+      scrollTop = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop,
+      _ref2$scrollHeight = _ref2.scrollHeight,
+      scrollHeight = _ref2$scrollHeight === void 0 ? 0 : _ref2$scrollHeight,
+      _ref2$offsetHeight = _ref2.offsetHeight,
+      offsetHeight = _ref2$offsetHeight === void 0 ? 0 : _ref2$offsetHeight;
+    if (scrollHeight === offsetHeight) return 0;
+    if (scrollTop === 0) return 1;
+    if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+    return 3;
+  }, []);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollActive = _useState4[0],
+    setScrollActive = _useState4[1];
+  var fireScrollEvent = useDebounce(function (idx) {
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current * idx);
+  }, [onScroll]);
+  var handleScroll = useCallback(function () {
+    setScrollActive(calculateActiveScroll());
+    fireScrollEvent(columnCount);
+  }, [columnCount, onLoadMore]);
+  useEffect(function () {
+    setScrollActive(calculateActiveScroll());
+  }, [count, calculateActiveScroll]);
+  useEffect(function () {
+    var db = debounce(function () {
+      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
+      if (lastItem && !loading && lastItem.index * columnCount + columnCount >= count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+    });
+    db();
+    return function () {
+      return db.cancel();
+    };
+  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
+  useEffect(function () {
+    var _virtualItems$2;
+    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
+    if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
+      var db = debounce(onLoadMore);
+      db(firstItem * columnCount);
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+        align: "start"
+      });
+    }, 100);
+  }, [columnCount]);
+  useImperativeHandle(galleryRef, function () {
+    return {
+      scrollToItem: function scrollToItem(index) {
+        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
+          align: "start"
+        });
+      },
+      hilight: function hilight(index) {
+        var _scrollerRef$current2;
+        (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
+          align: "start"
+        });
+        setTimeout(function () {
+          var _scrollerRef$current3;
+          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight: function unhilight() {
+        var _scrollerRef$current4;
+        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+      }
+    };
+  }, [virtualizer, columnCount]);
+  return /*#__PURE__*/jsx("div", {
+    ref: scrollerRef,
+    onScroll: handleScroll,
+    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        children: /*#__PURE__*/jsxs("div", {
+          style: {
+            height: virtualizer.getTotalSize()
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              height: (_virtualItems$3 = virtualItems[0]) === null || _virtualItems$3 === void 0 ? void 0 : _virtualItems$3.start
+            }
+          }), virtualItems.map(function (_ref3) {
+            var key = _ref3.key,
+              index = _ref3.index,
+              measureElement = _ref3.measureElement;
+            return /*#__PURE__*/jsx("div", {
+              className: "flex",
+              "data-index": index,
+              ref: measureElement,
+              children: columnMap.map(function (col) {
+                return /*#__PURE__*/jsx("div", {
+                  "data-index": index * columnCount + col,
+                  className: classNames("grid rounded-capped"),
+                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                }, "".concat(key, ":").concat(col));
+              })
+            }, key);
+          }), onLoadMore && /*#__PURE__*/jsx("div", {
+            className: "h-16",
+            children: loading && /*#__PURE__*/jsx(Skeleton, {})
+          })]
+        })
+      }), !hideScroller && /*#__PURE__*/jsx("div", {
+        className: classNames("self-end sticky bottom-2"),
+        children: /*#__PURE__*/jsx(Scroller, {
+          vertical: true,
+          scrollActive: scrollActive,
+          onStart: function onStart() {
+            return virtualizer.scrollToIndex(0);
+          },
+          onPrevious: function onPrevious() {
+            return scrollerRef.current && virtualizer.scrollBy(-scrollerRef.current.offsetHeight);
+          },
+          onNext: function onNext() {
+            return scrollerRef.current && virtualizer.scrollBy(scrollerRef.current.offsetHeight);
+          },
+          onEnd: function onEnd() {
+            return virtualizer.scrollToIndex(count - 1);
+          }
+        })
+      })]
+    })
+  });
+};
+_VirtualGallery.displayName = "VirtualGallery";
+var GenericMemo = memo;
+var VirtualGallery = GenericMemo(_VirtualGallery);
+
+export { VirtualGallery };