standard-resume/lib/SectionItem.js

The Standard Resume ReactJS component.

'use strict';

var DateRange = require('./DateRange');
var FancyLink = require('./FancyLink');
var React = require('react');
var SectionHighlights = require('./SectionHighlights');

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

  propTypes: {
    primaryHeader: React.PropTypes.string,
    website: React.PropTypes.string,
    secondaryHeader: React.PropTypes.string,
    startDate: React.PropTypes.object,
    stopDate: React.PropTypes.object,
    isCurrent: React.PropTypes.bool,
    description: React.PropTypes.string,
    highlights: React.PropTypes.array
  },

  render: function render() {
    return React.createElement(
      'li',
      { className: 'sr-section-item' },
      React.createElement(
        FancyLink,
        { url: this.props.website },
        React.createElement(
          'h3',
          null,
          this.props.primaryHeader
        )
      ),
      React.createElement(
        'div',
        { className: 'secondary' },
        React.createElement(
          'span',
          null,
          this.props.secondaryHeader
        ),
        this.shouldShowSeparator() && React.createElement(
          'span',
          { className: 'separator' },
          '|'
        ),
        React.createElement(DateRange, {
          start: this.props.startDate,
          stop: this.props.stopDate,
          isCurrent: this.props.isCurrent
        })
      ),
      React.createElement(
        'p',
        null,
        this.props.description
      ),
      this.props.highlights && React.createElement(SectionHighlights, { highlights: this.props.highlights })
    );
  },

  // Returns true is a secondary header and date present and false otherwise
  shouldShowSeparator: function shouldShowSeparator() {
    return this.props.secondaryHeader && this.hasValidDate();
  },

  // Checks to see if there is enough date info to render a date range
  hasValidDate: function hasValidDate() {
    return this.props.startDate && this.props.stopDate && (this.props.startDate.month || this.props.startDate.year || this.props.stopDate.month || this.props.stopDate.year);
  }

});

module.exports = SectionItem;