+ {typeof children === 'function' ? children({ attributes, listeners }) : children}
+
+ );
+};
+
+const SortableList = ({ items, onDragEnd, children }) => {
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 5,
+ },
+ }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ }),
+ );
+
+ return (
+
+
})
@@ -77,11 +111,38 @@ const SortableItem = sortableElement(({ value, enabled, startEditLink, deleteLin
);
-});
+};
-const SortableContainer = sortableContainer(({ children }) => (
-
{children}
-));
+const SortableList = ({ items, enabled, onDragEnd, startEditLink, deleteLink }) => {
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 6,
+ },
+ }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ }),
+ );
+
+ return (
+
+ item.key)} strategy={verticalListSortingStrategy}>
+
+ {items.map((item) => (
+
+ ))}
+
+
+
+ );
+};
class QuickLinksOptions extends PureComponent {
constructor() {
@@ -188,24 +249,28 @@ class QuickLinksOptions extends PureComponent {
return result;
};
-onSortStart = () => {
- if (this.quicklinksContainer && this.quicklinksContainer.current) {
- this.quicklinksContainer.current.classList.add('dragging');
- }
-};
+ handleDragEnd = (event) => {
+ const { active, over } = event;
+
+ if (!over || !this.state.enabled) return;
+ if (active.id === over.id) return;
-onSortEnd = ({ oldIndex, newIndex }) => {
- if (!this.state.enabled) return;
- if (oldIndex === newIndex) return;
- const newItems = this.arrayMove(this.state.items, oldIndex, newIndex);
+ const oldIndex = this.state.items.findIndex((item) => item.key === active.id);
+ const newIndex = this.state.items.findIndex((item) => item.key === over.id);
- this.silenceEvent = true;
- this.setState({ items: newItems }, () => {
- localStorage.setItem('quicklinks', JSON.stringify(newItems));
- EventBus.emit('refresh', 'quicklinks');
- setTimeout(() => { this.silenceEvent = false; }, 0);
- });
-};
+ if (oldIndex === -1 || newIndex === -1) return;
+
+ const newItems = arrayMove(this.state.items, oldIndex, newIndex);
+
+ this.silenceEvent = true;
+ this.setState({ items: newItems }, () => {
+ localStorage.setItem('quicklinks', JSON.stringify(newItems));
+ EventBus.emit('refresh', 'quicklinks');
+ setTimeout(() => {
+ this.silenceEvent = false;
+ }, 0);
+ });
+ };
componentDidMount() {
@@ -339,27 +404,13 @@ onSortEnd = ({ oldIndex, newIndex }) => {
aria-hidden={!enabled}
>
-
- {this.state.items.map((item, index) => (
- this.startEditLink(data)}
- deleteLink={(key, e) => this.deleteLink(key, e)}
- />
- ))}
-
+ this.startEditLink(data)}
+ deleteLink={(key, e) => this.deleteLink(key, e)}
+ />