Quelle VirtualizedTree.js Sprache: JAVA

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-env browser */
"use strict";

const {
  Component,
  createFactory,
} = require("resource://devtools/client/shared/vendor/react.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const {
  scrollIntoView,
} = require("resource://devtools/client/shared/scroll.js");
const {
  preventDefaultAndStopPropagation,
} = require("resource://devtools/client/shared/events.js");

loader.lazyRequireGetter(
  this,
  ["wrapMoveFocus", "getFocusableElements"],
  "resource://devtools/client/shared/focus.js",
  true
);

const AUTO_EXPAND_DEPTH = 0;
const NUMBER_OF_OFFSCREEN_ITEMS = 1;

/**
* A fast, generic, expandable and collapsible tree component.
*
* This tree component is fast: it can handle trees with *many* items. It only
* renders the subset of those items which are visible in the viewport. It's
* been battle tested on huge trees in the memory panel. We've optimized tree
* traversal and rendering, even in the presence of cross-compartment wrappers.
*
* This tree component doesn't make any assumptions about the structure of your
* tree data. Whether children are computed on demand, or stored in an array in
* the parent's `_children` property, it doesn't matter. We only require the
* implementation of `getChildren`, `getRoots`, `getParent`, and `isExpanded`
* functions.
*
* This tree component is well tested and reliable. See
* devtools/client/shared/components/test/mochitest/test_tree_* and its usage in
* the performance and memory panels.
*
* This tree component doesn't make any assumptions about how to render items in
* the tree. You provide a `renderItem` function, and this component will ensure
* that only those items whose parents are expanded and which are visible in the
* viewport are rendered. The `renderItem` function could render the items as a
* "traditional" tree or as rows in a table or anything else. It doesn't
* restrict you to only one certain kind of tree.
*
* The only requirement is that every item in the tree render as the same
* height. This is required in order to compute which items are visible in the
* viewport in constant time.
*
* ### Example Usage
*
* Suppose we have some tree data where each item has this form:
*
*     {
*       id: Number,
*       label: String,
*       parent: Item or null,
*       children: Array of child items,
*       expanded: bool,
*     }
*
* Here is how we could render that data with this component:
*
*     class MyTree extends Component {
*       static get propTypes() {
*         // The root item of the tree, with the form described above.
*         return {
*           root: PropTypes.object.isRequired
*         };
*       }
*
*       render() {
*         return Tree({
*           itemHeight: 20, // px
*
*           getRoots: () => [this.props.root],
*
*           getParent: item => item.parent,
*           getChildren: item => item.children,
*           getKey: item => item.id,
*           isExpanded: item => item.expanded,
*
*           renderItem: (item, depth, isFocused, arrow, isExpanded) => {
*             let className = "my-tree-item";
*             if (isFocused) {
*               className += " focused";
*             }
*             return dom.div(
*               {
*                 className,
*                 // Apply 10px nesting per expansion depth.
*                 style: { marginLeft: depth * 10 + "px" }
*               },
*               // Here is the expando arrow so users can toggle expansion and
*               // collapse state.
*               arrow,
*               // And here is the label for this item.
*               dom.span({ className: "my-tree-item-label" }, item.label)
*             );
*           },
*
*           onExpand: item => dispatchExpandActionToRedux(item),
*           onCollapse: item => dispatchCollapseActionToRedux(item),
*         });
*       }
*     }
*/
class Tree extends Component {
  static get propTypes() {
    return {
      // Required props

      // A function to get an item's parent, or null if it is a root.
      //
      // Type: getParent(item: Item) -> Maybe<Item>
      //
      // Example:
      //
      //     // The parent of this item is stored in its `parent` property.
      //     getParent: item => item.parent
      getParent: PropTypes.func.isRequired,

      // A function to get an item's children.
      //
      // Type: getChildren(item: Item) -> [Item]
      //
      // Example:
      //
      //     // This item's children are stored in its `children` property.
      //     getChildren: item => item.children
      getChildren: PropTypes.func.isRequired,

      // A function which takes an item and ArrowExpander component instance and
      // returns a component, or text, or anything else that React considers
      // renderable.
      //
      // Type: renderItem(item: Item,
      //                  depth: Number,
      //                  isFocused: Boolean,
      //                  arrow: ReactComponent,
      //                  isExpanded: Boolean) -> ReactRenderable
      //
      // Example:
      //
      //     renderItem: (item, depth, isFocused, arrow, isExpanded) => {
      //       let className = "my-tree-item";
      //       if (isFocused) {
      //         className += " focused";
      //       }
      //       return dom.div(
      //         {
      //           className,
      //           style: { marginLeft: depth * 10 + "px" }
      //         },
      //         arrow,
      //         dom.span({ className: "my-tree-item-label" }, item.label)
      //       );
      //     },
      renderItem: PropTypes.func.isRequired,

      // A function which returns the roots of the tree (forest).
      //
      // Type: getRoots() -> [Item]
      //
      // Example:
      //
      //     // In this case, we only have one top level, root item. You could
      //     // return multiple items if you have many top level items in your
      //     // tree.
      //     getRoots: () => [this.props.rootOfMyTree]
      getRoots: PropTypes.func.isRequired,

      // A function to get a unique key for the given item. This helps speed up
      // React's rendering a *TON*.
      //
      // Type: getKey(item: Item) -> String
      //
      // Example:
      //
      //     getKey: item => `my-tree-item-${item.uniqueId}`
      getKey: PropTypes.func.isRequired,

      // A function to get whether an item is expanded or not. If an item is not
      // expanded, then it must be collapsed.
      //
      // Type: isExpanded(item: Item) -> Boolean
      //
      // Example:
      //
      //     isExpanded: item => item.expanded,
      isExpanded: PropTypes.func.isRequired,

      // The height of an item in the tree including margin and padding, in
      // pixels.
      itemHeight: PropTypes.number.isRequired,

      // Optional props

      // The currently focused item, if any such item exists.
      focused: PropTypes.any,

      // Handle when a new item is focused.
      onFocus: PropTypes.func,

      // The currently active (keyboard) item, if any such item exists.
      active: PropTypes.any,

      // Handle when item is activated with a keyboard (using Space or Enter)
      onActivate: PropTypes.func,

      // The currently shown item, if any such item exists.
      shown: PropTypes.any,

      // Indicates if pressing ArrowRight key should only expand expandable node
      // or if the selection should also move to the next node.
      preventNavigationOnArrowRight: PropTypes.bool,

      // The depth to which we should automatically expand new items.
      autoExpandDepth: PropTypes.number,

      // Note: the two properties below are mutually exclusive. Only one of the
      // label properties is necessary.
      // ID of an element whose textual content serves as an accessible label for
      // a tree.
      labelledby: PropTypes.string,
      // Accessibility label for a tree widget.
      label: PropTypes.string,

      // Optional event handlers for when items are expanded or collapsed. Useful
      // for dispatching redux events and updating application state, maybe lazily
      // loading subtrees from a worker, etc.
      //
      // Type:
      //     onExpand(item: Item)
      //     onCollapse(item: Item)
      //
      // Example:
      //
      //     onExpand: item => dispatchExpandActionToRedux(item)
      onExpand: PropTypes.func,
      onCollapse: PropTypes.func,
    };
  }

  static get defaultProps() {
    return {
      autoExpandDepth: AUTO_EXPAND_DEPTH,
      preventNavigationOnArrowRight: true,
    };
  }

  constructor(props) {
    super(props);

    this.state = {
      scroll: 0,
      height: window.innerHeight,
      seen: new Set(),
      mouseDown: false,
    };

    this._onExpand = oncePerAnimationFrame(this._onExpand).bind(this);
    this._onCollapse = oncePerAnimationFrame(this._onCollapse).bind(this);
    this._onScroll = oncePerAnimationFrame(this._onScroll).bind(this);
    this._focusPrevNode = oncePerAnimationFrame(this._focusPrevNode).bind(this);
    this._focusNextNode = oncePerAnimationFrame(this._focusNextNode).bind(this);
    this._focusParentNode = oncePerAnimationFrame(this._focusParentNode).bind(
      this
    );
    this._focusFirstNode = oncePerAnimationFrame(this._focusFirstNode).bind(
      this
    );
    this._focusLastNode = oncePerAnimationFrame(this._focusLastNode).bind(this);

    this._autoExpand = this._autoExpand.bind(this);
    this._preventArrowKeyScrolling = this._preventArrowKeyScrolling.bind(this);
    this._updateHeight = this._updateHeight.bind(this);
    this._onResize = this._onResize.bind(this);
    this._dfs = this._dfs.bind(this);
    this._dfsFromRoots = this._dfsFromRoots.bind(this);
    this._focus = this._focus.bind(this);
    this._activate = this._activate.bind(this);
    this._onKeyDown = this._onKeyDown.bind(this);
  }

  componentDidMount() {
    window.addEventListener("resize", this._onResize);
    this._autoExpand();
    this._updateHeight();
    this._scrollItemIntoView();
  }

  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.autoExpandDepth != this.props.autoExpandDepth) {
      this.setState({ seen: new Set() });
    }
    this._autoExpand();
    this._updateHeight();
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { scroll, height, seen, mouseDown } = this.state;

    return (
      scroll !== nextState.scroll ||
      height !== nextState.height ||
      seen !== nextState.seen ||
      mouseDown === nextState.mouseDown
    );
  }

  componentDidUpdate(prevProps) {
    if (prevProps.shown != this.props.shown) {
      this._scrollItemIntoView();
    }
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this._onResize);
  }

  _scrollItemIntoView() {
    const { shown } = this.props;
    if (!shown) {
      return;
    }

    this._scrollIntoView(shown);
  }

  _autoExpand() {
    if (!this.props.autoExpandDepth) {
      return;
    }

    // Automatically expand the first autoExpandDepth levels for new items. Do
    // not use the usual DFS infrastructure because we don't want to ignore
    // collapsed nodes.
    const autoExpand = (item, currentDepth) => {
      if (
        currentDepth >= this.props.autoExpandDepth ||
        this.state.seen.has(item)
      ) {
        return;
      }

      this.props.onExpand(item);
      this.state.seen.add(item);

      const children = this.props.getChildren(item);
      const length = children.length;
      for (let i = 0; i < length; i++) {
        autoExpand(children[i], currentDepth + 1);
      }
    };

    const roots = this.props.getRoots();
    const length = roots.length;
    for (let i = 0; i < length; i++) {
      autoExpand(roots[i], 0);
    }
  }

  _preventArrowKeyScrolling(e) {
    switch (e.key) {
      case "ArrowUp":
      case "ArrowDown":
      case "ArrowLeft":
      case "ArrowRight":
        preventDefaultAndStopPropagation(e);
        break;
    }
  }

  /**
   * Updates the state's height based on clientHeight.
   */
  _updateHeight() {
    this.setState({ height: this.refs.tree.clientHeight });
  }

  /**
   * Perform a pre-order depth-first search from item.
   */
  _dfs(item, maxDepth = Infinity, traversal = [], _depth = 0) {
    traversal.push({ item, depth: _depth });

    if (!this.props.isExpanded(item)) {
      return traversal;
    }

    const nextDepth = _depth + 1;

    if (nextDepth > maxDepth) {
      return traversal;
    }

    const children = this.props.getChildren(item);
    const length = children.length;
    for (let i = 0; i < length; i++) {
      this._dfs(children[i], maxDepth, traversal, nextDepth);
    }

    return traversal;
  }

  /**
   * Perform a pre-order depth-first search over the whole forest.
   */
  _dfsFromRoots(maxDepth = Infinity) {
    const traversal = [];

    const roots = this.props.getRoots();
    const length = roots.length;
    for (let i = 0; i < length; i++) {
      this._dfs(roots[i], maxDepth, traversal);
    }

    return traversal;
  }

  /**
   * Expands current row.
   *
   * @param {Object} item
   * @param {Boolean} expandAllChildren
   */
  _onExpand(item, expandAllChildren) {
    if (this.props.onExpand) {
      this.props.onExpand(item);

      if (expandAllChildren) {
        const children = this._dfs(item);
        const length = children.length;
        for (let i = 0; i < length; i++) {
          this.props.onExpand(children[i].item);
        }
      }
    }
  }

  /**
   * Collapses current row.
   *
   * @param {Object} item
   */
  _onCollapse(item) {
    if (this.props.onCollapse) {
      this.props.onCollapse(item);
    }
  }

  /**
   * Scroll item into view. Depending on whether the item is already rendered,
   * we might have to calculate the position of the item based on its index and
   * the item height.
   *
   * @param {Object} item
   *        The item to be scrolled into view.
   * @param {Number|undefined} index
   *        The index of the item in a full DFS traversal (ignoring collapsed
   *        nodes) or undefined.
   * @param {Object} options
   *        Optional information regarding item's requested alignement when
   *        scrolling.
   */
  _scrollIntoView(item, index, options = {}) {
    const treeElement = this.refs.tree;
    if (!treeElement) {
      return;
    }

    const element = document.getElementById(this.props.getKey(item));
    if (element) {
      scrollIntoView(element, { ...options, container: treeElement });
      return;
    }

    if (index == null) {
      // If index is not provided, determine item index from traversal.
      const traversal = this._dfsFromRoots();
      index = traversal.findIndex(({ item: i }) => i === item);
    }

    if (index == null || index < 0) {
      return;
    }

    const { itemHeight } = this.props;
    const { clientHeight, scrollTop } = treeElement;
    const elementTop = index * itemHeight;
    let scrollTo;
    if (scrollTop >= elementTop + itemHeight) {
      scrollTo = elementTop;
    } else if (scrollTop + clientHeight <= elementTop) {
      scrollTo = elementTop;
    }

    if (scrollTo != undefined) {
      treeElement.scrollTo({
        left: 0,
        top: scrollTo,
      });
    }
  }

  /**
   * Sets the passed in item to be the focused item.
   *
   * @param {Number} index
   *        The index of the item in a full DFS traversal (ignoring collapsed
   *        nodes). Ignored if `item` is undefined.
   *
   * @param {Object|undefined} item
   *        The item to be focused, or undefined to focus no item.
   */
  _focus(index, item, options = {}) {
    if (item !== undefined && !options.preventAutoScroll) {
      this._scrollIntoView(item, index, options);
    }

    if (this.props.active != null) {
      this._activate(null);
      if (this.refs.tree !== this.activeElement) {
        this.refs.tree.focus();
      }
    }

    if (this.props.onFocus) {
      this.props.onFocus(item);
    }
  }

  _activate(item) {
    if (this.props.onActivate) {
      this.props.onActivate(item);
    }
  }

  /**
   * Update state height and tree's scrollTop if necessary.
   */
  _onResize() {
    // When tree size changes without direct user action, scroll top cat get re-set to 0
    // (for example, when tree height changes via CSS rule change). We need to ensure that
    // the tree's scrollTop is in sync with the scroll state.
    if (this.state.scroll !== this.refs.tree.scrollTop) {
      this.refs.tree.scrollTo({ left: 0, top: this.state.scroll });
    }

    this._updateHeight();
  }

  /**
   * Fired on a scroll within the tree's container, updates
   * the stored position of the view port to handle virtual view rendering.
   */
  _onScroll() {
    this.setState({
      scroll: Math.max(this.refs.tree.scrollTop, 0),
      height: this.refs.tree.clientHeight,
    });
  }

  /**
   * Handles key down events in the tree's container.
   *
   * @param {Event} e
   */
  // eslint-disable-next-line complexity
  _onKeyDown(e) {
    if (this.props.focused == null) {
      return;
    }

    // Allow parent nodes to use navigation arrows with modifiers.
    if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {
      return;
    }

    this._preventArrowKeyScrolling(e);

    switch (e.key) {
      case "ArrowUp":
        this._focusPrevNode();
        break;

      case "ArrowDown":
        this._focusNextNode();
        break;

      case "ArrowLeft":
        if (
          this.props.isExpanded(this.props.focused) &&
          this.props.getChildren(this.props.focused).length
        ) {
          this._onCollapse(this.props.focused);
        } else {
          this._focusParentNode();
        }
        break;

      case "ArrowRight":
        if (
          this.props.getChildren(this.props.focused).length &&
          !this.props.isExpanded(this.props.focused)
        ) {
          this._onExpand(this.props.focused);
        } else if (!this.props.preventNavigationOnArrowRight) {
          this._focusNextNode();
        }
        break;

      case "Home":
        this._focusFirstNode();
        break;

      case "End":
        this._focusLastNode();
        break;

      case "Enter":
      case " ":
        // On space or enter make focused tree node active. This means keyboard focus
        // handling is passed on to the tree node itself.
        if (this.refs.tree === this.activeElement) {
          preventDefaultAndStopPropagation(e);
          if (this.props.active !== this.props.focused) {
            this._activate(this.props.focused);
          }
        }
        break;

      case "Escape":
        preventDefaultAndStopPropagation(e);
        if (this.props.active != null) {
          this._activate(null);
        }

        if (this.refs.tree !== this.activeElement) {
          this.refs.tree.focus();
        }
        break;
    }
  }

  get activeElement() {
    return this.refs.tree.ownerDocument.activeElement;
  }

  _focusFirstNode() {
    const traversal = this._dfsFromRoots();
    this._focus(0, traversal[0].item, { alignTo: "top" });
  }

  _focusLastNode() {
    const traversal = this._dfsFromRoots();
    const lastIndex = traversal.length - 1;
    this._focus(lastIndex, traversal[lastIndex].item, { alignTo: "bottom" });
  }

  /**
   * Sets the previous node relative to the currently focused item, to focused.
   */
  _focusPrevNode() {
    // Start a depth first search and keep going until we reach the currently
    // focused node. Focus the previous node in the DFS, if it exists. If it
    // doesn't exist, we're at the first node already.

    let prev;
    let prevIndex;

    const traversal = this._dfsFromRoots();
    const length = traversal.length;
    for (let i = 0; i < length; i++) {
      const item = traversal[i].item;
      if (item === this.props.focused) {
        break;
      }
      prev = item;
      prevIndex = i;
    }

    if (prev === undefined) {
      return;
    }

    this._focus(prevIndex, prev, { alignTo: "top" });
  }

  /**
   * Handles the down arrow key which will focus either the next child
   * or sibling row.
   */
  _focusNextNode() {
    // Start a depth first search and keep going until we reach the currently
    // focused node. Focus the next node in the DFS, if it exists. If it
    // doesn't exist, we're at the last node already.

    const traversal = this._dfsFromRoots();
    const length = traversal.length;
    let i = 0;

    while (i < length) {
      if (traversal[i].item === this.props.focused) {
        break;
      }
      i++;
    }

    if (i + 1 < traversal.length) {
      this._focus(i + 1, traversal[i + 1].item, { alignTo: "bottom" });
    }
  }

  /**
   * Handles the left arrow key, going back up to the current rows'
   * parent row.
   */
  _focusParentNode() {
    const parent = this.props.getParent(this.props.focused);
    if (!parent) {
      return;
    }

    const traversal = this._dfsFromRoots();
    const length = traversal.length;
    let parentIndex = 0;
    for (; parentIndex < length; parentIndex++) {
      if (traversal[parentIndex].item === parent) {
        break;
      }
    }

    this._focus(parentIndex, parent, { alignTo: "top" });
  }

  render() {
    const traversal = this._dfsFromRoots();

    // 'begin' and 'end' are the index of the first (at least partially) visible item
    // and the index after the last (at least partially) visible item, respectively.
    // `NUMBER_OF_OFFSCREEN_ITEMS` is removed from `begin` and added to `end` so that
    // the top and bottom of the page are filled with the `NUMBER_OF_OFFSCREEN_ITEMS`
    // previous and next items respectively, which helps the user to see fewer empty
    // gaps when scrolling quickly.
    const { itemHeight, active, focused } = this.props;
    const { scroll, height } = this.state;
    const begin = Math.max(
      ((scroll / itemHeight) | 0) - NUMBER_OF_OFFSCREEN_ITEMS,
      0
    );
    const end =
      Math.ceil((scroll + height) / itemHeight) + NUMBER_OF_OFFSCREEN_ITEMS;
    const toRender = traversal.slice(begin, end);
    const topSpacerHeight = begin * itemHeight;
    const bottomSpacerHeight = Math.max(traversal.length - end, 0) * itemHeight;

    const nodes = [
      dom.div({
        key: "top-spacer",
        role: "presentation",
        style: {
          padding: 0,
          margin: 0,
          height: topSpacerHeight + "px",
        },
      }),
    ];

    for (let i = 0; i < toRender.length; i++) {
      const index = begin + i;
      const first = index == 0;
      const last = index == traversal.length - 1;
      const { item, depth } = toRender[i];
      const key = this.props.getKey(item);
      nodes.push(
        TreeNode({
          // We make a key unique depending on whether the tree node is in active or
          // inactive state to make sure that it is actually replaced and the tabbable
          // state is reset.
          key: `${key}-${active === item ? "active" : "inactive"}`,
          index,
          first,
          last,
          item,
          depth,
          id: key,
          renderItem: this.props.renderItem,
          focused: focused === item,
          active: active === item,
          expanded: this.props.isExpanded(item),
          hasChildren: !!this.props.getChildren(item).length,
          onExpand: this._onExpand,
          onCollapse: this._onCollapse,
          // Since the user just clicked the node, there's no need to check if
          // it should be scrolled into view.
          onClick: () =>
            this._focus(begin + i, item, { preventAutoScroll: true }),
        })
      );
    }

    nodes.push(
      dom.div({
        key: "bottom-spacer",
        role: "presentation",
        style: {
          padding: 0,
          margin: 0,
          height: bottomSpacerHeight + "px",
        },
      })
    );

    return dom.div(
      {
        className: "tree",
        ref: "tree",
        role: "tree",
        tabIndex: "0",
        onKeyDown: this._onKeyDown,
        onKeyPress: this._preventArrowKeyScrolling,
        onKeyUp: this._preventArrowKeyScrolling,
        onScroll: this._onScroll,
        onMouseDown: () => this.setState({ mouseDown: true }),
        onMouseUp: () => this.setState({ mouseDown: false }),
        onFocus: () => {
          if (focused || this.state.mouseDown) {
            return;
          }

          // Only set default focus to the first tree node if focused node is
          // not yet set and the focus event is not the result of a mouse
          // interarction.
          this._focus(begin, toRender[0].item);
        },
        onBlur: e => {
          if (active != null) {
            const { relatedTarget } = e;
            if (!this.refs.tree.contains(relatedTarget)) {
              this._activate(null);
            }
          }
        },
        onClick: () => {
          // Focus should always remain on the tree container itself.
          this.refs.tree.focus();
        },
        "aria-label": this.props.label,
        "aria-labelledby": this.props.labelledby,
        "aria-activedescendant": focused && this.props.getKey(focused),
        style: {
          padding: 0,
          margin: 0,
        },
      },
      nodes
    );
  }
}

/**
* An arrow that displays whether its node is expanded (▼) or collapsed
* (▶). When its node has no children, it is hidden.
*/
class ArrowExpanderClass extends Component {
  static get propTypes() {
    return {
      item: PropTypes.any.isRequired,
      visible: PropTypes.bool.isRequired,
      expanded: PropTypes.bool.isRequired,
      onCollapse: PropTypes.func.isRequired,
      onExpand: PropTypes.func.isRequired,
    };
  }

  shouldComponentUpdate(nextProps) {
    return (
      this.props.item !== nextProps.item ||
      this.props.visible !== nextProps.visible ||
      this.props.expanded !== nextProps.expanded
    );
  }

  render() {
    const attrs = {
      className: "arrow theme-twisty",
      // To collapse/expand the tree rows use left/right arrow keys.
      tabIndex: "-1",
      "aria-hidden": true,
      onClick: this.props.expanded
        ? () => this.props.onCollapse(this.props.item)
        : e => this.props.onExpand(this.props.item, e.altKey),
    };

    if (this.props.expanded) {
      attrs.className += " open";
    }

    if (!this.props.visible) {
      attrs.style = {
        visibility: "hidden",
      };
    }

    return dom.div(attrs);
  }
}

class TreeNodeClass extends Component {
  static get propTypes() {
    return {
      id: PropTypes.any.isRequired,
      focused: PropTypes.bool.isRequired,
      active: PropTypes.bool.isRequired,
      item: PropTypes.any.isRequired,
      expanded: PropTypes.bool.isRequired,
      hasChildren: PropTypes.bool.isRequired,
      onExpand: PropTypes.func.isRequired,
      index: PropTypes.number.isRequired,
      first: PropTypes.bool,
      last: PropTypes.bool,
      onClick: PropTypes.func,
      onCollapse: PropTypes.func.isRequired,
      depth: PropTypes.number.isRequired,
      renderItem: PropTypes.func.isRequired,
    };
  }

  constructor(props) {
    super(props);

    this._onKeyDown = this._onKeyDown.bind(this);
  }

  componentDidMount() {
    // Make sure that none of the focusable elements inside the tree node container are
    // tabbable if the tree node is not active. If the tree node is active and focus is
    // outside its container, focus on the first focusable element inside.
    const elms = getFocusableElements(this.refs.treenode);
    if (elms.length === 0) {
      return;
    }

    if (!this.props.active) {
      elms.forEach(elm => elm.setAttribute("tabindex", "-1"));
      return;
    }

    if (!elms.includes(this.refs.treenode.ownerDocument.activeElement)) {
      elms[0].focus();
    }
  }

  _onKeyDown(e) {
    const { target, key, shiftKey } = e;

    if (key !== "Tab") {
      return;
    }

    const focusMoved = !!wrapMoveFocus(
      getFocusableElements(this.refs.treenode),
      target,
      shiftKey
    );
    if (focusMoved) {
      // Focus was moved to the begining/end of the list, so we need to prevent the
      // default focus change that would happen here.
      e.preventDefault();
    }

    e.stopPropagation();
  }

  render() {
    const arrow = ArrowExpander({
      item: this.props.item,
      expanded: this.props.expanded,
      visible: this.props.hasChildren,
      onExpand: this.props.onExpand,
      onCollapse: this.props.onCollapse,
    });

    const classList = ["tree-node", "div"];
    if (this.props.active) {
      classList.push("tree-node-active");
    }
    if (this.props.focused) {
      classList.push("focused");
    }

    let ariaExpanded;
    if (this.props.hasChildren) {
      ariaExpanded = false;
    }
    if (this.props.expanded) {
      ariaExpanded = true;
    }

    return dom.div(
      {
        id: this.props.id,
        className: classList.join(" "),
        role: "treeitem",
        ref: "treenode",
        "aria-level": this.props.depth + 1,
        onClick: this.props.onClick,
        onKeyDownCapture: this.props.active ? this._onKeyDown : undefined,
        "aria-expanded": ariaExpanded,
        "data-expanded": this.props.expanded ? "" : undefined,
        "data-depth": this.props.depth,
        style: {
          padding: 0,
          // This helps the CSS compute a margin based on the depth.
          "--tree-node-depth": this.props.depth,
        },
      },

      this.props.renderItem(
        this.props.item,
        this.props.depth,
        this.props.focused,
        arrow,
        this.props.expanded
      )
    );
  }
}

const ArrowExpander = createFactory(ArrowExpanderClass);
const TreeNode = createFactory(TreeNodeClass);

/**
* Create a function that calls the given function `fn` only once per animation
* frame.
*
* @param {Function} fn
* @returns {Function}
*/
function oncePerAnimationFrame(fn) {
  let animationId = null;
  let argsToPass = null;
  return function (...args) {
    argsToPass = args;
    if (animationId !== null) {
      return;
    }

    animationId = requestAnimationFrame(() => {
      fn.call(this, ...argsToPass);
      animationId = null;
      argsToPass = null;
    });
  };
}

module.exports = Tree;

quality91%

¤ Dauer der Verarbeitung: 0.4 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung ist noch experimentell.