fix: improve Tree component

fix: #1668
nexxtway · Jun 30, 2020 · 579b987 · 579b987
1 parent 7abe1f6
commit 579b987
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Tree/styled/label.js b/src/components/Tree/styled/label.js
@@ -9,6 +9,9 @@ const Label = attachThemeAttrs(styled.h1)`
     color: ${props => props.palette.text.main};
     text-align: start;
     line-height: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 `;
 
 export default Label;
diff --git a/src/components/Tree/treeChildren.js b/src/components/Tree/treeChildren.js
@@ -2,12 +2,16 @@ import React from 'react';
 import Child from './child';
 
 export default function TreeChildren({ data, onSelect, onExpandCollapse, nodePath }) {
-    return data.map((props, index) => (
-        <Child
-            {...props}
-            onSelect={onSelect}
-            onExpandCollapse={onExpandCollapse}
-            nodePath={[...nodePath, index]}
-        />
-    ));
+    return data.map((props, index) => {
+        const key = `child-item-${index}`;
+        return (
+            <Child
+                {...props}
+                key={key}
+                onSelect={onSelect}
+                onExpandCollapse={onExpandCollapse}
+                nodePath={[...nodePath, index]}
+            />
+        );
+    });
 }