Legend for rumble-charts

ChartLegend.js

'use strict';

var React = require('react'),
    _ = require('lodash'),
    styler = require('react-styler');

var ChartLegend2 = React.createClass({

    displayName: 'ChartLegend2',

    propTypes: {
        series: React.PropTypes.array,
        colors: React.PropTypes.array,
        onChange: React.PropTypes.func
    },

    mixins: [styler.mixinFor('ChartLegend2')],

    getInitialState() {
        return {
            toggledOffSeries: []
        };
    },

    handleToggleLine(index) {
        let toggledOffSeries = _.clone(this.state.toggledOffSeries);
        let indexIndex = toggledOffSeries.indexOf(index);
        if (indexIndex !== -1) {
            toggledOffSeries.splice(indexIndex, 1);
        } else {
            toggledOffSeries.push(index);
        }
        if (toggledOffSeries.length < this.props.series.length) {
            this.setState({toggledOffSeries});
            this.props.onChange && this.props.onChange(_.clone(toggledOffSeries));
        }
    },

    render() {
        let cn = this.className;
        let {series, colors, description} = this.props;
        let {toggledOffSeries} = this.state;


        return <div className={cn()}>
            {_.map(series, (series, index) =>
                <span key={index}
                      className={cn('item', toggledOffSeries.indexOf(index) !== -1 ? 'item-disabled' : 'item-enabled')}
                      onClick={this.handleToggleLine.bind(this, index)}>
                    <span className={cn('item-bullet')} style={{backgroundColor: colors[index]}}/>
                    {series.name}
                </span>)}
            {description}
        </div>;

    }

});

module.exports = ChartLegend2;

styler.registerComponentStyles('ChartLegend2', {
    fontSize: 14,
    color: '#757575',

    '&-item': {
        marginRight: 22,
        paddingRight: 8,
        lineHeight: '1.8em',
        cursor: 'pointer',
        userSelect: 'none',
        display: 'inline-flex',
        flexWrap: 'nowrap',
        alignItems: 'center'
    },
    '&-item:hover': {
        color: '#464646'
    },
    '&-item-disabled': {
        opacity: 0.35
    },
    '&-item-bullet': {
        display: 'inline-block',
        verticalAlign: 'middle',
        width: 12,
        height: 12,
        borderRadius: '100%',
        marginRight: 8
    },

    '& > p': {
        margin: '1em 0 0'
    }

});