From 20d832863d5f71d3bbb87b3e8afcbb33a7679fbf Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Mon, 25 Jun 2018 17:27:32 -0400 Subject: [PATCH 1/8] TreeEventHandler inherits generic types --- packages/core/src/components/tree/tree.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index bcab672fe2d..183db9e3222 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -12,7 +12,7 @@ import { IProps } from "../../common/props"; import { isFunction } from "../../common/utils"; import { ITreeNode, TreeNode } from "./treeNode"; -export type TreeEventHandler = (node: ITreeNode, nodePath: number[], e: React.MouseEvent) => void; +export type TreeEventHandler = (node: ITreeNode, nodePath: number[], e: React.MouseEvent) => void; export interface ITreeProps extends IProps { /** @@ -23,29 +23,29 @@ export interface ITreeProps extends IProps { /** * Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node. */ - onNodeClick?: TreeEventHandler; + onNodeClick?: TreeEventHandler; /** * Invoked when caret of an expanded node is clicked. */ - onNodeCollapse?: TreeEventHandler; + onNodeCollapse?: TreeEventHandler; /** * Invoked when a node is right-clicked or the context menu button is pressed on a focused node. */ - onNodeContextMenu?: TreeEventHandler; + onNodeContextMenu?: TreeEventHandler; /** * Invoked when a node is double-clicked. Be careful when using this in combination with * an `onNodeClick` (single-click) handler, as the way this behaves can vary between browsers. * See http://stackoverflow.com/q/5497073/3124288 */ - onNodeDoubleClick?: TreeEventHandler; + onNodeDoubleClick?: TreeEventHandler; /** * Invoked when the caret of a collapsed node is clicked. */ - onNodeExpand?: TreeEventHandler; + onNodeExpand?: TreeEventHandler; } export class Tree extends React.Component, {}> { From d8a903e9da1cc860329462cebb49970096d6c9b8 Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Mon, 25 Jun 2018 17:37:24 -0400 Subject: [PATCH 2/8] add generics to TreeNode --- packages/core/src/components/tree/tree.tsx | 23 ++++++++++--------- .../core/src/components/tree/treeNode.tsx | 14 +++++------ 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 183db9e3222..c562589a37b 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -53,7 +53,7 @@ export class Tree extends React.Component, {}> { return Tree as new (props: ITreeProps) => Tree; } - public static nodeFromPath(path: number[], treeNodes: ITreeNode[]): ITreeNode { + public static nodeFromPath(path: number[], treeNodes: ITreeNode[]): ITreeNode { if (path.length === 1) { return treeNodes[path[0]]; } else { @@ -80,15 +80,16 @@ export class Tree extends React.Component, {}> { return this.nodeRefs[nodeId]; } - private renderNodes(treeNodes: ITreeNode[], currentPath?: number[], className?: string): JSX.Element { + private renderNodes(treeNodes: ITreeNode[], 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(); return ( - extends React.Component, {}> { path={elementPath} > {this.renderNodes(node.childNodes, elementPath)} - + ); }); return
    {nodeItems}
; } - private handleNodeCollapse = (node: TreeNode, e: React.MouseEvent) => { + private handleNodeCollapse = (node: TreeNode, e: React.MouseEvent) => { this.handlerHelper(this.props.onNodeCollapse, node, e); }; - private handleNodeClick = (node: TreeNode, e: React.MouseEvent) => { + private handleNodeClick = (node: TreeNode, e: React.MouseEvent) => { this.handlerHelper(this.props.onNodeClick, node, e); }; - private handleContentRef = (node: TreeNode, element: HTMLElement | null) => { + private handleContentRef = (node: TreeNode, element: HTMLElement | null) => { if (element != null) { this.nodeRefs[node.props.id] = element; } else { @@ -125,19 +126,19 @@ export class Tree extends React.Component, {}> { } }; - private handleNodeContextMenu = (node: TreeNode, e: React.MouseEvent) => { + private handleNodeContextMenu = (node: TreeNode, e: React.MouseEvent) => { this.handlerHelper(this.props.onNodeContextMenu, node, e); }; - private handleNodeDoubleClick = (node: TreeNode, e: React.MouseEvent) => { + private handleNodeDoubleClick = (node: TreeNode, e: React.MouseEvent) => { this.handlerHelper(this.props.onNodeDoubleClick, node, e); }; - private handleNodeExpand = (node: TreeNode, e: React.MouseEvent) => { + private handleNodeExpand = (node: TreeNode, e: React.MouseEvent) => { this.handlerHelper(this.props.onNodeExpand, node, e); }; - private handlerHelper(handlerFromProps: TreeEventHandler, node: TreeNode, e: React.MouseEvent) { + private handlerHelper(handlerFromProps: TreeEventHandler, node: TreeNode, e: React.MouseEvent) { if (isFunction(handlerFromProps)) { const nodeData = Tree.nodeFromPath(node.props.path, this.props.contents); handlerFromProps(nodeData, node.props.path, e); diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx index ff46a5015a0..8332791b6ee 100644 --- a/packages/core/src/components/tree/treeNode.tsx +++ b/packages/core/src/components/tree/treeNode.tsx @@ -36,8 +36,6 @@ export interface ITreeNode extends IProps { id: string | number; /** - * Whether the children of this node are displayed. - * @default false */ isExpanded?: boolean; @@ -67,14 +65,14 @@ export interface ITreeNode extends IProps { export interface ITreeNodeProps extends ITreeNode { children?: React.ReactNode; - contentRef?: (node: TreeNode, element: HTMLDivElement | null) => void; + contentRef?: (node: TreeNode, element: HTMLDivElement | null) => void; depth: number; key?: string | number; - onClick?: (node: TreeNode, e: React.MouseEvent) => void; - onCollapse?: (node: TreeNode, e: React.MouseEvent) => void; - onContextMenu?: (node: TreeNode, e: React.MouseEvent) => void; - onDoubleClick?: (node: TreeNode, e: React.MouseEvent) => void; - onExpand?: (node: TreeNode, e: React.MouseEvent) => void; + onClick?: (node: TreeNode, e: React.MouseEvent) => void; + onCollapse?: (node: TreeNode, e: React.MouseEvent) => void; + onContextMenu?: (node: TreeNode, e: React.MouseEvent) => void; + onDoubleClick?: (node: TreeNode, e: React.MouseEvent) => void; + onExpand?: (node: TreeNode, e: React.MouseEvent) => void; path: number[]; } From b9d84bafc553fbce799ab9d89f84932956166e43 Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Tue, 26 Jun 2018 22:11:56 -0400 Subject: [PATCH 3/8] add nonstatic nodeFromPath for generics and fix typings --- packages/core/src/components/tree/tree.tsx | 10 +++++++++- packages/core/src/components/tree/treeNode.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index c562589a37b..750fdd387b0 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -53,7 +53,7 @@ export class Tree extends React.Component, {}> { return Tree as new (props: ITreeProps) => Tree; } - public static nodeFromPath(path: number[], treeNodes: ITreeNode[]): ITreeNode { + public static nodeFromPath(path: number[], treeNodes: ITreeNode[]): ITreeNode { if (path.length === 1) { return treeNodes[path[0]]; } else { @@ -61,6 +61,14 @@ export class Tree extends React.Component, {}> { } } + public nodeFromPath(path: number[]): ITreeNode { + let treeNodes = this.props.contents; + for (let _i = 0; _i < path.length - 1; _i++) { + treeNodes = treeNodes[path[_i]].childNodes; + } + return treeNodes[path[path.length - 1]]; + } + private nodeRefs: { [nodeId: string]: HTMLElement } = {}; public render() { diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx index 8332791b6ee..d57d35035d7 100644 --- a/packages/core/src/components/tree/treeNode.tsx +++ b/packages/core/src/components/tree/treeNode.tsx @@ -17,7 +17,7 @@ export interface ITreeNode extends IProps { /** * Child tree nodes of this node. */ - childNodes?: ITreeNode[]; + childNodes?: ITreeNode[]; /** * Whether the caret to expand/collapse a node should be shown. From 10eec638cf085010cede46b02f11f13213e8a613 Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Wed, 27 Jun 2018 10:15:50 -0400 Subject: [PATCH 4/8] style fixes --- packages/core/src/components/tree/tree.tsx | 12 ++++++++---- packages/core/src/components/tree/treeNode.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 750fdd387b0..745297fd29f 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -12,7 +12,11 @@ import { IProps } from "../../common/props"; import { isFunction } from "../../common/utils"; import { ITreeNode, TreeNode } from "./treeNode"; -export type TreeEventHandler = (node: ITreeNode, nodePath: number[], e: React.MouseEvent) => void; +export type TreeEventHandler = ( + node: ITreeNode, + nodePath: number[], + e: React.MouseEvent, +) => void; export interface ITreeProps extends IProps { /** @@ -61,6 +65,8 @@ export class Tree extends React.Component, {}> { } } + private nodeRefs: { [nodeId: string]: HTMLElement } = {}; + public nodeFromPath(path: number[]): ITreeNode { let treeNodes = this.props.contents; for (let _i = 0; _i < path.length - 1; _i++) { @@ -69,8 +75,6 @@ export class Tree extends React.Component, {}> { return treeNodes[path[path.length - 1]]; } - private nodeRefs: { [nodeId: string]: HTMLElement } = {}; - public render() { return (
@@ -88,7 +92,7 @@ export class Tree extends React.Component, {}> { return this.nodeRefs[nodeId]; } - private renderNodes(treeNodes: ITreeNode[], currentPath?: number[], className?: string): JSX.Element { + private renderNodes(treeNodes: Array>, currentPath?: number[], className?: string): JSX.Element { if (treeNodes == null) { return null; } diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx index d57d35035d7..c027029bc89 100644 --- a/packages/core/src/components/tree/treeNode.tsx +++ b/packages/core/src/components/tree/treeNode.tsx @@ -17,7 +17,7 @@ export interface ITreeNode extends IProps { /** * Child tree nodes of this node. */ - childNodes?: ITreeNode[]; + childNodes?: Array>; /** * Whether the caret to expand/collapse a node should be shown. From 54a91d05ca52e94de78283af3532ef17953fa3db Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Wed, 27 Jun 2018 10:19:25 -0400 Subject: [PATCH 5/8] indentation --- packages/core/src/components/tree/tree.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 745297fd29f..b5580d437d5 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -13,9 +13,9 @@ import { isFunction } from "../../common/utils"; import { ITreeNode, TreeNode } from "./treeNode"; export type TreeEventHandler = ( - node: ITreeNode, - nodePath: number[], - e: React.MouseEvent, + node: ITreeNode, + nodePath: number[], + e: React.MouseEvent, ) => void; export interface ITreeProps extends IProps { From 1112d7f840cd5b85b2681f2c725a748476f597c9 Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Wed, 27 Jun 2018 11:16:20 -0400 Subject: [PATCH 6/8] remove underscore on iterator variable --- packages/core/src/components/tree/tree.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index b5580d437d5..69d90e3c065 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -69,8 +69,8 @@ export class Tree extends React.Component, {}> { public nodeFromPath(path: number[]): ITreeNode { let treeNodes = this.props.contents; - for (let _i = 0; _i < path.length - 1; _i++) { - treeNodes = treeNodes[path[_i]].childNodes; + for (let i = 0; i < path.length - 1; i++) { + treeNodes = treeNodes[path[i]].childNodes; } return treeNodes[path[path.length - 1]]; } From 30a963808ccf95968cafb2ec718c2080b6ec0936 Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Wed, 27 Jun 2018 11:22:26 -0400 Subject: [PATCH 7/8] move render up --- packages/core/src/components/tree/tree.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 69d90e3c065..4725ce9de66 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -67,14 +67,6 @@ export class Tree extends React.Component, {}> { private nodeRefs: { [nodeId: string]: HTMLElement } = {}; - public nodeFromPath(path: number[]): ITreeNode { - let treeNodes = this.props.contents; - for (let i = 0; i < path.length - 1; i++) { - treeNodes = treeNodes[path[i]].childNodes; - } - return treeNodes[path[path.length - 1]]; - } - public render() { return (
@@ -83,6 +75,14 @@ export class Tree extends React.Component, {}> { ); } + public nodeFromPath(path: number[]): ITreeNode { + let treeNodes = this.props.contents; + for (let i = 0; i < path.length - 1; i++) { + treeNodes = treeNodes[path[i]].childNodes; + } + return treeNodes[path[path.length - 1]]; + } + /** * Returns the underlying HTML element of the `Tree` node with an id of `nodeId`. * This element does not contain the children of the node, only its label and controls. From a4b1b5a4e5a3c878ed0a49c5e516afa380a1829c Mon Sep 17 00:00:00 2001 From: Justin Hong Date: Wed, 27 Jun 2018 13:11:16 -0400 Subject: [PATCH 8/8] remove nonstatic nodefrompath --- packages/core/src/components/tree/tree.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 4725ce9de66..5faea4749b2 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -75,14 +75,6 @@ export class Tree extends React.Component, {}> { ); } - public nodeFromPath(path: number[]): ITreeNode { - let treeNodes = this.props.contents; - for (let i = 0; i < path.length - 1; i++) { - treeNodes = treeNodes[path[i]].childNodes; - } - return treeNodes[path[path.length - 1]]; - } - /** * Returns the underlying HTML element of the `Tree` node with an id of `nodeId`. * This element does not contain the children of the node, only its label and controls.