From 8c60afda81f2def465ac21e71cd1a5783daf2f91 Mon Sep 17 00:00:00 2001 From: Martin Anselmo Date: Fri, 21 Jun 2024 16:31:42 -0400 Subject: [PATCH] chore: Update drag and drop sortable package to dnd-kit --- package.json | 4 +- packages/ui/src/DataTable/SortableColumns.js | 71 ++++++++++++----- .../ui/src/DataTable/dataTableEnhancer.js | 2 +- packages/ui/src/DataTable/index.js | 50 ++++++++---- yarn.lock | 78 +++++++++++-------- 5 files changed, 137 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index aea074ff..b59e7c8e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,9 @@ "@blueprintjs/core": "3.52.0", "@blueprintjs/datetime": "3.23.19", "@blueprintjs/select": "3.18.11", + "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/sortable": "^8.0.0", "@hello-pangea/dnd": "16.2.0", "@risingstack/react-easy-state": "^6.3.0", "@teselagen/react-table": "6.10.16", @@ -60,7 +63,6 @@ "react-rnd": "^10.2.4", "react-router-dom": "^4.3.1", "react-sizeme": "^2.6.12", - "react-sortable-hoc": "^0.6.8", "react-transition-group": "^2.4.0", "recompose": "npm:react-recompose@0.31.1", "redux": "^4.1.2", diff --git a/packages/ui/src/DataTable/SortableColumns.js b/packages/ui/src/DataTable/SortableColumns.js index fa906117..1288ca96 100644 --- a/packages/ui/src/DataTable/SortableColumns.js +++ b/packages/ui/src/DataTable/SortableColumns.js @@ -1,24 +1,62 @@ import React, { Component } from "react"; -import { SortableContainer } from "react-sortable-hoc"; +import { MouseSensor, useSensor, useSensors, DndContext } from "@dnd-kit/core"; +import { + SortableContext, + horizontalListSortingStrategy +} from "@dnd-kit/sortable"; +import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"; function CustomTheadComponent(props) { const headerColumns = props.children.props.children; + const mouseSensor = useSensor(MouseSensor, { + activationConstraint: { + distance: 10 + } + }); + + const sensors = useSensors(mouseSensor); + function handleDragEnd(event) { + const { active, over } = event; + + if (!over || !active) { + return; + } + + if (active.id === over.id) { + return; + } + props.onSortEnd({ + oldIndex: parseInt(active.id), + newIndex: parseInt(over.id) + }); + } + return ( -
-
- {headerColumns.map(column => { - // if a column is marked as immovable just return regular column - if (column.props.immovable === "true") return column; - // keeps track of hidden columns here so columnIndex might not equal i - return column; - })} -
-
+ + `${index}`)} + strategy={horizontalListSortingStrategy} + > +
+
+ {headerColumns.map(column => { + // if a column is marked as immovable just return regular column + if (column.props.immovable === "true") return column; + // keeps track of hidden columns here so columnIndex might not equal i + return column; + })} +
+
+ + ); } -const SortableCustomTheadComponent = SortableContainer(CustomTheadComponent); - class SortableColumns extends Component { shouldCancelStart = e => { const className = e.target.className; @@ -43,15 +81,12 @@ class SortableColumns extends Component { render() { return ( - ); } diff --git a/packages/ui/src/DataTable/dataTableEnhancer.js b/packages/ui/src/DataTable/dataTableEnhancer.js index eaa81bf3..ca364265 100644 --- a/packages/ui/src/DataTable/dataTableEnhancer.js +++ b/packages/ui/src/DataTable/dataTableEnhancer.js @@ -6,7 +6,7 @@ */ import { reduxForm } from "redux-form"; -import { arrayMove } from "react-sortable-hoc"; +import { arrayMove } from "@dnd-kit/sortable"; import { toArray, keyBy, get } from "lodash-es"; import { withProps, withState, branch, compose } from "recompose"; import withTableParams from "../DataTable/utils/withTableParams"; diff --git a/packages/ui/src/DataTable/index.js b/packages/ui/src/DataTable/index.js index c9d2c677..e3f4164e 100644 --- a/packages/ui/src/DataTable/index.js +++ b/packages/ui/src/DataTable/index.js @@ -1,7 +1,6 @@ /* eslint react/jsx-no-bind: 0 */ import React, { useState } from "react"; import ReactDOM from "react-dom"; -import { arrayMove } from "react-sortable-hoc"; import copy from "copy-to-clipboard"; import download from "downloadjs"; import { @@ -46,11 +45,12 @@ import { Callout, Tooltip } from "@blueprintjs/core"; +import { arrayMove, useSortable } from "@dnd-kit/sortable"; +import { CSS } from "@dnd-kit/utilities"; import classNames from "classnames"; import scrollIntoView from "dom-scroll-into-view"; -import { SortableElement } from "react-sortable-hoc"; import ReactTable from "@teselagen/react-table"; -import { withProps, branch, compose } from "recompose"; +import { withProps, compose } from "recompose"; import dayjs from "dayjs"; import localizedFormat from "dayjs/plugin/localizedFormat"; import ReactMarkdown from "react-markdown"; @@ -1121,21 +1121,37 @@ class DataTable extends React.Component { withProps(props => { const { columnindex } = props; return { - index: columnindex || 0 + index: columnindex || -1 }; - }), - branch(({ immovable }) => "true" !== immovable, SortableElement) - )(({ toggleSort, className, children, ...rest }) => ( -
toggleSort && toggleSort(e)} - role="columnheader" - tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly - {...rest} - > - {children} -
- )); + }) + )(({ toggleSort, immovable, className, children, style, ...rest }) => { + const { attributes, listeners, setNodeRef, transform, transition } = + useSortable({ + id: `${rest.index}`, + disabled: immovable === "true" + }); + + const sortStyles = { + transform: CSS.Transform.toString(transform), + transition + }; + + return ( +
toggleSort && toggleSort(e)} + role="columnheader" + tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly + {...rest} + > + {children} +
+ ); + }); addEntitiesToSelection = entities => { const propPresets = computePresets(this.props); diff --git a/yarn.lock b/yarn.lock index 5fbe6526..ca986d26 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2126,6 +2126,45 @@ debug "^3.1.0" lodash.once "^4.1.1" +"@dnd-kit/accessibility@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz#1054e19be276b5f1154ced7947fc0cb5d99192e0" + integrity sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ== + dependencies: + tslib "^2.0.0" + +"@dnd-kit/core@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.1.0.tgz#e81a3d10d9eca5d3b01cbf054171273a3fe01def" + integrity sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg== + dependencies: + "@dnd-kit/accessibility" "^3.1.0" + "@dnd-kit/utilities" "^3.2.2" + tslib "^2.0.0" + +"@dnd-kit/modifiers@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/modifiers/-/modifiers-7.0.0.tgz#229666dd4e8b9487f348035117f993af755b3db9" + integrity sha512-BG/ETy3eBjFap7+zIti53f0PCLGDzNXyTmn6fSdrudORf+OH04MxrW4p5+mPu4mgMk9kM41iYONjc3DOUWTcfg== + dependencies: + "@dnd-kit/utilities" "^3.2.2" + tslib "^2.0.0" + +"@dnd-kit/sortable@^8.0.0": + version "8.0.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-8.0.0.tgz#086b7ac6723d4618a4ccb6f0227406d8a8862a96" + integrity sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g== + dependencies: + "@dnd-kit/utilities" "^3.2.2" + tslib "^2.0.0" + +"@dnd-kit/utilities@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b" + integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg== + dependencies: + tslib "^2.0.0" + "@esbuild/aix-ppc64@0.20.2": version "0.20.2" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537" @@ -4772,14 +4811,6 @@ babel-preset-jest@^29.6.3: babel-plugin-jest-hoist "^29.6.3" babel-preset-current-node-syntax "^1.0.0" -babel-runtime@^6.11.6: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g== - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - bail@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d" @@ -5623,11 +5654,6 @@ core-js-compat@^3.36.1: dependencies: browserslist "^4.23.0" -core-js@^2.4.0: - version "2.6.12" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" - integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== - core-util-is@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -7886,7 +7912,7 @@ internal-slot@^1.0.4, internal-slot@^1.0.7: hasown "^2.0.0" side-channel "^1.0.4" -invariant@^2.2.1, invariant@^2.2.4: +invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -9193,7 +9219,7 @@ lodash.union@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88" integrity sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw== -lodash@^4.0.1, lodash@^4.12.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.2.1, lodash@~4.17.15: +lodash@^4.0.1, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.2.1, lodash@~4.17.15: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -10818,7 +10844,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@15, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@15, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -11071,16 +11097,6 @@ react-sizeme@^2.6.12: shallowequal "^1.1.0" throttle-debounce "^2.1.0" -react-sortable-hoc@^0.6.8: - version "0.6.8" - resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9" - integrity sha512-sUUAtNdV84AKZ2o+F5lVOOFWcyWG6aGDkNFgHoieB1zFLeWLWENkix06asPS4/GhigfuRh06aZix1j3Qx8+NSQ== - dependencies: - babel-runtime "^6.11.6" - invariant "^2.2.1" - lodash "^4.12.0" - prop-types "^15.5.7" - react-transition-group@^2.4.0, react-transition-group@^2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" @@ -11252,11 +11268,6 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - regenerator-runtime@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" @@ -12473,6 +12484,11 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.6.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" + integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ== + tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.2: version "2.6.2" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"