@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/board/CardForm.tsx

@@ -1,44 +0,0 @@
-import React, { useRef } from 'react';
-import { when } from './utils';
-
-function CardForm({ onConfirm, onCancel }) {
-  const inputCardTitle = useRef<any>();
-  const inputCardDescription = useRef<any>();
-
-  function addCard(event) {
-    event.preventDefault();
-    when(inputCardTitle.current.value)((value) => {
-      onConfirm({ title: value, description: inputCardDescription.current.value });
-    });
-  }
-
-  return (
-    <div className="react-kanban-card-adder-form">
-      <form onSubmit={addCard}>
-        <input
-          className="react-kanban-card-adder-form__title"
-          name="title"
-          autoFocus
-          defaultValue="Title"
-          ref={inputCardTitle}
-        />
-        <input
-          className="react-kanban-card-adder-form__description"
-          name="description"
-          defaultValue="Description"
-          ref={inputCardDescription}
-        />
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '5px' }}>
-          <button className="react-kanban-card-adder-form__button" type="submit">
-            Add
-          </button>
-          <button className="react-kanban-card-adder-form__button" type="button" onClick={onCancel}>
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export default CardForm;

package/src/board/Column.tsx

@@ -1,75 +0,0 @@
-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) => (
-  <div ref={ref} style={{ minHeight: 'inherit', height: 'inherit' }} {...props} />
-));
-
-const DroppableColumn = withDroppable(ColumnEmptyPlaceholder);
-
-function Column({
-  children,
-  index: columnIndex,
-  renderCard,
-  renderCardAdder = ({ column, onConfirm }) => <CardAdder column={column} onConfirm={onConfirm} />,
-  renderColumnHeader,
-  disableColumnDrag,
-  disableCardDrag,
-  onCardNew,
-  allowAddCard,
-  cardAdderPosition = 'top',
-}) {
-  return (
-    <Draggable draggableId={`column-draggable-${children.id}`} index={columnIndex} isDragDisabled={disableColumnDrag}>
-      {(columnProvided) => {
-        const draggablePropsWithoutStyle = pickPropOut(columnProvided.draggableProps, 'style');
-
-        return (
-          <div
-            ref={columnProvided.innerRef}
-            {...draggablePropsWithoutStyle}
-            style={{
-              height: '100%',
-              minHeight: '28px',
-              display: 'inline-block',
-              verticalAlign: 'top',
-              ...columnProvided.draggableProps.style,
-            }}
-            className="react-kanban-column"
-            data-testid={`column-${children.id}`}
-          >
-            <div {...columnProvided.dragHandleProps}>{renderColumnHeader(children)}</div>
-            {cardAdderPosition === 'top' && allowAddCard && renderCardAdder({ column: children, onConfirm: onCardNew })}
-            <DroppableColumn droppableId={String(children.id)}>
-              {children?.cards?.length ? (
-                <div className="react-kanban-card-skeleton">
-                  {children.cards.map((card, index) => (
-                    <Card
-                      key={card.id}
-                      index={index}
-                      renderCard={(dragging) => renderCard(children, card, dragging)}
-                      disableCardDrag={disableCardDrag}
-                    >
-                      {card}
-                    </Card>
-                  ))}
-                </div>
-              ) : (
-                <div className="react-kanban-card-skeleton" />
-              )}
-            </DroppableColumn>
-            {cardAdderPosition === 'bottom' &&
-              allowAddCard &&
-              renderCardAdder({ column: children, onConfirm: onCardNew })}
-          </div>
-        );
-      }}
-    </Draggable>
-  );
-}
-
-export default Column;

package/src/board/ColumnAdder.tsx

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import ColumnForm from './ColumnForm';
-
-function ColumnAdder({ onConfirm }) {
-  const [isAddingColumn, setAddingColumn] = useState(false);
-
-  function confirmColumn(title) {
-    onConfirm(title);
-    setAddingColumn(false);
-  }
-
-  return isAddingColumn ? (
-    <ColumnForm onConfirm={confirmColumn} onCancel={() => setAddingColumn(false)} />
-  ) : (
-    <div
-      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: '230px' }}
-      className="react-kanban-column-adder-button"
-      onClick={() => setAddingColumn(true)}
-      role="button"
-    >
-      ➕
-    </div>
-  );
-}
-
-export default ColumnAdder;

package/src/board/ColumnForm.tsx

@@ -1,27 +0,0 @@
-import React, { createRef } from 'react';
-import { when } from './utils';
-
-function ColumnForm({ onConfirm, onCancel }) {
-  // FIXME use hook
-  const inputColumnTitle = createRef<any>()
-
-  function addColumn(event) {
-    event.preventDefault()
-
-    when(inputColumnTitle.current.value)(onConfirm)
-  }
-
-  return (
-    <div className='react-kanban-column' style={{ minWidth: '230px' }}>
-      <form style={{ display: 'flex', justifyContent: 'space-between' }} onSubmit={addColumn}>
-        <input type='text' ref={inputColumnTitle} autoFocus />
-        <button type='submit'>Add</button>
-        <button type='button' onClick={onCancel}>
-          Cancel
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export default ColumnForm

package/src/board/DefaultCard.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-function DefaultCard({ children: card, dragging, allowRemoveCard, onCardRemove }) {
-  return (
-    <div className={`react-kanban-card ${dragging ? 'react-kanban-card--dragging' : ''}`}>
-      <span>
-        <div className="react-kanban-card__title">
-          <span>{card.title}</span>
-          {allowRemoveCard && (
-            <span style={{ cursor: 'pointer' }} onClick={() => onCardRemove(card)}>
-              ×
-            </span>
-          )}
-        </div>
-      </span>
-      <div className="react-kanban-card__description">{card.description}</div>
-    </div>
-  );
-}
-
-export default DefaultCard;

package/src/board/DefaultColumnHeader.tsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-
-function ColumnTitle({ allowRenameColumn, onClick, children: title }) {
-  return allowRenameColumn ? (
-    <span style={{ cursor: 'pointer' }} onClick={onClick}>
-      {title}
-    </span>
-  ) : (
-    <span>{title}</span>
-  )
-}
-
-function useRenameMode(state) {
-  const [renameMode, setRenameMode] = useState(state)
-
-  function toggleRenameMode() {
-    setRenameMode(!renameMode)
-  }
-
-  return [renameMode, toggleRenameMode]
-}
-
-function DefaultColumnHeader({ children: column, allowRemoveColumn, onColumnRemove, allowRenameColumn, onColumnRename }) {
-  const [renameMode, toggleRenameMode] = useRenameMode(false)
-  const [titleInput, setTitleInput] = useState('')
-
-  function handleRenameColumn(event) {
-    event.preventDefault()
-
-    onColumnRename(column, titleInput)
-    toggleRenameMode()
-  }
-
-  function handleRenameMode() {
-    setTitleInput(column.title)
-    toggleRenameMode()
-  }
-
-  return (
-    <div className='react-kanban-column-header'>
-      {renameMode ? (
-        <form onSubmit={handleRenameColumn}>
-          <span>
-            <input
-              type='text'
-              value={titleInput}
-              onChange={({ target: { value } }) => setTitleInput(value)}
-              autoFocus
-            />
-          </span>
-          <span>
-            <button className='react-kanban-column-header__button' type='submit'>
-              Rename
-            </button>
-            <button className='react-kanban-column-header__button' type='button' onClick={handleRenameMode}>
-              Cancel
-            </button>
-          </span>
-        </form>
-      ) : (
-        <>
-          <ColumnTitle allowRenameColumn={allowRenameColumn} onClick={handleRenameMode}>
-            {column.title}
-          </ColumnTitle>
-          {allowRemoveColumn && <span onClick={() => onColumnRemove(column)}>×</span>}
-        </>
-      )}
-    </div>
-  )
-}
-
-export default DefaultColumnHeader;

package/src/board/Kanban.tsx

@@ -1,128 +0,0 @@
-import '@asseinfo/react-kanban/dist/styles.css';
-import { Button } from 'antd';
-import React, { useState } from 'react';
-import Board from './Board';
-import { addCard, moveCard, removeCard } from './helpers';
-
-const board = {
-  columns: [
-    {
-      id: 1,
-      title: 'Backlog',
-      cards: [
-        {
-          id: 1,
-          title: 'Card title 1',
-          description: 'Card content',
-        },
-        {
-          id: 2,
-          title: 'Card title 2',
-          description: 'Card content',
-        },
-        {
-          id: 3,
-          title: 'Card title 3',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 2,
-      title: 'Doing',
-      cards: [
-        {
-          id: 9,
-          title: 'Card title 9',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'Q&A',
-      cards: [
-        {
-          id: 10,
-          title: 'Card title 10',
-          description: 'Card content',
-        },
-        {
-          id: 11,
-          title: 'Card title 11',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 4,
-      title: 'Production',
-      cards: [
-        {
-          id: 12,
-          title: 'Card title 12',
-          description: 'Card content',
-        },
-        {
-          id: 13,
-          title: 'Card title 13',
-          description: 'Card content',
-        },
-      ],
-    },
-  ],
-};
-
-function UncontrolledBoard() {
-  const [controlledBoard, setBoard] = useState(board);
-  function handleCardMove(card, source, destination) {
-    const updatedBoard = moveCard(controlledBoard, source, destination);
-    setBoard(updatedBoard);
-  }
-  function handleCardRemove(card, column) {
-    const updatedBoard = removeCard(controlledBoard, column, card);
-    setBoard(updatedBoard);
-  }
-  return (
-    <Board
-      disableColumnDrag
-      allowRemoveCard
-      allowAddCard={{ on: 'bottom' }}
-      onLaneRemove={console.log}
-      onCardRemove={handleCardRemove}
-      onCardDragEnd={handleCardMove}
-      onLaneRename={console.log}
-      cardAdderPosition={'bottom'}
-      onNewCardConfirm={(draftCard) => draftCard}
-      onCardNew={console.log}
-      renderCardAdder={({ column }) => {
-        return (
-          <Button
-            block
-            type={'text'}
-            onClick={() => {
-              const updatedBoard = addCard(controlledBoard, column, {
-                id: new Date().getTime(),
-                title: 'Card title ' + new Date().getTime(),
-                description: 'Card content',
-              });
-              setBoard(updatedBoard);
-            }}
-          >
-            添加卡片
-          </Button>
-        );
-      }}
-    >
-      {controlledBoard}
-    </Board>
-  );
-}
-
-export function Kanban() {
-  return (
-    <>
-      <UncontrolledBoard />
-    </>
-  );
-}

package/src/board/demos/demo2.tsx

@@ -1,122 +0,0 @@
-import { Board } from '@nocobase/client';
-import { Button, Card } from 'antd';
-import React, { useState } from 'react';
-import '../style.less';
-
-const board = {
-  columns: [
-    {
-      id: 1,
-      title: 'Backlog',
-      cards: [
-        {
-          id: 1,
-          title: 'Card title 1',
-          description: 'Card content',
-        },
-        {
-          id: 2,
-          title: 'Card title 2',
-          description: 'Card content',
-        },
-        {
-          id: 3,
-          title: 'Card title 3',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 2,
-      title: 'Doing',
-      cards: [
-        {
-          id: 9,
-          title: 'Card title 9',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'Q&A',
-      cards: [
-        {
-          id: 10,
-          title: 'Card title 10',
-          description: 'Card content',
-        },
-        {
-          id: 11,
-          title: 'Card title 11',
-          description: 'Card content',
-        },
-      ],
-    },
-    {
-      id: 4,
-      title: 'Production',
-      cards: [
-        {
-          id: 12,
-          title: 'Card title 12',
-          description: 'Card content',
-        },
-        {
-          id: 13,
-          title: 'Card title 13',
-          description: 'Card content',
-        },
-      ],
-    },
-  ],
-};
-
-export default function App() {
-  const [controlledBoard, setBoard] = useState(board);
-  function handleCardMove(card, source, destination) {
-    const updatedBoard = Board.moveCard(controlledBoard, source, destination);
-    setBoard(updatedBoard);
-  }
-  function handleCardRemove(card, column) {
-    const updatedBoard = Board.removeCard(controlledBoard, column, card);
-    setBoard(updatedBoard);
-  }
-  return (
-    <Board
-      disableColumnDrag
-      allowRemoveCard
-      allowAddCard={{ on: 'bottom' }}
-      onLaneRemove={console.log}
-      onCardRemove={handleCardRemove}
-      onCardDragEnd={handleCardMove}
-      onLaneRename={console.log}
-      cardAdderPosition={'bottom'}
-      onNewCardConfirm={(draftCard) => draftCard}
-      onCardNew={console.log}
-      renderCard={(card, { column, dragging }) => {
-        return <Card style={{ marginBottom: 15 }}>{card.title}</Card>;
-      }}
-      renderCardAdder={({ column }) => {
-        return (
-          <Button
-            block
-            type={'text'}
-            onClick={() => {
-              const updatedBoard = Board.addCard(controlledBoard, column, {
-                id: new Date().getTime(),
-                title: 'Card title ' + new Date().getTime(),
-                description: 'Card content',
-              });
-              setBoard(updatedBoard);
-            }}
-          >
-            添加卡片
-          </Button>
-        );
-      }}
-    >
-      {controlledBoard}
-    </Board>
-  );
-}

package/src/board/helpers.ts

@@ -1,91 +0,0 @@
-import {
-  addInArrayAtPosition,
-  changeElementOfPositionInArray,
-  removeFromArrayAtPosition,
-  replaceElementOfArray
-} from './utils';
-
-function reorderCardsOnColumn(column, reorderCards) {
-  return { ...column, cards: reorderCards(column.cards) };
-}
-
-function moveColumn(board, { fromPosition }, { toPosition }) {
-  return { ...board, columns: changeElementOfPositionInArray(board.columns, fromPosition, toPosition) };
-}
-
-function moveCard(board, { fromPosition, fromColumnId }, { toPosition, toColumnId }) {
-  const sourceColumn = board.columns.find((column) => column.id === fromColumnId);
-  const destinationColumn = board.columns.find((column) => column.id === toColumnId);
-
-  const reorderColumnsOnBoard = (reorderColumnsMapper) => ({
-    ...board,
-    columns: board.columns.map(reorderColumnsMapper),
-  });
-  const reorderCardsOnSourceColumn = reorderCardsOnColumn.bind(null, sourceColumn);
-  const reorderCardsOnDestinationColumn = reorderCardsOnColumn.bind(null, destinationColumn);
-
-  if (sourceColumn.id === destinationColumn.id) {
-    const reorderedCardsOnColumn = reorderCardsOnSourceColumn((cards) => {
-      return changeElementOfPositionInArray(cards, fromPosition, toPosition);
-    });
-    return reorderColumnsOnBoard((column) => (column.id === sourceColumn.id ? reorderedCardsOnColumn : column));
-  } else {
-    const reorderedCardsOnSourceColumn = reorderCardsOnSourceColumn((cards) => {
-      return removeFromArrayAtPosition(cards, fromPosition);
-    });
-    const reorderedCardsOnDestinationColumn = reorderCardsOnDestinationColumn((cards) => {
-      return addInArrayAtPosition(cards, sourceColumn.cards[fromPosition], toPosition);
-    });
-    return reorderColumnsOnBoard((column) => {
-      if (column.id === sourceColumn.id) return reorderedCardsOnSourceColumn;
-      if (column.id === destinationColumn.id) return reorderedCardsOnDestinationColumn;
-      return column;
-    });
-  }
-}
-
-function addColumn(board, column) {
-  return { ...board, columns: addInArrayAtPosition(board.columns, column, board.columns.length) };
-}
-
-function removeColumn(board, column) {
-  return { ...board, columns: board.columns.filter(({ id }) => id !== column.id) };
-}
-
-function changeColumn(board, column, newColumn) {
-  const changedColumns = replaceElementOfArray(board.columns)({
-    when: ({ id }) => id === column.id,
-    for: (value) => ({ ...value, ...newColumn }),
-  });
-  return { ...board, columns: changedColumns };
-}
-
-function addCard(board, inColumn, card, { on }: any = {}) {
-  const columnToAdd = board.columns.find(({ id }) => id === inColumn.id);
-  const cards = addInArrayAtPosition(columnToAdd.cards, card, on === 'top' ? 0 : columnToAdd.cards.length);
-  const columns = replaceElementOfArray(board.columns)({
-    when: ({ id }) => inColumn.id === id,
-    for: (value) => ({ ...value, cards }),
-  });
-  return { ...board, columns };
-}
-
-function removeCard(board, fromColumn, card) {
-  const columnToRemove = board.columns.find(({ id }) => id === fromColumn.id);
-  const filteredCards = columnToRemove.cards.filter(({ id }) => card.id !== id);
-  const columnWithoutCard = { ...columnToRemove, cards: filteredCards };
-  const filteredColumns = board.columns.map((column) => (fromColumn.id === column.id ? columnWithoutCard : column));
-  return { ...board, columns: filteredColumns };
-}
-
-function changeCard(board, cardId, newCard) {
-  const changedCards = (cards) =>
-    replaceElementOfArray(cards)({
-      when: ({ id }) => id === cardId,
-      for: (card) => ({ ...card, ...newCard }),
-    });
-
-  return { ...board, columns: board.columns.map((column) => ({ ...column, cards: changedCards(column.cards) })) };
-}
-
-export { moveColumn, moveCard, addColumn, removeColumn, changeColumn, addCard, removeCard, changeCard };

package/src/board/index.md

@@ -1,14 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# Board
-
-基于 [@asseinfo/react-kanban](https://github.com/asseinfo/react-kanban) 做了一些改进和 BUG 修复，简化了目录结构，并改为了 TypeScript 版本。
-
-## Examples
-
-<code src="./demos/demo2.tsx" />

package/src/board/index.ts

@@ -1,2 +0,0 @@
-export { default as Board } from './Board';
-

package/src/board/services.ts

@@ -1,41 +0,0 @@
-function getCoordinates(event, board) {
-  if (event.destination === null) return {}
-
-  const columnSource = { fromPosition: event.source.index }
-  const columnDestination = { toPosition: event.destination.index }
-
-  if (isAColumnMove(event.type)) {
-    return { source: columnSource, destination: columnDestination }
-  }
-
-  return {
-    source: { ...columnSource, fromColumnId: getColumn(board, event.source.droppableId).id },
-    destination: { ...columnDestination, toColumnId: getColumn(board, event.destination.droppableId).id },
-  }
-}
-
-function isAColumnMove(type) {
-  return type === 'BOARD'
-}
-
-function getCard(board, sourceCoordinate) {
-  const column = board.columns.find((column) => column.id === sourceCoordinate.fromColumnId)
-  return column.cards[sourceCoordinate.fromPosition]
-}
-
-function getColumn(board, droppableId) {
-  return board.columns.find(({ id }) => String(id) === droppableId)
-}
-
-function isMovingAColumnToAnotherPosition(coordinates) {
-  return coordinates.source.fromPosition !== coordinates.destination.toPosition
-}
-
-function isMovingACardToAnotherPosition(coordinates) {
-  return !(
-    coordinates.source.fromPosition === coordinates.destination.toPosition &&
-    coordinates.source.fromColumnId === coordinates.destination.toColumnId
-  )
-}
-
-export { getCard, getCoordinates, isAColumnMove, isMovingAColumnToAnotherPosition, isMovingACardToAnotherPosition }