Access new MDBSortable state, after sort


Topic: Access new MDBSortable state, after sort

mgtripoli pro premium asked 2 years ago

The API documentation for the MDBSortable plugin did not seem to provide any details for this, so I will be asking here.

When using the MDBSortable plugin, we pass in a list of components, and everything renders as well, perfectly fine. My question is, how to we access the new state of the updated list?

Example (using an object for a more simple representation):

Say I have an array of objects:

footballStandings = [ { teamName: "Giants", rank: 1 }, { teamName: "Eagles", rank: 2 } ]

Theoretically, using the sortable widget, I would pass this list to it. Then I move the node "Giants" into the current position of "Eagles", I would expect some sort of callback which would then give me the new state of the list. Something such as:

const getUpdatedList = values => { console.log(values); }

I would expect the "values" param to be an array with the updated position, which look something like this:

[ { teamName: "Eagles", rank: 2 }, { teamname: "Giants", rank: 1 } ]

Is there any way of accessing this new state (of the array) with the plugin? If not, I think it would be advised.


Jakub Chmura staff premium commented 2 years ago

HI @mgtripoli,

I will add a task to investigate this matter. When I find a solution, I will let you know.

Best, Kuba


Jakub Chmura staff premium answered 2 years ago

Did you try to use an onSortEnd prop like below?

<Sortable 
    onSortEnd={(a, b) => this.onSortEndHandler(a, b)}
 />

The first two arguments will return the old and new index of the moving element.

You will be able to manage your array with this values. For now, we can't add your feature because we have to done a big task with a very high priority, after that we will be able to think about new features like yours.

Best, Kuba


When using onSortEnd method, the elements are not droppable.After Dragging the elements to new position they will bounce back to the previous position. All other methods work fine with drag and drop. I am a premium user but logged in with Facebook.


Piotr Glejzer staff commented 2 years ago

I added the task to check it


jimgroome answered a year ago

Adding this here, because I've just spent the last hour working on it.

In this example we have our sortableItems as an array in the state. When the user completes a sort, the onListSort function is fired, which then runs setSortableItems, which in turn re-orders the array based on the oldIndex and newIndex parameters.

const [sortableItems, setSortableItems] = useState([
    <Item key="item-1" />,
    <Item key="item-2" />,
    <Item key="item-3" />,
    <Item key="item-4" />,
]);

const onListSort = (obj) => {
    setSortableItems((oldSortableItems) => {
        const move = (arr, old_index, new_index) => {
            while (old_index < 0) {
                old_index += arr.length;
            }
            while (new_index < 0) {
                new_index += arr.length;
            }
            if (new_index >= arr.length) {
                let k = new_index - arr.length;
                while (k-- + 1) {
                    arr.push(undefined);
                }
            }
            arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
            return arr;
        };

        let _sortableItems = [...oldSortableItems];
        _sortableItems = move(_sortableItems, obj.oldIndex, obj.newIndex);
        return _sortableItems;
    });
};

<MDBSortable items={sortableItems} listClassName="SortableList list-unstyled" onSortEnd={(obj) => onListSort(obj)} />;

I stole that move() function from here: https://www.w3resource.com/javascript-exercises/javascript-array-exercise-38.php


Krzysztof Wilk staff commented a year ago

Hi!

Thanks for this solution! :)

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.25.0
  • Device: Mac Book pro 2017
  • Browser: Chrome, Firefox
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No