Home Reference Source

src/components/controls/DatePicker/Day.jsx

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

/**
 * Компонент Day
 * @reactProps {moment} day
 * @reactProps {boolean} disabled
 * @reactProps {boolean} selected
 * @reactProps {boolean} otherMonth
 * @reactProps {string} inputName
 * @reactProps {string} current
 * @reactProps {function} select
 * @reactProps {string} className
 */
class Day extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  /**
   * Установить новую дату на клик
   */
  onClick() {
    const { day, select, disabled, inputName } = this.props;
    if (!disabled) {
      this.props.select(day, inputName);
    }
  }

  /**
   * Проверка на то, что пришедшая из пропсов дата - сегодня
   * @param props
   */
  componentWillReceiveProps(props) {
    this.setState({
      current: props.day.isSame(moment(), 'day'),
    });
  }

  /**
   * Базовый рендер
   * @returns {*}
   */
  render() {
    const { selected, disabled, day, otherMonth, current } = this.props;
    const dis = disabled ? 'disabled' : '';
    const sel = selected ? 'selected' : '';
    const om = otherMonth ? 'other-month' : '';
    const cur = current ? 'current' : '';
    return (
      <td
        className={`n2o-calendar-day ${dis} ${sel} ${om} ${cur}`}
        onMouseDown={this.onClick}
      >
        {day.format('D')}
      </td>
    );
  }
}

Day.defaultProps = {
  disabled: false,
  selected: false,
  className: '',
};

Day.propTypes = {
  day: PropTypes.instanceOf(moment).isRequired,
  disabled: PropTypes.bool,
  selected: PropTypes.bool,
  otherMonth: PropTypes.bool,
  inputName: PropTypes.string,
  current: PropTypes.string,
  select: PropTypes.func,
  className: PropTypes.string,
};

export default Day;