diff --git a/package.json b/package.json index 9f6dcd9bb..86490feae 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a8d84524..6b040e1d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: @@ -9509,6 +9497,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==} @@ -10350,6 +10339,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==} @@ -10481,25 +10471,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: @@ -10634,6 +10605,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==} @@ -10642,28 +10614,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: diff --git a/src/views/components/common/List/List.tsx b/src/views/components/common/List/List.tsx index cc95737de..de4af7885 100644 --- a/src/views/components/common/List/List.tsx +++ b/src/views/components/common/List/List.tsx @@ -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 = React.memo(({ data: { items, gap }, index, style }; return ( - {/*@ts-ignore*/} + {/* @ts-ignore */} {provided => } ); @@ -87,11 +87,11 @@ const Row: React.FC = React.memo(({ data: { items, gap }, index, style const List: React.FC = ( { 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 = ( { 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 (
@@ -121,23 +122,23 @@ const List: React.FC = ( { 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 }