ih-pagelet-checklists/src/components/ChecklistItem.jsx

Interaction Hub Peoplesoft Checklists

import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import Card from 'material-ui/lib/card/card';
import CardText from 'material-ui/lib/card/card-text';
import ListItem from 'material-ui/lib/lists/list-item';
import RaisedButton from 'material-ui/lib/raised-button';

import DoneIcon from 'material-ui/lib/svg-icons/action/done';
import ToDoIcon from 'material-ui/lib/svg-icons/action/report-problem';

const { string } = PropTypes;

export default class ChecklistItem extends Component {


  render() {

    let icon = <ToDoIcon/>;
    let url = null;
    let dueDate = null;
    let dueDateSubtitle = ' ';

    let statusJsx = null;
    let contactJsx = null;
    let dueDateJsx = null;

    if (this.props.itemStatusDescription !== 'Initiated') {
      icon = <DoneIcon/>;
    }

    if (this.props.url) {
      icon = <ToDoIcon/>;
      url = (
        <div style={{ padding: 20, textAlign: 'center'}}>
          <RaisedButton
            backgroundColor="#e00122"
            label="Review & Complete"
            primary
            linkButton
            href={this.props.url}
          />
        </div>
      );
    }

    if (this.props.dueDt) {
      dueDate = moment(this.props.dueDt).format('MM/DD/YYYY');
      dueDateSubtitle = 'Due by ' + moment(this.props.dueDt).format('MM/DD');
    }

    if (this.props.itemStatusDescription) {
      statusJsx = <div><span className="ih-checklist-cardTxt">Status:</span> {this.props.itemStatusDescription}<br/></div>;
    }

    if (this.props.responsibleName) {
      contactJsx = <div><span className="ih-checklist-cardTxt">Contact:</span> {this.props.responsibleName}<br/></div>;
    }

    if (dueDate) {
      dueDateJsx = <div><span className="ih-checklist-cardTxt">Due:</span> {dueDate}<br/></div>;
    }

    return (
      <ListItem
        primaryText={this.props.title}
        secondaryText={dueDateSubtitle}
        leftAvatar={icon}
        disableTouchRipple
        nestedItems={[
          (<Card key="ChecklistItems" style={{backgroundColor: '#EEEEEE'}}>
            <CardText>
              <Card style={{backgroundColor: 'white'}} initiallyExpanded={false}>
                <CardText >
                  {statusJsx}
                  {contactJsx}
                  {dueDateJsx}
                  <br/>
                  <div
                    className="content"
                    dangerouslySetInnerHTML={{
                      __html: this.props.information,
                    }} />
                  {url}
                </CardText>
              </Card>
            </CardText>
          </Card>)]}
      />
    );
  }
}

ChecklistItem.propTypes = {
  title: string.isRequired,
  dueDt: string.isRequired,
  itemStatusDescription: string,
  responsibleName: string,
  information: string,
  url: string,
};