itemStyles are somewhat confusing

[chrisdrackett]

I'm finding itemStyles on DraxList somewhat confusing, but maybe I'm thinking about them incorrectly. Here is what I'm finding:

• dragReleasedStyle: the style of the receiving "space" after an element is released.
• draggingStyle: seems to be the style of the "space" that the picked up item came from, but only shown when being hovered
• draggingWithoutReceiverStyle: the style of the "space" the element was picked up from if the element isn't over the list anymore.
• draggingWithReceiverStyle the style of the element in the position the original item came from when not being hovered
• receivingStyle: the style of the element that the current item will replace when released.

I found the above while trying to find a way to style the space (#37) and also trying to adjust the style of the item being dragged when it leaves the list (for example to reduce its opacity when it isn't over the list anymore.)

[lafiosca]

I'll look into this tonight and reply more thoroughly.

[lafiosca]

Ran long working on other issues tonight, hope to take a look at this this weekend. Sorry for the delay. (And sorry for repeating myself so much 😹)

[lafiosca]

To be honest, they probably are somewhat confusing. The current extent of the documentation is in the TypeScript definition comments: https://github.com/nuclearpasta/react-native-drax/blob/77ed75343be3b160171bbca5e948dea53b54d67a/src/types.ts#L644-L693

These can be individually applied directly to a DraxView via its props. When using DraxList however, we need to pass them as an object through the itemStyles prop so that it can pass them on to the individual DraxViews that it renders for the list items.

You can think of them as a series of layers that are added onto the style for an item. The style field is the basic one that is applied no matter what. The drag*Style fields are additional stylings applied for various states of dragging (or not dragging) the item. As you have surmised, these apply to the original item still sitting where it was. The analogous hover*Style fields are applied to the hovering view copy of the item which exists only during a drag. The remaining fields related to receiving/other are also applied to the non-hovering original item in the ways their comments suggest.

This is one of the features of the library that will benefit greatly from deeper documentation, and it is something I am very open to feedback and improvements upon. The goal here was to make the library as powerful and flexible as possible, while providing sensible defaults for the 80-90% use case. These fields do not all need to be specified, and indeed I imagine most folks only using a small number of them to make targeted style changes for their own purposes.

[lafiosca]

I think I will leave this issue open until we address it better in documentation and/or change the feature in a future release. Let me know if you have more comments or questions please, @chrisdrackett .