c120903a45
* chore: move dnd lib comment aligned with import * feature: add onUpdate on board * chore: remove multi entity pipelines * feature: add pipelineProgressableType field * feature: fetch progressableType in board * feature: implement on update to persist progress change
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { DropResult } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
|
|
|
|
export const StyledBoard = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
`;
|
|
|
|
export type BoardItemKey = string;
|
|
export type Item = any & { id: string };
|
|
export interface Items {
|
|
[key: string]: Item;
|
|
}
|
|
export interface Column {
|
|
id: string;
|
|
title: string;
|
|
colorCode?: string;
|
|
itemKeys: BoardItemKey[];
|
|
}
|
|
|
|
export const getOptimisticlyUpdatedBoard = (
|
|
board: Column[],
|
|
result: DropResult,
|
|
) => {
|
|
const { destination, source } = result;
|
|
if (!destination) return;
|
|
const sourceColumnIndex = board.findIndex(
|
|
(column) => column.id === source.droppableId,
|
|
);
|
|
const sourceColumn = board[sourceColumnIndex];
|
|
const destinationColumnIndex = board.findIndex(
|
|
(column) => column.id === destination.droppableId,
|
|
);
|
|
const destinationColumn = board[destinationColumnIndex];
|
|
if (!destinationColumn || !sourceColumn) return;
|
|
const sourceItems = sourceColumn.itemKeys;
|
|
const destinationItems = destinationColumn.itemKeys;
|
|
|
|
const [removed] = sourceItems.splice(source.index, 1);
|
|
destinationItems.splice(destination.index, 0, removed);
|
|
|
|
const newSourceColumn = {
|
|
...sourceColumn,
|
|
itemKeys: sourceItems,
|
|
};
|
|
|
|
const newDestinationColumn = {
|
|
...destinationColumn,
|
|
itemKeys: destinationItems,
|
|
};
|
|
|
|
const newBoard = [...board];
|
|
newBoard.splice(sourceColumnIndex, 1, newSourceColumn);
|
|
newBoard.splice(destinationColumnIndex, 1, newDestinationColumn);
|
|
return newBoard;
|
|
};
|