DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eslint, removed React-beautiful-dnd

Browse Source
This commit is contained in:
knownotunknown
2024-02-14 13:23:22 -06:00
parent 14a90f3dc0
commit 3c83a3c064
3 changed files with 26 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,7 +25,6 @@
"highcharts": "^11.3.0",
"highcharts-react-official": "^3.2.1",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-devtools-core": "^5.0.0",
"react-dom": "^18.2.0",
"react-window": "^1.8.10",

56
pnpm-lock.yaml generated
View File

@@ -37,9 +37,6 @@ dependencies:
react:
specifier: ^18.2.0
version: 18.2.0
react-beautiful-dnd:
specifier: ^13.1.1
version: 13.1.1(react-dom@18.2.0)(react@18.2.0)
react-devtools-core:
specifier: ^5.0.0
version: 5.0.0
@@ -4380,15 +4377,6 @@ packages:
dependencies:
'@types/react': 18.2.55
/@types/react-redux@7.1.33:
resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==}
dependencies:
'@types/hoist-non-react-statics': 3.3.5
'@types/react': 18.2.55
hoist-non-react-statics: 3.3.2
redux: 4.2.1
dev: false
/@types/react@18.2.55:
resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==}
dependencies:
@@ -9496,6 +9484,7 @@ packages:
/object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
dev: true
/object-inspect@1.13.1:
resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -10337,6 +10326,7 @@ packages:
loose-envify: 1.4.0
object-assign: 4.1.1
react-is: 16.13.1
dev: true
/proxy-addr@2.0.7:
resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
@@ -10468,25 +10458,6 @@ packages:
strip-json-comments: 2.0.1
dev: true
/react-beautiful-dnd@13.1.1(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
peerDependencies:
react: ^16.8.5 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
dependencies:
'@babel/runtime': 7.23.9
css-box-model: 1.2.1
memoize-one: 5.2.1
raf-schd: 4.0.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-redux: 7.2.9(react-dom@18.2.0)(react@18.2.0)
redux: 4.2.1
use-memo-one: 1.1.3(react@18.2.0)
transitivePeerDependencies:
- react-native
dev: false
/react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
peerDependencies:
@@ -10621,6 +10592,7 @@ packages:
/react-is@17.0.2:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
/react-is@18.1.0:
resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
@@ -10629,28 +10601,6 @@ packages:
/react-is@18.2.0:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
/react-redux@7.2.9(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
peerDependencies:
react: ^16.8.3 || ^17 || ^18
react-dom: '*'
react-native: '*'
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
dependencies:
'@babel/runtime': 7.23.9
'@types/react-redux': 7.1.33
hoist-non-react-statics: 3.3.2
loose-envify: 1.4.0
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-is: 17.0.2
dev: false
/react-redux@8.1.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==}
peerDependencies:

45
src/views/components/common/List/List.tsx
View File

@@ -1,10 +1,10 @@
import React from 'react';
import { useState } from 'react';
import React, { useState, useCallback, ReactElement } from 'react';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { FixedSizeList, areEqual } from 'react-window';
import { ReactElement } from 'react';
/*Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
/*
* Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
*
*/
@@ -12,12 +12,12 @@ import { ReactElement } from 'react';
* Props for the List component.
*/
export interface ListProps {
draggableElements: any[]; //Will later define draggableElements based on what types
//of components are draggable.
draggableElements: any[]; // Will later define draggableElements based on what types
// of components are draggable.
itemHeight: number;
listHeight: number;
listWidth: number;
gap: number; //Impacts the spacing between items in the list
gap: number; // Impacts the spacing between items in the list
}
@@ -58,7 +58,7 @@ function Item({ provided, item, style, isDragging, gap }) {
}
interface RowProps {
data: any, //DraggableElements[]; Need to define DraggableElements interface once those components are ready
data: any, // DraggableElements[]; Need to define DraggableElements interface once those components are ready
index: number,
style: React.CSSProperties,
}
@@ -72,7 +72,7 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
};
return (
<Draggable draggableId={item.id} index={index} key={item.id}>
{/*@ts-ignore*/}
{/* @ts-ignore */}
{provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap}/>}
</Draggable>
);
@@ -87,11 +87,11 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight, listWidth, gap=8 }: ListProps) => {
const [items, setItems] = useState(() => initial(draggableElements));
function onDragEnd(result) {
const onDragEnd = useCallback((result) => {
if (!result.destination) {
return;
}
if (result.source.index === result.destination.index) {
return;
}
@@ -101,8 +101,9 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
result.source.index,
result.destination.index
);
setItems(newItems as {id: string, content: ReactElement}[]);
}
setItems(newItems as { id: string, content: React.ReactElement }[]);
}, [items]);
return (
<div style={{ overflow: 'hidden', width: listWidth, height: listHeight }}>
@@ -121,23 +122,23 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
const transform = style?.transform;
if (snapshot.isDragging && transform) {
let [x, y] = transform
let [, y] = transform
.replace('translate(', '')
.replace(')', '')
.split(',')
.map((v) => parseInt(v, 10));
const minTranslateY = -1 * rubric.source.index * itemHeight;
const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight;
if (y < minTranslateY) {
// const minTranslateY = -1 * rubric.source.index * itemHeight;
// const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight;
// if (y < minTranslateY) {
}
else if (y > maxTranslateY) {
// }
// else if (y > maxTranslateY) {
}
else {
// }
// else {
}
// }
style.transform = `translate(0px, ${y}px)`; // Apply constrained y value
}