payload-kanban-board
Version:
A kanban board plugin for Payload CMS
55 lines (54 loc) • 2.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Draggable, Droppable } from 'react-beautiful-dnd';
import BoardCard from '../BoardCard/BoardCard.js';
import './styles.scss';
function InnerList(props) {
const { dropProvided, contents, collection, ...rest } = props;
return /*#__PURE__*/ _jsx("div", {
className: "board-card-list",
ref: dropProvided.innerRef,
children: /*#__PURE__*/ _jsx("div", {
className: "board-card-list-inner",
children: contents?.map((item, index)=>/*#__PURE__*/ _jsx(Draggable, {
draggableId: item.id,
index: index,
children: (dragProvided)=>/*#__PURE__*/ _jsx(BoardCard, {
data: item,
collection: collection,
ref: dragProvided.innerRef,
...dragProvided.draggableProps,
...dragProvided.dragHandleProps,
...rest
}, item.id)
}, item.id))
})
});
}
const BoardCardList = (props)=>{
const { listId, contents, collection, dragEnabled } = props;
return /*#__PURE__*/ _jsx(Droppable, {
droppableId: listId,
type: 'CARD',
direction: "vertical",
isDropDisabled: !dragEnabled,
isCombineEnabled: false,
ignoreContainerClipping: true,
children: (dropProvided)=>/*#__PURE__*/ _jsxs("div", {
className: "board-wrapper",
...dropProvided.droppableProps,
children: [
/*#__PURE__*/ _jsx("div", {
className: "board-scrollContainer",
children: /*#__PURE__*/ _jsx(InnerList, {
contents: contents,
dropProvided: dropProvided,
collection: collection
})
}),
dropProvided.placeholder
]
})
});
};
export default BoardCardList;
//# sourceMappingURL=BoardCardList.js.map