Allow final layout to be customised

[michaeljones]

Hi,

This is a potential implementation for #47 if you consider supporting it. The idea is to allow the final layout of the input & tags to be customised as some changes are harder achieve with CSS than by changing the order of the tags.

My use case is wanting a larger input field and the tags listed below.

One note is that I've done this against the pre-react-0.14 code base as I'm not using react-0.14 quite yet. I think it should be easily rebased if you think it is worth including.

From the commit message:

We move the final layout of the tags & input into a function provided by
the props with a default implementation.

The default reproduces the current layout but the mechanism allows
client code to override the final layout so that, for example, the input
can appear above the tags instead of after them.

We use function.call to pass the 'this' down to the layout function so
that it can access this.props and generally be an extension of the
render function.

An alternative approach would be to have a 'flip' prop which put the input first then the tags. It would be a more focussed change. This is a more general solution but might open things up too much. Not sure. Or perhaps I'm missing a trick completely and this isn't necessary.

Cheers,
Michael

[olahol]

Thank you Michael, I will take a look at this after work, sorry I missed your other issue.

[michaeljones]

No trouble! Thanks for the prompt response.

[michaeljones]

Hi, can I prod you a little on this? Very happy if you either accept or reject it but it would be great to know.

Here is what I'm currently doing with the tags input and why I'd like this functionality.

If you'd rather not support this then no trouble.

[olahol]

Sorry Michael, I totally forgot about this pull request 😞

I have done a major update to react-tagsinput to version 3 which is much easier to customize, can you take a look and see if this works for your use case?

[michaeljones]

Will do! I'll close this for now and re-open if there is an issue. Thanks for the update!

[michaeljones]

My code changes no longer apply but I feel the essence of this pull request is still unresolved with version 3. I think your changes are great but they focus on being able to customize the tags and customize the input but not the order of the tags and the input. ie. I cannot use version 3 to place the input before the tags as in my example above. Perhaps this is achievable with CSS in some way but I feel like the order of the elements is difficult to work around.

That said, I completely understand if what I'm trying to do is beyond the scope of this project. That's your call!

Cheers,
Michael

[olahol]

Thank you Michael, I will take a look at implementing layout from your pull request into version 3.

[olahol]

Hello Micheal, I've added a renderLayout prop in version 3.0.3 that should do what you want.

[michaeljones]

Looks great! Thank you very much. I'll try to give it a go and report back if there are any issues!