From cebed7e4f9063a7b6cef92686b3e15e5b0ccbfd5 Mon Sep 17 00:00:00 2001 From: Daofeng Li Date: Wed, 9 Mar 2022 22:07:37 -0600 Subject: [PATCH] remove draggable warning --- frontend/package-lock.json | 339 +++++++++++++----- frontend/package.json | 2 +- frontend/src/components/GenericDraggable.js | 33 +- .../ReorderableTrackContainer.js | 37 +- 4 files changed, 287 insertions(+), 124 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e37cc0d5..5b122cb5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -109,7 +109,7 @@ "react": "^16.13.1", "react-app-rewired": "^2.1.9", "react-autosuggest": "^10.0.2", - "react-beautiful-dnd": "^3.0.0", + "react-beautiful-dnd": "^13.1.0", "react-bootstrap-tabs": "^2.0.0", "react-codemirror2": "^6.0.1", "react-collapsible": "^2.8.0", @@ -4953,6 +4953,18 @@ "node": ">=4" } }, + "node_modules/@storybook/react/node_modules/redux": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", + "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "dev": true, + "dependencies": { + "lodash": "^4.2.1", + "lodash-es": "^4.2.1", + "loose-envify": "^1.1.0", + "symbol-observable": "^1.0.3" + } + }, "node_modules/@storybook/react/node_modules/supports-color": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", @@ -5500,6 +5512,25 @@ "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==", "dev": true }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, + "node_modules/@types/hoist-non-react-statics/node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -5688,16 +5719,6 @@ "redux": "^4.0.0" } }, - "node_modules/@types/react-redux/node_modules/redux": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", - "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", - "dev": true, - "dependencies": { - "loose-envify": "^1.4.0", - "symbol-observable": "^1.2.0" - } - }, "node_modules/@types/react-swipeable-views": { "version": "0.13.1", "resolved": "https://registry.npmjs.org/@types/react-swipeable-views/-/react-swipeable-views-0.13.1.tgz", @@ -11632,6 +11653,15 @@ "node": ">=6" } }, + "node_modules/css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dev": true, + "dependencies": { + "tiny-invariant": "^1.0.6" + } + }, "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -33646,9 +33676,9 @@ } }, "node_modules/raf-schd": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.2.tgz", - "integrity": "sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", "dev": true }, "node_modules/rafz": { @@ -33885,21 +33915,89 @@ } }, "node_modules/react-beautiful-dnd": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-3.0.0.tgz", - "integrity": "sha512-GP30iqV9vlFW3QG6RRL9yOQyzsFwQ9+2KsKfLZ3AkgfBg0O0m59LysQgQKBQMHUGrvZLM3CghUCE9h1X1nonig==", + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz", + "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==", "dev": true, "dependencies": { - "babel-runtime": "^6.26.0", - "invariant": "^2.2.2", - "memoize-one": "^3.0.1", - "prop-types": "^15.6.0", - "raf-schd": "^2.0.2", - "react-motion": "^0.5.2", - "react-redux": "^5.0.6", - "redux": "^3.7.2", - "redux-thunk": "^2.2.0", - "reselect": "^3.0.1" + "@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", + "react-dom": "^16.8.5 || ^17.0.0" + } + }, + "node_modules/react-beautiful-dnd/node_modules/@types/react-redux": { + "version": "7.1.23", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", + "integrity": "sha512-D02o3FPfqQlfu2WeEYwh3x2otYd2Dk1o8wAfsA0B1C2AJEFxE663Ozu7JzuWbznGgW248NaOF6wsqCGNq9d3qw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, + "node_modules/react-beautiful-dnd/node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/react-beautiful-dnd/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==", + "dev": true + }, + "node_modules/react-beautiful-dnd/node_modules/react-redux": { + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", + "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", + "dev": true, + "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" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/react-beautiful-dnd/node_modules/react-redux/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==", + "dev": true + }, + "node_modules/react-beautiful-dnd/node_modules/use-memo-one": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz", + "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" } }, "node_modules/react-bootstrap-tabs": { @@ -36560,23 +36658,14 @@ } }, "node_modules/redux": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", - "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", + "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", "dev": true, "dependencies": { - "lodash": "^4.2.1", - "lodash-es": "^4.2.1", - "loose-envify": "^1.1.0", - "symbol-observable": "^1.0.3" + "@babel/runtime": "^7.9.2" } }, - "node_modules/redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==", - "dev": true - }, "node_modules/redux-undo": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/redux-undo/-/redux-undo-1.0.1.tgz", @@ -36904,12 +36993,6 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, - "node_modules/reselect": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz", - "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=", - "dev": true - }, "node_modules/resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", @@ -46417,6 +46500,18 @@ "find-up": "^2.1.0" } }, + "redux": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", + "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "dev": true, + "requires": { + "lodash": "^4.2.1", + "lodash-es": "^4.2.1", + "loose-envify": "^1.1.0", + "symbol-observable": "^1.0.3" + } + }, "supports-color": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", @@ -46904,6 +46999,27 @@ "integrity": "sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA==", "dev": true }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "requires": { + "react-is": "^16.7.0" + } + } + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -47097,18 +47213,6 @@ "requires": { "@types/react": "*", "redux": "^4.0.0" - }, - "dependencies": { - "redux": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", - "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", - "dev": true, - "requires": { - "loose-envify": "^1.4.0", - "symbol-observable": "^1.2.0" - } - } } }, "@types/react-swipeable-views": { @@ -52272,6 +52376,15 @@ } } }, + "css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dev": true, + "requires": { + "tiny-invariant": "^1.0.6" + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -69715,9 +69828,9 @@ } }, "raf-schd": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.2.tgz", - "integrity": "sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", "dev": true }, "rafz": { @@ -69916,21 +70029,76 @@ } }, "react-beautiful-dnd": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-3.0.0.tgz", - "integrity": "sha512-GP30iqV9vlFW3QG6RRL9yOQyzsFwQ9+2KsKfLZ3AkgfBg0O0m59LysQgQKBQMHUGrvZLM3CghUCE9h1X1nonig==", + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz", + "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==", "dev": true, "requires": { - "babel-runtime": "^6.26.0", - "invariant": "^2.2.2", - "memoize-one": "^3.0.1", - "prop-types": "^15.6.0", - "raf-schd": "^2.0.2", - "react-motion": "^0.5.2", - "react-redux": "^5.0.6", - "redux": "^3.7.2", - "redux-thunk": "^2.2.0", - "reselect": "^3.0.1" + "@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" + }, + "dependencies": { + "@types/react-redux": { + "version": "7.1.23", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", + "integrity": "sha512-D02o3FPfqQlfu2WeEYwh3x2otYd2Dk1o8wAfsA0B1C2AJEFxE663Ozu7JzuWbznGgW248NaOF6wsqCGNq9d3qw==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "requires": { + "react-is": "^16.7.0" + } + }, + "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==", + "dev": true + }, + "react-redux": { + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", + "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", + "dev": true, + "requires": { + "@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" + }, + "dependencies": { + "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==", + "dev": true + } + } + }, + "use-memo-one": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz", + "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==", + "dev": true, + "requires": {} + } } }, "react-bootstrap-tabs": { @@ -72023,23 +72191,14 @@ } }, "redux": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", - "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", + "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", "dev": true, "requires": { - "lodash": "^4.2.1", - "lodash-es": "^4.2.1", - "loose-envify": "^1.1.0", - "symbol-observable": "^1.0.3" + "@babel/runtime": "^7.9.2" } }, - "redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==", - "dev": true - }, "redux-undo": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/redux-undo/-/redux-undo-1.0.1.tgz", @@ -72302,12 +72461,6 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, - "reselect": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz", - "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=", - "dev": true - }, "resize-observer-polyfill": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index ed502212..aadac172 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -124,7 +124,7 @@ "react": "^16.13.1", "react-app-rewired": "^2.1.9", "react-autosuggest": "^10.0.2", - "react-beautiful-dnd": "^3.0.0", + "react-beautiful-dnd": "^13.1.0", "react-bootstrap-tabs": "^2.0.0", "react-codemirror2": "^6.0.1", "react-collapsible": "^2.8.0", diff --git a/frontend/src/components/GenericDraggable.js b/frontend/src/components/GenericDraggable.js index 5da2cb06..cd8c31cb 100644 --- a/frontend/src/components/GenericDraggable.js +++ b/frontend/src/components/GenericDraggable.js @@ -1,10 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Draggable } from 'react-beautiful-dnd'; +import React from "react"; +import PropTypes from "prop-types"; +import { Draggable } from "react-beautiful-dnd"; /** * The most basic Draggable that works with react-beautiful-dnd. Add as a child to any Droppable. - * + * * @author Silas Hsu */ class GenericDraggable extends React.PureComponent { @@ -14,23 +14,30 @@ class GenericDraggable extends React.PureComponent { */ draggableId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, isDragDisabled: PropTypes.bool, // Whether to disable dragging. Default is false. + index: PropTypes.number, }; /** * @inheritdoc */ render() { + const { draggableId, isDragDisabled, index, children } = this.props; return ( - - {(provided, snapshot) => ( -
-
- {this.props.children} + + {(provided, snapshot) => ( +
+
+ {children} +
+ {provided.placeholder}
- {provided.placeholder} -
- )} - + )} + ); } } diff --git a/frontend/src/components/trackContainers/ReorderableTrackContainer.js b/frontend/src/components/trackContainers/ReorderableTrackContainer.js index 07a5d362..e99b0387 100644 --- a/frontend/src/components/trackContainers/ReorderableTrackContainer.js +++ b/frontend/src/components/trackContainers/ReorderableTrackContainer.js @@ -1,13 +1,13 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import GenericDraggable from '../GenericDraggable'; -import GenericDroppable from '../GenericDroppable'; -import TrackModel from '../../model/TrackModel'; -import OpenInterval from '../../model/interval/OpenInterval'; +import React from "react"; +import PropTypes from "prop-types"; +import GenericDraggable from "../GenericDraggable"; +import GenericDroppable from "../GenericDroppable"; +import TrackModel from "../../model/TrackModel"; +import OpenInterval from "../../model/interval/OpenInterval"; /** * Track container where the tracks can be dragged and dropped. - * + * * @author Silas Hsu */ class ReorderableTrackContainer extends React.PureComponent { @@ -25,7 +25,7 @@ class ReorderableTrackContainer extends React.PureComponent { }; static defaultProps = { - onTracksChanged: () => undefined + onTracksChanged: () => undefined, }; constructor(props) { @@ -39,7 +39,7 @@ class ReorderableTrackContainer extends React.PureComponent { * Gets an array of intervals describing how adjacent tracks should group into draggables. Non-selected tracks will * never drag with adjacent tracks. Any adjacent selected tracks will group together. This method guarantees that * returned intervals are sorted and will never overlap. - * + * * @return {OpenInterval[]} - intervals describing how adjacent tracks should group into draggables */ getTrackGroupings() { @@ -64,30 +64,33 @@ class ReorderableTrackContainer extends React.PureComponent { /** * Takes an interval of `this.props.trackElements` and puts them in one GenericDraggable so they drag together. - * + * * @param {OpenInterval} interval - indices, expressed as a range, of track elements to make draggable * @return {JSX.Element} - draggable track element(s) */ - bundleTracksInInterval(interval) { + bundleTracksInInterval(interval, index) { if (interval.getLength() === 0) { return null; } const tracks = this.props.trackElements.slice(...interval); const key = tracks[0].key; - return {tracks}; + return ( + + {tracks} + + ); } /** * Callback for when a user has just finished a drag-and-drop. Computes a new track order and requests the change. - * + * * @param {DropResult} dropResult - object from react-beautiful-dnd */ tracksDropped(dropResult) { if (!dropResult.destination) { return; } - - const {trackModels, onTracksChanged} = this.props; + const { trackModels, onTracksChanged } = this.props; const fromIndex = dropResult.source.index; const toIndex = dropResult.destination.index; let newAdjacencies = this.adjacencies.slice(); @@ -108,8 +111,8 @@ class ReorderableTrackContainer extends React.PureComponent { */ render() { this.adjacencies = this.getTrackGroupings(); - const tracks = this.adjacencies.map(this.bundleTracksInInterval); - return {tracks}; + const tracks = this.adjacencies.map((interval, index) => this.bundleTracksInInterval(interval, index)); + return {tracks}; } }