Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup(Lists): move draggable helper functions out of Lists component

Browse Source
This commit is contained in:
Jordan Knott 2020-04-09 22:32:45 -05:00
parent 0766565dc7
commit d51a9c58ab
2 changed files with 50 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/src/shared/components/Lists/index.tsx
View File

@ -1,53 +1,16 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/arrays';
import List, { ListCards } from 'shared/components/List'; import List, { ListCards } from 'shared/components/List';
import Card from 'shared/components/Card'; import Card from 'shared/components/Card';
import { Container } from './Styles'; import { Container } from './Styles';
import CardComposer from 'shared/components/CardComposer'; import CardComposer from 'shared/components/CardComposer';
import {
const getNewDraggablePosition = (afterDropDraggables: any, draggableIndex: any) => { isPositionChanged,
const prevDraggable = afterDropDraggables[draggableIndex - 1]; getSortedDraggables,
const nextDraggable = afterDropDraggables[draggableIndex + 1]; getNewDraggablePosition,
if (!prevDraggable && !nextDraggable) { getAfterDropDraggableList,
return 1; } from 'shared/utils/draggables';
}
if (!prevDraggable) {
return nextDraggable.position - 1;
}
if (!nextDraggable) {
return prevDraggable.position + 1;
}
const newPos = (prevDraggable.position + nextDraggable.position) / 2.0;
return newPos;
};
const getSortedDraggables = (draggables: any) => {
return draggables.sort((a: any, b: any) => a.position - b.position);
};
const isPositionChanged = (source: any, destination: any) => {
if (!destination) return false;
const isSameList = destination.droppableId === source.droppableId;
const isSamePosition = destination.index === source.index;
return !isSameList || !isSamePosition;
};
const getAfterDropDraggableList = (
beforeDropDraggables: any,
droppedDraggable: any,
isList: any,
isSameList: any,
destination: any,
) => {
if (isList) {
return moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index);
}
return isSameList
? moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index)
: insertItemIntoArray(beforeDropDraggables, droppedDraggable, destination.index);
};
interface Columns { interface Columns {
[key: string]: TaskGroup; [key: string]: TaskGroup;

44
web/src/shared/utils/draggables.ts Normal file
View File

@ -0,0 +1,44 @@
import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/arrays';
export const getNewDraggablePosition = (afterDropDraggables: any, draggableIndex: any) => {
const prevDraggable = afterDropDraggables[draggableIndex - 1];
const nextDraggable = afterDropDraggables[draggableIndex + 1];
if (!prevDraggable && !nextDraggable) {
return 1;
}
if (!prevDraggable) {
return nextDraggable.position - 1;
}
if (!nextDraggable) {
return prevDraggable.position + 1;
}
const newPos = (prevDraggable.position + nextDraggable.position) / 2.0;
return newPos;
};
export const getSortedDraggables = (draggables: any) => {
return draggables.sort((a: any, b: any) => a.position - b.position);
};
export const isPositionChanged = (source: any, destination: any) => {
if (!destination) return false;
const isSameList = destination.droppableId === source.droppableId;
const isSamePosition = destination.index === source.index;
return !isSameList || !isSamePosition;
};
export const getAfterDropDraggableList = (
beforeDropDraggables: any,
droppedDraggable: any,
isList: any,
isSameList: any,
destination: any,
) => {
if (isList) {
return moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index);
}
return isSameList
? moveItemWithinArray(beforeDropDraggables, droppedDraggable, destination.index)
: insertItemIntoArray(beforeDropDraggables, droppedDraggable, destination.index);
};