@apia/tree 2.0.9 → 2.0.11

package/dist/TreeDataController.js

@@ -0,0 +1,616 @@
+import { useState, useEffect } from 'react';
+import { getNextNodeWithKey, getNextChild, getPreviousChild, getFirstNonFilteredChild, getLastVisibleChild, selectAllNodesBetweenTwoNodes } from './util.js';
+import { EventEmitter, PropsStore, addBoundary, getSpecificParent, usePropsSelector, useLatest, useMount, shallowEqual } from '@apia/util';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const trees = {};
+const treesRecordEmitter = new class TreesRecordEmitter extends EventEmitter {
+  emit(eventName, params) {
+    super.emit(eventName, params);
+    trees[params.name] = params.controller;
+  }
+}();
+function useTreeDataController(name) {
+  const [controller, setDataController] = useState(
+    trees[name]
+  );
+  useEffect(() => {
+    if (trees[name] !== controller)
+      setDataController(trees[name]);
+    return treesRecordEmitter.on("addController", (ev) => {
+      if (ev.name === name)
+        setDataController(ev.controller);
+    });
+  }, []);
+  return controller;
+}
+function getTreeDataController(name) {
+  return trees[name];
+}
+class TreeDataController extends EventEmitter {
+  constructor(name, configuration, propsStore = new PropsStore({
+    logCommands: {
+      propsStore: `treeProps_${name}`,
+      propsLog: `treeLog_${name}`,
+      propsSuscriptors: `propsSuscriptors_${name}`,
+      updateProp: `updateProp_${name}`
+    }
+  })) {
+    super();
+    this.name = name;
+    this.propsStore = propsStore;
+    __publicField(this, "_configuration");
+    __publicField(this, "hasApendedFirstChild", false);
+    /**
+     * Este array se usa para conocer los padres faltantes al momento de la
+     * construcción del árbol, de forma de optimizar el proceso
+     */
+    __publicField(this, "missingParents", []);
+    __publicField(this, "nonEmittedUpdates", []);
+    __publicField(this, "stateKey", "treeState");
+    __publicField(this, "previousNodes", []);
+    __publicField(this, "setState", (updateProps, conf) => {
+      this.propsStore.updateField(
+        this.stateKey,
+        {
+          ...this.state,
+          ...updateProps
+        },
+        conf
+      );
+      this.emit("stateUpdate", null);
+    });
+    __publicField(this, "useState", (selector) => {
+      const [selectedState, setSelectedState] = useState(selector(this.state));
+      const latestState = useLatest(selectedState);
+      useMount(() => {
+        return this.on("stateUpdate", () => {
+          const newSelection = selector(this.state);
+          if (!shallowEqual(newSelection, latestState.current)) {
+            setSelectedState(newSelection);
+          }
+        });
+      });
+      return selectedState;
+    });
+    this._configuration = configuration ?? {
+      current: { emitUpdates: true }
+    };
+    this._configuration.current.emitUpdates = this._configuration.current.emitUpdates ?? true;
+    this.setState(this.getInitialState());
+    treesRecordEmitter.emit("addController", {
+      name,
+      controller: this
+    });
+    this.initRoot();
+  }
+  get configuration() {
+    return { ...this._configuration };
+  }
+  get state() {
+    return this.propsStore.getFieldProps(
+      this.stateKey
+    );
+  }
+  get stateStore() {
+    return this.propsStore;
+  }
+  destructor() {
+    this.propsStore.destructor();
+  }
+  append(node) {
+    const newNode = { ...node, nodeProps: node.nodeProps ?? {} };
+    let father;
+    if (newNode.parentId !== void 0 && this.propsStore.getFieldProps(newNode.parentId)?.children) {
+      father = newNode.parentId;
+    } else {
+      father = "root";
+      if (newNode.parentId)
+        this.missingParents.push(newNode.parentId);
+      newNode.actualParentId = newNode.parentId;
+      newNode.parentId = "root";
+    }
+    this.propsStore.updateField(
+      newNode.id,
+      {
+        ...newNode,
+        children: newNode.children ?? []
+      },
+      { isUrgent: true }
+    );
+    this.setState({ length: this.state.length + 1 });
+    if (this.missingParents.includes(newNode.id)) {
+      this.propsStore.getFieldProps("root").children.forEach((currentChild) => {
+        if (this.propsStore.getFieldProps(currentChild).actualParentId === newNode.id) {
+          this.move(currentChild, newNode.id);
+        }
+      });
+      this.missingParents = this.missingParents.filter(
+        (current) => current !== newNode.id
+      );
+    }
+    this.propsStore.updateField(
+      father,
+      {
+        children: [
+          ...this.propsStore.getFieldProps(father).children,
+          newNode.id
+        ],
+        hasLoaded: true
+      },
+      { noEmit: this._configuration.current?.emitUpdates === false }
+    );
+    if (this._configuration.current?.emitUpdates === false)
+      this.nonEmittedUpdates.push(father);
+    if (!this.hasApendedFirstChild) {
+      this.hasApendedFirstChild = true;
+      this.setFocusedNode(newNode.id, true);
+    }
+    if (newNode.isExpanded)
+      this.toggleNodeExpandedState(newNode.id, true);
+  }
+  /**
+   * Cuando se quieren agregar muchos nodos, es conveniente llamar primero al
+   * método batchInit y luego de finalizar, al método batchFinish()
+   */
+  batchInit() {
+    this.config({ emitUpdates: false });
+    this.setState({ isLoading: true }, { isUrgent: true });
+  }
+  getNodesRecursive(nodeId = "root") {
+    const node = this.propsStore.getFieldProps(nodeId);
+    return node.children.reduce(
+      (prev, current) => [...prev, ...this.getNodesRecursive(current)],
+      [...node.children]
+    );
+  }
+  /**
+   * Cuando se quieren agregar muchos nodos, es conveniente llamar primero al
+   * método batchInit y luego de finalizar, al método batchFinish()
+   */
+  batchFinish() {
+    this.config({ emitUpdates: true });
+    setTimeout(() => this.setState({ isLoading: false }), 0);
+    const children = [...this.getNodesRecursive()];
+    const deleteNodes = this.previousNodes.filter(
+      (current) => !children.find((search) => search === current)
+    );
+    deleteNodes.forEach((current) => this.remove(current));
+    this.config({ emitUpdates: true });
+    setTimeout(() => this.setState({ isLoading: false }), 0);
+  }
+  config(newConf) {
+    if (this._configuration.current?.emitUpdates === false && newConf.emitUpdates !== false) {
+      this.nonEmittedUpdates.forEach(
+        (current) => this.propsStore.updateField(current, {
+          children: [...this.propsStore.getFieldProps(current).children]
+        })
+      );
+      this.nonEmittedUpdates = [];
+    }
+    Object.assign(
+      this._configuration.current,
+      newConf
+    );
+  }
+  deselectAll() {
+    this.state.selectedNodes.forEach(
+      (currentId) => this.propsStore.updateField(currentId, { isSelected: false })
+    );
+    this.setState({ selectedNodes: [] });
+  }
+  forceEmitUpdate() {
+    this.propsStore.updateField("root", {
+      forceUpdate: (this.propsStore.getFieldProps("root").forceUpdate ?? 0) + 1
+    });
+  }
+  getInitialState() {
+    return {
+      expandedNodes: [],
+      filteredNodes: [],
+      focusedNode: null,
+      isLoading: false,
+      length: 0,
+      selectedNodes: []
+    };
+  }
+  getNodesAsArray() {
+    const allFields = { ...this.propsStore.fields };
+    delete allFields[this.stateKey];
+    delete allFields.root;
+    return Object.values(allFields);
+  }
+  /**
+   * Devuelve un array que contiene el id de todos los nodos pertenecientes al
+   * árbol
+   */
+  getNodesIds() {
+    const allFields = { ...this.propsStore.fields };
+    delete allFields[this.stateKey];
+    delete allFields.root;
+    return Object.keys(allFields);
+  }
+  getParentId(parentId) {
+    return this.propsStore.getFieldProps(parentId).parentId;
+  }
+  /**
+   * Este método permite controlar el comportamiento con el teclado desde fuera
+   * del componente.
+   */
+  handleKey(ev) {
+    const focusedId = this.state.focusedNode;
+    const nodeProps = this.propsStore.getFieldProps(focusedId);
+    if (ev.key === "*") {
+      if (this.state.focusedNode === null)
+        return;
+      const parent = this.propsStore.getFieldProps(
+        this.propsStore.getFieldProps(this.state.focusedNode).parentId
+      );
+      parent.children.forEach(
+        (current) => this.toggleNodeExpandedState(current, true)
+      );
+    } else if (ev.key.match(/^\w$/)) {
+      const nextChildWithKey = getNextNodeWithKey(
+        this,
+        focusedId,
+        ev.key,
+        true
+      );
+      if (nextChildWithKey !== null) {
+        this.setFocusedNode(nextChildWithKey);
+        this.emit("mustFocus", nextChildWithKey);
+      }
+    } else
+      switch (ev.code) {
+        case "Home": {
+          const firstChild = getFirstNonFilteredChild(this, "root");
+          if (firstChild === null)
+            return;
+          if (ev.shiftKey && ev.ctrlKey && this.state.focusedNode !== null) {
+            selectAllNodesBetweenTwoNodes(
+              this,
+              firstChild,
+              this.state.focusedNode,
+              true
+            );
+          }
+          this.setFocusedNode(firstChild);
+          this.emit("mustFocus", firstChild);
+          break;
+        }
+        case "End": {
+          const lastVisibleChild = getLastVisibleChild(this, "root", true);
+          if (lastVisibleChild !== null) {
+            if (ev.shiftKey && ev.ctrlKey && this.state.focusedNode !== null) {
+              selectAllNodesBetweenTwoNodes(
+                this,
+                lastVisibleChild,
+                this.state.focusedNode,
+                true
+              );
+            }
+            this.setFocusedNode(lastVisibleChild);
+            this.emit("mustFocus", lastVisibleChild);
+          }
+          break;
+        }
+        case "ArrowRight": {
+          if (nodeProps.isLeaf)
+            return;
+          ev.preventDefault();
+          if (nodeProps.isExpanded) {
+            const firstChild = getFirstNonFilteredChild(this, nodeProps.id);
+            if (firstChild !== null) {
+              this.setFocusedNode(firstChild);
+              this.emit("mustFocus", firstChild);
+            }
+          } else
+            this.toggleNodeExpandedState(nodeProps.id, true);
+          break;
+        }
+        case "ArrowLeft": {
+          ev.preventDefault();
+          if (nodeProps.isLeaf || !nodeProps.isExpanded) {
+            if (nodeProps.parentId !== "root" && nodeProps.parentId !== void 0) {
+              this.setFocusedNode(nodeProps.parentId);
+              this.emit("mustFocus", nodeProps.parentId);
+            }
+          } else
+            this.toggleNodeExpandedState(nodeProps.id, false);
+          break;
+        }
+        case "ArrowUp": {
+          ev.preventDefault();
+          const prevChild = getPreviousChild(this, nodeProps.id, true);
+          if (prevChild !== null) {
+            if (ev.shiftKey)
+              this.toggleNodeSelectedState(prevChild, true);
+            this.setFocusedNode(prevChild);
+            this.emit("mustFocus", prevChild);
+          } else
+            this.emit("onArrowUpOnFirstElement", true);
+          break;
+        }
+        case "ArrowDown": {
+          ev.preventDefault();
+          const nextChild = getNextChild(this, nodeProps.id, false, true);
+          if (nextChild !== null) {
+            if (ev.shiftKey)
+              this.toggleNodeSelectedState(nextChild, true);
+            this.setFocusedNode(nextChild);
+            this.emit("mustFocus", nextChild);
+          }
+          break;
+        }
+        case "Space": {
+          if (this._configuration.current?.disableSelection)
+            return;
+          ev.preventDefault();
+          this.toggleNodeSelectedState(nodeProps.id);
+          break;
+        }
+      }
+  }
+  isNode(node) {
+    return typeof node === "object" && "parentId" in node;
+  }
+  isNodeContainer(node) {
+    return typeof node === "object" && !this.isNode(node);
+  }
+  includes(searchNode) {
+    return !!this.propsStore.getFieldProps(searchNode.id);
+  }
+  initRoot() {
+    this.propsStore.updateField(
+      "root",
+      { children: [], id: "root" },
+      { isUrgent: true }
+    );
+  }
+  move(moveNode, destinationNode, afterOrBefore) {
+    const currentFather = this.propsStore.getFieldProps(
+      this.propsStore.getFieldProps(moveNode).parentId
+    );
+    const newFather = this.propsStore.getFieldProps(destinationNode);
+    if (!currentFather) {
+      console.warn("The current node does not belong to the tree.", moveNode);
+      return;
+    }
+    if (!newFather) {
+      console.warn(
+        "The destination node does not belong to the tree. No action will be made",
+        destinationNode
+      );
+      return;
+    }
+    currentFather.children = currentFather.children?.filter(
+      (search) => search !== moveNode
+    );
+    if (!newFather.children)
+      newFather.children = [];
+    if (!afterOrBefore)
+      newFather.children.push(moveNode);
+    else if (afterOrBefore.position) {
+      newFather.children.splice(afterOrBefore.position - 1, 0, moveNode);
+    } else {
+      const key = afterOrBefore.after ? afterOrBefore.after : afterOrBefore.before;
+      const relatedNodeKey = key && this.isNode(key) ? key.id : key;
+      const relatedNodeIndex = newFather.children.findIndex(
+        (search) => search === relatedNodeKey
+      );
+      const actualIndex = addBoundary(
+        afterOrBefore.before !== void 0 ? relatedNodeIndex : relatedNodeIndex + 1,
+        0
+      );
+      if (actualIndex === -1 || actualIndex === newFather.children.length)
+        newFather.children.push(moveNode);
+      else
+        newFather.children.splice(actualIndex, 0, moveNode);
+    }
+    this.propsStore.updateField(currentFather.id, {
+      children: [...currentFather.children ?? []]
+    });
+    this.propsStore.updateField(newFather.id, {
+      children: [...newFather.children]
+    });
+    this.propsStore.updateField(moveNode, {
+      parentId: newFather.id
+    });
+  }
+  /**
+   * Borra el nodo del árbol, y dependiendo del parámetro removeChildren, borra
+   * también sus hijos.
+   *
+   * @param removeChildren - Si se pasa en false, los nodos hijos son movidos al root
+   */
+  remove(removeNode, removeChildren = true) {
+    const removeNodeId = this.isNode(removeNode) ? removeNode.id : removeNode;
+    const removingNode = this.propsStore.getFieldProps(removeNodeId);
+    if (!removingNode)
+      return;
+    const father = this.propsStore.getFieldProps(removingNode.parentId);
+    if (father) {
+      this.propsStore.updateField(father.id, {
+        children: father.children?.filter((search) => search !== removeNodeId)
+      });
+    }
+    removingNode.children?.forEach((current) => {
+      if (removeChildren) {
+        this.remove(current);
+      } else {
+        this.move(current, "root");
+      }
+    });
+    this.setState({
+      selectedNodes: this.state.selectedNodes.filter(
+        (current) => current !== removeNodeId
+      ),
+      focusedNode: this.state.focusedNode === removeNodeId ? null : this.state.focusedNode,
+      length: this.state.length - 1
+    });
+    this.propsStore.removeField(removeNodeId);
+  }
+  removeMultiple(nodes, removeChildren = true) {
+    nodes.forEach((current) => this.remove(current, removeChildren));
+  }
+  /**
+   * Borra todos los nodos del árbol.
+   */
+  removeAll() {
+    if (this.configuration.current?.emitUpdates === false) {
+      this.previousNodes = this.getNodesIds();
+      this.propsStore.updateField(
+        "root",
+        { children: [], id: "root" },
+        { isUrgent: true, noEmit: true }
+      );
+    } else {
+      this.hasApendedFirstChild = false;
+      this.setState({ focusedNode: null }, { isUrgent: true });
+      this.setSelectedNodes([]);
+      this.initRoot();
+      Object.keys(this.propsStore.fields).forEach((current) => {
+        if (!["root", this.stateKey].includes(current))
+          this.propsStore.removeField(current);
+      });
+    }
+  }
+  selectAll() {
+    this.setState({
+      selectedNodes: this.getNodesIds()
+    });
+    this.state.selectedNodes.forEach(
+      (currentId) => this.propsStore.updateField(currentId, { isSelected: true })
+    );
+  }
+  setExpandedNodes(nodes) {
+    this.state.expandedNodes.forEach(
+      (current) => this.propsStore.updateField(current, { isExpanded: false })
+    );
+    this.setState({ expandedNodes: nodes });
+    nodes.forEach(
+      (current) => this.propsStore.updateField(current, { isExpanded: true })
+    );
+  }
+  setFocusedNode(key, avoidSelection) {
+    if (this.state.focusedNode !== null)
+      this.propsStore.updateField(this.state.focusedNode, { isFocused: false });
+    this.setState({
+      focusedNode: key
+    });
+    if (!this._configuration.current?.isMultiple && !avoidSelection && (this._configuration.current?.selectionMode ?? "onFocus") === "onFocus")
+      this.setSelectedNodes([key]);
+    this.propsStore.updateField(key, { isFocused: true });
+  }
+  setSelectedNodes(nodes, force = false) {
+    if (this._configuration.current?.disableSelection && !force)
+      return;
+    this.state.selectedNodes.forEach(
+      (current) => this.propsStore.updateField(current, { isSelected: false })
+    );
+    this.setState({
+      selectedNodes: nodes.filter((current) => {
+        const { isSelectable } = this.propsStore.getFieldProps(current);
+        if (isSelectable !== false)
+          this.propsStore.updateField(current, { isSelected: true });
+        return isSelectable !== false;
+      })
+    });
+  }
+  setSelectedNodesByClickEvent(ev) {
+    if (this._configuration.current?.disableSelection)
+      return;
+    const nodeKey = getSpecificParent(
+      ev.target,
+      (current) => current.getAttribute("role") === "treeitem"
+    )?.getAttribute("data-key");
+    if (nodeKey) {
+      const nodeProps = this.propsStore.getFieldProps(nodeKey);
+      if (nodeProps.isDisabled || nodeProps.isSelectable === false)
+        return;
+      const previousSelectionKeys = [...this.state.selectedNodes];
+      const allowMultiple = this._configuration.current?.isMultiple && (this._configuration.current?.selectionMode !== "explicitMultiple" || ev.ctrlKey || ev.shiftKey);
+      const newSelection = allowMultiple ? nodeProps.isSelected ? previousSelectionKeys.filter((current) => current !== nodeKey) : [...previousSelectionKeys, nodeKey] : [nodeKey];
+      this.setSelectedNodes(newSelection);
+    } else
+      console.warn("Cannot set selection, no treeitem found", ev);
+  }
+  toggleNodeExpandedState(key, shouldExpand) {
+    const nodeProps = this.propsStore.getFieldProps(key);
+    if (nodeProps.isDisabled || nodeProps.isLeaf || nodeProps.isLoading)
+      return;
+    if (this._configuration.current?.onLoadData && !nodeProps.hasLoaded) {
+      this.propsStore.updateField(key, { isLoading: true });
+      this._configuration.current?.onLoadData(nodeProps).finally(() => {
+        this.propsStore.updateField(key, {
+          isLoading: false,
+          isExpanded: true,
+          hasLoaded: true
+        });
+        this.setState({
+          expandedNodes: [...this.state.expandedNodes, key]
+        });
+        this._configuration.current?.onExpand?.(
+          this.propsStore.getFieldProps(key)
+        );
+      });
+    } else {
+      const { expandedNodes } = this.state;
+      const shouldExpandInner = shouldExpand !== void 0 ? shouldExpand : !expandedNodes.includes(key);
+      if (this.propsStore.getFieldProps(key)?.isDisabled)
+        return;
+      this.setState({
+        expandedNodes: shouldExpandInner ? [...expandedNodes, key] : expandedNodes.filter((current) => current !== key)
+      });
+      this.propsStore.updateField(key, { isExpanded: shouldExpandInner });
+      this._configuration.current?.onExpand?.(
+        this.propsStore.getFieldProps(key)
+      );
+    }
+  }
+  toggleNodeSelectedState(key, isSelected) {
+    if (this._configuration.current?.disableSelection)
+      return;
+    const nodeProps = this.propsStore.getFieldProps(key);
+    if (nodeProps.isDisabled || nodeProps.isSelectable === false)
+      return;
+    const shouldSelect = isSelected !== void 0 ? isSelected : !this.state.selectedNodes.includes(key);
+    if (shouldSelect && nodeProps.isSelected || isSelected === false && !nodeProps.isSelected)
+      return;
+    if (shouldSelect && !this._configuration.current?.isMultiple && this.state.selectedNodes[0])
+      this.toggleNodeSelectedState(this.state.selectedNodes[0], false);
+    this.propsStore.updateField(key, { isSelected: shouldSelect });
+    this.setState({
+      selectedNodes: shouldSelect ? [...this.state.selectedNodes, key] : this.state.selectedNodes.filter((current) => current !== key)
+    });
+  }
+}
+function useTreeSelector(handler, configuration) {
+  return usePropsSelector(
+    handler?.stateKey ?? "__NO__TREE__KEY__",
+    {
+      propsStore: handler?.propsStore,
+      ...configuration
+    }
+  );
+}
+function useTreeSelectorByName(treeName, configuration) {
+  const handler = useTreeDataController(treeName);
+  const selection = usePropsSelector(
+    handler?.stateKey ?? "__NO__TREE__KEY__",
+    {
+      propsStore: handler?.propsStore,
+      ...configuration
+    }
+  );
+  return { selection, handler };
+}
+var TreeDataController$1 = TreeDataController;
+
+export { TreeDataController$1 as default, getTreeDataController, useTreeDataController, useTreeSelector, useTreeSelectorByName };
+//# sourceMappingURL=TreeDataController.js.map