cvut/fittable

View on GitHub
src/components/Controls.jsx

Summary

Maintainability
C
1 day
Test Coverage
/**
 * Wraps all controls displayed in the heading of widget.
 * Contains week controllers and functions tools.
 */

import React, { PropTypes } from 'react'
import { isScreenMediumAndUp } from '../screen'

import SemesterWeek from './SemesterWeek'
import WeekNav from './WeekNav'
import FunctionsBar from './FunctionsBar'
import WeekSwitcher from './WeekSwitcher'
import { shiftDate } from '../date'
import { semester as semesterType } from '../constants/propTypes'

const propTypes = {
  onDateChange: PropTypes.func.isRequired,
  onSettingsPanelChange: PropTypes.func.isRequired,
  viewDate: React.PropTypes.instanceOf(Date),
  days7: PropTypes.bool,
  semester: semesterType,
}

class Controls extends React.Component {

  /**
   * Handles WeekNav's previous button click event
   */
  handlePrevClick () {
    const shiftFun = shiftDate(this.props.viewDate)
    const skipWeekend = !this.props.days7 && this.props.viewDate.getDay() === 1

    let shiftBy

    if (isScreenMediumAndUp(this.props.screenSize)) {
      shiftBy = shiftFun('week', -1)
    } else {
      shiftBy = shiftFun('day', skipWeekend ? -3 : -1)
    }
    this.props.onDateChange(shiftBy)
  }

  /**
   * Handles WeekNav's next button click event
   */
  handleNextClick () {
    const shiftFun = shiftDate(this.props.viewDate)
    const skipWeekend = !this.props.days7 && this.props.viewDate.getDay() === 5

    let shiftBy

    if (isScreenMediumAndUp(this.props.screenSize)) {
      shiftBy = shiftFun('week', +1)
    } else {
      shiftBy = shiftFun('day', skipWeekend ? +3 : +1)
    }
    this.props.onDateChange(shiftBy)
  }

  /**
   * Handles a click on a week row in the WeekSelector
   */
  handleWeekClick () {
    this.refs.weekSwitcher.toggle()
  }

  render () {

    return (
      <div className="header">
        <WeekNav
          onCalClick={this.handleWeekClick.bind(this)}
          onPrevClick={this.handlePrevClick.bind(this)}
          onNextClick={this.handleNextClick.bind(this)}
          viewDate={this.props.viewDate}
          screenSize={this.props.screenSize}
        />
        <WeekSwitcher
          viewDate={this.props.viewDate}
          ref="weekSwitcher"
          onDateChange={this.props.onDateChange}
          semester={this.props.semester}
        />
        <SemesterWeek
          viewDate={this.props.viewDate}
          semester={this.props.semester}
        />
        <FunctionsBar onPanelToggle={this.props.onSettingsPanelChange} />
      </div>
    )
  }
}

Controls.propTypes = propTypes

export default Controls