Skip to content

Commit 8d6f0a4

Browse files
committedMay 18, 2015
Creating 'AmountBox' component. Adding indicator boxes
1 parent f4708e1 commit 8d6f0a4

File tree

2 files changed

+32
-0
lines changed

2 files changed

+32
-0
lines changed
 
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@AmountBox = React.createClass
2+
render: ->
3+
React.DOM.div
4+
className: 'col-md-4'
5+
React.DOM.div
6+
className: "panel panel-#{ @props.type }"
7+
React.DOM.div
8+
className: 'panel-heading'
9+
@props.text
10+
React.DOM.div
11+
className: 'panel-body'
12+
amountFormat(@props.amount)

‎app/assets/javascripts/components/records.js.coffee

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@
55
getDefaultProps: ->
66
records: []
77

8+
credits: ->
9+
credits = @state.records.filter (val) -> val.amount >= 0
10+
credits.reduce ((prev, curr) ->
11+
prev + parseFloat(curr.amount)
12+
), 0
13+
14+
debits: ->
15+
debits = @state.records.filter (val) -> val.amount < 0
16+
debits.reduce ((prev, curr) ->
17+
prev + parseFloat(curr.amount)
18+
), 0
19+
20+
balance: ->
21+
@debits() + @credits()
22+
823
addRecord: (record) ->
924
records = @state.records.slice()
1025
records.push record
@@ -16,6 +31,11 @@
1631
React.DOM.h2
1732
className: 'title'
1833
'Records'
34+
React.DOM.div
35+
className: 'row'
36+
React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'
37+
React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'
38+
React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'
1939
React.createElement RecordForm, handleNewRecord: @addRecord
2040
React.DOM.hr null
2141
React.DOM.table

0 commit comments

Comments
 (0)
Failed to load comments.