Home Reference Source

scripts/django_cradmin/components/CradminDateSelectorMonth.jsx

import React from "react";
import ReactDOM from "react-dom";


export default class CradminDateSelectorMonth extends React.Component {
  static get defaultProps() {
    return {
      signalNameSpace: null,
      labelCssClass: "",
      extraSelectProperties: {},
      labelText: "Month",
      monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Des'],
      useLabels: true,
      initialMonth: new Date().getUTCMonth()
    }
  }

  constructor(props) {
    super(props);
    this._name = `django_cradmin.components.CradminDateSelectorMonth.${this.props.signalNameSpace}`;
    this.logger = new window.ievv_jsbase_core.LoggerSingleton().getLogger(
      'django_cradmin.components.CradminDateSelectorMonth');

    this._handleMonthChange = this._handleMonthChange.bind(this);
    this._postInit = this._postInit.bind(this);
    this.state = {value: 0, disabled: true};
    if (!this.props.useLabels) {
      this.props.monthLabels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    }

    this._initializeSignalHandlers();
  }

  _initializeSignalHandlers() {
    new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
      `${this.props.signalNameSpace}.initializeValues`,
      this._name,
      this._postInit
    );
  }

  _postInit() {
    if (!this.state.disabled) {
      return;
    }
    this.logger.debug(`month, afterinitializeall...`);
    this.setState({disabled: false});
    this._sendDateUpdateSignal(this.props.initialMonth);
  }

  _sendDateUpdateSignal(newMonth) {
    this.setState({value: newMonth});

    if (newMonth <= 0) {
      newMonth = null;
    } else {
      newMonth--;
    }

    new window.ievv_jsbase_core.SignalHandlerSingleton().send(
      `${this.props.signalNameSpace}.MonthValueChange`, newMonth, (info) => {
        if (this.logger.isDebug) {
          this.logger.debug(`Update month: \n\tNew month: ${newMonth}\n\t${info}`);
        }
      });
  }

  _handleMonthChange(event) {
    let newMonth = event.target.value;
    this._sendDateUpdateSignal(newMonth);
  }

  renderOptions() {
    if (this.state.disabled) {
      return [];
    }

    let monthOptions = [
      <option key={`${this._name}.monthOption.0`} value={0}>{this.props.labelText}</option>
    ];
    for (let monthNumber = 1; monthNumber <= this.props.monthLabels.length; monthNumber++) {
      monthOptions.push(
        <option key={`${this._name}.monthOption.${monthNumber}`} value={monthNumber}>{this.props.monthLabels[monthNumber-1]}</option>
      );
    }
    return monthOptions;
  }

  render() {
    return (
      <label className={this.props.labelCssClass}>
        <select value={this.state.value}
                onChange={this._handleMonthChange}
                disabled={this.state.disabled}
                {...this.props.extraSelectProperties}>
          {this.renderOptions()}
        </select>
      </label>
    )
  }
}