# All files / components/Calendar Calendar.js

72.73% Statements 8/11
50% Branches 2/4
60% Functions 3/5
72.73% Lines 8/11

    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

    6x

    12x
    12x

    6x

    12x
    12x
    12x

    12x

     import React from 'react';
    import PropTypes from 'prop-types';
    import MonthNavigation from './MonthNavigation';
    import styled from 'styled-components';
    import MonthBlock from './MonthBlock';

    const OuterContainer = styled.div`
      position: absolute;
      z-index: 999;
      top: 100%;
      width: ${props => props.width};
      ${props => (props.rightAlign) ? 'right: -1px' : 'left: -1px'};
    `;

    const BlockContainer = styled.div`
      display: flex;
      border: 1px solid #E1E1E1;
      background-color: #fff;
      > * {
        &:first-child {
          margin-right: 7px;
        }
      }
    `;

    export default class Calendar extends React.Component {
      static propTypes = {
        startDate: PropTypes.instanceOf(Date).isRequired,
        endDate: PropTypes.instanceOf(Date),
        handleClick: PropTypes.func.isRequired,
        width: PropTypes.string.isRequired,
        rightAlign: PropTypes.bool,
      };

      static defaultProps = {
        endDate: null,
        rightAlign: false,
      };

      state = {
        month: this.props.startDate,
      }

      componentWillReceiveProps(newProps) {
        if (newProps.startDate !== this.props.startDate) {
          this.setState(Object.assign({}, this.state, {
            month: newProps.startDate,
          }));
        }
      }

      updateMonth = month => {
        this.setState(Object.assign({}, this.state, { month }));
      }

      render() {
        const { startDate, endDate, handleClick, width, rightAlign } = this.props;
        const { month } = this.state;
        const nextMonth = new Date(month.getFullYear(), month.getMonth() + 1, 1);

        return (
          <OuterContainer width={width} rightAlign={rightAlign}>
            <MonthNavigation
              displayedMonth={month}
              handleChange={this.updateMonth}
            />
            <BlockContainer>
              <MonthBlock
                month={month}
                startDate={startDate}
                endDate={endDate}
                handleClick={handleClick}
              />
              <MonthBlock
                month={nextMonth}
                startDate={startDate}
                endDate={endDate}
                handleClick={handleClick}
              />
            </BlockContainer>
          </OuterContainer>
        );
      }
    }