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

package/src/board/Board.tsx

@@ -1,294 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import { DragDropContext } from 'react-beautiful-dnd';
-import Column from './Column';
-import ColumnAdder from './ColumnAdder';
-import DefaultCard from './DefaultCard';
-import DefaultColumnHeader from './DefaultColumnHeader';
-import * as helpers from './helpers';
-import { addCard, addColumn, changeColumn, moveCard, moveColumn, removeCard, removeColumn } from './helpers';
-import {
-  getCard,
-  getCoordinates,
-  isAColumnMove,
-  isMovingACardToAnotherPosition,
-  isMovingAColumnToAnotherPosition,
-} from './services';
-import { partialRight, when } from './utils';
-import withDroppable from './withDroppable';
-
-const Columns = forwardRef((props, ref: any) => <div ref={ref} style={{ whiteSpace: 'nowrap' }} {...props} />);
-
-const DroppableBoard = withDroppable(Columns);
-
-const Board: any = (props) => {
-  return props.initialBoard ? <UncontrolledBoard {...props} /> : <ControlledBoard {...props} />;
-};
-
-Object.keys(helpers).forEach((key) => {
-  Board[key] = helpers[key];
-});
-
-function UncontrolledBoard({
-  initialBoard,
-  onCardDragEnd,
-  onColumnDragEnd,
-  allowAddColumn,
-  cardAdderPosition,
-  renderCardAdder,
-  renderColumnAdder,
-  onNewColumnConfirm,
-  onColumnRemove,
-  renderColumnHeader,
-  allowRemoveColumn,
-  allowRenameColumn,
-  onColumnRename,
-  onCardNew,
-  renderCard,
-  allowRemoveCard,
-  onCardRemove,
-  onColumnNew,
-  disableCardDrag,
-  disableColumnDrag,
-  allowAddCard,
-  onNewCardConfirm,
-}) {
-  const [board, setBoard] = useState(initialBoard);
-  const handleOnCardDragEnd = partialRight(handleOnDragEnd, { moveCallback: moveCard, notifyCallback: onCardDragEnd });
-  const handleOnColumnDragEnd = partialRight(handleOnDragEnd, {
-    moveCallback: moveColumn,
-    notifyCallback: onColumnDragEnd,
-  });
-
-  function handleOnDragEnd({ source, destination, subject }, { moveCallback, notifyCallback }) {
-    const reorderedBoard = moveCallback(board, source, destination);
-    when(notifyCallback)((callback) => callback(reorderedBoard, subject, source, destination));
-    setBoard(reorderedBoard);
-  }
-
-  async function handleColumnAdd(newColumn) {
-    const column = renderColumnAdder ? newColumn : await onNewColumnConfirm(newColumn);
-    const boardWithNewColumn = addColumn(board, column);
-    onColumnNew(boardWithNewColumn, column);
-    setBoard(boardWithNewColumn);
-  }
-
-  function handleColumnRemove(column) {
-    const filteredBoard = removeColumn(board, column);
-    onColumnRemove(filteredBoard, column);
-    setBoard(filteredBoard);
-  }
-
-  function handleColumnRename(column, title) {
-    const boardWithRenamedColumn = changeColumn(board, column, { title });
-    onColumnRename(boardWithRenamedColumn, { ...column, title });
-    setBoard(boardWithRenamedColumn);
-  }
-
-  function handleCardAdd(column, card, options = {}) {
-    const boardWithNewCard = addCard(board, column, card, options);
-
-    onCardNew(
-      boardWithNewCard,
-      boardWithNewCard.columns.find(({ id }) => id === column.id),
-      card,
-    );
-    setBoard(boardWithNewCard);
-  }
-
-  async function handleDraftCardAdd(column, card, options = {}) {
-    const newCard = await onNewCardConfirm(card);
-    handleCardAdd(column, newCard, options);
-  }
-
-  function handleCardRemove(column, card) {
-    const boardWithoutCard = removeCard(board, column, card);
-    onCardRemove(
-      boardWithoutCard,
-      boardWithoutCard.columns.find(({ id }) => id === column.id),
-      card,
-    );
-    setBoard(boardWithoutCard);
-  }
-
-  return (
-    <BoardContainer
-      cardAdderPosition={cardAdderPosition}
-      onCardDragEnd={handleOnCardDragEnd}
-      onColumnDragEnd={handleOnColumnDragEnd}
-      renderCardAdder={renderCardAdder}
-      renderColumnAdder={() => {
-        if (!allowAddColumn) return null;
-        if (renderColumnAdder) return renderColumnAdder({ addColumn: handleColumnAdd });
-        if (!onNewColumnConfirm) return null;
-        return <ColumnAdder onConfirm={(title) => handleColumnAdd({ title, cards: [] })} />;
-      }}
-      {...(renderColumnHeader && {
-        renderColumnHeader: (column) =>
-          renderColumnHeader(column, {
-            removeColumn: handleColumnRemove.bind(null, column),
-            renameColumn: handleColumnRename.bind(null, column),
-            addCard: handleCardAdd.bind(null, column),
-          }),
-      })}
-      renderCard={(column, card, dragging) => {
-        if (renderCard) return renderCard(card, { removeCard: handleCardRemove.bind(null, column, card), dragging });
-        return (
-          <DefaultCard
-            dragging={dragging}
-            allowRemoveCard={allowRemoveCard}
-            onCardRemove={(card) => handleCardRemove(column, card)}
-          >
-            {card}
-          </DefaultCard>
-        );
-      }}
-      allowRemoveColumn={allowRemoveColumn}
-      onColumnRemove={handleColumnRemove}
-      allowRenameColumn={allowRenameColumn}
-      onColumnRename={handleColumnRename}
-      disableColumnDrag={disableColumnDrag}
-      disableCardDrag={disableCardDrag}
-      onCardNew={(column, card) => handleDraftCardAdd(column, card, allowAddCard)}
-      allowAddCard={allowAddCard && onNewCardConfirm}
-    >
-      {board}
-    </BoardContainer>
-  );
-}
-
-function ControlledBoard({
-  children: board,
-  onCardDragEnd,
-  onColumnDragEnd,
-  allowAddColumn,
-  renderCardAdder,
-  renderColumnAdder,
-  onNewColumnConfirm,
-  onColumnRemove,
-  renderColumnHeader,
-  allowRemoveColumn,
-  allowRenameColumn,
-  onColumnRename,
-  renderCard,
-  allowAddCard,
-  allowRemoveCard,
-  onCardRemove,
-  disableCardDrag,
-  disableColumnDrag,
-  cardAdderPosition,
-}) {
-  const handleOnCardDragEnd = partialRight(handleOnDragEnd, { notifyCallback: onCardDragEnd });
-  const handleOnColumnDragEnd = partialRight(handleOnDragEnd, { notifyCallback: onColumnDragEnd });
-
-  function handleOnDragEnd({ source, destination, subject }, { notifyCallback }) {
-    when(notifyCallback)((callback) => callback(subject, source, destination));
-  }
-
-  return (
-    <BoardContainer
-      cardAdderPosition={cardAdderPosition}
-      onCardDragEnd={handleOnCardDragEnd}
-      onColumnDragEnd={handleOnColumnDragEnd}
-      renderCardAdder={renderCardAdder}
-      renderColumnAdder={() => {
-        if (!allowAddColumn) return null;
-        if (renderColumnAdder) return renderColumnAdder();
-        if (!onNewColumnConfirm) return null;
-        return <ColumnAdder onConfirm={(title) => onNewColumnConfirm({ title, cards: [] })} />;
-      }}
-      {...(renderColumnHeader && { renderColumnHeader: renderColumnHeader })}
-      renderCard={(column, card, dragging) => {
-        if (renderCard) return renderCard(card, { column, dragging });
-        return (
-          <DefaultCard
-            dragging={dragging}
-            allowRemoveCard={allowRemoveCard}
-            onCardRemove={(card) => onCardRemove(card, column)}
-          >
-            {card}
-          </DefaultCard>
-        );
-      }}
-      allowAddCard={allowAddCard}
-      allowRemoveColumn={allowRemoveColumn}
-      onColumnRemove={onColumnRemove}
-      allowRenameColumn={allowRenameColumn}
-      onColumnRename={onColumnRename}
-      disableColumnDrag={disableColumnDrag}
-      disableCardDrag={disableCardDrag}
-    >
-      {board}
-    </BoardContainer>
-  );
-}
-
-function BoardContainer(props) {
-  const {
-    children: board,
-    renderCard,
-    disableColumnDrag,
-    disableCardDrag,
-    cardAdderPosition,
-    renderCardAdder,
-    renderColumnHeader,
-    renderColumnAdder,
-    allowRemoveColumn,
-    onColumnRemove,
-    allowRenameColumn,
-    onColumnRename,
-    onColumnDragEnd,
-    onCardDragEnd,
-    onCardNew,
-    allowAddCard,
-  } = props;
-  function handleOnDragEnd(event) {
-    const coordinates = getCoordinates(event, board);
-    if (!coordinates.source) return;
-
-    isAColumnMove(event.type)
-      ? isMovingAColumnToAnotherPosition(coordinates) &&
-        onColumnDragEnd({ ...coordinates, subject: board.columns?.[coordinates.source.fromPosition] })
-      : isMovingACardToAnotherPosition(coordinates) &&
-        onCardDragEnd({ ...coordinates, subject: getCard(board, coordinates.source) });
-  }
-  return (
-    <DragDropContext onDragEnd={handleOnDragEnd}>
-      <div style={{ overflowY: 'hidden', display: 'flex', alignItems: 'flex-start' }} className="react-kanban-board">
-        <DroppableBoard droppableId="board-droppable" direction="horizontal" type="BOARD">
-          {board.columns?.map((column, index) => (
-            <Column
-              key={column.id}
-              index={column?.index ?? index}
-              renderCard={renderCard}
-              renderCardAdder={renderCardAdder}
-              renderColumnHeader={(column) =>
-                renderColumnHeader ? (
-                  renderColumnHeader(column)
-                ) : (
-                  <DefaultColumnHeader
-                    allowRemoveColumn={allowRemoveColumn}
-                    onColumnRemove={onColumnRemove}
-                    allowRenameColumn={allowRenameColumn}
-                    onColumnRename={onColumnRename}
-                  >
-                    {column}
-                  </DefaultColumnHeader>
-                )
-              }
-              cardAdderPosition={cardAdderPosition}
-              disableColumnDrag={disableColumnDrag}
-              disableCardDrag={disableCardDrag}
-              onCardNew={onCardNew}
-              allowAddCard={allowAddCard}
-            >
-              {column}
-            </Column>
-          ))}
-        </DroppableBoard>
-        {renderColumnAdder()}
-      </div>
-    </DragDropContext>
-  );
-}
-
-export default Board;

package/src/board/Card.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
-
-function Card({ children, index, renderCard, disableCardDrag }) {
-  return (
-    <Draggable draggableId={String(children.id)} index={index} isDragDisabled={disableCardDrag}>
-      {(provided, { isDragging }) => {
-        return (
-          <div
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            data-testid={`card-${children.id}`}
-          >
-            {renderCard(isDragging)}
-            {/* <div style={{ display: 'inline-block', whiteSpace: 'normal' }}></div> */}
-          </div>
-        );
-      }}
-    </Draggable>
-  );
-}
-
-export default Card;

package/src/board/CardAdder.tsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react';
-import CardForm from './CardForm';
-
-function CardAdder({ column, onConfirm }) {
-  function confirmCard(card) {
-    onConfirm(column, card)
-    setAddingCard(false)
-  }
-
-  const [addingCard, setAddingCard] = useState(false)
-
-  return (
-    <>
-      {addingCard ? (
-        <CardForm onConfirm={confirmCard} onCancel={() => setAddingCard(false)} />
-      ) : (
-        <button className='react-kanban-card-adder-button' onClick={() => setAddingCard(!addingCard)}>
-          +
-        </button>
-      )}
-    </>
-  )
-}
-export default CardAdder;

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;