react-native-tree-multi-select/lib/commonjs/TreeView.js

A super-fast, customizable tree view component for React Native with multi-selection, checkboxes, and search filtering capabilities.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TreeView = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _NodeList = _interopRequireDefault(require("./components/NodeList"));
var _helpers = require("./helpers");
var _treeView = require("./store/treeView.store");
var _usePreviousState = _interopRequireDefault(require("./utils/usePreviousState"));
var _shallow = require("zustand/react/shallow");
var _reactNativeUuid = _interopRequireDefault(require("react-native-uuid"));
var _useDeepCompareEffect = _interopRequireDefault(require("./utils/useDeepCompareEffect"));
var _typedMemo = require("./utils/typedMemo");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _innerTreeView(props, ref) {
  const {
    data,
    onCheck,
    onExpand,
    selectionPropagation,
    preselectedIds = [],
    preExpandedIds = [],
    initialScrollNodeID,
    treeFlashListProps,
    checkBoxViewStyleProps,
    indentationMultiplier,
    CheckboxComponent,
    ExpandCollapseIconComponent,
    ExpandCollapseTouchableComponent,
    CustomNodeRowComponent
  } = props;
  const storeId = _react.default.useMemo(() => _reactNativeUuid.default.v4(), []);
  const {
    expanded,
    updateExpanded,
    initialTreeViewData,
    updateInitialTreeViewData,
    searchText,
    updateSearchText,
    updateSearchKeys,
    checked,
    indeterminate,
    setSelectionPropagation,
    cleanUpTreeViewStore
  } = (0, _treeView.useTreeViewStore)(storeId)((0, _shallow.useShallow)(state => ({
    expanded: state.expanded,
    updateExpanded: state.updateExpanded,
    initialTreeViewData: state.initialTreeViewData,
    updateInitialTreeViewData: state.updateInitialTreeViewData,
    searchText: state.searchText,
    updateSearchText: state.updateSearchText,
    updateSearchKeys: state.updateSearchKeys,
    checked: state.checked,
    indeterminate: state.indeterminate,
    setSelectionPropagation: state.setSelectionPropagation,
    cleanUpTreeViewStore: state.cleanUpTreeViewStore
  })));
  _react.default.useImperativeHandle(ref, () => ({
    selectAll: () => (0, _helpers.selectAll)(storeId),
    unselectAll: () => (0, _helpers.unselectAll)(storeId),
    selectAllFiltered: () => (0, _helpers.selectAllFiltered)(storeId),
    unselectAllFiltered: () => (0, _helpers.unselectAllFiltered)(storeId),
    expandAll: () => (0, _helpers.expandAll)(storeId),
    collapseAll: () => (0, _helpers.collapseAll)(storeId),
    expandNodes: ids => (0, _helpers.expandNodes)(storeId, ids),
    collapseNodes: ids => (0, _helpers.collapseNodes)(storeId, ids),
    selectNodes: ids => selectNodes(ids),
    unselectNodes: ids => unselectNodes(ids),
    setSearchText,
    scrollToNodeID,
    getChildToParentMap
  }));
  const scrollToNodeHandlerRef = _react.default.useRef(null);
  const prevSearchText = (0, _usePreviousState.default)(searchText);
  (0, _useDeepCompareEffect.default)(() => {
    cleanUpTreeViewStore();
    updateInitialTreeViewData(data);
    if (selectionPropagation) setSelectionPropagation(selectionPropagation);
    (0, _helpers.initializeNodeMaps)(storeId, data);

    // Check any pre-selected nodes
    (0, _helpers.toggleCheckboxes)(storeId, preselectedIds, true);

    // Expand pre-expanded nodes
    (0, _helpers.expandNodes)(storeId, [...preExpandedIds, ...(initialScrollNodeID ? [initialScrollNodeID] : [])]);
  }, [data]);
  function selectNodes(ids) {
    (0, _helpers.toggleCheckboxes)(storeId, ids, true);
  }
  function unselectNodes(ids) {
    (0, _helpers.toggleCheckboxes)(storeId, ids, false);
  }
  function setSearchText(text, keys = ["name"]) {
    updateSearchText(text);
    updateSearchKeys(keys);
  }
  function scrollToNodeID(params) {
    scrollToNodeHandlerRef.current?.scrollToNodeID(params);
  }
  function getChildToParentMap() {
    const treeViewStore = (0, _treeView.getTreeViewStore)(storeId);
    return treeViewStore.getState().childToParentMap;
  }
  const getIds = _react.default.useCallback(node => {
    if (!node.children || node.children.length === 0) {
      return [node.id];
    } else {
      return [node.id, ...node.children.flatMap(item => getIds(item))];
    }
  }, []);
  _react.default.useEffect(() => {
    onCheck?.(Array.from(checked), Array.from(indeterminate));
  }, [onCheck, checked, indeterminate]);
  _react.default.useEffect(() => {
    onExpand?.(Array.from(expanded));
  }, [onExpand, expanded]);
  _react.default.useEffect(() => {
    if (searchText) {
      _reactNative.InteractionManager.runAfterInteractions(() => {
        updateExpanded(new Set(initialTreeViewData.flatMap(item => getIds(item))));
      });
    } else if (prevSearchText && prevSearchText !== "") {
      /* Collapse all nodes only if previous search query was non-empty: this is
      done to prevent node collapse on first render if preExpandedIds is provided */
      _reactNative.InteractionManager.runAfterInteractions(() => {
        updateExpanded(new Set());
      });
    }
  }, [getIds, initialTreeViewData, prevSearchText, searchText, updateExpanded]);
  _react.default.useEffect(() => {
    return () => {
      cleanUpTreeViewStore();
    };
  }, [cleanUpTreeViewStore]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NodeList.default, {
    storeId: storeId,
    scrollToNodeHandlerRef: scrollToNodeHandlerRef,
    initialScrollNodeID: initialScrollNodeID,
    treeFlashListProps: treeFlashListProps,
    checkBoxViewStyleProps: checkBoxViewStyleProps,
    indentationMultiplier: indentationMultiplier,
    CheckboxComponent: CheckboxComponent,
    ExpandCollapseIconComponent: ExpandCollapseIconComponent,
    ExpandCollapseTouchableComponent: ExpandCollapseTouchableComponent,
    CustomNodeRowComponent: CustomNodeRowComponent
  });
}
const _TreeView = /*#__PURE__*/_react.default.forwardRef(_innerTreeView);
const TreeView = exports.TreeView = (0, _typedMemo.typedMemo)(_TreeView);
//# sourceMappingURL=TreeView.js.map