render()

in src/date-picker/day.tsx [63:105]

• 36 lines of code
• 13 McCabe index (conditional complexity)

  render() {
    const {day, from, currentRange, activeRange, empty, locale} = this.props;

    const reverse = activeRange && activeRange[1] === from;
    const dayInWeek = getDayNumInWeek(locale, getDay(day)) + 1;

    function makeSpreadRange(range: [Date, Date] | null): [Date, Date] | null {
      return range && [range[0], addDays(range[1], 1)];
    }

    const spreadRange = makeSpreadRange(currentRange);
    const disabled = this.isDisabled(day);
    const activeSpreadRange = makeSpreadRange(activeRange);
    return (
      // TODO make keyboard navigation actually work
      <button
        type='button'
        className={classNames(styles.day, styles[`Day${dayInWeek}`], {
          [styles.current]: (['date', 'from', 'to'] as const).some(this.is),
          [styles.active]: !disabled && this.is('activeDate'),
          [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
          [styles.empty]: empty,
          [styles.from]:
            (currentRange && this.isDay(currentRange[0]) && !reverse) || (activeRange && this.isDay(activeRange[0])),
          [styles.to]: (currentRange && this.isDay(currentRange[1])) || (activeRange && this.isDay(activeRange[1])),
          [styles.between]: this.inRange(currentRange),
          [styles.activeBetween]: !disabled && this.inRange(activeRange),
          [styles.first]: getDate(day) === 1,
          [styles.spread]: this.inRange(spreadRange),
          [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
          [styles.disabled]: disabled,
        })}
        onClick={this.handleClick}
        onMouseOver={this.handleMouseOver}
        onFocus={this.handleMouseOver}
        onMouseOut={this.handleMouseOut}
        onBlur={this.handleMouseOut}
        disabled={disabled}
      >
        {empty || <span className={classNames({[styles.today]: isToday(day)})}>{format(day, 'd')}</span>}
      </button>
    );
  }