First spec
parent
818749f6a6
commit
5cc0982133
|
@ -0,0 +1,49 @@
|
|||
require './style'
|
||||
Ripple = require "../ripple"
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
className : React.PropTypes.string
|
||||
disabled : React.PropTypes.bool
|
||||
label : React.PropTypes.string
|
||||
onChange : React.PropTypes.func
|
||||
value : React.PropTypes.bool
|
||||
|
||||
getDefaultProps: ->
|
||||
className : ""
|
||||
|
||||
getInitialState: ->
|
||||
value : @props.value
|
||||
ripple : undefined
|
||||
|
||||
# -- Lifecycle
|
||||
componentWillReceiveProps: (next_props) ->
|
||||
@setState value: next_props.value if next_props.value
|
||||
|
||||
# -- Events
|
||||
onClick: (event) ->
|
||||
unless @props.disabled
|
||||
@setState
|
||||
value : not @state.value
|
||||
ripple: change: true
|
||||
@props.onChange? event, @
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
className = @props.className
|
||||
className += " checked" if @state.value
|
||||
className += " disabled" if @props.disabled
|
||||
<div data-component-switch className={className} onClick={@onClick}>
|
||||
<span></span>
|
||||
{ <label>{@props.label}</label> if @props.label }
|
||||
<Ripple origin={@state.ripple} />
|
||||
</div>
|
||||
|
||||
# -- Extends
|
||||
getValue: ->
|
||||
@state.value
|
||||
|
||||
setValue: (data) ->
|
||||
@setState value: data
|
|
@ -0,0 +1,60 @@
|
|||
@import "../constants.styl"
|
||||
|
||||
[data-component-switch]
|
||||
position : relative
|
||||
margin-bottom : SPACE
|
||||
height : SIZE = (SPACE / 1.25)
|
||||
width : WIDTH = (2.5 * SIZE)
|
||||
background-color : FORM_BORDER_COLOR
|
||||
border-radius : SPACE
|
||||
transition background-color ANIMATION_DURATION ANIMATION_EASE
|
||||
|
||||
// -- Children
|
||||
> *
|
||||
pointer-events : none
|
||||
> span
|
||||
position : absolute
|
||||
top : -(SIZE / 5)
|
||||
right : (SPACE)
|
||||
width : (SIZE * 1.35)
|
||||
height : (SIZE * 1.35)
|
||||
border-radius : 50%
|
||||
background-color : WHITE
|
||||
transition-property background-color, box-shadow, right
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
> label
|
||||
display : block
|
||||
margin-left : WIDTH + (SPACE / 2)
|
||||
font-size : FONT_SIZE_SMALL
|
||||
color : FORM_COLOR
|
||||
> [data-component-ripple]
|
||||
z-index : -1
|
||||
overflow : hidden
|
||||
max-width : (SIZE * 2.7)
|
||||
max-height : (SIZE * 2.7)
|
||||
top : (SIZE / 2)
|
||||
left : (SIZE * 2)
|
||||
background-color : alpha(COLOR, 10%)
|
||||
opacity : 0
|
||||
animation-duration (1.0 * ANIMATION_DURATION)
|
||||
|
||||
// -- Style
|
||||
&:not(.disabled)
|
||||
cursor : pointer
|
||||
> span
|
||||
box-shadow : ZDEPTH_SHADOW_1
|
||||
&.disabled
|
||||
background-color : lighten(FORM_BORDER_COLOR, 50%)
|
||||
> span
|
||||
background-color : FORM_BORDER_COLOR
|
||||
|
||||
&.checked
|
||||
background-color : alpha(THEME, 25%)
|
||||
> span
|
||||
background-color : THEME
|
||||
right : 0
|
||||
box-shadow : ZDEPTH_SHADOW_2
|
||||
> [data-component-ripple]
|
||||
left : 0
|
||||
background-color : alpha(THEME, 15%)
|
|
@ -0,0 +1,26 @@
|
|||
###
|
||||
@todo
|
||||
###
|
||||
|
||||
Switch = require '../../components/switch'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- Events
|
||||
onChange: (event, instance) ->
|
||||
console.log "[SWITCH]", instance.getValue()
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
<section>
|
||||
<h2>Switches</h2>
|
||||
|
||||
<p>Default</p>
|
||||
<Switch />
|
||||
|
||||
<p>With properties</p>
|
||||
<Switch value={true} label="Online" onChange={@onChange} />
|
||||
|
||||
<p>Disabled</p>
|
||||
<Switch disabled/>
|
||||
</section>
|
|
@ -8,6 +8,7 @@ Dialog = require './components/dialog'
|
|||
Dropdown = require './components/dropdown'
|
||||
Form = require './components/form'
|
||||
Progress = require './components/progress'
|
||||
Switch = require './components/switch'
|
||||
|
||||
# React = require('react/addons')
|
||||
# TestUtils = React.addons.TestUtils
|
||||
|
@ -25,12 +26,13 @@ Test = React.createClass
|
|||
<app data-toolbox={true}>
|
||||
<h1>React-Kit <small>New way for create</small></h1>
|
||||
|
||||
<Form />
|
||||
<Switch />
|
||||
<Aside />
|
||||
<Autocomplete />
|
||||
<Button />
|
||||
<Dialog />
|
||||
<Dropdown />
|
||||
<Form />
|
||||
<Progress />
|
||||
</app>
|
||||
|
||||
|
|
Loading…
Reference in New Issue