Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 1x 1x 1x | import React, { Children, cloneElement, Component } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import Paper from '../../atoms/Paper';
import withStyle from '../../Theme/withStyle';
import Indicator from './Indicator';
class Tabs extends Component {
state = {
activeTab: 0,
domNode: null,
};
get activeTab() {
return get(this.props, 'activeTab', this.state.activeTab);
}
get children() {
const { children, color, noIndicator } = this.props;
const { activeTab } = this;
const childrenArray = Children.toArray(children);
return childrenArray.map((child, index) => {
const isActive = index === activeTab;
const nextProps = {
hardLeft: noIndicator && index > 0 ? true : undefined,
hardRight: noIndicator && index < childrenArray.length - 1 ? true : undefined,
hardBottom: noIndicator ? undefined : true,
onClick: event => {
this.setState({ activeTab: index });
this.props.onChange(index);
const { onClick } = child.props;
if (typeof onClick === 'function') onClick(event);
},
};
if (isActive) {
Object.assign(nextProps, {
color: child.props.color || color,
});
}
return cloneElement(child, nextProps);
});
}
ref = domNode => this.setState({ domNode });
render() {
const {
activeTab,
center,
children,
color,
indicatorHeight,
getColor,
noIndicator,
onChange,
reverse,
right,
...rest
} = this.props;
const { domNode } = this.state;
return (
<Paper {...rest} atomRef={this.ref}>
{this.children}
{!noIndicator && (
<Indicator
activeTab={this.activeTab}
color={getColor(color)}
height={indicatorHeight}
domNode={domNode}
/>
)}
</Paper>
);
}
}
Tabs.propTypes = {
// # of the active tab
activeTab: PropTypes.number, // eslint-disable-line react/require-default-props
// Align tabs to center
center: PropTypes.bool,
// Tabs
children: PropTypes.node.isRequired,
// Active tab color
color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
// Privider utility
getColor: PropTypes.func.isRequired,
// Indicator height
indicatorHeight: PropTypes.number,
// Do not render indicator
noIndicator: PropTypes.bool,
// Tab click handler
onChange: PropTypes.func,
// Reverse tabs
reverse: PropTypes.bool,
// Align tabs to end
right: PropTypes.bool,
};
Tabs.defaultProps = {
center: false,
color: 'text',
indicatorHeight: 2,
noIndicator: false,
onChange() {},
reverse: false,
right: false,
};
Tabs.displayName = 'Tabs';
export const SimpleTabs = Tabs;
export default withStyle(Tabs);
|