@electerm/electerm-react 3.7.16 → 3.8.6

package/client/components/tree-list/tree-list.styl

@@ -1,6 +1,8 @@
 
 .tree-control-btn
-  display none
+  display inline-flex
+  align-items center
+  justify-content center
   margin-left 3px
   width 16px
   line-height 30px
@@ -27,11 +29,6 @@
     background #000
     color #eee
     cursor pointer
-  &:hover
-    .tree-control-btn
-      display inline-block
-      vertical-align middle
-      line-height 26px
   &.item-dragover-top
     border 2px solid var(--primary)
 .tree-item-title
@@ -102,3 +99,49 @@
   flex 1
   overflow-y auto
   min-height 0
+  position relative
+
+.tree-list-virtual-spacer
+  position relative
+  width 100%
+
+.tree-list-virtual-row
+  position absolute
+  left 0
+  right 0
+
+.tree-list-row
+  box-sizing border-box
+  width 100%
+  position relative
+  &.is-hidden
+    visibility hidden
+  &:hover
+    .tree-item-title
+      padding-right 120px
+    .tree-item-op-wrap
+      opacity 1
+      pointer-events auto
+
+.tree-list-row-group
+  position relative
+  padding-left 12px
+
+.tree-list-editor-overlay
+  position absolute
+  right 4px
+  z-index 4
+
+.tree-item-op-wrap
+  position absolute
+  top 0
+  bottom 0
+  right 4px
+  display flex
+  align-items center
+  z-index 3
+  opacity 0
+  pointer-events none
+  &.is-active
+    opacity 1
+    pointer-events auto

package/client/components/tree-list/virtual-tree-list.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useState } from 'react'
+
+function getMetrics (container, rowHeight) {
+  return {
+    scrollTop: container?.scrollTop || 0,
+    viewportHeight: container?.clientHeight || rowHeight * 12
+  }
+}
+
+export default function VirtualTreeList (props) {
+  const {
+    items,
+    rowHeight,
+    containerRef,
+    overscan = 8,
+    renderItem,
+    insertionGap
+  } = props
+  const frameRef = useRef(0)
+  const [metrics, setMetrics] = useState(() => {
+    return getMetrics(containerRef.current, rowHeight)
+  })
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    const update = () => {
+      setMetrics(prev => {
+        const next = getMetrics(container, rowHeight)
+        return prev.scrollTop === next.scrollTop &&
+          prev.viewportHeight === next.viewportHeight
+          ? prev
+          : next
+      })
+    }
+
+    const scheduleUpdate = () => {
+      window.cancelAnimationFrame(frameRef.current)
+      frameRef.current = window.requestAnimationFrame(update)
+    }
+
+    update()
+    container.addEventListener('scroll', scheduleUpdate, { passive: true })
+
+    let resizeObserver
+    if (window.ResizeObserver) {
+      resizeObserver = new window.ResizeObserver(scheduleUpdate)
+      resizeObserver.observe(container)
+    }
+    window.addEventListener('resize', scheduleUpdate)
+
+    return () => {
+      window.cancelAnimationFrame(frameRef.current)
+      container.removeEventListener('scroll', scheduleUpdate)
+      resizeObserver?.disconnect()
+      window.removeEventListener('resize', scheduleUpdate)
+    }
+  }, [containerRef, rowHeight])
+
+  const gapIndex = insertionGap?.index ?? Number.POSITIVE_INFINITY
+  const gapHeight = insertionGap?.height || 0
+  const gapTop = Number.isFinite(gapIndex)
+    ? gapIndex * rowHeight
+    : Number.POSITIVE_INFINITY
+  const { scrollTop, viewportHeight } = metrics
+  const adjustedScrollTop = scrollTop > gapTop
+    ? scrollTop - gapHeight
+    : scrollTop
+  const adjustedViewportBottom = scrollTop + viewportHeight > gapTop
+    ? scrollTop + viewportHeight - gapHeight
+    : scrollTop + viewportHeight
+  const startIndex = Math.max(0, Math.floor(adjustedScrollTop / rowHeight) - overscan)
+  const endIndex = Math.min(
+    items.length,
+    Math.ceil(adjustedViewportBottom / rowHeight) + overscan
+  )
+  const visibleItems = items.slice(startIndex, endIndex)
+  const totalHeight = items.length * rowHeight + gapHeight
+
+  if (!items.length && !gapHeight) {
+    return null
+  }
+
+  return (
+    <div
+      className='tree-list-virtual-spacer'
+      style={{ height: totalHeight }}
+    >
+      {
+        visibleItems.map((item, offset) => {
+          const index = startIndex + offset
+          const top = index * rowHeight + (index >= gapIndex ? gapHeight : 0)
+          return (
+            <div
+              key={item.key}
+              className='tree-list-virtual-row'
+              style={{
+                top,
+                height: rowHeight
+              }}
+            >
+              {renderItem(item, index)}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.7.16",
+  "version": "3.8.6",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",