62 lines
1.7 KiB
CoffeeScript
62 lines
1.7 KiB
CoffeeScript
localCSS = require './style'
|
|
FontIcon = require '../font_icon'
|
|
Ripple = require '../ripple'
|
|
|
|
module.exports = React.createClass
|
|
displayName : 'Button'
|
|
|
|
# -- States & Properties
|
|
propTypes:
|
|
caption : React.PropTypes.string
|
|
className : React.PropTypes.string
|
|
disabled : React.PropTypes.bool
|
|
icon : React.PropTypes.string
|
|
loading : React.PropTypes.bool
|
|
type : React.PropTypes.string
|
|
|
|
getDefaultProps: ->
|
|
className : ''
|
|
type : 'raised'
|
|
|
|
getInitialState: ->
|
|
loading : @props.loading
|
|
focused : false
|
|
ripple : undefined
|
|
|
|
# -- Lifecycle
|
|
componentWillReceiveProps: ->
|
|
@setState ripple: undefined
|
|
|
|
# -- Events
|
|
onClick: (event) ->
|
|
event.preventDefault()
|
|
client = event.target.getBoundingClientRect?()
|
|
@setState
|
|
focused: true
|
|
ripple:
|
|
left : event.pageX - client?.left
|
|
top : event.pageY - client?.top
|
|
width : (client?.width * 2.5)
|
|
@props.onClick? event, @
|
|
setTimeout (=> @setState focused: false), 450
|
|
|
|
# -- Render
|
|
render: ->
|
|
className = @props.className
|
|
className += " #{@props.type}" if @props.type
|
|
className += ' focused' if @state.focused
|
|
|
|
<button data-react-toolbox='button'
|
|
onClick={@onClick}
|
|
className={localCSS.root + ' ' + className}
|
|
disabled={@props.disabled or @state.loading}
|
|
data-flex='horizontal center'>
|
|
{ <FontIcon value={@props.icon} /> if @props.icon }
|
|
{ <abbr>{@props.caption}</abbr> if @props.caption }
|
|
<Ripple origin={@state.ripple} loading={@state.loading} />
|
|
</button>
|
|
|
|
# -- Extends
|
|
loading: (value) ->
|
|
@setState loading: value
|