All files / lib/DatePicker/DatePickerDay index.js

100% Statements 13/13
100% Branches 14/14
100% Functions 2/2
100% Lines 13/13
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                                6x 6x 6x             1268x 1268x   1268x 1268x 1268x 1268x 1268x   1268x                                             89x           89x                
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@collab-ui/react';
import {
  getDate,
  getMonth,
  isDayDisabled,
  isSameDay,
  now,
} from '@collab-ui/react/utils/dateUtils';
import moment from 'moment';
 
class DatePickerDay extends React.Component {
  static displayName = 'DatePickerDay';
 
  handleClick = e => {
    const { handleDayClick } = this.context;
    const { day } = this.props;
    return (
      handleDayClick
      && handleDayClick(e, day)
    );
  };
 
  render() {
    const { day, month } = this.props;
    const { selected, focus } = this.context;
 
    const isOutsideMonth = month !== getMonth(day);
    const isSelected = isSameDay(day, selected);
    const isToday = isSameDay(day, now());
    const disabled = isDayDisabled(day, this.props);
    const hasFocus = isSameDay(day, focus);
 
    return (
      <Button
        circle
        size={28}
        disabled={disabled}
        className={
          'cui-datepicker__day' +
          `${(isSelected && ` cui-datepicker__day--selected`) || ''}` +
          `${(hasFocus && ` cui-datepicker__day--focus`) || ''}` +
          `${(isToday && ` cui-datepicker__day--today`) || ''}` +
          `${(isOutsideMonth && ` cui-datepicker__day--outside-month`) || ''}`
        }
        onClick={this.handleClick}
        ariaLabel={`${getDate(day)}`}
        aria-selected={isSelected}
        tabIndex={-1}
      >
        {getDate(day)}
      </Button>
    );
  }
}
 
DatePickerDay.contextTypes = {
  focus: PropTypes.instanceOf(moment),
  handleDayClick: PropTypes.func,
  selected: PropTypes.instanceOf(moment),
};
 
DatePickerDay.propTypes = {
  /** @prop Required day that the DatePickerDay displays */
  day: PropTypes.instanceOf(moment).isRequired,
  /** @prop Required month that the DatePickerDay displays */
  month: PropTypes.number.isRequired,
};
 
export default DatePickerDay;