[TransferList] Add new component

[mbrookes]

Preview: https://deploy-preview-15232--material-ui.netlify.com/demos/transfer-list/

[mui-pr-bot]

No bundle size changes comparing f1e2e55...4a32c2f

Generated by 🚫 dangerJS against 4a32c2f

[oliviertassinari]

What do you think of

• Having only two buttons in the middle but a checkbox at the top like Ant to select everything? I find it more intuitive.
• Creating a new documentation page for this component demo, like https://ant.design/components/transfer/?

[joshwooding]

• Creating a new documentation page for this component demo, like https://ant.design/components/transfer/?

Maybe creating a new section to differentiate it from base components as well?

[mbrookes]

Having only two buttons in the middle

You can have only two buttons if you like – it's addressed in the demo description. Why not provide useful code that can be omitted, rather than omitting it and it having to be recreated if required?

I don't believe the list component has the concept of a "select-all" checkbox. The double chevron is a common pattern; also, one click vs. two.

Creating a new documentation page for this component demo

Then it becomes a component in its own right, needing tests and types. It's a simple, well structured demo (compared to some of the monoliths we have adopted), and is directly related to lists. If someone wants to run with it and give it a bunch of features, be my guest.

[oliviertassinari]

@mbrookes I'm not sure we are on the same page:

• The transfer component involves different core components. The link with a list component is far fetched. They are not used in the same context. I think that a dedicated /demos/transfer documentation page will be better. It doesn't mean we have to export something from the core. We don't with the autocomplete. The other advantage is that we can simply track the documentation page traffic.
• I'm confused by all these buttons in the middle, I'm probably not alone. I believe we could make it simpler:
  

https://element.eleme.io/#/en-US/component/transfer#transfer

https://ant.design/components/transfer/#header

http://uxco.re/components/transfer/

I can find very little component to benchmark against 😔.

[eps1lon]

You can have only two buttons if you like – it's addressed in the demo description. Why not provide useful code that can be omitted, rather than omitting it and it having to be recreated if required?

I would support this philosophy. The alternate implementations do not have the functionality of transfering all items.

[mbrookes]

@oliviertassinari

The transfer component involves different core components.

List and Button (and Checkbox). It's a slightly more advanced list example. But if the goal is to boost the perceived number of components supported, then sure, it could have its own page.

It doesn't mean we have to export something from the core. We don't with the autocomplete.

Fair point.

@eps1lon

The alternate implementations do not have the functionality of transfering all items.

You can in a couple of @oliviertassinari's examples by using the "select-all" checkbox before transferring.

[oliviertassinari]

Nice start! :)

[mbrookes]

Here are a few more (some dated) examples. (I also found the ones you found. 🍒:wink: ). Most use the double chevron for move all, though a couple don't offer any move-all feature.
None has the "swap selected" button, so I've removed it.

https://github.com/RickStrahl/vue-mover

http://uxco.re/components/transfer/

http://otndnld.oracle.co.jp/document/products/as10g/101300/B25221_03/web.1013/b25386/web_complex008.htm

https://codinginthetrenches.com/2014/05/24/create-an-object-based-dual-list-shuttle-with-knockoutjs/

https://docs.oracle.com/cd/E29049_01/web.1112/e16182/lists.htm
(Figure 30-7 SelectManyShuttle Component)

https://xdsoft.net/jquery-plugins/shuttle/

So let's do a demo for both move-all and select-all 😄 :

I also came across the wikipedia definition:

https://en.wikipedia.org/wiki/List_builder

[oliviertassinari]

I love it :)

[oliviertassinari]

I was too lazy to report it. Nice fix!

[mbrookes]

Okay, done tweaking. :)

[oliviertassinari]

We need a good framework for finding the components that are the most requested by our users. This transfer list component is not a highly requested one, but it's always nice to have it :). We can always defer it somewhere else in the future if it's slowing us down and if relatively little people use it.

@mbrookes well done :)