Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- export default class Bill extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
- today: new Date(),
- nextWeek: new Date().addDays(7),
- };
- this.toggleSelected = this.toggleSelected.bind(this);
- }
- getDateSuffix(date) {
- if (date >= 11 && date <= 13) {
- return "th";
- }
- switch (date % 10) {
- case 1: return "st";
- case 2: return "nd";
- case 3: return "rd";
- default: return "th";
- }
- }
- toggleSelected(e, value) {
- this.props.onBillSelected(e, this);
- }
- render() {
- const today = new Date();
- const nextWeek = new Date().addDays(6);
- const daysUntilDue = this.props.dueDate < today
- ? Math.ceil(Math.abs(today.getTime() - this.props.dueDate.getTime()) / (1000 * 3600 * 24))
- : -1;
- const classNames = require('classnames');
- const billStatus = classNames({
- 'ui card': true,
- 'ui raised card': this.props.isSelected,
- });
- const dueDateClass = classNames({
- 'ui ribbon label': true,
- 'ui red ribbon label': this.props.dueDate < today,
- 'ui green ribbon label': this.props.dueDate > today && this.props.dueDate < nextWeek,
- });
- const style = {
- width: '350px'
- };
- return (
- <div className={billStatus} style={style} onClick={this.toggleSelected}>
- <div className="content">
- <div className="header">
- <div className={dueDateClass}>{this.props.amountDue}</div>
- <span>{this.props.billName}</span>
- </div>
- <div className="meta">{daysUntilDue == -1 ? `Overdue` : `Due in ${daysUntilDue}`}</div>
- <div className="ui bottom right attached label">{this.state.monthNames[this.props.dueDate.getMonth()]} {this.props.dueDate.getDate()}{this.getDateSuffix(this.props.dueDate.getDate())}</div>
- <span className="dueDate">{this.props.billedBy}</span>
- </div>
- </div>
- );
- }
- }
- "use strict";
- import React from 'react';
- import {render} from 'react-dom';
- import Bill from './components/bill.jsx';
- export default class App extends React.Component {
- render() {
- return (
- <div className="ui stackable five column grid">
- <div className="column">
- <Bill billName="Internet"
- amountDue="64"
- dueDate={new Date()}
- billedBy="Cox Communications"
- billInfo="This bill is overdue by 1 day" /></div>
- <div className="column">
- <Bill billName="G Drive"
- amountDue="5"
- dueDate={new Date().addDays(2)}
- billedBy="Google"
- billInfo="This bill is coming up: due in 2 days." />
- </div>
- <div className="column">
- <Bill billName="Automotive Insurance"
- amountDue="64"
- dueDate={new Date().addDays(10)}
- billedBy="Progress Insurance"
- billInfo="This bill is not due for another 10 days." />
- </div>
- <div className="column">
- <Bill billName="G Suite"
- amountDue="5"
- dueDate={new Date().addDays(15)}
- billedBy="Google"
- billInfo="This bill is not due for a couple weeks." />
- </div>
- </div>
- );
- }
- }
- render(<App />, document.getElementById('app'));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement