Skip to content

feat: include relative path as argument to render each node in tree view #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Apr 19, 2021
Merged

feat: include relative path as argument to render each node in tree view #45

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
df06a05
feat: include a afterChange function in useFormControl
Oct 8, 2020
db3a6d5
Merge remote-tracking branch 'upstream/master'
Oct 8, 2020
a1a79d1
wip
Oct 8, 2020
309b839
wip
Oct 8, 2020
b4dd5d0
wip
Oct 8, 2020
aeabe32
wip
Oct 8, 2020
e8b1fde
wip
Oct 8, 2020
7946ed5
Merge remote-tracking branch 'upstream/master'
Oct 9, 2020
5f132d7
docs: includes instructions to run the application
Oct 13, 2020
826f303
Merge remote-tracking branch 'upstream/master'
Oct 13, 2020
7e28557
Merge remote-tracking branch 'upstream/master'
Oct 19, 2020
b667759
docs: fix readme subtitles
Nov 12, 2020
82f3656
wip
Nov 12, 2020
731203c
feat: includes exports of FormLabel and FormValidationFeedbac
Dec 18, 2020
29d5f73
wip
Dec 18, 2020
3f94b88
Merge branch 'master' into master
assisrafael Dec 21, 2020
e13ac88
feat: pass the relative path to each node in tree view
Apr 16, 2021
a1d1119
wip
Apr 16, 2021
31d7e40
Merge remote-tracking branch 'upstream/master'
Apr 16, 2021
8d90a95
wip
Apr 16, 2021
5c963e5
wip
Apr 16, 2021
c1d88e4
wip
Apr 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions demo/TreeViewExamples.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ export function TreeViewExamples() {
return (
<TreeView
nodes={nodes}
template={(item, index, parentItem) => (
template={(item, index, parentItem, relativePath) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the idea here is to facilitate the usage of the TreeView Component with Forms.

<em>
{item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})
{item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})<p>Path: {relativePath}</p>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as the tree grows, only de index and the father element are not enough to handle changes in deep nodes.
With this new argument, change node values is a lot easier.
image

</em>
)}
childrenPath={'children'}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"main": "dist/main.js",
"scripts": {
"build": "rollup --config",
"start": "webpack-dev-server --mode development",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this code was launching this error
image

"start": "webpack serve --mode development",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after a little research a found this solution
image

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, move this change to another PR, because it is not related to the feature proposed here

"docs": "webpack --mode development",
"release": "standard-version",
"prepublishOnly": "npm run build",
Expand Down
19 changes: 15 additions & 4 deletions src/treeview/TreeView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@ export function TreeView({ childrenPath, draggable, nodes, template }) {
return (
<div className="rbu-treeview">
<ul className="list-group">
<TreeNodes depth={0} nodes={nodes} template={template} childrenPath={childrenPath} draggable={draggable} />
<TreeNodes
depth={0}
nodes={nodes}
template={template}
childrenPath={childrenPath}
draggable={draggable}
relativePath={`${childrenPath}`}
/>
</ul>
</div>
);
Expand All @@ -19,7 +26,7 @@ TreeView.propTypes = {
template: PropTypes.func.isRequired,
};

function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template }) {
function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template, relativePath }) {
return (
<>
{nodes.map((node, index) => (
Expand All @@ -32,6 +39,7 @@ function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template
childrenPath={childrenPath}
depth={depth}
draggable={draggable}
relativePath={`${relativePath}[${index}]`}
/>
))}
</>
Expand All @@ -45,15 +53,16 @@ TreeNodes.propTypes = {
nodes: PropTypes.array,
parentNode: PropTypes.object,
template: PropTypes.func,
relativePath: PropTypes.string,
};

function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable }) {
function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable, relativePath }) {
const childrenNodes = getValueByPath(node, childrenPath);

return (
<div draggable={draggable}>
<li className="list-group-item" style={{ marginLeft: `${depth * 20}px`, borderTopWidth: '1px' }}>
{template(node, index, parentNode)}
{template(node, index, parentNode, relativePath)}
</li>

{childrenNodes && (
Expand All @@ -63,6 +72,7 @@ function TreeNode({ node, parentNode, index, template, childrenPath, depth, drag
template={template}
childrenPath={childrenPath}
depth={depth + 1}
relativePath={`${relativePath}.${childrenPath}`}
/>
)}
</div>
Expand All @@ -76,4 +86,5 @@ TreeNode.propTypes = {
childrenPath: PropTypes.string,
depth: PropTypes.number,
draggable: PropTypes.bool,
relativePath: PropTypes.string,
};
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module.exports = [
{
entry: './demo/demo.jsx',
output: {
path: `${__dirname}/demo`,
path: `${__dirname}/`,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The index.html imports the file from ./demo.js not ./demo/demo.js
image

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, move this change to another PR, because it is not related to the feature proposed here

filename: 'demo.js',
},
devServer: {
Expand Down