Skip to content

Commit

Permalink
chore: Update drag and drop sortable package to dnd-kit
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Anselmo authored and Martin Anselmo committed Jun 21, 2024
1 parent 06f0ba0 commit 8c60afd
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 68 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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:[email protected]",
"redux": "^4.1.2",
Expand Down
71 changes: 53 additions & 18 deletions packages/ui/src/DataTable/SortableColumns.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className={"rt-thead " + props.className} style={props.style}>
<div className="rt-tr">
{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;
})}
</div>
</div>
<DndContext
onDragStart={props.onSortStart}
onDragEnd={handleDragEnd}
modifiers={[restrictToHorizontalAxis]}
sensors={sensors}
>
<SortableContext
items={headerColumns.map((_item, index) => `${index}`)}
strategy={horizontalListSortingStrategy}
>
<div className={"rt-thead " + props.className} style={props.style}>
<div className="rt-tr">
{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;
})}
</div>
</div>
</SortableContext>
</DndContext>
);
}

const SortableCustomTheadComponent = SortableContainer(CustomTheadComponent);

class SortableColumns extends Component {
shouldCancelStart = e => {
const className = e.target.className;
Expand All @@ -43,15 +81,12 @@ class SortableColumns extends Component {

render() {
return (
<SortableCustomTheadComponent
<CustomTheadComponent
{...this.props}
lockAxis="x"
onSortStart={this.onSortStart}
axis="x"
distance={10}
onSortEnd={this.onSortEnd}
helperClass="above-dialog"
shouldCancelStart={this.shouldCancelStart}
onSortEnd={this.onSortEnd}
/>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/DataTable/dataTableEnhancer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
50 changes: 33 additions & 17 deletions packages/ui/src/DataTable/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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 }) => (
<div
className={classNames("rt-th", className)}
onClick={e => toggleSort && toggleSort(e)}
role="columnheader"
tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
{...rest}
>
{children}
</div>
));
})
)(({ 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 (
<div
style={{ ...sortStyles, ...style }}
ref={setNodeRef}
{...attributes}
{...listeners}
className={classNames("rt-th", className)}
onClick={e => toggleSort && toggleSort(e)}
role="columnheader"
tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
{...rest}
>
{children}
</div>
);
});

addEntitiesToSelection = entities => {
const propPresets = computePresets(this.props);
Expand Down
78 changes: 47 additions & 31 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]":
version "0.20.2"
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==

[email protected]:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 8c60afd

Please sign in to comment.