@asseinfo/react-kanban

又一个Kanban/Trello board lib for React. 康班/特雷罗董事会发布反弹.

德莫语

使用量

为什么?

• 可靠性:在CI上检测100%;覆盖率为100%;SemVer100%.
• 和虎克一起玩游戏 样式组件。 。 。 .
• QQ可访问:键盘和移动友好.
• ++:用于项目.

🛠 安装和使用

由于这个项目使用Hooks,你必须安装它们:

• react>=16.8.5

之后, 在您的工程上安装 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

* 受管制和不受管制

当你需要更好的控制板时,你应该坚持控制板. 控制板意味着你需要 处理板自己, 你需要保持状态 在你的手中(组件) 并将状态传递给 <Board />我们只是反映这个状态. 这也意味着更复杂一点,尽管我们提供了一些帮助来应对棋盘形状. 你可以在React Docs中读取更多内容, 这里 财务报告和审定财务报表 这里。 。 。 .

如果你跟受控者走,你需要通过你的板子 children 道具,否则你需要通过它 initialBoard 道具 (英语).

协助控制板工作

我们揭露一些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>

可以在道具文档结尾处看到帮助者名单.

棋盘形状

{
  columns: [{
    id: ${unique-required-columnId},
    title: {$required-columnTitle**},
    cards: [{
      id: ${unique-required-cardId},
      title: ${required-cardTitle*}
      description: ${required-description*}
    }]
  }]
}

* 决 定 title 编辑 description 如果您使用卡片的默认模板,则需要使用。 您可以通过 renderCard 道具 (英语).

** 联合国 title 如果您正在使用列的默认模板,则需要该模板。 您可以通过 renderColumnHeader 道具 (英语).

++ Propals 软件

children

董事会 如果您想要控制董事会状态, 请使用此道具 .

initialBoard

董事会 如果您不想控制董事会状态, 请使用此道具 .

onCardDragEnd

当用户移动卡片时,这种回调会被称为通过这些参数:

来源和目的地

onColumnDragEnd

当用户移动一列时,这种回调将被称作通过这些参数:

来源和目的地

renderCard

如果您想要制作自己的名片, 请使用此功能 。 您需要通过一个函数并返回您的卡片组件 . 该函数将接收这些参数:

cardBag

* 当董事会被控制时,它不可用.

说明:

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

如果您想要制作自己的列头, 请使用此选项 。 您需要通过一个函数并返回您的列标题组件 . 该函数将接收这些参数:

columnBag

addCard: 作为第二个参数, 您可以通过一个选项来定义要添加卡片的列中的位置 :

• { on: 'top' }: 在栏上方添加.
• { on: 'bottom' }: 在列下方添加(默认).

* 当董事会被控制时,它不可用.

说明:

const board = {
  columns: [{
    id: ${unique-required-columnId},
    title: ${columnTitle},
    wip: ${wip},
    cards: [{
      id: ${unique-required-cardId},
      title: ${required-cardTitle},
      description: ${required-cardDescription}
    }]
  }]
}

<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

当用户通过默认的列添加器模板确认一列新时,此回调将使用由用户键入的标题的列草稿来调用.

如果你的董事会不控制你 必须 返回此调用中的新列及其新编号.

如果您的棋盘被控制, 请使用它来获取新的列标题 .

说明:

function onColumnNew (newColumn) {
  const newColumn = { id: ${required-new-unique-columnId}, ...newColumn }
  return newColumn
}

<Board initialBoard={board} allowAddColumn onColumnNew={onColumnNew} />

onColumnNew

当用户通过默认的列添加器模板添加出一新列时,这种回调将被称为通过更新的板和新列.

这种回调不会在不受控制的板上被调用.

renderColumnAdder

如果您想要制作自己的列添加器, 请使用此选项 。 您需要通过一个函数并返回您的列添加组件. 该函数将接收这些参数:

columnBag

* 当董事会被控制时,它不可用.

说明:

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

当用户删除一列时,此回调将被称作通过这些参数:

allowRenameColumn

使用默认页眉模板时,不通过模板 renderColumnHeader,它将允许用户重命名一列.

onColumnRename

当用户重命名一列时,此回调将被称为通过这些参数:

allowRemoveCard

当使用默认的卡片模板时, 当您没有通过模板时 renderCard,它将允许用户去除一张卡.

onCardRemove

当用户去掉一卡时,这种回调将被称为通过这些参数:

allowAddCard

允许用户直接由棋盘在列中添加一卡. 默认情况下,它会在列下方添加卡片,但您可以通过"上"道具通过一个对象来指定您是想要在棋盘上方还是下方添加.

例如: / 默认位于下方 < Board 允许 AddCard}\: 在列下方的“ 下方” / > / 上 <BOARD 允许AddCard> 上 : 'top' / > / 在列上方

用于控制板的助手

moveColumn

moveCard

在受控板上使用这个,"从"和"从"是同一种传递给"CardDragEnd"的回调. 您可以在您的 onCardDragEnd 调用中使用此功能, 以更新您的棋盘, 因为它将返回一个新的棋盘, 您可以将它保存到状态 .

addColumn

removeColumn

changeColumn

addCard

changeCard

onCardNew

当用户通过默认的卡添加器模板添加出一副新卡后,这种回调将被称为通过更新的板和新卡.

onNewCardConfirm

当用户通过默认的卡添加器模板确认新卡后,这种回调将使用带有标题和用户打入的描述的卡片草稿来调用.

你个 必须 返回新卡,并用它的新编号在此回调中.

说明:

function onCardNew (newCard) {
  const newCard = { id: ${required-new-unique-cardId}, ...newCard }
  return newCard
}

<Board initialBoard={board} allowAddCard onNewCardConfirm={onCardNew} onCardNew={console.log} />

removeCard

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}史蒂林 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

您既可以对所有棋盘进行样式调整,也可以导入我们的样式,并按您想要的样式覆盖:

测试

单位

yarn test

代码覆盖被保存在 coverage 文件夹。 例如,打开 HTML 报表

open coverage/lcov-report/index.html

端对端

使用 齐压 试跑者。 启动 Dev 服务器并使用 Cypress 打开

yarn dev

所有测试都在 细胞压/整合 文件夹。 这些测试还收集了代码覆盖,并保存了多种格式的 coverage 文件夹。 打开 HTML 报表

open coverage/lcov-report/index.html

读取 Cypress 代码覆盖指南

注:避免插入 babel-plugin-istanbul 在测试时,E2E测试与 NODE_ENV=cypress 环境变量。 这个 babel-plugin-istanbul 插件包含在 .babelrc 图像 只有文件在 cypress 节点环境, 留下默认的 Jest 配置 NODE_ENV=test 同样的.

* 路线图

您可以查看下一个功能 这里。 。 。 . 欢迎你帮我们做公关.

捐款

欢迎公关:

• 叉开这个项目.
• 设置它:

  yarn
  yarn start
  

• 做你的零钱.
• 请将自己加入贡献者表格(我们使用 所有贡献者 为此,我们首先需要安装:

  yarn contributors:add
  

• 打开公关.

* 捐款准则

• 你需要测试你的零钱.
• 试着清净你的零钱。 CodeClimate会盯着你的.
• 它必须传递给CI.