From 5653cc4da1ea5aaefb77d68207ae2b5882230578 Mon Sep 17 00:00:00 2001 From: jekrch Date: Sun, 14 Jul 2024 17:58:59 -0500 Subject: [PATCH] use forked dnd library --- README.md | 2 +- package-lock.json | 176 +++++++++--------- package.json | 3 +- src/App.tsx | 2 +- src/components/modals/MainModal.tsx | 2 +- .../ranking/RankedCountriesList.tsx | 6 +- src/components/ranking/RankedHeaderMenu.tsx | 10 +- .../ranking/StrictModeDroppable.tsx | 2 +- .../ranking/UnrankedCountriesList.tsx | 2 +- 9 files changed, 101 insertions(+), 104 deletions(-) diff --git a/README.md b/README.md index d17df94..31cc7ad 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![Version](https://img.shields.io/badge/version-4.1-blue) +![Version](https://img.shields.io/badge/version-4.1.1-blue) ![Run Tests](https://github.com/jekrch/eurovision-ranker/actions/workflows/test_on_push.yml/badge.svg) # Eurovision Ranker :yellow_heart: diff --git a/package-lock.json b/package-lock.json index b047c72..5cc10fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,16 +12,15 @@ "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.2", "@headlessui/react": "^2.1.0", + "@hello-pangea/dnd": "^16.6.0", "@reduxjs/toolkit": "^2.2.6", "@types/react": "^18.3.3", - "@types/react-beautiful-dnd": "^13.1.8", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "classnames": "^2.5.1", "npm": "^10.8.1", "papaparse": "^5.4.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.3.0", "react-fontawesome": "^1.7.1", "react-hot-toast": "^2.4.1", @@ -1789,11 +1788,11 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.21.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", - "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz", + "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -2306,6 +2305,80 @@ "react-dom": "^18" } }, + "node_modules/@hello-pangea/dnd": { + "version": "16.6.0", + "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.6.0.tgz", + "integrity": "sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==", + "dependencies": { + "@babel/runtime": "^7.24.1", + "css-box-model": "^1.2.1", + "memoize-one": "^6.0.0", + "raf-schd": "^4.0.3", + "react-redux": "^8.1.3", + "redux": "^4.2.1", + "use-memo-one": "^1.1.3" + }, + "peerDependencies": { + "react": "^16.8.5 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@hello-pangea/dnd/node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, + "node_modules/@hello-pangea/dnd/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, + "node_modules/@hello-pangea/dnd/node_modules/react-redux": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", + "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4 || ^5.0.0-beta.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/@hello-pangea/dnd/node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", @@ -3120,14 +3193,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@types/react-beautiful-dnd": { - "version": "13.1.8", - "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz", - "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-datepicker": { "version": "4.19.4", "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.19.4.tgz", @@ -3148,25 +3213,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-redux": { - "version": "7.1.33", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz", - "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, - "node_modules/@types/react-redux/node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, "node_modules/@types/react-simple-maps": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/react-simple-maps/-/react-simple-maps-3.0.4.tgz", @@ -6028,11 +6074,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -9388,56 +9429,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-beautiful-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", - "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", - "dependencies": { - "@babel/runtime": "^7.9.2", - "css-box-model": "^1.2.0", - "memoize-one": "^5.1.1", - "raf-schd": "^4.0.2", - "react-redux": "^7.2.0", - "redux": "^4.0.4", - "use-memo-one": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-beautiful-dnd/node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17 || ^18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, - "node_modules/react-beautiful-dnd/node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -9540,7 +9531,8 @@ "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true }, "node_modules/react-joyride": { "version": "2.8.2", @@ -9871,9 +9863,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regenerator-transform": { "version": "0.15.2", diff --git a/package.json b/package.json index ec69778..2c8e44d 100644 --- a/package.json +++ b/package.json @@ -8,16 +8,15 @@ "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.2", "@headlessui/react": "^2.1.0", + "@hello-pangea/dnd": "^16.6.0", "@reduxjs/toolkit": "^2.2.6", "@types/react": "^18.3.3", - "@types/react-beautiful-dnd": "^13.1.8", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "classnames": "^2.5.1", "npm": "^10.8.1", "papaparse": "^5.4.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.3.0", "react-fontawesome": "^1.7.1", "react-hot-toast": "^2.4.1", diff --git a/src/App.tsx b/src/App.tsx index f31a1bc..9f44c77 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { DragDropContext, DropResult } from 'react-beautiful-dnd'; +import { DragDropContext, DropResult } from '@hello-pangea/dnd'; import classNames from 'classnames'; import { CountryContestant } from './data/CountryContestant'; import MainModal from './components/modals/MainModal'; diff --git a/src/components/modals/MainModal.tsx b/src/components/modals/MainModal.tsx index 665c036..dafe5fd 100644 --- a/src/components/modals/MainModal.tsx +++ b/src/components/modals/MainModal.tsx @@ -88,7 +88,7 @@ const MainModal: React.FC = (props: MainModalProps) => { target="_blank" rel="noopener noreferrer" href="https://github.com/jekrch/eurovision-ranker/releases" - >v4.1 + >v4.1.1 {`Copyright (c) 2023${new Date().getFullYear()?.toString() !== '2023' ? '-' + new Date().getFullYear() : ''} `} diff --git a/src/components/ranking/RankedCountriesList.tsx b/src/components/ranking/RankedCountriesList.tsx index e675c52..bbedcbc 100644 --- a/src/components/ranking/RankedCountriesList.tsx +++ b/src/components/ranking/RankedCountriesList.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { Draggable } from 'react-beautiful-dnd'; import { StrictModeDroppable } from './StrictModeDroppable'; import classNames from 'classnames'; import { CountryContestant } from '../../data/CountryContestant'; @@ -16,6 +15,7 @@ import { updateUrlFromRankedItems } from '../../utilities/UrlUtil'; import { IntroColumnWrapper } from './IntroColumnWrapper'; import { useAppDispatch, useAppSelector } from '../../utilities/hooks'; import { deleteRankedCountry } from '../../redux/rankingActions'; +import { Draggable } from '@hello-pangea/dnd'; interface RankedCountriesListProps { openSongModal: (countryContestant: CountryContestant) => void; @@ -82,7 +82,7 @@ const RankedCountriesList: React.FC = ({ return (
- {(provided) => ( + {(provided: any) => (
= ({ index={index} isDragDisabled={showTotalRank} > - {(provided, snapshot) => ( + {(provided: any, snapshot: any) => (
  • = (props: RankedHeaderMe const globalMenuOpenTrigger = useAppSelector((state: AppState) => state.headerMenuOpen); const dispatch: AppDispatch = useAppDispatch(); const CLOSING_DURATION = 300; - + const menuNodeRef = useRef(null); const toggleMenu = () => { const shouldClose = isMenuOpen; setIsMenuOpen(!isMenuOpen); @@ -103,7 +103,13 @@ const RankedHeaderMenu: React.FC = (props: RankedHeaderMe icon={faEllipsisH} /> - +
      { const [enabled, setEnabled] = useState(false); diff --git a/src/components/ranking/UnrankedCountriesList.tsx b/src/components/ranking/UnrankedCountriesList.tsx index 0e65518..19c4e70 100644 --- a/src/components/ranking/UnrankedCountriesList.tsx +++ b/src/components/ranking/UnrankedCountriesList.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { Draggable } from 'react-beautiful-dnd'; import { StrictModeDroppable } from './StrictModeDroppable'; import classNames from 'classnames'; import { Card } from './Card'; import { AppState } from '../../redux/store'; import { useAppSelector } from '../../utilities/hooks'; +import { Draggable } from '@hello-pangea/dnd'; /** * Displays all ranked countries in the left column list on the select view