-
Notifications
You must be signed in to change notification settings - Fork 792
/
legend.jsx
84 lines (69 loc) · 2.52 KB
/
legend.jsx
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
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/onclick-has-role */
/**
* External dependencies
*/
const PropTypes = require( 'prop-types' );
const React = require( 'react' ),
PureRenderMixin = require( 'react-pure-render/mixin' );
const createReactClass = require( 'create-react-class' );
/**
* Internal dependencies
*/
const LegendItem = createReactClass( {
displayName: 'ModuleChartLegendItem',
mixins: [ PureRenderMixin ],
propTypes: {
checked: PropTypes.bool.isRequired,
label: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
attr: PropTypes.string.isRequired,
changeHandler: PropTypes.func.isRequired
},
clickHandler: function() {
this.props.changeHandler( this.props.attr );
},
render: function() {
return (
<li className="dops-chart__legend-option">
<label htmlFor="checkbox" className="dops-chart__legend-label is-selectable" onClick={ this.clickHandler } >
<input type="checkbox" className="dops-chart__legend-checkbox" checked={ this.props.checked } />
<span className={ this.props.className }></span>{ this.props.label }
</label>
</li>
);
}
} );
class Legend extends React.Component {
static displayName = 'ModuleChartLegend';
static propTypes = {
activeTab: PropTypes.object.isRequired,
tabs: PropTypes.array.isRequired,
activeCharts: PropTypes.array.isRequired,
availableCharts: PropTypes.array.isRequired,
clickHandler: PropTypes.func.isRequired
};
onFilterChange = ( chartItem ) => {
this.props.clickHandler( chartItem );
};
render() {
const legendColors = [ 'dops-chart__legend-color is-dark-blue' ],
activeTab = this.props.activeTab;
const legendItems = this.props.availableCharts.map( function( legendItem, index ) {
const colorClass = legendColors[ index ],
checked = ( -1 !== this.props.activeCharts.indexOf( legendItem ) );
const tab = this.props.tabs.filter( function( currentTab ) {
return currentTab.attr === legendItem;
} ).shift();
return <LegendItem key={ index } className={ colorClass } label={ tab.label } attr={ tab.attr } changeHandler={ this.onFilterChange } checked={ checked } />;
}, this );
return (
<div className="dops-chart__legend">
<ul className="dops-chart__legend-options">
<li className="dops-chart__legend-option" key="default-tab"><span className="dops-chart__legend-label"><span className="dops-chart__legend-color is-wordpress-blue"></span>{ activeTab.label }</span></li>
{ legendItems }
</ul>
</div>
);
}
}
module.exports = Legend;