Расширение компонента (дерева) в Blueprintjs - PullRequest
Новая
       25

Расширение компонента (дерева) в Blueprintjs

0 голосов
/ 10 января 2019

Что я хочу сделать, это добавить новое свойство в мое дерево, которое затем передается в его treeNodes. Причина в том, что у меня есть дочерние узлы, которые имеют secondaryLabel. Я хочу использовать этот ярлык для отправки действия в мой магазин редуксов по клику. Поэтому при рендеринге моего компонента я хочу передать это действие моему дереву, которое затем передает его соответствующим узлам. Если это плохой подход, останови меня здесь!

Мои узлы создаются в контроллере (который является .ts файлом) следующим образом: 

  files.push({
    id: generateKey(fileName), isDirectory: false, label: fileName,
    filePath: fullPath, isExpanded: false, icon: 'document',
    secondaryLabel: React.createElement(Icon, {icon: 'add', className: 'hoverIcon', iconSize: 16})})

Поскольку я использую React.createElement, я подумал, что лучший способ передать моё действие в Icon - это через дерево, а затем в его узлы, когда они отображаются.

Я расширяю Дерево так: 

export interface ICustomTreeProps<T = {}>  {
  onNodeAdd?: TreeEventHandler<T>
}

export class CustomTree<T = {}> extends Tree<ICustomTreeProps> {
}

Именно здесь начинаются мои проблемы: Tree имеет большинство своих функций, объявленных как private. Я хотел расширить функцию renderNodes, чтобы передать свое действие узлам. Но сама функция и все, что она передает, также являются частными (https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/tree/treeNode.tsx)

 private renderNodes(treeNodes: Array<ITreeNode<T>>, currentPath?: number[], className?: string): JSX.Element {
        if (treeNodes == null) {
            return null;
        }

        const nodeItems = treeNodes.map((node, i) => {
            const elementPath = currentPath.concat(i);
            const TypedTreeNode = TreeNode.ofType<T>();
            return (
                <TypedTreeNode
                    {...node}
                    key={node.id}
                    contentRef={this.handleContentRef}
                    depth={elementPath.length - 1}
                    onClick={this.handleNodeClick}
                    onContextMenu={this.handleNodeContextMenu}
                    onCollapse={this.handleNodeCollapse}
                    onDoubleClick={this.handleNodeDoubleClick}
                    onExpand={this.handleNodeExpand}
                    onMouseEnter={this.handleNodeMouseEnter}
                    onMouseLeave={this.handleNodeMouseLeave}
                    path={elementPath}
                >
                    {this.renderNodes(node.childNodes, elementPath)}
                </TypedTreeNode>
            );
        });

        return <ul className={classNames(Classes.TREE_NODE_LIST, className)}>{nodeItems}</ul>;
    }

Так как я не хочу в основном копировать и вставлять все, чтобы расширить одно свойство (и после этого делать то же самое с TreeNode, где должно произойти действие), как мне сделать это правильно?

...