卡尔德韦尔619 反相坎班

asseinfo 的 Kanban 反应

从 asseinfo 的 Kanban 反应

向所有贡献者大声疾呼.

莱安德罗·卢伦西 💬 🐛 💻 📖 💡 ⚠️

格列布·巴赫穆托夫 ⚠️

马修斯·萨比诺 💻 📖 ⚠️

佩德罗·哈维尔·尼古拉斯 💻

马修斯·波利 💻 ⚠️ 📖

卡林霍斯·德苏萨 💻 ⚠️

皮特·邓肯森 💻 📖 💡

为什么是叉子?

• 原有的图书馆似乎不再维持. 此时最后一次承诺是2021年9月.
• 原始库不包括TypeScript类型. 这是在联署材料中写的,但没有提供任何类型。 此分叉由TypeScript本地写成.

路线图

给 是队列中的内容。 如果你想看点什么, 提出一个问题

演示

链接

设置

yarn add @caldwell619/react-kanban

您还需要自行安装对等依赖 :

  "peerDependencies": {
    "react": ">=16",
    "react-dom": ">=16",
    "@hello-pangea/dnd": ">=16"
  },

这些都被列为对等依赖,因为如果你已经使用,我不想将特定版本标为依赖.

使用量

有两个主板, Controlled 财务报告和审定财务报表 Uncontrolled。 。 。 .

这是与原版的偏差,因为当时只有一个板子出口. 在原作中,对棋盘是否被控制有内部的确定. 事情不是这样的,因为你将会知道 你的董事会是否受到控制.

记住这一点,你可以 进口每块板像这样:

import { UncontrolledBoard, KanbanBoard } from '@caldwell619/react-kanban'
// import { ControlledBoard } from '@caldwell619/react-kanban'
import '@caldwell619/react-kanban/dist/styles.css' // import here for "builtin" styles

const board: KanbanBoard = {
  columns: [
    {
      id: 1,
      title: 'Backlog',
      cards: [
        {
          id: 1,
          title: 'Add card',
          description: 'Add capability to add a card in a column'
        },
      ]
    },
    { ... }
  ]
}

<UncontrolledBoard initialBoard={board} />

无控制

用一个无控制板,你通过一个 initialBoard 道克(prop),它将成为内部状态的基础. 当一个用户移动某个东西时,这些都由内部状态控制.

已控制

当你需要更好的控制板时,你应该坚持控制板. 控制板意味着你需要 处理板自己, 你需要保持状态 在你的手中(组件) 并将状态传递给 <Board />我们只是反映这个状态.

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

董事会

如果你真的想使用统一板,你还可以使用 Board。是否提供 initialBoard 或者说 children 将决定你用哪块板。 如果你提供两者, UncontrolledBoard 优先处理.

见一例, 这里。 。 。 .

协助控制板工作

帮助者在使用时会接触到帮助您的董事会状态的管理 ControlledBoard。他们与内部使用的帮助者相同,因此您可以利用他们协助控制状态.

import { ControlledBoard, moveCard, KanbanBoard, OnDragEndNotification, Card } from '@caldwell619/react-kanban'

const MyBoard = () => {
  const [board, setBoard] = useState<KanbanBoard>(initialBoard)

  const handleCardMove: OnDragEndNotification<Card> = (_card, source, destination) => {
    setBoard((currentBoard) => {
      return moveCard(currentBoard, source, destination)
    })
  }

  return <ControlledBoard onCardDragEnd={handleCardMove}>{board}</ControlledBoard>
}

帮助者的完整列表。 。 。 .

董事会类型

如果你使用JS,这个部分对你没有任何影响.

棋盘类型为 KanbanBoard。这是一个通用的,它接受 TCard extends Card您的数据无疑需要定制,所以所有帮助者和董事会将接受您的数据 TCard。 。 。 .

import { Card } from '@caldwell619/react-kanban'

interface CustomCard extends Card {
  storyPoints: number
}
export const renderCard: UncontrolledBoardProps<CustomCard>['renderCard'] = (card) => {
  // Can access with `card.storyPoints`
  return <CardWithStoryPoints {...card} />
}

这种行为将贯穿整个渲染过程并证实方法.

import { ControlledBoard, KanbanBoard } from '@caldwell619/react-kanban'

const CustomBoard = () => {
  return (
    <ControlledBoard<CustomCard>
      renderCard={(card) => {
        // `card.storyPoints`
        return <CardWithStoryPoints {...card} />
      }}
    >
      {board}
    </ControlledBoard>
  )
}

道具

详尽无遗 妇女 可以通过的道具列表,参考: 此页面。 。 。 .

样式

你要么把所有的棋盘都样式, 要么导入我们的样式, 用你想要的样式来覆盖它。 理想的情况是,您会制作专栏,而不是压倒性的CSS, 但是如果您需要的话,这可能会对您有所帮助.

用回混号

大声呼喊 @vjanssens (英语) 用于发现与 Remix 兼容的附加步骤.

在您的 Vite 配置中添加以下内容 :

export default defineConfig({
  // the rest of your config
  ssr: {
    noExternal: ["@caldwell619/react-kanban"]
  },
});

捐款

欢迎公关.

步骤

• 文件 a 问题,使用问题模板.
• 叉开这个项目.
• 砍断你的叉子
• 在你的叉子上,运行 yarn 安装道具
• 开始工作
• 将自己添加到贡献者表格中, 这是由 全部贡献者
  • yarn all-contributors add
  • yarn all-contributors generate
• 提交目标底部横跨叉的公关 christopher-caldwell:master。 。 。 .