SortableJS / react-sortablejs

React bindings for SortableJS
http://sortablejs.github.io/react-sortablejs/
MIT License
1.98k stars 206 forks source link

Use Symbol for metadata for tracking row state. #209

Open blujedis opened 3 years ago

blujedis commented 3 years ago

Is your feature request related to a problem? Please describe.

React-Sortablejs mutates the objects you pass in to maintain whether items are selected for example for multi-drag. Or filtered to exclude from dragging etc.

This means you have to transform the data on the way back out before pushing to DB. Not the end of the world but a better practice might be to use a Symbol for those props. This way they would be discarded when stringifying.

I use this technique with loggers as you wouldn't want your output to contain meta information that tags along throughout it's life/state before being realized to file console blah blah.

Describe the solution you'd like

Change the type "ItemInterface" to the following shape:

export const META = Symbol.for('META');

export interface ItemInterface {

  [META]?: {
    selected?: boolean;
    chosen?: boolean;
    filtered?: boolean;
    [key: string]: any; // just in case user wants to add props here.
  };

  id: string | number;

}

Describe alternatives you've considered

Helper function to prune the data or something. Not nearly as elegant obviously.

Additional context

If you're up for this I'd be happy to do it and make a PR. I can't imagine it would take me too long to add this feature. Then maybe add an example or two.

I'd add also that this would allow the user to also be able to add tag along data/props as well which can be handy.

rijx commented 2 years ago

An alternative could be to use Object.defineProperty with enumerable: false. Unfortunately you'll have more work right now if you need clean output.

jonschlinkert commented 2 years ago

Or you could just clone your own object before passing it.