ih-pagelet-financial-aid/src/components/FinancialAidAwards/AwardDetailItem.jsx

PS Financial Aid Pagelet

import React, { Component, PropTypes } from 'react';
import numeral from 'numeral';
import Table from 'material-ui/lib/table/table';
import TableRow from 'material-ui/lib/table/table-row';
import TableBody from 'material-ui/lib/table/table-body';
import TableHeader from 'material-ui/lib/table/table-header';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import Card from 'material-ui/lib/card/card';
import CardTitle from 'material-ui/lib/card/card-title';
import CardText from 'material-ui/lib/card/card-text';
import CardActions from 'material-ui/lib/card/card-actions';
import ListItem from 'material-ui/lib/lists/list-item';
import RaisedButton from 'material-ui/lib/raised-button';
import BlockIcon from 'material-ui/lib/svg-icons/content/block';
import AcceptIcon from 'material-ui/lib/svg-icons/navigation/check';
import CancelIcon from 'material-ui/lib/svg-icons/navigation/cancel';
import NewIcon from 'material-ui/lib/svg-icons/action/report-problem';

const { any, string } = PropTypes;

export default class AwardDetailItem extends Component {
  render() {
    const award = this.props;
    let awardIcon = <NewIcon/>;
    if (award.awardStatus === 'A') {
      awardIcon = <AcceptIcon />;
    }
    if (award.awardStatus === 'D') {
      awardIcon = <BlockIcon />;
    }
    if (award.awardStatus === 'C') {
      awardIcon = <CancelIcon />;
    }
    return (
      <ListItem
        key={'li' + award.awardName}
        primaryText={award.awardName}
        leftAvatar={awardIcon}
        disableTouchRipple
        secondaryText= {award.statusDescription + ' - ' + numeral(award.offeredBalance).format('$0,0.00')}
        nestedItems = {[
          (<Card key={award.awardName + '-award-detail-item'} style={{backgroundColor: '#EEEEEE'}}>
            <CardText>
              <Card style={{backgroundColor: 'white'}}>
              <CardTitle className="ih-financialAid-cardTitle" style={{backgroundColor: '#e0e0e0'}} title="Award Summary Total" subtitle={award.awardName} />
              <Table selectable={false} multiSelectable={false} fixedHeader>
                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                  <TableRow selectable={false}>
                    <TableHeaderColumn>Offered</TableHeaderColumn>
                    <TableHeaderColumn>Accepted</TableHeaderColumn>
                  </TableRow>
                </TableHeader>
                <TableBody displayRowCheckbox={false}>
                  <TableRow selectable={false}>
                    <TableRowColumn selectable={false}>{numeral(award.offeredBalance).format('$0,0.00')}</TableRowColumn>
                    <TableRowColumn selectable={false}>{numeral(award.acceptedBalance).format('$0,0.00')}</TableRowColumn>
                  </TableRow>
                </TableBody>
              </Table>
            </Card>
            </CardText>
          </Card>),
        ]}/>
    );
  }
}

AwardDetailItem.propTypes = {
  awardName: string.isRequired,
  statusDescription: string.isRequired,
  awardStatus: string.isRequired,
  offeredBalance: any,
  acceptedBalance: any,
  disbursedBalance: any,
};

AwardDetailItem.defaultProps = {
  offeredBalance: 0,
  acceptedBalance: 0,
  disbursedBalance: 0,
};