kanbanColumn.tsx

TLDR

This file (kanbanColumn.tsx) is a React component for displaying a Kanban column. It allows the user to drop cards onto the column, and triggers an onDrop callback when a card is dropped.

Classes (1)

KanbanColumn

This class represents a Kanban column React component. It renders a column with a draggable area where cards can be dropped. The onDrop callback is triggered when a card is dropped onto the column.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {useDrop} from 'react-dnd'

import {Card} from '../../blocks/card'
import './kanbanColumn.scss'

type Props = {
    onDrop: (card: Card) => void
    children: React.ReactNode
}

const KanbanColumn = (props: Props) => {
    const [{isOver}, drop] = useDrop(() => ({
        accept: 'card',
        collect: (monitor) => ({
            isOver: monitor.isOver(),
        }),
        drop: (item: Card, monitor) => {
            if (monitor.isOver({shallow: true})) {
                props.onDrop(item)
            }
        },
    }), [props.onDrop])

    let className = 'octo-board-column'
    if (isOver) {
        className += ' dragover'
    }
    return (
        <div
            ref={drop}
            className={className}
        >
            {props.children}
        </div>
    )
}

export default React.memo(KanbanColumn)