Merge pull request #140 from barbalex/react-virtuoso_for_tree

implement react virtuoso
barbalex · Jan 25, 2025 · cedc02a · cedc02a
2 parents c69bf51 + 2018018
commit cedc02a
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "react-slick": "0.30.3",
     "react-stylable-diff": "2.0.0",
     "react-virtualized-auto-sizer": "1.0.25",
+    "react-virtuoso": "^4.12.3",
     "react-window": "1.8.11",
     "recharts": "2.15.0",
     "redaxios": "0.5.1",

diff --git a/src/components/Tree/List.jsx b/src/components/Tree/List.jsx
@@ -10,6 +10,7 @@ import { getSnapshot } from 'mobx-state-tree'
 import findIndex from 'lodash/findIndex'
 import isEqual from 'lodash/isEqual'
 import { FixedSizeList as List } from 'react-window'
+import { Virtuoso } from 'react-virtuoso'
 
 import { MobxStoreContext } from '../../mobxStoreContext.js'
 import { TreeRow } from './Row.jsx'
@@ -44,6 +45,22 @@ export const TreeList = observer(
       }
     }, [listRef, activeNode?.label, aNA, nodes, nodeIndex])
 
+    return (
+      <Virtuoso
+        style={{ height: `${height - 5}px`, width: `${width}px` }}
+        totalCount={nodes.length}
+        itemContent={(index) => (
+          <TreeRow
+            key={index}
+            index={index}
+            node={nodes[index]}
+            nodes={nodes}
+            userRole={userRole}
+          />
+        )}
+      />
+    )
+
     return (
       <StyledList
         height={height - 5}

diff --git a/src/components/Tree/Row.jsx b/src/components/Tree/Row.jsx
@@ -7,7 +7,6 @@ import {
   MdMoreHoriz as MoreHorizIcon,
 } from 'react-icons/md'
 import { observer } from 'mobx-react-lite'
-// import { ContextMenuTrigger, ContextMenu, MenuItem } from 'react-contextmenu'
 import last from 'lodash/last'
 import { of as $of } from 'rxjs'
 
@@ -31,89 +30,8 @@ import {
   MenuItem,
 } from '../../utils/react-contextmenu/index.js'
 
-const Container = styled.div`
-  .react-contextmenu {
-    display: flex;
-    flex-direction: column;
-    min-width: 100px;
-    padding: 5px 0;
-    margin: 2px 0 0;
-    font-size: 14px;
-    text-align: left;
-    background-color: rgb(66, 66, 66);
-    background-clip: padding-box;
-    border: 1px solid grey;
-    border-radius: 0.25rem;
-    outline: none;
-    opacity: 0;
-    pointer-events: none;
-    font-family: 'Roboto', sans-serif;
-    transition: opacity 250ms ease !important;
-    /* no idea why this is needed */
-    margin-top: -70px;
-  }
-  .react-contextmenu.react-contextmenu--visible {
-    color: white;
-    opacity: 1;
-    pointer-events: auto;
-    z-index: 1000;
-  }
-  .react-contextmenu-title {
-    opacity: 0;
-  }
-  .react-contextmenu--visible .react-contextmenu-title {
-    color: #b3b3b3;
-    padding-left: 10px;
-    padding-right: 15px;
-    padding-bottom: 3px;
-    opacity: 1;
-  }
-  .react-contextmenu-title::after {
-    content: ':';
-  }
-  .react-contextmenu > .react-contextmenu-item {
-    display: inline-block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.5;
-    color: white;
-    text-align: inherit;
-    white-space: nowrap;
-    background: 0 0;
-    border: 0;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .react-contextmenu-item.active,
-  .react-contextmenu-item:hover {
-    color: #f57c00;
-    border-color: #0275d8;
-    text-decoration: none;
-  }
-
-  .react-contextmenu-divider {
-    border-top: 1px solid grey;
-    margin-top: 4px;
-    margin-bottom: 7px;
-  }
-
-  .react-contextmenu-submenu {
-    padding-right: 27px !important;
-  }
-
-  .react-contextmenu-submenu:after {
-    content: '▶';
-    display: inline-block;
-    position: absolute;
-    right: 7px;
-    bottom: 3px;
-  }
-`
 const StyledNode = styled.div`
   padding-left: ${(props) => `${Number(props['data-level']) * 17 - 10}px`};
-  height: ${(props) => props['data-row-height']}px;
-  max-height: ${(props) => props['data-row-height']}px;
   box-sizing: border-box;
   margin: 0;
   display: flex;
@@ -125,6 +43,7 @@ const StyledNode = styled.div`
     props['data-nodeisinactivenodepath'] ? '#D84315'
     : props['data-inaktiv'] ? 'rgba(0, 0, 0, 0.35)'
     : 'inherit'};
+  line-height: 1.3rem;
 `
 const StyledExpandMoreIcon = styled(ExpandMoreIcon)`
   margin-top: -5px !important;
@@ -175,7 +94,7 @@ const SymbolDiv = styled.div`
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-self: flex-start;
 `
 const SymbolSpan = styled.span`
   padding-right: ${(props) =>
@@ -196,7 +115,7 @@ const TextSpan = styled.span`
   font-size: ${(props) => `${props['data-font-size']}px !important`};
   font-weight: ${(props) =>
     props['data-nodeisinactivenodepath'] ? '700 !important' : 'inherit'};
-  white-space: nowrap;
+  white-space: normal;
   cursor: pointer;
   &:hover {
     color: #f57c00;
@@ -318,7 +237,7 @@ export const TreeRow = observer(({ style, node, nodes, userRole }) => {
   const inaktiv = node?.aktiv === false
 
   return (
-    <Container style={style}>
+    <>
       <ContextMenuTrigger id={`cm${node?.id}`}>
         <StyledNode
           data-level={level}
@@ -430,6 +349,6 @@ export const TreeRow = observer(({ style, node, nodes, userRole }) => {
           )}
         </ContextMenu>
       )}
-    </Container>
+    </>
   )
 })
diff --git a/src/components/Tree/index.jsx b/src/components/Tree/index.jsx
@@ -19,6 +19,84 @@ import { buildNodes } from './nodes/index.js'
 const Container = styled.div`
   width: 100%;
   height: 100%;
+
+  .react-contextmenu {
+    display: flex;
+    flex-direction: column;
+    min-width: 100px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    background-color: rgb(66, 66, 66);
+    background-clip: padding-box;
+    border: 1px solid grey;
+    border-radius: 0.25rem;
+    outline: none;
+    opacity: 0;
+    pointer-events: none;
+    font-family: 'Roboto', sans-serif;
+    transition: opacity 250ms ease !important;
+    /* no idea why this is needed */
+    margin-top: -70px;
+  }
+  .react-contextmenu.react-contextmenu--visible {
+    color: white;
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 1000;
+  }
+  .react-contextmenu-title {
+    opacity: 0;
+  }
+  .react-contextmenu--visible .react-contextmenu-title {
+    color: #b3b3b3;
+    padding-left: 10px;
+    padding-right: 15px;
+    padding-bottom: 3px;
+    opacity: 1;
+  }
+  .react-contextmenu-title::after {
+    content: ':';
+  }
+  .react-contextmenu > .react-contextmenu-item {
+    display: inline-block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.5;
+    color: white;
+    text-align: inherit;
+    white-space: nowrap;
+    background: 0 0;
+    border: 0;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .react-contextmenu-item.active,
+  .react-contextmenu-item:hover {
+    color: #f57c00;
+    border-color: #0275d8;
+    text-decoration: none;
+  }
+
+  .react-contextmenu-divider {
+    border-top: 1px solid grey;
+    margin-top: 4px;
+    margin-bottom: 7px;
+  }
+
+  .react-contextmenu-submenu {
+    padding-right: 27px !important;
+  }
+
+  .react-contextmenu-submenu:after {
+    content: '▶';
+    display: inline-block;
+    position: absolute;
+    right: 7px;
+    bottom: 3px;
+  }
 `
 
 export const Tree = observer(() => {