@apia/tree 3.0.1 → 3.0.6

package/dist/TreeDataController.js

@@ -1,616 +0,0 @@
-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