commit
518b2f48ed
|
@ -12,6 +12,7 @@ const factory = (Tab, TabContent) => {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
disableAnimatedBottomBorder: PropTypes.bool,
|
disableAnimatedBottomBorder: PropTypes.bool,
|
||||||
fixed: PropTypes.bool,
|
fixed: PropTypes.bool,
|
||||||
|
hideMode: PropTypes.oneOf(['display', 'unmounted']),
|
||||||
index: PropTypes.number,
|
index: PropTypes.number,
|
||||||
inverse: PropTypes.bool,
|
inverse: PropTypes.bool,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
|
@ -27,7 +28,8 @@ const factory = (Tab, TabContent) => {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
index: 0,
|
index: 0,
|
||||||
fixed: false,
|
fixed: false,
|
||||||
inverse: false
|
inverse: false,
|
||||||
|
hideMode: 'unmounted'
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -119,18 +121,21 @@ const factory = (Tab, TabContent) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderContents (contents) {
|
renderContents (contents) {
|
||||||
const activeIdx = contents.findIndex((item, idx) => {
|
const contentElements = contents.map((item, idx) => {
|
||||||
return this.props.index === idx;
|
return React.cloneElement(item, {
|
||||||
|
key: idx,
|
||||||
|
theme: this.props.theme,
|
||||||
|
active: this.props.index === idx,
|
||||||
|
hidden: this.props.index !== idx && this.props.hideMode === 'display',
|
||||||
|
tabIndex: idx
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (contents && contents[activeIdx]) {
|
if (this.props.hideMode === 'display') {
|
||||||
return React.cloneElement(contents[activeIdx], {
|
return contentElements;
|
||||||
key: activeIdx,
|
|
||||||
theme: this.props.theme,
|
|
||||||
active: true,
|
|
||||||
tabIndex: activeIdx
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return contentElements.filter((item, idx) => (idx === this.props.index));
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
|
|
@ -18,23 +18,23 @@ const getRenderedClassName = (tree, TargetComponent) => {
|
||||||
describe('Tabs', function () {
|
describe('Tabs', function () {
|
||||||
let tabContents, composition;
|
let tabContents, composition;
|
||||||
|
|
||||||
it('only renders the current tab', function () {
|
class Composition extends Component {
|
||||||
class Composition extends Component {
|
constructor () {
|
||||||
constructor () {
|
super();
|
||||||
super();
|
this.state = { index: 0 };
|
||||||
this.state = { index: 0 };
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<Tabs index={this.state.index}>
|
|
||||||
<Tab label="tab1">tab1</Tab>
|
|
||||||
<Tab label="tab2">tab2</Tab>
|
|
||||||
</Tabs>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Tabs index={this.state.index} {...this.props}>
|
||||||
|
<Tab label="tab1">tab1</Tab>
|
||||||
|
<Tab label="tab2">tab2</Tab>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
it('defaults to only rendering the current tab', function () {
|
||||||
// initial render
|
// initial render
|
||||||
composition = utils.renderComponent(Composition);
|
composition = utils.renderComponent(Composition);
|
||||||
|
|
||||||
|
@ -55,6 +55,37 @@ describe('Tabs', function () {
|
||||||
expect(tabContents[0].props.tabIndex).toEqual(1);
|
expect(tabContents[0].props.tabIndex).toEqual(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders inactive tabs when hideMode is set to display', function () {
|
||||||
|
// initial render
|
||||||
|
composition = utils.renderComponent(Composition, { hideMode: 'display' });
|
||||||
|
|
||||||
|
tabContents = ReactTestUtils
|
||||||
|
.scryRenderedComponentsWithType(composition, TabContent);
|
||||||
|
|
||||||
|
expect(tabContents.length).toEqual(2);
|
||||||
|
|
||||||
|
let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
||||||
|
let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
||||||
|
|
||||||
|
expect(tabOne.props.hidden).toEqual(false);
|
||||||
|
expect(tabTwo.props.hidden).toEqual(true);
|
||||||
|
|
||||||
|
// after tab change
|
||||||
|
composition.setState({ index: 1 });
|
||||||
|
composition.forceUpdate();
|
||||||
|
|
||||||
|
tabContents = ReactTestUtils
|
||||||
|
.scryRenderedComponentsWithType(composition, TabContent);
|
||||||
|
|
||||||
|
expect(tabContents.length).toEqual(2);
|
||||||
|
|
||||||
|
tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
|
||||||
|
tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
|
||||||
|
|
||||||
|
expect(tabOne.props.hidden).toEqual(true);
|
||||||
|
expect(tabTwo.props.hidden).toEqual(false);
|
||||||
|
});
|
||||||
|
|
||||||
describe('#render', function () {
|
describe('#render', function () {
|
||||||
it('does not use fixed by default', function () {
|
it('does not use fixed by default', function () {
|
||||||
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
|
const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
|
||||||
|
|
|
@ -71,6 +71,7 @@ This component acts as the wrapper and the main controller of the content that i
|
||||||
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
||||||
| `disableAnimatedBottomBorder` | `Boolean` | `false` | Disable the animation below the active tab.|
|
| `disableAnimatedBottomBorder` | `Boolean` | `false` | Disable the animation below the active tab.|
|
||||||
| `fixed` | `Boolean` | `false` | If True, the tabs will be 'fixed tabs'.|
|
| `fixed` | `Boolean` | `false` | If True, the tabs will be 'fixed tabs'.|
|
||||||
|
| `hideMode` | `enum`(`'display'`,`'unmounted'`) | `unmounted` | `unmounted` mode will not mount the tab content of inactive tabs. `display` mode will mount but hide inactive tabs. Consider holding state outside of the Tabs component before using `display` mode |
|
||||||
| `index` | `Number` | `0` | Current <Tab> |
|
| `index` | `Number` | `0` | Current <Tab> |
|
||||||
| `inverse` | `Boolean` | `false` | If True, the tabs will have an inverse style.|
|
| `inverse` | `Boolean` | `false` | If True, the tabs will have an inverse style.|
|
||||||
| `onChange` | `Function` | | Callback function that is fired when the tab changes.|
|
| `onChange` | `Function` | | Callback function that is fired when the tab changes.|
|
||||||
|
|
Loading…
Reference in New Issue