Earthbar: click outside a tab to close it about react-earthstar HOT 3 CLOSED

Maybe I'll have to do both.

• People will probably want to do other things that require reading/changing state. I imagine that adding onTabChange, activeTab props would probably do it.
• I'm trying to strike the balance between having Earthbar be flexible and having it be useful out the box. Being able to click outside of the box to close a tab seems like a pretty common request. I need to think a bit harder about this...

from react-earthstar.

Because the Earthbar's presentation is meant to be determined by the app using it (it could be horizontal, vertical, tabs, a drawer…) I think doing this in Twodays Crossing might be the right place actually. Baking into this library would be making too much of an assumption, imo.

from react-earthstar.

@sgwilym I can't find a way to do this from outside of react-earthstar.

My goal was to make a giant div that would cover the entire screen, sitting just behind the tab panel, with an onClick event that closes the tab. I ran into some difficulties:

• I think the app doesn't have the ability read or change the Earthbar's tab state from the outside?
  • It can't know when to draw the giant div itself
  • It can't close the tab
• I tried adding the giant div as a ::before pseudo-element on the actual Earthbar tab using just CSS.
  • Turns out pseudo-elements can't have onClick handlers

Ways for React-earthstar to help

• Render a div that, when clicked, closes a tab. It could be hidden by default and apps can override the CSS to make it into a screen-covering giant div like I was trying to make
• Or somehow expose the tab state to the app so it can be read and changed. I'm not sure how, since the Earthbar and the app are siblings in the tree.

from react-earthstar.