react-sortable-hoc | A set of higher-order components to turn any list | Frontend Framework library

Current behaviour:

I'm having a local development environment on mac from which I git push to my remote repo. My production server is on linxu and there I pull my repo. Usually this works fine but this time I'm stuck with an error I can't find a workaround for :( npm ci failing on linux because of fsevents

Steps to reproduce:

$ npm ci

I'm using react-sortable-hoc to reorder table rows with Save and Cancel buttons. However, I can't find any information or example about reverting back to original order when the Cancel button is clicked after re-ordered rows.

Can't find any info or example on the official documentation or anywhere else. It seems weird to me that there's no cancel function built in or am I missing something?

Edit: Example code

I have a requirement where the sorting of the list depends on the state which can be toggled using a button. The user should be able to sort only when he is in the editing mode. So I need to disable the sorting of the list. Can anyone help me out on how to add the disabled key to the SortableElement in react-sortable-hoc. I tired to search a working example on google but couldn't find any. Can anyone out there help me out on this one?.

The functionality is working fine in safari, edge, and chrome, the problem is only with firefox.

I'm using react-sortable-hoc react library to sort the images in grid layout but in firefox the grid layout sorting works weird...

Please test the problem here: https://codepen.io/cristobalchao/pen/JqOpEZ

What's the problem: I'm trying to set flex-wrap: wrap; and this is causing the problem of user interaction(when a user tries to sort the image (drag and drop), on click the image sticks with mouse and even if user releases the click the image is still stuck with the mouse. user need to click again to release the image)

what should happen: User should be able to drag and drop the image by simply click and hold the mouse, drag to another position and release the click. (this works in other browsers except for firefox)

Ref: https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/grid?_k=5255hk the same is working here, if I do inspect and use wrap. just inspect element apply the below code to parent container to wrap the children in grid layout

After @typescript-eslint upgrade es-lint started lint errors like:

28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars

in source code:

I'm currently trying to add react-sortable-hoc to a list component and I'm running into a number of bugs when I change the incoming list of items via props. For example: if I add an item to the array, and I check the incoming props for the list, the props in the sortable component are changing (I see the new item in the list component props), but I can't get the component to re-render. I've tried shouldComponentUpdate, getDerivedStateFromProps, using PureComponent instead of Component, forceUpdate, hookifying the whole thing and setting up a useEffect for any change in props, nothing is causing a rerender and I know that the new list is getting to the component.

Is anyone else having this same problem or has anyone found a way around it?

here's how I'm setting props/state, and how I know the props are changing:

I am trying to implement both resizable and drag and drop columns in Ant Design's Table component.

I have got both working independently but cannot make them work without errors or bugs at the same time. I need to be able to drag on a column border and resize it horizontally and also be able to click on a the column header and drag and drop it.

I am looking for these functionalities to be similar to the features of this table: https://www.ag-grid.com/example.php

I have tried implementing it with react-resizable for resizable columns and both react-sortable-hoc and react-drag-listview for drag and dropping column order.

With the react-drag-listview the latest problem is that I must disable one feature when using the other, and in Firefox, this results in the error:

Uncaught TypeError: target.parentNode

I can't find any examples of both of these features being used together with the Ant D table but I'm sure it must be possible to make them work simultaneously.

TIA

We are both using react-sortable-hoc and react-dropzone and they work fine if on separate pages. However, react-sortable-hoc do not work properly when react-dropzone is used on the same page because I noticed that react-dropzone also gets triggered by the drag event from the react-sortable-hoc. (E.g. I can no longer drag an item in between other items.)

I tried adding e.preventDefault() and e.stopPropagation() on react-sortable-hoc's onSortStart event but react-dropzone is still being triggered.

What other approach can we try to make them play nice together / not allow the other to be affected?

I am using react-sortable-hoc to drag/drop and reorder items. When I do this though I want to update the database (node.js and mongodb).

Firstly, I have changed it to be a functional component which is why my syntax looks a bit different to the example.