standard-resume/lib/DateRange.js

The Standard Resume ReactJS component.

'use strict';

var React = require('react');
var moment = require('moment');

var DATE_FORMAT = 'MMM, YYYY';
var DATE_YEAR_FORMAT = 'YYYY';

var DateRange = React.createClass({
  displayName: 'DateRange',

  propTypes: {
    start: React.PropTypes.object.isRequired,
    stop: React.PropTypes.object.isRequired,
    isCurrent: React.PropTypes.bool.isRequired,
    className: React.PropTypes.string
  },

  render: function render() {
    var start;
    var stop;

    // No dates at all
    if (!this.props.start.month && !this.props.start.year && !this.props.stop.month && !this.props.stop.year) {
      return false;
    }

    if (this.props.start) {
      if (this.props.start.month && this.props.start.year) {
        start = moment(this.props.start.month + '-' + this.props.start.year, 'MM-YYYY');
        start = start.format(DATE_FORMAT);
      } else if (this.props.start.year) {
        start = moment(this.props.start.year, 'YYYY');
        start = start.format(DATE_YEAR_FORMAT);
      }
    }

    if (this.props.isCurrent) {
      stop = 'Current';
    } else if (this.props.stop.month && this.props.stop.year) {
      stop = moment(this.props.stop.month + '-' + this.props.stop.year, 'MM-YYYY');
      stop = stop.format(DATE_FORMAT);
    } else if (this.props.stop.year) {
      stop = moment(this.props.stop.year, 'YYYY');
      stop = stop.format(DATE_YEAR_FORMAT);
    }

    return React.createElement(
      'span',
      { className: this.props.className },
      start,
      ' – ',
      stop
    );
  }

});

module.exports = DateRange;