Custom tabpanel selected class #149
Conversation
| @@ -24,28 +25,37 @@ module.exports = React.createClass({ | |||
| getDefaultProps() { | |||
| return { | |||
| selected: false, | |||
| selectedClassName: null, | |||
There was a problem hiding this comment.
selectedClassName: 'ReactTabs__TabPanel--selected'
There was a problem hiding this comment.
This is null in order to satisfy inline styles condition on line 42.
There was a problem hiding this comment.
Although I do think it is too much implicit logic going on.
| const { | ||
| id, tabId, selected, | ||
| className, selectedClassName, style, children, | ||
| ...attrs, |
There was a problem hiding this comment.
The line got 105 characters long, which didn't pass the linting.
| ...attrs, | ||
| } = this.props; | ||
|
|
||
| // Only hide using inline styles if `selectedClassName` isn't provided |
There was a problem hiding this comment.
The idea is that if you specify your own custom classes, you want control over hiding/showing. With inline styles you would have to override using !important.
There was a problem hiding this comment.
We could also just follow the design of the Tab component which only uses overridable classes.
The case I ran into was that I needed hidden TabPanels to still take up their natural height, i.e. setting visibility: hidden; instead on the inline display: none;.
This PR does the following:
<TabPanel>s using a newselectedClassNameprop;display: none;to the<TabPanel>if a customselectedClassNameprop has not been provided; andMy use case is that I need to keep the contents of hidden tabs and give them a bunch of styles in order to maintain the parent's dimensions.