From 13badb47ee56c6851615c837a2774c137df00028 Mon Sep 17 00:00:00 2001 From: Mirco Bellagamba Date: Thu, 3 Oct 2019 13:11:23 +0200 Subject: [PATCH 1/2] Fix missing node icon issue - Pass missing node icon prop down to children - Fix junction left margin --- src/lib/components/Row.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Row.js b/src/lib/components/Row.js index 5cc774a..0669543 100644 --- a/src/lib/components/Row.js +++ b/src/lib/components/Row.js @@ -85,7 +85,7 @@ const HorizontalLine = styled.div` const Junction = styled.div` width: ${(props) => ((props.nodeSize / 2) + (props.lineWidth * 2))}px; height: ${(props) => (props.nodeSize / 2)}px; - margin-left: ${(props) => ((props.nodeSize / 2) - props.lineWidth)}px; + margin-left: ${(props) => (props.nodeSize / 2)}px; border-width: 0 0 ${((props) => props.lineWidth)}px ${(props) => props.lineWidth}px; border-color: ${(props) => props.lineColor}; border-style: ${(props) => props.lineStyle}; From 6d79cd516b2b512f3f56f7969cce05907ca439c7 Mon Sep 17 00:00:00 2001 From: Mirco Bellagamba Date: Thu, 3 Oct 2019 13:28:05 +0200 Subject: [PATCH 2/2] Add custom expanded/collapsed icon props --- README.md | 2 ++ public/index.html | 2 +- src/demo/App.js | 36 +++++++++++++++++++++++++++------ src/demo/images/down.png | Bin 0 -> 180 bytes src/demo/images/github.png | Bin 0 -> 1714 bytes src/demo/images/right.png | Bin 0 -> 176 bytes src/demo/testData.js | 2 +- src/lib/components/Row.js | 23 +++++++++++++++++++-- src/lib/components/TreeView.js | 6 ++++++ 9 files changed, 61 insertions(+), 10 deletions(-) create mode 100644 src/demo/images/down.png create mode 100644 src/demo/images/github.png create mode 100644 src/demo/images/right.png diff --git a/README.md b/README.md index 7652f07..56ff96b 100644 --- a/README.md +++ b/README.md @@ -109,3 +109,5 @@ Here are the props you can pass to `TreeView`. | expandButtonColor | `string`| optional | `'#4B6DAA'` | The color of the expand button | | nodeSize| `number`| optional | 20 | The size of the tree leaf icons | | nodeIcon| `string`| optional | [blue dot] | The node icon. Must be a base64 imported image | +| collapsedIcon| `string`| optional | [+ sign] | The collapsed icon. Must be a base64 imported image. Require to set also the `expandedIcon`. | +| expandedIcon| `string`| optional | [- sign] | The expanded icon. Must be a base64 imported image. Require to set also the `collapsedIcon`. | diff --git a/public/index.html b/public/index.html index ed0ebaf..432a0f5 100644 --- a/public/index.html +++ b/public/index.html @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + React Expandable TreeView