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); |