Skip to content

Commit 4e8d5c9

Browse files
author
Pavel Dzhagriev
committed
typings improve
1 parent e25a909 commit 4e8d5c9

10 files changed

Lines changed: 153 additions & 107 deletions

File tree

‎README.md‎

Lines changed: 77 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,65 +27,92 @@ npm install --save treeview-component
2727
[Live demo](https://treeview-component.vercel.app/)
2828

2929
```jsx
30-
import React, { Component } from 'react'
30+
import React, { useState } from 'react'
3131

32-
import TreeView from 'treeview-component'
33-
import 'treeview-component/dist/index.css'
32+
import { TreeView, TreeViewProps, TreeNode } from 'treeview-component'
33+
import NodeView from './components/NodeView'
34+
import EmptyNode from './components/EmptyNode'
35+
import 'treeview-component/lib/esm/src/styles.module.css'
36+
import styles from './classes.module.css'
3437

35-
class Example extends Component {
36-
37-
constructor() {
38-
super()
39-
this.state = {
40-
tree: {
41-
node: '00',
42-
parent_node: null,
43-
title: 'First node',
38+
const App: React.FC<any> = () => {
39+
const [tree, setTree] = useState<TreeNode>({
40+
node: '00',
41+
parent_node: null,
42+
title: 'First node',
43+
description: 'Some description for node.',
44+
children: [
45+
{
46+
node: '10',
47+
parent_node: '00',
48+
title: 'Second node',
4449
description: 'Some description for node.',
45-
children: [
46-
{
47-
node: '10',
48-
parent_node: '00',
49-
title: 'Second node',
50-
description: 'Some description for node.',
51-
children: [null]
52-
},
53-
{
54-
node: '11',
55-
parent_node: '00',
56-
title: 'Third node',
57-
description: 'Some description for node.',
58-
children: [null, null]
59-
}
60-
]
50+
children: [null]
51+
},
52+
{
53+
node: '11',
54+
parent_node: '00',
55+
title: 'Third node',
56+
description: 'Some description for node.',
57+
children: [null, null]
6158
}
59+
]
60+
61+
});
62+
63+
const addCardFunc = (node: TreeNode, newTree: TreeNode) => {
64+
let tree = { ...newTree };
65+
const walker = (cell: TreeNode | null) => {
66+
if (!cell) {
67+
return
68+
}
69+
cell.children.forEach((child: TreeNode | null, id: number) => {
70+
if (child?.node === node.node) {
71+
cell.children[id] = {
72+
node: child.node,
73+
parent_node: cell.node,
74+
title: 'Added node',
75+
description: 'This node was added by click',
76+
children: [null, null],
77+
}
78+
}
79+
walker(child)
80+
})
6281
}
82+
walker(tree)
83+
setTree(tree)
6384
}
64-
65-
// ...
66-
67-
render() {
68-
const treeProps = {
69-
autoCenter: true,
70-
nodeView: NodeView,
71-
nodeViewClasses: styles,
72-
showEmptyNodes: true,
73-
emptyNode: EmptyNode,
74-
emptyNodeProps: {
75-
onClick: this.addCard,
76-
className: styles.add_card,
77-
},
78-
tree: this.state.tree,
79-
style: {
80-
cursor: 'auto',
81-
outline: 'none'
82-
}
85+
86+
const addCard = (event: React.MouseEvent<HTMLElement, MouseEvent>, data: { node: TreeNode, newTree: TreeNode }) => {
87+
addCardFunc(data.node, data.newTree);
88+
}
89+
90+
const treeProps: TreeViewProps = {
91+
autoCenter: true,
92+
nodeView: NodeView,
93+
nodeViewClasses: styles,
94+
showEmptyNodes: true,
95+
emptyNode: EmptyNode,
96+
emptyNodeProps: {
97+
onClick: addCard,
98+
className: styles.add_card
99+
},
100+
tree,
101+
style: {
102+
cursor: 'auto',
103+
outline: 'none'
83104
}
84-
return <div className="wrapper">
85-
<TreeView {...treeProps} />
86-
</div>
87105
}
106+
107+
return (
108+
<div className="wrapper">
109+
<TreeView {...treeProps} />
110+
</div>
111+
)
112+
88113
}
114+
115+
export default App
89116
```
90117
91118
## License

‎example/src/App.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React from 'react';
1+
import React, { PropsWithChildren } from 'react';
22

3-
import {TreeView, TreeNode, TreeViewProps} from 'treeview-component';
3+
import { TreeView, TreeNode, TreeViewProps } from 'treeview-component';
44
import NodeView from './components/NodeView';
55
import EmptyNode from './components/EmptyNode';
66
import 'treeview-component/lib/esm/src/styles.module.css';
77
import styles from './classes.module.css';
88

9-
class App extends React.Component<any, {tree: TreeNode}> {
10-
constructor(props: any) {
9+
class App extends React.Component<PropsWithChildren<any>, { tree: TreeNode }> {
10+
constructor(props: PropsWithChildren<any>) {
1111
super(props);
1212
this.state = {
1313
tree: {
@@ -35,15 +35,16 @@ class App extends React.Component<any, {tree: TreeNode}> {
3535
};
3636
}
3737

38-
addCardFunc = (node: { node: TreeNode; }, newTree: TreeNode) => {
38+
addCardFunc = (node: TreeNode, newTree: TreeNode) => {
3939
let tree = newTree;
40-
const walker = (cell: { children: any[]; node: string; }) => {
40+
const walker = (cell: TreeNode | null) => {
4141
if (!cell) {
4242
return;
4343
}
44-
cell.children.forEach((child, id) => {
45-
if (child.node === node.node) {
44+
cell.children.forEach((child: TreeNode | null, id: number) => {
45+
if (child && child.node === node.node) {
4646
cell.children[id] = {
47+
node: child.node,
4748
parent_node: cell.node,
4849
title: 'Added node',
4950
description: 'This node was added by click',
@@ -59,7 +60,7 @@ class App extends React.Component<any, {tree: TreeNode}> {
5960
});
6061
};
6162

62-
addCard = (event: MouseEvent, data: any) => {
63+
addCard = (event: React.MouseEvent<HTMLElement, MouseEvent>, data: { node: TreeNode, newTree: TreeNode }) => {
6364
this.addCardFunc(data.node, data.newTree);
6465
};
6566

‎lib/cjs/src/index.d.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,34 @@ import React from 'react';
22
import { TreeNode, TreeViewProps } from 'types';
33
declare class TreeView extends React.Component<TreeViewProps> {
44
tree: TreeNode;
5-
nodeView: any;
5+
nodeView: typeof React.Component;
66
state: {
7-
columns: any[];
7+
columns: (TreeNode | null)[][];
88
nodeReferencies: any[];
99
};
1010
constructor(props: TreeViewProps);
1111
static createColumnsData: (tree: TreeNode) => {
12-
columns: any[][];
12+
columns: (TreeNode | null)[][];
1313
nodeReferencies: {
1414
parent_node: string | undefined;
15-
node: any;
15+
node: TreeNode | null;
1616
}[][];
1717
};
1818
drawCurves: () => void;
1919
componentDidMount(): void;
2020
componentDidUpdate(): void;
2121
static getDerivedStateFromProps(props: {
22-
tree: any;
23-
}, state: any): any;
22+
tree: TreeNode;
23+
}, state: {
24+
columns: (TreeNode | null)[][];
25+
nodeReferencies: any[];
26+
}): {
27+
columns: (TreeNode | null)[][];
28+
nodeReferencies: {
29+
parent_node: string | undefined;
30+
node: TreeNode | null;
31+
}[][];
32+
};
2433
render(): JSX.Element;
2534
}
2635
export default TreeView;

‎lib/cjs/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ var TreeView = /** @class */ (function (_super) {
8383
var cardElement = react_dom_1.default.findDOMNode(nodeReferencies[id][index].element);
8484
var childrenElements_1 = [];
8585
_this.state.columns[id + 1].map(function (child, c) {
86-
if (child && child.parent_node === cell.node) {
86+
if (child && cell && child.parent_node === cell.node) {
8787
childrenElements_1.push(nodeReferencies[id + 1][c].element);
8888
}
8989
});
@@ -162,7 +162,7 @@ var TreeView = /** @class */ (function (_super) {
162162
var EmptyNode = emptyNode;
163163
return ((0, jsx_runtime_1.jsx)(react_easy_panzoom_1.PanZoom, __assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: styles_module_css_1.default.tree, id: "tree_wrapper" }, { children: columns.map(function (col, i) {
164164
return col.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: styles_module_css_1.default.tree__column }, { children: col.map(function (item, idx) {
165-
return Object.keys(item).length > 3 ? ((0, jsx_runtime_1.jsx)(NodeView, __assign({ ref: function (el) { return (nodeReferencies[i][idx].element = el); }, id: "card_".concat(i).concat(idx) }, item, { styles: nodeViewClasses }), "node_".concat(i).concat(idx))) : showEmptyNodes ? ((0, jsx_runtime_1.jsx)(EmptyNode, __assign({ ref: function (el) { return (nodeReferencies[i][idx].element = el); }, styles: nodeViewClasses, data: __assign(__assign({}, nodeReferencies[i][idx]), { newTree: _this.tree }) }, emptyNodeProps), "node_".concat(i).concat(idx))) : null;
165+
return item !== null && Object.keys(item).length > 3 ? ((0, jsx_runtime_1.jsx)(NodeView, __assign({ ref: function (el) { return (nodeReferencies[i][idx].element = el); }, id: "card_".concat(i).concat(idx) }, item, { styles: nodeViewClasses }), "node_".concat(i).concat(idx))) : showEmptyNodes ? ((0, jsx_runtime_1.jsx)(EmptyNode, __assign({ ref: function (el) { return (nodeReferencies[i][idx].element = el); }, styles: nodeViewClasses, data: __assign(__assign({}, nodeReferencies[i][idx]), { newTree: _this.tree }) }, emptyNodeProps), "node_".concat(i).concat(idx))) : null;
166166
}) })) }), "id_".concat(i))) : null;
167167
}) })) })));
168168
};

0 commit comments

Comments
 (0)