另一个用于 React 的看板/Trello 板库。
▶️ Demo
用法
❓ Why?
- Reliable: 100% tested on CI; 100% coverage; 100% SemVer.
- Having fun: Play with Hooks and ~~Styled Components~~.
- ♿️ Accessible: Keyboard and mobile friendly.
- Pluggable: For use in projects.
Install and usage
因为这个项目使用了 Hooks,所以你必须安装它们:
之后,在你的项目上安装 lib:
yarn add @asseinfo/react-kanban
导入 lib 并在你的项目中使用它:
import Board from '@asseinfo/react-kanban'
import '@asseinfo/react-kanban/dist/styles.css'
const board = {
columns: [
{
id: 1,
title: 'Backlog',
cards: [
{
id: 1,
title: 'Add card',
description: 'Add capability to add a card in a column'
},
]
},
{
id: 2,
title: 'Doing',
cards: [
{
id: 2,
title: 'Drag-n-drop support',
description: 'Move a card between the columns'
},
]
}
]
}
<Board initialBoard={board} />
API
Controlled and Uncontrolled
当你需要更好地控制电路板时,你应该坚持使用受控板。
一个controlled board意味着你需要自己处理board state,你需要把state保持在你手中(component),然后把这个state传递给
,我们只是反映这个状态。
这也意味着更多的复杂性,尽管我们提供了一些助手来处理棋盘形状。
您可以在 React 文档、此处 和 此处。
如果你使用受控的,你需要通过 children
属性传递你的板,否则你需要通过 initialBoard
属性传递它。
Helpers to work with the controlled board
我们公开了一些您可以导入的 API,以帮助您处理受控状态。 这些是我们在内部用于管理不受控制的板的相同 API。 我们真的建议您使用它们,它们经过 100% 的单元测试,并且不会对您的电路板状态产生任何副作用。
要使用它们,您只需将它们与您的董事会一起导入:
import Board, { addCard, addColumn, ... } from '@asseinfo/react-kanban'
您需要通过董事会的所有助手,他们将返回一个新董事会以传递给您的状态:
import Board, { addColumn } from '@asseinfo/react-kanban'
...
const [board, setBoard] = useState(initialBoard)
...
const newBoard = addColumn(board, newColumn)
setBoard(newBoard)
...
<Board>{board}</Board>
您可以在道具文档的末尾看到助手列表。
Shape of a board
{
columns: [{
id: ${unique-required-columnId},
title: {$required-columnTitle**},
cards: [{
id: ${unique-required-cardId},
title: ${required-cardTitle*}
description: ${required-description*}
}]
}]
}
* title
和 <如果您使用的是卡片的默认模板,则代码>说明 是必需的。 您可以通过 renderCard
属性渲染您自己的卡片模板。
** 如果您使用列的默认模板,则 title
是必需的。 您可以通过 renderColumnHeader
属性呈现您自己的列模板。
⚙️ Props
Prop |
Description |
Controlled |
Uncontrolled |
children (required if controlled) |
The board to render |
✅ |
???? |
initialBoard (required if uncontrolled) |
The board to render |
???? |
✅ |
onCardDragEnd |
Callback that will be called when the card move ends |
✅ |
✅ |
onColumnDragEnd |
Callback that will be called when the column move ends |
✅ |
✅ |
renderCard |
A card to be rendered instead of the default card |
✅ |
✅ |
renderColumnHeader |
A column header to be rendered instead of the default column header |
✅ |
✅ |
allowAddColumn |
Allow a new column be added by the user |
✅ |
✅ |
onNewColumnConfirm (required if use the default column adder template) |
Callback that will be called when a new column is confirmed by the user through the default column adder template |
✅ |
✅ |
onColumnNew (required if allowAddColumn or when addColumn is called) |
Callback that will be called when a new column is added through the default column adder template |
???? |
✅ |
renderColumnAdder |
A column adder to be rendered instead of the default column adder template |
✅ |
✅ |
disableColumnDrag |
Disable the column move |
✅ |
✅ |
disableCardDrag |
Disable the card move for entire board |
✅ |
✅ |
allowRemoveColumn |
Allow to remove a column in default column header |
✅ |
✅ |
onColumnRemove (required if allowRemoveColumn or when removeColumn is called) |
Callback that will be called when a column is removed |
✅ |
✅ |
allowRenameColumn |
Allow to rename a column in default column header |
✅ |
✅ |
onColumnRename (required if allowRenameColumn or when renameColumn is called) |
Callback that will be called when a column is renamed |
✅ |
✅ |
allowRemoveCard |
Allow to remove a card in default card template |
✅ |
✅ |
onCardRemove (required if allowRemoveCard ) |
Callback that will be called when a card is removed |
✅ |
✅ |
allowAddCard |
Allow to add a card. Expect an object with the position to add the card in the column. |
???? |
✅ |
onCardNew (required if allowAddCard or when addCard is called) |
Callback that will be called when a new card is added through the default card adder template |
???? |
✅ |
onNewCardConfirm (required if allowAddCard ) |
Callback that will be called when a new card is confirmed by the user through the default card adder template |
???? |
✅ |
children
董事会。 如果您想控制棋盘的状态,请使用此道具。
initialBoard
董事会。 如果您不想控制棋盘的状态,请使用此道具。
onCardDragEnd
当用户移动卡片时,将调用此回调并传递以下参数:
Arg |
Description |
board |
The modified board |
card |
The moved card |
source |
An object with the card source { fromColumnId, fromPosition } |
destination |
An object with the card destination { toColumnId, toPosition } |
Source and destination
Prop |
Description |
fromColumnId |
Column source id. |
toColumnId |
Column destination id. |
fromPosition |
Card's index in column source's array. |
toPosition |
Card's index in column destination's array. |
onColumnDragEnd
当用户移动列时,将调用此回调并传递以下参数:
Arg |
Description |
board |
The modified board |
column |
The moved column |
source |
An object with the column source { fromPosition } |
destination |
An object with the column destination { toPosition } |
Source and destination
Prop |
Description |
fromPosition |
Column index before the moving. |
toPosition |
Column index after the moving. |
renderCard
如果您想呈现自己的卡片,请使用此回调。 您必须传递一个函数并返回您的卡片组件。
该函数将接收这些参数:
Arg |
Description |
card |
The card props |
cardBag |
A bag with some helper functions and state to work with the card |
cardBag
function |
Description |
removeCard* |
Call this function to remove the card from the column |
dragging |
Whether the card is being dragged or not |
* 控制板时不可用。
例如:
const board = {
columns: [{
id: ${unique-required-columnId},
title: ${columnTitle},
cards: [{
id: ${unique-required-cardId},
dueDate: ${cardDueDate},
content: ${cardContent}
}]
}]
}
<Board
renderCard={({ content }, { removeCard, dragging }) => (
<YourCard dragging={dragging}>
{content}
<button type="button" onClick={removeCard}>Remove Card</button>
</YourCard>
)}
>
{board}
</Board>
renderColumnHeader
如果您想呈现自己的列标题,请使用此选项。 您必须传递一个函数并返回您的列标题组件。
该函数将接收以下参数:
Arg |
Description |
column |
The column props |
columnBag |
A bag with some helper functions to work with the column |
columnBag
function |
Description |
removeColumn* |
Call this function to remove the column from the board |
renameColumn* |
Call this function with a title to rename the column |
addCard* |
Call this function with a new card to add it in the column |
addCard
:作为第二个参数,您可以传递一个选项来定义要在列中添加卡片的位置:
{ on: 'top' }
: to add on the top of the column.
{ on: 'bottom' }
: to add on the bottom of the column (default).
*当板被控制。
示例:
const board = {
columns: [{
id: ${unique-required-columnId},
title: ${columnTitle},
wip: ${wip},
cards: [{
id: ${unique-required-cardId},
title: ${required-cardTitle},
description: ${required-cardDescription},
disableCardDrag: ${optional-disableCardDrag}
}]
}]
}
<Board
renderColumnHeader={({ title }, { removeColumn, renameColumn, addCard }) => (
<YourColumnHeader>
{title}
<button type='button' onClick={removeColumn}>Remove Column</button>
<button type='button' onClick={() => renameColumn('New title')}>Rename Column</button>
<button type='button' onClick={() => addCard({ id: 99, title: 'New Card' })}>Add Card</button>
</YourColumnHeader
)}
>
{board}
</Board>
allowAddColumn
允许用户直接通过看板添加新列。
onNewColumnConfirm
当用户通过默认的列添加器模板确认新列时,将使用用户键入的标题的列草稿调用此回调。
如果您的看板不受控制,您必须在此回调中返回带有新 ID 的新列。
如果您的董事会受到控制,请使用它来获取新的列标题。
例如:
function onColumnNew (newColumn) {
const newColumn = { id: ${required-new-unique-columnId}, ...newColumn }
return newColumn
}
<Board initialBoard={board} allowAddColumn onColumnNew={onColumnNew} />
onColumnNew
当用户通过默认的列添加器模板添加新列时,将调用此回调传递更新的板和新列。
非受控板不会调用此回调。
renderColumnAdder
如果您想呈现自己的列加法器,请使用它。 您必须传递一个函数并返回您的列加法器组件。
该函数将接收这些参数:
Arg |
Description |
columnBag |
A bag with some helper functions |
columnBag
function |
Description |
addColumn* |
Call this function with a new column to add the new column |
* 控制板时不可用。
例如:
const ColumnAdder = ({ addColumn }) {
return (
<div onClick={()=> addColumn({id: ${required-new-unique-columnId}, title: 'Title', cards:[]})}>
Add column
</div>
)
}
<Board
allowAddColumn
renderColumnAdder={({ addColumn }) => <ColumnAdder addColumn={addColumn} />}
{board}
</Board>
disableColumnDrag
禁止用户移动列。
disableCardDrag
禁止用户移动卡片(板范围)。
allowRemoveColumn
使用默认标题模板时,当您不通过 renderColumnHeader
传递模板时,它将允许用户删除列。
onColumnRemove
当用户删除一个列时,将调用此回调传递这些参数:
Arg |
Description |
board |
The board without the removed column |
column |
The removed column |
allowRenameColumn
当使用默认标题模板时,当您不通过 renderColumnHeader
传递模板时,它将允许用户重命名一个柱子。
onColumnRename
当用户重命名列时,将调用此回调并传递这些参数:
Arg |
Description |
board |
The board with the renamed column |
column |
The renamed column |
allowRemoveCard
当使用默认卡片模板时,当您不通过 renderCard
传递模板时,它将允许用户删除一个卡片。
onCardRemove
当用户移除卡片时,将调用此回调并传递这些参数:
Arg |
Description |
board |
The board without the removed column |
column |
The column without the removed card |
card |
The removed card |
allowAddCard
允许用户直接通过板在列中添加卡片。 默认情况下,它会将卡片添加到列的底部,但您可以通过传递带有 'on' 属性的对象来指定是要添加在板的顶部还是底部。
例如:
// 默认在底部
// 在列的底部
// 在列的顶部
Helpers to be used with an controlled board
moveColumn
Arg |
Description |
board |
Your board |
{ fromPosition } |
Index of column to be moved |
{ toPosition } |
Index destination of column to be moved |
moveCard
在受控的情况下使用它板,“from”和“to”与传递给 onCardDragEnd 回调的相同。 您可以在 onCardDragEnd 回调中使用它来实际更新您的板,因为它将返回一个新板,您可以将其保存到状态中。
Arg |
Description |
board |
Your board |
{ fromPosition, fromColumnId } |
An object with the card source { fromColumnId, fromPosition } which are the indexes of the cards current position |
{ toPosition, toColumnId } |
An object with the card destination { fromColumnId, fromPosition } which are the indexes of the cards new position |
addColumn
Arg |
Description |
board |
Your board |
column |
Column to be added |
removeColumn
Arg |
Description |
board |
Your board |
column |
Column to be removed |
changeColumn
Arg |
Description |
board |
Your board |
column |
Column to be renamed |
object |
Pass a object to be merged with the column. You can add new props and/or change the existing ones |
addCard
Arg |
Description |
board |
Your board |
inColumn |
Column to add the card be added |
card |
Card to be added |
{ on: 'bottom|top' } |
Whether the card will be added on top or bottom of the column (bottom is default) |
changeCard
Arg |
Description |
board |
Your board |
cardId |
Card's id to be changed |
object |
Pass a object to be merged with the card. You can add new props and/or change the existing ones |
onCardNew
当用户通过默认的卡片添加器模板添加新卡片时,将调用此回调传递更新的板和新卡片。
onNewCardConfirm
当用户通过默认的卡片添加器模板确认一张新卡片时,将调用此回调,并调用带有用户键入的标题和描述的卡片草稿。
您必须在此回调中返回带有新 ID 的新卡。
例如:
function onCardNew (newCard) {
const newCard = { id: ${required-new-unique-cardId}, ...newCard }
return newCard
}
<Board initialBoard={board} allowAddCard onNewCardConfirm={onCardNew} onCardNew={console.log} />
removeCard
Arg |
Description |
board |
Your board |
fromColumn |
Column where the card is |
card |
Card to be removed |
????Styling
您可以设置所有板的样式或导入我们的样式并用您想要的样式覆盖它:
Class |
react-kanban-board |
react-kanban-card |
react-kanban-card-skeleton |
react-kanban-card--dragging |
react-kanban-card__description |
react-kanban-card__title |
react-kanban-column |
react-kanban-card-adder-form |
react-kanban-card-adder-button |
react-kanban-card-adder-form__title |
react-kanban-card-adder-form__description |
react-kanban-card-adder-form__button |
react-kanban-column-header |
react-kanban-column-header__button |
react-kanban-column-adder-button |
Tests
Unit
yarn test
代码覆盖率保存在 coverage
文件夹中。 例如
open coverage/lcov-report/index.html
End-to-end
使用 Cypress 测试运行器打开 HTML 报告。 启动开发服务器并使用打开 Cypress
yarn dev
所有测试都在 cypress/integration 文件夹中。 这些测试还收集代码覆盖率并以多种格式保存在 coverage
文件夹中。 打开 HTML 报告
open coverage/lcov-report/index.html
阅读 Cypress 代码覆盖率指南
注意:避免插入 babel-plugin-istanbul
两次在 Jest 测试期间,E2E 测试使用 NODE_ENV=cypress
环境变量运行。 babel-plugin-istanbul
插件只包含在 .babelrc 文件中,仅在 cypress
Node 环境下,保留默认NODE_ENV=test
期间的 Jest 配置相同。
????♀️ Roadmap
您可以在此处查看下一个功能。
欢迎帮助我们完成一些 PR。
Contributing
欢迎 PR:
- Fork this project.
- Setup it:
yarn
yarn start
- Make your change.
- Please add yourself to the contributors table (we use all contributors for that, we you will need that installed first):
yarn contributors:add
✍️ Guidelines for contributing
- You need to test your change.
- Try to be clean on your change. CodeClimate will keep an eye on you.
- It has to pass on CI.
Yet another Kanban/Trello board lib for React.
▶️ Demo
Usage
❓ Why?
- ???? Reliable: 100% tested on CI; 100% coverage; 100% SemVer.
- ???? Having fun: Play with Hooks ???? and ~~Styled Components~~.
- ♿️ Accessible: Keyboard and mobile friendly.
- ???? Pluggable: For use in projects.
???? Install and usage
Since this project use Hooks, you have to install them:
After, Install the lib on your project:
yarn add @asseinfo/react-kanban
Import the lib and use it on your project:
import Board from '@asseinfo/react-kanban'
import '@asseinfo/react-kanban/dist/styles.css'
const board = {
columns: [
{
id: 1,
title: 'Backlog',
cards: [
{
id: 1,
title: 'Add card',
description: 'Add capability to add a card in a column'
},
]
},
{
id: 2,
title: 'Doing',
cards: [
{
id: 2,
title: 'Drag-n-drop support',
description: 'Move a card between the columns'
},
]
}
]
}
<Board initialBoard={board} />
???? API
???? Controlled and Uncontrolled
When you need a better control over the board, you should stick with the controlled board.
A controlled board means you need to deal with the board state yourself, you need to keep the state in your hands (component) and pass this state to the <Board />
, we just reflect this state.
This also means a little more of complexity, although we make available some helpers to deal with the board shape.
You can read more in the React docs, here and here.
If you go with the controlled one, you need to pass your board through the children
prop, otherwise you need to pass it through the initialBoard
prop.
Helpers to work with the controlled board
We expose some APIs that you can import to help you to work with the controlled state. Those are the same APIs we use internally to manage the uncontrolled board. We really recommend you to use them, they are 100% unit tested and they don't do any side effect to your board state.
To use them, you just need to import them together with your board:
import Board, { addCard, addColumn, ... } from '@asseinfo/react-kanban'
All the helpers you need to pass your board and they will return a new board to pass to your state:
import Board, { addColumn } from '@asseinfo/react-kanban'
...
const [board, setBoard] = useState(initialBoard)
...
const newBoard = addColumn(board, newColumn)
setBoard(newBoard)
...
<Board>{board}</Board>
You can see the list of helpers in the end of the props documentation.
???? Shape of a board
{
columns: [{
id: ${unique-required-columnId},
title: {$required-columnTitle**},
cards: [{
id: ${unique-required-cardId},
title: ${required-cardTitle*}
description: ${required-description*}
}]
}]
}
* The title
and the description
are required if you are using the card's default template. You can render your own card template through the renderCard
prop.
** The title
is required if you are using the column's default template. You can render your own column template through the renderColumnHeader
prop.
⚙️ Props
Prop |
Description |
Controlled |
Uncontrolled |
children (required if controlled) |
The board to render |
✅ |
???? |
initialBoard (required if uncontrolled) |
The board to render |
???? |
✅ |
onCardDragEnd |
Callback that will be called when the card move ends |
✅ |
✅ |
onColumnDragEnd |
Callback that will be called when the column move ends |
✅ |
✅ |
renderCard |
A card to be rendered instead of the default card |
✅ |
✅ |
renderColumnHeader |
A column header to be rendered instead of the default column header |
✅ |
✅ |
allowAddColumn |
Allow a new column be added by the user |
✅ |
✅ |
onNewColumnConfirm (required if use the default column adder template) |
Callback that will be called when a new column is confirmed by the user through the default column adder template |
✅ |
✅ |
onColumnNew (required if allowAddColumn or when addColumn is called) |
Callback that will be called when a new column is added through the default column adder template |
???? |
✅ |
renderColumnAdder |
A column adder to be rendered instead of the default column adder template |
✅ |
✅ |
disableColumnDrag |
Disable the column move |
✅ |
✅ |
disableCardDrag |
Disable the card move for entire board |
✅ |
✅ |
allowRemoveColumn |
Allow to remove a column in default column header |
✅ |
✅ |
onColumnRemove (required if allowRemoveColumn or when removeColumn is called) |
Callback that will be called when a column is removed |
✅ |
✅ |
allowRenameColumn |
Allow to rename a column in default column header |
✅ |
✅ |
onColumnRename (required if allowRenameColumn or when renameColumn is called) |
Callback that will be called when a column is renamed |
✅ |
✅ |
allowRemoveCard |
Allow to remove a card in default card template |
✅ |
✅ |
onCardRemove (required if allowRemoveCard ) |
Callback that will be called when a card is removed |
✅ |
✅ |
allowAddCard |
Allow to add a card. Expect an object with the position to add the card in the column. |
???? |
✅ |
onCardNew (required if allowAddCard or when addCard is called) |
Callback that will be called when a new card is added through the default card adder template |
???? |
✅ |
onNewCardConfirm (required if allowAddCard ) |
Callback that will be called when a new card is confirmed by the user through the default card adder template |
???? |
✅ |
children
The board. Use this prop if you want to control the board's state.
initialBoard
The board. Use this prop if you don't want to control the board's state.
onCardDragEnd
When the user moves a card, this callback will be called passing these parameters:
Arg |
Description |
board |
The modified board |
card |
The moved card |
source |
An object with the card source { fromColumnId, fromPosition } |
destination |
An object with the card destination { toColumnId, toPosition } |
Source and destination
Prop |
Description |
fromColumnId |
Column source id. |
toColumnId |
Column destination id. |
fromPosition |
Card's index in column source's array. |
toPosition |
Card's index in column destination's array. |
onColumnDragEnd
When the user moves a column, this callback will be called passing these parameters:
Arg |
Description |
board |
The modified board |
column |
The moved column |
source |
An object with the column source { fromPosition } |
destination |
An object with the column destination { toPosition } |
Source and destination
Prop |
Description |
fromPosition |
Column index before the moving. |
toPosition |
Column index after the moving. |
renderCard
Use this if you want to render your own card. You have to pass a function and return your card component.
The function will receive these parameters:
Arg |
Description |
card |
The card props |
cardBag |
A bag with some helper functions and state to work with the card |
cardBag
function |
Description |
removeCard* |
Call this function to remove the card from the column |
dragging |
Whether the card is being dragged or not |
* It's unavailable when the board is controlled.
Ex.:
const board = {
columns: [{
id: ${unique-required-columnId},
title: ${columnTitle},
cards: [{
id: ${unique-required-cardId},
dueDate: ${cardDueDate},
content: ${cardContent}
}]
}]
}
<Board
renderCard={({ content }, { removeCard, dragging }) => (
<YourCard dragging={dragging}>
{content}
<button type="button" onClick={removeCard}>Remove Card</button>
</YourCard>
)}
>
{board}
</Board>
renderColumnHeader
Use this if you want to render your own column header. You have to pass a function and return your column header component.
The function will receive these parameters:
Arg |
Description |
column |
The column props |
columnBag |
A bag with some helper functions to work with the column |
columnBag
function |
Description |
removeColumn* |
Call this function to remove the column from the board |
renameColumn* |
Call this function with a title to rename the column |
addCard* |
Call this function with a new card to add it in the column |
addCard
: As a second argument you can pass an option to define where in the column you want to add the card:
{ on: 'top' }
: to add on the top of the column.
{ on: 'bottom' }
: to add on the bottom of the column (default).
* It's unavailable when the board is controlled.
Ex.:
const board = {
columns: [{
id: ${unique-required-columnId},
title: ${columnTitle},
wip: ${wip},
cards: [{
id: ${unique-required-cardId},
title: ${required-cardTitle},
description: ${required-cardDescription},
disableCardDrag: ${optional-disableCardDrag}
}]
}]
}
<Board
renderColumnHeader={({ title }, { removeColumn, renameColumn, addCard }) => (
<YourColumnHeader>
{title}
<button type='button' onClick={removeColumn}>Remove Column</button>
<button type='button' onClick={() => renameColumn('New title')}>Rename Column</button>
<button type='button' onClick={() => addCard({ id: 99, title: 'New Card' })}>Add Card</button>
</YourColumnHeader
)}
>
{board}
</Board>
allowAddColumn
Allow the user to add a new column directly by the board.
onNewColumnConfirm
When the user confirms a new column through the default column adder template, this callback will be called with a draft of a column with the title typed by the user.
If your board is uncontrolled you must return the new column with its new id in this callback.
If your board is controlled use this to get the new column title.
Ex.:
function onColumnNew (newColumn) {
const newColumn = { id: ${required-new-unique-columnId}, ...newColumn }
return newColumn
}
<Board initialBoard={board} allowAddColumn onColumnNew={onColumnNew} />
onColumnNew
When the user adds a new column through the default column adder template, this callback will be called passing the updated board and the new column.
This callback will not be called in an uncontrolled board.
renderColumnAdder
Use this if you want to render your own column adder. You have to pass a function and return your column adder component.
The function will receive these parameters:
Arg |
Description |
columnBag |
A bag with some helper functions |
columnBag
function |
Description |
addColumn* |
Call this function with a new column to add the new column |
* It's unavailable when the board is controlled.
Ex.:
const ColumnAdder = ({ addColumn }) {
return (
<div onClick={()=> addColumn({id: ${required-new-unique-columnId}, title: 'Title', cards:[]})}>
Add column
</div>
)
}
<Board
allowAddColumn
renderColumnAdder={({ addColumn }) => <ColumnAdder addColumn={addColumn} />}
{board}
</Board>
disableColumnDrag
Disallow the user from move a column.
disableCardDrag
Disallow the user from move a card (board scoped).
allowRemoveColumn
When using the default header template, when you don't pass a template through the renderColumnHeader
, it will allow the user to remove a column.
onColumnRemove
When the user removes a column, this callback will be called passing these parameters:
Arg |
Description |
board |
The board without the removed column |
column |
The removed column |
allowRenameColumn
When using the default header template, when you don't pass a template through the renderColumnHeader
, it will allow the user to rename a column.
onColumnRename
When the user renames a column, this callback will be called passing these parameters:
Arg |
Description |
board |
The board with the renamed column |
column |
The renamed column |
allowRemoveCard
When using the default card template, when you don't pass a template through the renderCard
, it will allow the user to remove a card.
onCardRemove
When the user removes a card, this callback will be called passing these parameters:
Arg |
Description |
board |
The board without the removed column |
column |
The column without the removed card |
card |
The removed card |
allowAddCard
Allow the user to add a card in the column directly by the board. By default, it adds the card on the bottom of the column, but you can specify whether you want to add at the top or at the bottom of the board by passing an object with 'on' prop.
E.g.:
// at the bottom by default
// in the bottom of the column
// at the top of the column
???? Helpers to be used with an controlled board
moveColumn
Arg |
Description |
board |
Your board |
{ fromPosition } |
Index of column to be moved |
{ toPosition } |
Index destination of column to be moved |
moveCard
Use this on a controlled board, the "from" and "to" are the same ones passed to onCardDragEnd callback. You can used this within your onCardDragEnd call back to actually update your board as it will return a new board which you can save down into state.
Arg |
Description |
board |
Your board |
{ fromPosition, fromColumnId } |
An object with the card source { fromColumnId, fromPosition } which are the indexes of the cards current position |
{ toPosition, toColumnId } |
An object with the card destination { fromColumnId, fromPosition } which are the indexes of the cards new position |
addColumn
Arg |
Description |
board |
Your board |
column |
Column to be added |
removeColumn
Arg |
Description |
board |
Your board |
column |
Column to be removed |
changeColumn
Arg |
Description |
board |
Your board |
column |
Column to be renamed |
object |
Pass a object to be merged with the column. You can add new props and/or change the existing ones |
addCard
Arg |
Description |
board |
Your board |
inColumn |
Column to add the card be added |
card |
Card to be added |
{ on: 'bottom|top' } |
Whether the card will be added on top or bottom of the column (bottom is default) |
changeCard
Arg |
Description |
board |
Your board |
cardId |
Card's id to be changed |
object |
Pass a object to be merged with the card. You can add new props and/or change the existing ones |
onCardNew
When the user adds a new card through the default card adder template, this callback will be called passing the updated board and the new card.
onNewCardConfirm
When the user confirms a new card through the default card adder template, this callback will be called with a draft of a card with the title and the description typed by the user.
You must return the new card with its new id in this callback.
Ex.:
function onCardNew (newCard) {
const newCard = { id: ${required-new-unique-cardId}, ...newCard }
return newCard
}
<Board initialBoard={board} allowAddCard onNewCardConfirm={onCardNew} onCardNew={console.log} />
removeCard
Arg |
Description |
board |
Your board |
fromColumn |
Column where the card is |
card |
Card to be removed |
???????? Styling
You can either style all the board or import our style and override it with the styles you want:
Class |
react-kanban-board |
react-kanban-card |
react-kanban-card-skeleton |
react-kanban-card--dragging |
react-kanban-card__description |
react-kanban-card__title |
react-kanban-column |
react-kanban-card-adder-form |
react-kanban-card-adder-button |
react-kanban-card-adder-form__title |
react-kanban-card-adder-form__description |
react-kanban-card-adder-form__button |
react-kanban-column-header |
react-kanban-column-header__button |
react-kanban-column-adder-button |
???? Tests
Unit
yarn test
Code coverage is saved in coverage
folder. Open HTML report for example with
open coverage/lcov-report/index.html
End-to-end
Using Cypress test runner. Start dev server and open Cypress using
yarn dev
All tests are in the cypress/integration folder. These tests also collect code coverage and save in several formats in the coverage
folder. Open HTML report
open coverage/lcov-report/index.html
Read Cypress code coverage guide
Note: to avoid inserting babel-plugin-istanbul
twice during Jest tests, E2E tests run with NODE_ENV=cypress
environment variable. The babel-plugin-istanbul
plugin is included in .babelrc file only in the cypress
Node environment, leaving the default Jest configuration during NODE_ENV=test
the same.
????♀️ Roadmap
You can view the next features here.
Feel welcome to help us with some PRs.
???? Contributing
PRs are welcome:
- Fork this project.
- Setup it:
yarn
yarn start
- Make your change.
- Please add yourself to the contributors table (we use all contributors for that, we you will need that installed first):
yarn contributors:add
✍️ Guidelines for contributing
- You need to test your change.
- Try to be clean on your change. CodeClimate will keep an eye on you.
- It has to pass on CI.