time selection bar

gistfile1.txt

/**
 * Created by shahartaite on 20/11/2016.
 */
import React, {Component} from 'react';
import styles from './time_selection_button_bar.css';
import {Translate} from 'react-redux-i18n';
import CustomTimeButton from 'js/components/custom_time_button/custom_time_button';
import consts from 'js/consts';
import classNames from 'classnames';

class TimeSelectionButtonBar extends Component {
    
    constructor(props) {
        super(props);
        this.onBtnClicked = this.onBtnClicked.bind(this);
    }
    
    onBtnClicked(timeframe) {
        this.props.clickEvent(timeframe);
    }
    
    
    render() {
        console.log('rendering timeSelectionButtonBar');
        const listOfTimes = this.props.listOfTimes;
        const isCustomButtonActive = this.props.activeMeasurementTimeFrame === consts.GRAPH_TIME_FRAMES.CUSTOM;
        const timeButtons = listOfTimes.map((time) => {
            const classes = classNames(styles.timeBtn, {[styles.timeBtnActive]: time.timeFrame === this.props.activeMeasurementTimeFrame});
            return (
                <button
                    type="button"
                    className={classes}
                    key={time.i18nKey}
                    onClick={ () => {
                        this.props.clickEvent(time.timeFrame);
                    }}>
                    <Translate value={time.i18nKey}/>
                </button>
            );
        });
        return (
            <div className={styles.buttonBarContainer}>
                {timeButtons}
                <CustomTimeButton
                    isActive={isCustomButtonActive}
                    since={this.props.startTimeForGraphs}
                    till={this.props.endTimeForGraphs} timesApproved={this.props.clickCustomEvent}/>
            </div>
        );
    }
    
    shouldComponentUpdate(nextProps) {
        return this.props.activeMeasurementTimeFrame !== nextProps.activeMeasurementTimeFrame;
    }
};

TimeSelectionButtonBar.propTypes = {
    listOfTimes: React.PropTypes.array.isRequired,
    activeMeasurementTimeFrame: React.PropTypes.string.isRequired,
    clickEvent: React.PropTypes.func.isRequired,
    startTimeForGraphs: React.PropTypes.number.isRequired,
    endTimeForGraphs: React.PropTypes.number.isRequired,
    clickCustomEvent: React.PropTypes.func.isRequired,
    
    
}
export default TimeSelectionButtonBar;