Props to show hide labels

[oyeanuj]

Hi @davidchin! Another PR, this time to make the showing or hiding of labels configurable. It is in the same vein as #24 but with more granular controls and on the refactored code base.

Hope this helps!

Thank you!

[davidchin]

Thanks for your work! However, I think hiding/showing labels should be done using CSS instead. Can you achieve the same result using CSS?

[oyeanuj]

@davidchin Good question, theoretically you can but with two drawbacks.

1. Its harder if you want more fine-grained programmatic control based on certain conditions. CSS mostly allows for a blanket show or hide option.

2. You can mitigate the above if you are using CSS-in-JS solution or passing explicit style attribute but both those solutions aren't necessarily the cleanest or the most declarative.

Thoughts?

[davidchin]

Hey @oyeanuj, thanks for your reply! Few good points there. However, I still think controlling the visual appearance of a component should be done using CSS. I'm saying this because, if the visibility of every child element can be controlled using props, then I have to introduce a lot of boolean flags, not only the ones you've added in this PR. I want to avoid that if possible.

If you want to hide certain labels based on the model value, perhaps you can set a formatLabel function and return an empty string conditionally. I think formatLabel has two parameters - value and type. So you can definitely try using that to hide a certain label from the user.

One thing I haven't done is that if formatLabel returns undefined or a blank string, Label still gets rendered. So what you might want to add/change is to only render Label in DOM if there's something to display.

[oyeanuj]

@davidchin Thanks for the reply. So would you accept a PR that makes the following change?

One thing I haven't done is that if formatLabel returns undefined or a blank string, Label still gets rendered. So what you might want to add/change is to only render Label in DOM if there's something to display.

[tonysepia]

Can we please have an example CSS to hide the labels? Thank you!

[tonysepia]

Here is my solution to the problem, using formatLabel prop:

formatLabel={(value, type) => {
  if (["min", "max"].indexOf(type) > -1) {
    return "";
  } else return value;
}}