| 1 |
import React from "react"; |
| 2 |
import { Droppable } from "react-beautiful-dnd"; |
| 3 |
import { __ } from "@wordpress/i18n"; |
| 4 |
import { |
| 5 |
NoDocsImg, |
| 6 |
} from "../../../icons/index"; |
| 7 |
import GridItem from "./GridItem"; |
| 8 |
|
| 9 |
const AllDocsGridItem = ({ docsData, category, deleteIds, mutate, isLoading, setQuickEdit }) => { |
| 10 |
if (docsData.length === 0) { |
| 11 |
return ( |
| 12 |
<Droppable droppableId={category?.id?.toString()} key={category.id}> |
| 13 |
{(provided, snapshot) => ( |
| 14 |
<div className="betterdocs-dashboard-category-body" |
| 15 |
ref={provided.innerRef} |
| 16 |
{...provided.droppableProps} |
| 17 |
> |
| 18 |
<div className="empty-cat-img" |
| 19 |
|
| 20 |
> |
| 21 |
{(!snapshot.isDragging) && <><NoDocsImg /> |
| 22 |
<h3 className="empty-cat-title">{__("No Docs Found", "betterdocs")}</h3></>} |
| 23 |
</div> |
| 24 |
<ul className="custom-placeholder">{provided.placeholder}</ul> |
| 25 |
</div> |
| 26 |
)} |
| 27 |
</Droppable> |
| 28 |
); |
| 29 |
} |
| 30 |
|
| 31 |
return ( |
| 32 |
<Droppable droppableId={category?.id?.toString()} key={category.id}> |
| 33 |
{(provided, snapshot) => ( |
| 34 |
<> |
| 35 |
<div className="betterdocs-dashboard-category-body"> |
| 36 |
<ul |
| 37 |
className="betterdocs-dashboard-category-list" |
| 38 |
ref={provided.innerRef} |
| 39 |
{...provided.droppableProps} |
| 40 |
> |
| 41 |
{docsData.map((doc, index) => ( |
| 42 |
<GridItem doc={doc} index={index} key={index} deleteIds={deleteIds} isLoading={isLoading} mutate={mutate} termId={category?.id} setQuickEdit={setQuickEdit} term={category} /> |
| 43 |
))} |
| 44 |
</ul> |
| 45 |
<ul className="custom-placeholder">{provided.placeholder}</ul> |
| 46 |
</div> |
| 47 |
</> |
| 48 |
)} |
| 49 |
</Droppable> |
| 50 |
); |
| 51 |
}; |
| 52 |
|
| 53 |
export default AllDocsGridItem; |
| 54 |
|
