Перетащите n drop с виртуальными списками и элементами разного размера - PullRequest
Новая
       25

Перетащите n drop с виртуальными списками и элементами разного размера

0 голосов
/ 11 февраля 2020

Я пытаюсь реализовать Trello с виртуальными списками и элементами разных размеров, используя react-beautiful-dnd и react-virtuoso (виртуальные списки с автоматическим вычислением размеров элементов).

react-virtuoso не является частью из примеров beautiful-react-dnd я сталкиваюсь с двумя проблемами:

  • Я не могу прокрутить при перетаскивании элемента
  • Я часто получаю эту ошибку: Invariant failed: Can only recollect Droppable client for Droppables that have a scroll container.

Вот коды и поле

DroppableList.tsx 

import * as React from "react";
import { useState } from "react";
import "./styles.css";
import { Virtuoso } from "react-virtuoso";
import {
  Draggable,
  DragDropContext,
  Droppable,
  DropResult,
  ResponderProvided
} from "react-beautiful-dnd";

import { Item } from "./Item";
import { reorder } from "./App";
import { createItemList } from "./data";
import { ItemList, ItemType } from "./dtos";

const itemCount = 30;

export const VirtualDragDropList = () => {
  const [itemList, setItemList] = useState<ItemList>(createItemList(itemCount));

  const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      itemList,
      result.source.index,
      result.destination.index
    );

    setItemList(items);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable
        droppableId="droppable"
        mode="virtual"
        renderClone={(provided, snapshot, rubric) => {
          // console.log("provided", provided);
          // console.log("snapshot", snapshot);
          // console.log("rubric", rubric);
          return (
            <Item
              itemData={itemList[(rubric as any).source.index]}
              provided={provided}
              index={(rubric as any).source.index} // typing seems wrong, hence the any.
            />
          );
        }}
      >
        {droppableProvided => (
          <div ref={droppableProvided.innerRef}>
            <Virtuoso
              style={{ width: "300px", height: "400px" }}
              totalCount={itemCount}
              // item={index => <Item itemData={itemList[index]} />}
              item={index => <Row itemData={itemList[index]} index={index} />}
            />
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

const Row = React.memo((args: { itemData: ItemType; index: number }) => {
  const { itemData, index } = args;
  return (
    <Draggable draggableId={itemData.id} index={index} key={itemData.id}>
      {(provided, snapshot) => (
        <Item itemData={itemData} index={index} provided={provided} />
      )}
    </Draggable>
  );
});

Item.tsx 

import * as React from "react";

import { ItemType } from "./dtos";

export const Item: React.FC<{
  index?: number;
  itemData: ItemType | undefined;
  provided?: any;
}> = props => {
  const height = (props.itemData ? props.itemData.height : 10) * 3;
  const style = {
    margin: ".3rem",
    padding: ".3rem",
    display: "flex",
    border: "1px solid lightgrey",
    height: `${height}px`
  };

  return (
    <div
      ref={props.provided && props.provided.innerRef}
      {...props.provided && props.provided.draggableProps}
      {...props.provided && props.provided.dragHandleProps}
      style={{ ...props.provided.draggableProps.style, ...style }}
    >
      {props.itemData && props.itemData.text}
    </div>
  );
};

data.ts 

import { ItemList } from "./dtos";

export const createItemList = (itemCount: number): ItemList => {
  const itemList: ItemList = [];
  for (let i = 0; i < itemCount; i++) {
    itemList.push({
      id: i.toString(),
      text: `Item ${i}`,
      height: Math.random() * 20
    });
  }

  return itemList;
}
...