forked from GetStream/stream-react-example
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
93 lines (83 loc) · 1.59 KB
/
Copy pathindex.js
File metadata and controls
93 lines (83 loc) · 1.59 KB
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
import React, { Component } from 'react';
require('./styles.css');
/**
* Tab component
*/
export class Tab extends Component {
/**
* defaultProps
* @type {{active: boolean}}
*/
static defaultProps = {
active: false,
};
/**
* render
* @returns markup or {null}
*/
render() {
return this.props.active ? this.props.children : null;
}
}
/**
* Tabs index component
*/
export class Tabs extends Component {
/**
* state
* @type {{active: number}}
*/
state = {
active: 0,
};
/**
* handleClick
* @param e
* @param i
* @param items
*/
handleClick = (e, i, items) => {
this.setState({
active: i,
});
};
/**
* render
* @returns markup
*/
render() {
const indicator = {
left: 100 / 4 * this.state.active + '%',
width: 100 / 4 + '%',
};
const children = React.Children.toArray(this.props.children);
const items = children.map((c, i) => {
return React.cloneElement(c, {
active: i == this.state.active,
});
});
return (
<div className={this.props.className || ''}>
<header>
<div className="items">
{children.map((tab, i) => {
const active = this.state.active == i;
return (
<button
key={`tab-button-${i}`}
onClick={e =>
this.handleClick(e, i, children)}
className={active ? 'active' : ''}
>
{tab.props.label}
</button>
);
})}
</div>
<div className="indicator" style={indicator} />
</header>
{items.filter(item => item.props.active)[0]}
</div>
);
}
}