Использование React Beautiful DnD не работает с гибкой версткой React-таблиц - PullRequest
Новая
       52

Использование React Beautiful DnD не работает с гибкой версткой React-таблиц

0 голосов
/ 04 мая 2020

Я собираюсь использовать React Beautiful DnD в сочетании с React-таблицей, я пробовал это с блочной компоновкой React-таблиц, и все это работает хорошо, однако, когда я пробую его с помощью гибкой компоновки, я сталкиваюсь с некоторыми проблемы. 

<div {...providedTh.draggableProps} ref={providedTh.innerRef}>
      <div
        {...column.getHeaderProps()}
        // style={{ width: "auto" }}
        className="bg-dark font-weight-bold th"
      >
        <div {...providedTh.dragHandleProps}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (column.isSortedDesc ? " ?" : " ?") : ""}
          </span>
        </div>
        {/* Use column.getResizerProps to hook up the events correctly */}
        <div
          {...column.getResizerProps()}
          className={`resizer ${column.isResizing ? "isResizing" : ""}`}
        />
      </div>
    </div>

Как видите, {...column.getHeaderProps()} дает гибкие стили, а я - неожиданно перетаскиваемый родительский элемент, что вызывает проблемы со стилем.

Итак, я попробовал это использование styled-components 


const HeaderCell = ({ providedTh, column }) => {
  const headerPropsNoStyle = { ...column.getHeaderProps() };
  delete headerPropsNoStyle.style;
  const DraggableDiv = styled.div`
    ${{ ...column.getHeaderProps().style }}
  `;
  return (
    <DraggableDiv
      {...providedTh.draggableProps}
      ref={providedTh.innerRef}
      className="bg-dark font-weight-bold th"
    >
      <div
        // style={{ width: "auto" }}
        {...headerPropsNoStyle}
      >
        <div {...providedTh.dragHandleProps}>
          {column.render("Header")}
          <span>
            {column.isSorted ? (column.isSortedDesc ? " ?" : " ?") : ""}
          </span>
        </div>
        {/* Use column.getResizerProps to hook up the events correctly */}
        <div
          {...column.getResizerProps()}
          className={`resizer ${column.isResizing ? "isResizing" : ""}`}
        />
      </div>
    </DraggableDiv>

  );
};

Проблема теперь в том, что Reaction-Dnd распознает падение только после того, как я начал перетаскивать другой столбец, поэтому состояние обновляется с задержкой.

Любые предложения или комментарии будет высоко ценится, и заранее спасибо :)).

...