@electerm/electerm-react 3.7.18 → 3.8.8

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

@@ -0,0 +1,111 @@
+import TreeExpander from './tree-expander'
+import TreeListItem from './tree-list-item'
+import TreeItemOp from './tree-item-op'
+import { treeLevelIndent } from './tree-list-layout'
+
+export default function TreeListRow (props) {
+  const {
+    row,
+    keyword,
+    expandedKeys,
+    activeItemId,
+    searchSelectedRowKey,
+    staticList,
+    leftSidebarWidth,
+    handleExpand,
+    handleUnExpand,
+    del,
+    openAll,
+    openMoveModal,
+    editItem,
+    addSubCat,
+    onSelect,
+    duplicateItem,
+    onDragStart,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    isHidden
+  } = props
+  const { item, isGroup, parentId, depth } = row
+  const groupHasChildren = Boolean(
+    item?.bookmarkIds?.length ||
+    item?.bookmarkGroupIds?.length
+  )
+  const isGroupExpanded = Boolean(keyword) || expandedKeys.includes(item.id)
+  const itemProps = {
+    item,
+    isGroup,
+    parentId,
+    leftSidebarWidth,
+    staticList,
+    selectedItemId: activeItemId,
+    searchSelected: searchSelectedRowKey === row.key,
+    del,
+    openAll,
+    openMoveModal,
+    editItem,
+    addSubCat,
+    onSelect,
+    duplicateItem,
+    onDragStart,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    keyword
+  }
+
+  if (!isGroup) {
+    return (
+      <div
+        className={`tree-list-row${isHidden ? ' is-hidden' : ''}`}
+        style={{ paddingLeft: depth * treeLevelIndent }}
+      >
+        <TreeListItem {...itemProps} />
+        <TreeItemOp
+          item={item}
+          isGroup={isGroup}
+          staticList={staticList}
+          del={del}
+          openAll={openAll}
+          openMoveModal={openMoveModal}
+          editItem={editItem}
+          addSubCat={addSubCat}
+          duplicateItem={duplicateItem}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`tree-list-row${isHidden ? ' is-hidden' : ''}`}
+      style={{ paddingLeft: Math.max(0, (depth - 1) * treeLevelIndent) }}
+    >
+      <div className='tree-list-row-group'>
+        <TreeExpander
+          level={parentId}
+          group={item}
+          hasChildren={groupHasChildren}
+          shouldOpen={isGroupExpanded}
+          onExpand={handleExpand}
+          onUnExpand={handleUnExpand}
+        />
+        <TreeListItem {...itemProps} />
+        <TreeItemOp
+          item={item}
+          isGroup={isGroup}
+          staticList={staticList}
+          del={del}
+          openAll={openAll}
+          openMoveModal={openMoveModal}
+          editItem={editItem}
+          addSubCat={addSubCat}
+          duplicateItem={duplicateItem}
+        />
+      </div>
+    </div>
+  )
+}

package/client/components/tree-list/tree-list-rows.js

@@ -0,0 +1,107 @@
+import createName from '../../common/create-title'
+
+function isTopLevelGroup (group) {
+  return !group?.level || group.level < 2
+}
+
+export function buildVisibleTreeRows ({
+  bookmarkGroups,
+  bookmarkGroupTree,
+  bookmarksMap,
+  expandedKeys,
+  keyword
+}) {
+  const groupTree = bookmarkGroupTree || {}
+  const rows = []
+  const matchedRowKeys = []
+  const expandedKeySet = new Set(expandedKeys || [])
+  const lowerKeyword = (keyword || '').toLowerCase()
+  const bookmarkMatchCache = new Map()
+  const groupMatchCache = new Map()
+
+  const bookmarkMatches = (bookmarkId) => {
+    if (bookmarkMatchCache.has(bookmarkId)) {
+      return bookmarkMatchCache.get(bookmarkId)
+    }
+    const item = bookmarksMap.get(bookmarkId)
+    const matched = Boolean(
+      item &&
+      (!lowerKeyword || createName(item).toLowerCase().includes(lowerKeyword))
+    )
+    bookmarkMatchCache.set(bookmarkId, matched)
+    return matched
+  }
+
+  const groupHasMatchedBookmarks = (group) => {
+    if (!lowerKeyword) {
+      return true
+    }
+    if (!group) {
+      return false
+    }
+    if (groupMatchCache.has(group.id)) {
+      return groupMatchCache.get(group.id)
+    }
+    const hasMatch = (group.bookmarkIds || []).some(bookmarkMatches) ||
+      (group.bookmarkGroupIds || []).some(id => {
+        return groupHasMatchedBookmarks(groupTree[id])
+      })
+    groupMatchCache.set(group.id, hasMatch)
+    return hasMatch
+  }
+
+  const visitGroup = (group, parentId = '', depth = 1) => {
+    if (!group || (lowerKeyword && !groupHasMatchedBookmarks(group))) {
+      return
+    }
+
+    rows.push({
+      key: `group:${group.id}`,
+      item: group,
+      isGroup: true,
+      parentId,
+      depth
+    })
+
+    if (!lowerKeyword && !expandedKeySet.has(group.id)) {
+      return
+    }
+
+    const nextParentId = parentId
+      ? `${parentId}#${group.id}`
+      : `#${group.id}`
+
+    for (const groupId of group.bookmarkGroupIds || []) {
+      visitGroup(groupTree[groupId], nextParentId, depth + 1)
+    }
+
+    for (const bookmarkId of group.bookmarkIds || []) {
+      const item = bookmarksMap.get(bookmarkId)
+      if (!item || (lowerKeyword && !bookmarkMatches(bookmarkId))) {
+        continue
+      }
+      const rowKey = `bookmark:${item.id}`
+      rows.push({
+        key: rowKey,
+        item,
+        isGroup: false,
+        parentId: nextParentId,
+        depth
+      })
+      if (lowerKeyword) {
+        matchedRowKeys.push(rowKey)
+      }
+    }
+  }
+
+  for (const group of bookmarkGroups || []) {
+    if (isTopLevelGroup(group)) {
+      visitGroup(group)
+    }
+  }
+
+  return {
+    rows,
+    matchedRowKeys
+  }
+}