53 lines
1.4 KiB
CoffeeScript
53 lines
1.4 KiB
CoffeeScript
require './style'
|
|
FontIcon = require "../font_icon"
|
|
Ripple = require "../ripple"
|
|
|
|
module.exports = React.createClass
|
|
|
|
# -- 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 : "square"
|
|
|
|
getInitialState: ->
|
|
loading : @props.loading
|
|
ripple : undefined
|
|
|
|
# -- Lifecycle
|
|
componentWillReceiveProps: ->
|
|
@setState ripple: undefined
|
|
|
|
# -- Events
|
|
onClick: (event) ->
|
|
event.preventDefault()
|
|
client = event.target.getBoundingClientRect?()
|
|
@setState ripple:
|
|
left : event.pageX - client?.left
|
|
top : event.pageY - client?.top
|
|
width : (client?.width * 2.5)
|
|
@props.onClick? event, @
|
|
|
|
# -- Render
|
|
render: ->
|
|
<button data-component-button={@props.type}
|
|
onClick={@onClick}
|
|
className={@props.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
|