113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
import { useEffect, useMemo, useState } from "react"
|
|
|
|
import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
|
|
|
|
import {DraggableWidgetCard} from "../components/cards"
|
|
|
|
import ButtonWidget from "../assets/widgets/button.png"
|
|
|
|
import { filterObjectListStartingWith } from "../utils/filter"
|
|
|
|
|
|
/**
|
|
*
|
|
* @param {function} onWidgetsUpdate - this is a callback that will be called once the sidebar is populated with widgets
|
|
* @returns
|
|
*/
|
|
function WidgetsContainer({onWidgetsUpdate}){
|
|
|
|
const widgets = useMemo(() => {
|
|
return [
|
|
{
|
|
name: "TopLevel",
|
|
img: ButtonWidget,
|
|
link: "https://github.com"
|
|
},
|
|
{
|
|
name: "Frame",
|
|
img: ButtonWidget,
|
|
link: "https://github.com"
|
|
},
|
|
{
|
|
name: "Button",
|
|
img: ButtonWidget,
|
|
link: "https://github.com"
|
|
},
|
|
{
|
|
name: "Input",
|
|
img: ButtonWidget,
|
|
link: "https://github.com"
|
|
},
|
|
]
|
|
}, [])
|
|
|
|
const [searchValue, setSearchValue] = useState("")
|
|
const [widgetData, setWidgetData] = useState(widgets)
|
|
|
|
useEffect(() => {
|
|
|
|
setWidgetData(widgets)
|
|
|
|
if (onWidgetsUpdate){
|
|
onWidgetsUpdate(widgets)
|
|
}
|
|
|
|
}, [widgets])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (searchValue.length > 0){
|
|
const searchData = filterObjectListStartingWith(widgets, "name", searchValue)
|
|
setWidgetData(searchData)
|
|
}else{
|
|
setWidgetData(widgets)
|
|
}
|
|
|
|
}, [searchValue])
|
|
|
|
function onSearch(event){
|
|
|
|
setSearchValue(event.target.value)
|
|
|
|
}
|
|
|
|
return (
|
|
<div className="tw-w-full tw-p-2 tw-gap-4 tw-flex tw-flex-col">
|
|
|
|
<div className="tw-flex tw-gap-2 input tw-place-items-center">
|
|
<SearchOutlined />
|
|
<input type="text" placeholder="Search" className="tw-outline-none tw-w-full tw-border-none"
|
|
id="" onInput={onSearch} value={searchValue}/>
|
|
<div className="">
|
|
{
|
|
searchValue.length > 0 &&
|
|
<div className="tw-cursor-pointer tw-text-gray-600" onClick={() => setSearchValue("")}>
|
|
<CloseCircleFilled />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div className="tw-flex tw-flex-col tw-gap-2 tw-h-full tw-p-1">
|
|
|
|
{
|
|
widgetData.map((widget, index) => {
|
|
return (
|
|
<DraggableWidgetCard key={widget.name}
|
|
name={widget.name}
|
|
img={widget.img}
|
|
url={widget.link}
|
|
/>
|
|
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
|
|
export default WidgetsContainer |