diff --git a/package.json b/package.json index 13e0b82b..471af3a5 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,8 @@ "react-layout-kit": "^1.7.4", "react-markdown": "^8.0.7", "react-rnd": "^10.4.1", + "react-virtualized-auto-sizer": "^1.0.20", + "react-window": "^1.8.10", "reactflow": "^11.10.1", "rehype-katex": "^6.0.3", "remark-gfm": "^3.0.1", @@ -129,6 +131,7 @@ "@types/json-schema": "^7.0.15", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", + "@types/react-window": "^1.8.8", "@umijs/lint": "^4.0.90", "@vitest/coverage-v8": "latest", "antd": "^5.12.5", diff --git a/src/SortableTree/components/TreeItem/index.tsx b/src/SortableTree/components/TreeItem/index.tsx index 2cdd073e..1717f4ed 100644 --- a/src/SortableTree/components/TreeItem/index.tsx +++ b/src/SortableTree/components/TreeItem/index.tsx @@ -113,6 +113,10 @@ export interface TreeItemProps extends Omit, 'id'> * @title 样式类名前缀 */ prefixCls: string; + /** + * 虚拟滚动添加样式 + */ + virtualStyle?: CSSProperties; } const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => @@ -134,6 +138,7 @@ const TreeItem: FC = memo( hideRemove, node, prefixCls, + virtualStyle, ...props }) => { const prefix = `${prefixCls}-node`; @@ -200,6 +205,7 @@ const TreeItem: FC = memo( transform: CSS.Translate.toString(transform), transition, + ...virtualStyle, } as CSSProperties } onClick={(e) => { diff --git a/src/SortableTree/container/StoreUpdater.tsx b/src/SortableTree/container/StoreUpdater.tsx index aa5cd2bc..03aa5a04 100644 --- a/src/SortableTree/container/StoreUpdater.tsx +++ b/src/SortableTree/container/StoreUpdater.tsx @@ -6,7 +6,7 @@ import { SortableTreeInstance, useSortableTree } from '../hooks/useSortableTree' import type { ControlledState, OnTreeDataChange } from '../store'; import { useStoreApi } from '../store'; -import type { FlattenNode, Projected, RenderNodeProps, TreeData } from '../types'; +import type { FlattenNode, Projected, RenderNodeProps, TreeData, VirtualConfig } from '../types'; export interface StoreUpdaterProps extends ControlledState { /** @@ -46,6 +46,11 @@ export interface StoreUpdaterProps extends ControlledState { targetNode: FlattenNode; projected: Projected; }) => boolean; + + /** + * 开启虚拟滚动 + */ + virtual?: VirtualConfig; } const StoreUpdater = ({ @@ -61,6 +66,7 @@ const StoreUpdater = ({ indentationWidth, disableDrag, sortableRule, + virtual, }: StoreUpdaterProps) => { const storeApi = useStoreApi(); @@ -75,6 +81,7 @@ const StoreUpdater = ({ useStoreUpdater('indentationWidth', indentationWidth); useStoreUpdater('hideAdd', hideAdd); useStoreUpdater('hideRemove', hideRemove); + useStoreUpdater('virtual', virtual); useStoreUpdater('disableDrag', disableDrag); useStoreUpdater('sortableRule', sortableRule); diff --git a/src/SortableTree/demos/virtual.tsx b/src/SortableTree/demos/virtual.tsx new file mode 100644 index 00000000..6b9b52db --- /dev/null +++ b/src/SortableTree/demos/virtual.tsx @@ -0,0 +1,3973 @@ +/** + * title: 虚拟滚动 + * description: 数据量较大时，使用 virtual 配置虚拟滚动 + */ +import { SortableTree } from '@ant-design/pro-editor'; + +interface DataContent { + name: string; + visible: boolean; + isLeaf: boolean; +} + +const LayerManager = () => { + const treeData = [ + { + id: '33', + content: { + name: '33', + }, + children: [ + { + id: '4C16E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C16E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C16F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C16F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C170', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C170)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C171', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C171)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C172', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C172)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C173', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C173)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C174', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C174)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C175', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C175)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C176', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C176)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C177', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C177)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C178', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C178)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C179', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C179)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C17F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C17F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C180', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C180)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C181', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C181)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C182', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C182)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C183', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C183)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C184', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C184)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C185', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C185)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C186', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C186)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C187', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C187)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C188', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C188)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C189', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C189)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C18F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C18F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C190', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C190)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C191', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C191)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C192', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C192)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C193', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C193)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C194', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C194)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C195', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C195)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C197', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C197)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C198', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C198)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C199', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C199)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C19F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C19F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1A0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1A0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1A6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1A6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1A7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1A7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1A8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1A8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1A9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1A9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1AA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1AA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1AB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1AB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1AC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1AC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1AE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1AE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1AF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1AF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1B1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1B1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1C8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1C8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1C9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1C9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1CF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1CF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D4', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D4)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1D9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1D9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1DF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1DF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1E0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1E0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '4C1E1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '33(4C1E1)', + isLeaf: true, + }, + + children: [], + }, + ], + }, + { + id: '44', + content: { + name: '44', + }, + children: [ + { + id: '5720C', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '44(5720C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5720D', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '44(5720D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5726A', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '44(5726A)', + isLeaf: true, + }, + + children: [], + }, + ], + }, + { + id: '22', + content: { + name: '22', + }, + children: [ + { + id: '5720E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5720E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5720F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5720F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57210', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57210)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57211', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57211)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57212', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57212)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57213', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57213)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57214', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57214)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57215', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57215)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57216', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57216)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57217', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57217)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57218', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57218)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57219', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57219)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5721F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5721F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57220', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57220)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57221', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57221)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57222', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57222)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57223', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57223)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A29', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A29)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A2F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A2F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A30', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A30)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A31', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A31)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A32', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A32)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A33', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A33)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A34', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A34)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A35', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A35)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A36', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A36)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A37', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A37)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57A38', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57A38)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A4', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A4)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578A9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578A9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578AF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578AF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578B0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578B0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578B1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578B1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '578B2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(578B2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B57', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B57)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B58', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B58)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B59', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B59)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B5F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B5F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B60', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B60)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B61', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B61)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B62', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B62)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B63', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B63)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B64', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B64)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B65', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B65)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B66', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B66)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B67', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B67)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B68', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B68)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B69', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B69)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B6A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57B6A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA4', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA4)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CA9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CA9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CAA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CAA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CAB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CAB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CAC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CAC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57CAD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57CAD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5752D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5752D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5752E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5752E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5752F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5752F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57530', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57530)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57531', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57531)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57532', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57532)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57533', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57533)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57534', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57534)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57535', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57535)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57536', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57536)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57537', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57537)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57538', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57538)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57539', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57539)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5753A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5753A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57682', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57682)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57683', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57683)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57684', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57684)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57685', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57685)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57686', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57686)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57687', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57687)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57688', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57688)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57689', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57689)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5768F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5768F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57690', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57690)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57691', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57691)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57692', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57692)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57693', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57693)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57694', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57694)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D44', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D44)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D45', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D45)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D46', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D46)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D47', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D47)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D48', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D48)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D49', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D49)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D4F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D4F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D50', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D50)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D51', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D51)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D52', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D52)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D53', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(56D53)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572ED', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572ED)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572EE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572EE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572EF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572EF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F4', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F4)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572F9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572F9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572FA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572FA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572FB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572FB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572FC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572FC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572FD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(572FD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573C7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573C7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573C8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573C8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573C9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573C9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CA', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CA)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CB', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CB)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CD', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CD)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573CF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573CF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573D0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573D0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '573D1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(573D1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5718F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5718F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57190', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57190)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57191', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57191)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57192', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57192)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57193', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57193)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57194', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57194)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57195', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57195)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57196', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57196)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57197', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57197)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57198', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57198)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57199', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57199)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5719A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5719A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5719B', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5719B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5719C', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(5719C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57D9F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57D9F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA1', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA1)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA2', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA2)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA4', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA4)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA7', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA7)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA8', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA8)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57DA9', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57DA9)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57271', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57271)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57272', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57272)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57273', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57273)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57274', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57274)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57275', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57275)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57276', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57276)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57277', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57277)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57278', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '22(57278)', + isLeaf: true, + }, + + children: [], + }, + ], + }, + { + id: '55', + content: { + name: '55', + }, + children: [ + { + id: '5797D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(5797D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '579A6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(579A6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '579D3', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(579D3)', + isLeaf: true, + }, + + children: [], + }, + { + id: '579FE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(579FE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '577F5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(577F5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5781E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(5781E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5784D', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(5784D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57876', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57876)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B01', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57B01)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57B2E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57B2E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57C1F', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57C1F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57C48', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57C48)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57C77', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57C77)', + isLeaf: true, + }, + + children: [], + }, + { + id: '574AC', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(574AC)', + isLeaf: true, + }, + + children: [], + }, + { + id: '574D5', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(574D5)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57502', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57502)', + isLeaf: true, + }, + + children: [], + }, + { + id: '575D6', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(575D6)', + isLeaf: true, + }, + + children: [], + }, + { + id: '575FF', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(575FF)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5762E', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(5762E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57657', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57657)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56CEE', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(56CEE)', + isLeaf: true, + }, + + children: [], + }, + { + id: '56D19', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(56D19)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57297', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57297)', + isLeaf: true, + }, + + children: [], + }, + { + id: '572C0', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(572C0)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57371', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57371)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5739A', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(5739A)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57139', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57139)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57162', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57162)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57D49', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57D49)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57D72', + content: { + icon: 'image', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '55(57D72)', + isLeaf: true, + }, + + children: [], + }, + ], + }, + { + id: '11', + content: { + name: '11', + }, + children: [ + { + id: '5726B', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(5726B)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5726C', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(5726C)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5726D', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(5726D)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5726E', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(5726E)', + isLeaf: true, + }, + + children: [], + }, + { + id: '5726F', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(5726F)', + isLeaf: true, + }, + + children: [], + }, + { + id: '57270', + content: { + icon: 'bezier-curve', + className: 'rde-canvas-list-item', + prefix: 'fas', + name: '11(57270)', + isLeaf: true, + }, + + children: [], + }, + ], + }, + ]; + + return ( +
+ + treeData={treeData as any} + renderContent={(item) =>
{item.id}
} + SHOW_STORE_IN_DEVTOOLS + virtual={{ + height: 480, + }} + onTreeDataChange={(data) => { + console.log('变更：', data); + }} + /> +
+ ); +}; +export default LayerManager; diff --git a/src/SortableTree/features/TreeList.tsx b/src/SortableTree/features/TreeList.tsx index 49f2e01a..26850c25 100644 --- a/src/SortableTree/features/TreeList.tsx +++ b/src/SortableTree/features/TreeList.tsx @@ -1,23 +1,25 @@ import { createStyles, cx, getStudioStylish } from '@/theme'; -import { PlusOutlined } from '@ant-design/icons'; import { useMemoizedFn } from 'ahooks'; -import { Button } from 'antd'; import isEqual from 'lodash.isequal'; import { memo } from 'react'; +import { VariableSizeList } from 'react-window'; import { shallow } from 'zustand/shallow'; import { SortableTreeItem } from '../components'; import { dataFlattenSelector, projectedSelector, useStore } from '../store'; -import { genUniqueId } from '../../utils'; +import { genUniqueId } from '@/utils'; +import { PlusOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; import type { FlattenNode } from '../types'; interface TreeNodeProps { prefixCls: string; node: FlattenNode; + virtualStyle?: React.CSSProperties; } -const TreeNode = memo(({ prefixCls, node }) => { +const TreeNode = memo(({ prefixCls, node, virtualStyle }) => { const [activeId, indentationWidth, dispatchTreeData, hideRemove] = useStore( (s) => [s.activeId, s.indentationWidth, s.dispatchTreeData, s.hideRemove], shallow, @@ -44,6 +46,7 @@ const TreeNode = memo(({ prefixCls, node }) => { children.length ? () => dispatchTreeData({ type: 'toggleCollapse', id }) : undefined } node={node} + virtualStyle={virtualStyle} onRemove={onRemove} /> ); @@ -72,18 +75,36 @@ interface TreeListProps { } const TreeList = memo(({ prefixCls }) => { - const [dispatchTreeData, hideAdd] = useStore( - (s) => [s.dispatchTreeData, s.hideAdd, s.hideRemove], + const [dispatchTreeData, hideAdd, virtual] = useStore( + (s) => [s.dispatchTreeData, s.hideAdd, s.virtual], shallow, ); const flattenData: FlattenNode[] = useStore(dataFlattenSelector, isEqual); const { styles } = useStyle(prefixCls); + const { height = 800, itemHeight = () => 36, width = '100%' } = virtual || {}; + return ( <> - {flattenData.map((node) => ( - - ))} + {virtual ? ( + + {({ index, data, style }) => { + return ; + }} + + ) : ( + <> + {flattenData.map((node) => ( + + ))} + + )} {hideAdd ? null : (