Transfer: Support custom style for selected (right side) items

[martinkrulltott]

https://jira.dhis2.org/browse/TECH-393

As per the design for the new dimension selection modals (design spec partly attached below) the selected items (on the right side) should use a separate style compared to the available items (on the left side).

This is currently not supported, as all custom items are passed as children to Transfer, which in turn internally handles the population of the right side items (using the same custom items that were used for the left side). In addition, the selected prop only receives label / value, not the custom element itself. This leaves no intuitive way to add custom styling to the right side items.

---

Part of the design spec

[martinkrulltott]

Currently custom options are handled by the renderOption prop. I assume there needs to be a second prop in place to handle the picked options specifically. Questions:

1. Any preference / suggestions for what the two props should be called? (e.g. renderSourceOption and renderPickedOption, will use those names below in the meantime)
2. Should the renderPickedOption fallback to renderSourceOption if not provided?
3. To prevent changing renderOption to renderSourceOption (breaking change!), renderOption could contain the two parts above as children instead. This would however overload the renderOption prop, which isn't good. Suggestions / thoughts?

ping @Mohammer5 @ismay @HendrikThePendric

[Mohammer5]

I think this is already supported. In the renderOption function you can check whether the option is selected and then, depending on that, render something else.

[martinkrulltott]

Thanks for the input @Mohammer5 . It makes sense to pass selected as part of the renderOption props and let the consumer render the item accordingly. I'll create a PR to add the prop 👍

[dhis2-bot]

🎉 This issue has been resolved in version 5.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀