import React, { forwardRef } from 'react'; import { Draggable } from 'react-beautiful-dnd'; import Card from './Card'; import CardAdder from './CardAdder'; import { pickPropOut } from './utils'; import withDroppable from './withDroppable'; const ColumnEmptyPlaceholder = forwardRef((props, ref: any) => (
)); const DroppableColumn = withDroppable(ColumnEmptyPlaceholder); function Column({ children, index: columnIndex, renderCard, renderCardAdder = ({ column, onConfirm }) => , renderColumnHeader, disableColumnDrag, disableCardDrag, onCardNew, allowAddCard, cardAdderPosition = 'top', }) { return ( {(columnProvided) => { const draggablePropsWithoutStyle = pickPropOut(columnProvided.draggableProps, 'style'); return (
{renderColumnHeader(children)}
{cardAdderPosition === 'top' && allowAddCard && renderCardAdder({ column: children, onConfirm: onCardNew })} {children.cards.length ? ( children.cards.map((card, index) => ( renderCard(children, card, dragging)} disableCardDrag={disableCardDrag} > {card} )) ) : (
)} {cardAdderPosition === 'bottom' && allowAddCard && renderCardAdder({ column: children, onConfirm: onCardNew })}
); }} ); } export default Column;