76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
import { useEffect, useMemo, useState } from "react"
|
|
|
|
import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
|
|
|
|
import { SidebarWidgetCard, TreeViewCard } from "../components/cards"
|
|
|
|
|
|
import { Tree } from "antd"
|
|
import { useWidgetContext } from "../canvas/context/widgetContext"
|
|
|
|
|
|
|
|
function transformWidgets(widgets, widgetRefs, isTopLevel=true) {
|
|
// console.log("Wdiegts refs: ", widgetRefs)
|
|
return widgets.map(widget => ({
|
|
title: widgetRefs.current[widget.id].current.getDisplayName(), // Assuming widgetType is a class
|
|
key: widget.id,
|
|
isTopLevel: isTopLevel,
|
|
widgetRef: widgetRefs.current[widget.id],
|
|
children: widget.children.length > 0 ? transformWidgets(widget.children, widgetRefs, false) : []
|
|
}))
|
|
}
|
|
|
|
|
|
/**
|
|
*
|
|
* @param {function} onWidgetsUpdate - this is a callback that will be called once the sidebar is populated with widgets
|
|
* @returns
|
|
*/
|
|
function TreeviewContainer() {
|
|
|
|
|
|
const {widgets, widgetRefs} = useWidgetContext()
|
|
|
|
const transformedContent = useMemo(() => {
|
|
return (transformWidgets(widgets, widgetRefs))
|
|
}, [widgets, widgetRefs])
|
|
|
|
const topLevelKeys = transformedContent.filter(cont => cont.isTopLevel).map(cont => cont.key)
|
|
|
|
|
|
return (
|
|
<div className="tw-w-full tw-p-2 tw-gap-4 tw-flex tw-flex-col tw-overflow-x-hidden">
|
|
|
|
{/* <SearchComponent onSearch={onSearch} searchValue={searchValue}
|
|
onClear={() => setSearchValue("")} /> */}
|
|
<div className="tw-flex tw-flex-col tw-gap-2 tw-w-full tw-h-full tw-p-1">
|
|
|
|
<Tree showLine
|
|
treeData={transformedContent}
|
|
titleRender={(nodeData) =>
|
|
|
|
<TreeViewCard widgetId={nodeData.id} title={nodeData.title}
|
|
widgetRef={nodeData.widgetRef}
|
|
isTopLevel={nodeData.isTopLevel}/>
|
|
}
|
|
defaultExpandedKeys={topLevelKeys}
|
|
>
|
|
|
|
</Tree>
|
|
|
|
{
|
|
Object.keys(transformedContent || {}).length === 0 &&
|
|
<div className="tw-text-sm tw-place-content-center">
|
|
Start adding widgets to view it in tree view
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
|
|
export default TreeviewContainer |