tab/app/assets/javascripts/components/transaction_form.jsx.coffee
2017-01-12 16:29:49 +01:00

127 lines
4 KiB
CoffeeScript

{ button, div, h3, input, option, select } = React.DOM
Action = React.createFactory React.createClass
buttonClass: (b) ->
{ giving } = @props
c = ['btn', 'btn-default']
c.push 'active' if b == giving
c.join ' '
onClick: (b) ->
=>
@props.setAction b
render: ->
{ giving } = @props
div className: 'btn-group btn-group-lg',
button type: 'button', className: @buttonClass(true), onClick: @onClick(true),
'Give Money'
button type: 'button', className: @buttonClass(false), onClick: @onClick(false),
'Request Money'
Amount = React.createFactory React.createClass
onChange: (ref) ->
@props.setAmount ref.target.value
format: (ref) ->
t = ref.target
t.value = parseFloat(t.value).toFixed(2)
render: ->
div className: 'row',
div className: 'col-xs-4',
div className: 'input-group',
div className: 'input-group-addon', ''
input {
type: 'number',
className: 'form-control input-lg',
placeholder: '0.00',
onChange: @onChange,
onBlur: @format
}
Suggestions = React.createFactory React.createClass
render: ->
Peer = React.createFactory React.createClass
onChange: (ref) ->
@props.setPeer ref.target.value
options: ->
{ peer, peers } = @props
if peer == '' or peers.includes(peer)
[]
else
re = new RegExp peer
peers.filter (s) ->
s.match(re) != null
inputClass: (n) ->
c = ['form-control', 'input-lg']
c.push 'active' if n > 0
c.join ' '
setPeer: (p) ->
=>
@props.setPeer p
render: ->
options = @options()
div className: 'row',
div className: 'col-xs-4',
div className: 'suggestions-wrapper',
input type: 'text', className: @inputClass(options.length), onChange: @onChange, placeholder: 'Zeus member', value: (@props.peer || '')
if options.length != 0
div className: 'suggestions',
@options().map (s, i) =>
div className: 'suggestion', key: i, onClick: @setPeer(s),
s
Message = React.createFactory React.createClass
onChange: (ref) ->
@props.setMessage ref.target.value
render: ->
div className: 'row',
div className: 'col-xs-8',
input type: 'text', className: 'form-control input-lg', onChange: @onChange, placeholder: 'Message'
Submit = React.createFactory React.createClass
render: ->
div className: 'row',
div className: 'col-xs-4 col-xs-offset-4',
button type: 'submit', onClick: @props.onClick, className: 'btn btn-default btn-lg form-control', 'Confirm'
Step = React.createFactory React.createClass
render: ->
div className: 'form-step',
div className: 'form-step-counter', @props.step
div className: 'form-step-content',
div className: 'form-step-title', @props.title
div className: 'clear-both'
@props.children
div className: 'clear-both'
@TransactionForm = React.createClass
getInitialState: ->
giving: null, amount: null, peer: null, message: null
setAction: (b) ->
@setState giving: b
setAmount: (a) ->
@setState amount: a
setPeer: (p) ->
@setState peer: p
setMessage: (m) ->
@setState message: m
submit: (e) ->
console.log 'submit'
render: ->
{ amount, giving, message, peer } = @state
{ peers } = @props
div id: 'transaction-form',
h3 null, 'Transfer some money'
Step step: 1, title: 'What do you want to do?',
Action giving: giving, setAction: @setAction
if giving != null
Step step: 2, title: 'How much do you want to give?',
Amount setAmount: @setAmount
if amount != null
Step step: 3, title: 'Who do you want to give it to?',
Peer peer: peer, peers: peers, setPeer: @setPeer
if peer != null
Step step: 4, title: 'Why do you want to give this?',
Message setMessage: @setMessage
if message != null
Submit null
div className: 'clear-both'