First example using new component <Aside/>
Javi Jimenez Villar
parent
2c3371943a
commit
a326d578b7
|
|
@ -0,0 +1,45 @@
|
|||
###
|
||||
@todo
|
||||
###
|
||||
|
||||
Style = require './style'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
propTypes:
|
||||
type : React.PropTypes.string.required
|
||||
active : React.PropTypes.bool
|
||||
hideable : React.PropTypes.bool
|
||||
className : React.PropTypes.string
|
||||
|
||||
getDefaultProps: ->
|
||||
type : "left"
|
||||
active : false
|
||||
hideable : false
|
||||
className : ""
|
||||
|
||||
getInitialState: ->
|
||||
active : @props.active
|
||||
|
||||
# -- Events
|
||||
onClick: (event) ->
|
||||
@setState active: false if event.target is @getDOMNode()
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
className = @props.className
|
||||
className += " active" if @state.active
|
||||
className += " hideable" if @props.hideable
|
||||
<div data-component-aside={@props.type} className={className} onClick={@onClick}>
|
||||
<aside>
|
||||
{ @props.children }
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
# -- Extends
|
||||
show: ->
|
||||
@setState active: true
|
||||
|
||||
hide: ->
|
||||
@setState active: false
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@import "../constants"
|
||||
|
||||
[data-component-aside]
|
||||
position : absolute
|
||||
z-index : 2
|
||||
top : 0
|
||||
width : 100vw
|
||||
height : 100vh
|
||||
pointer-events : none
|
||||
transition-property background-color
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
|
||||
// -- Children
|
||||
> *
|
||||
position : absolute
|
||||
top : 0
|
||||
height : 100%
|
||||
width : (4 * UNIT)
|
||||
background-color : WHITE
|
||||
transition-property transform
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
|
||||
// -- Style
|
||||
&.active
|
||||
pointer-events : all
|
||||
> *
|
||||
box-shadow : ZDEPTH_SHADOW_1
|
||||
transform translateX(0%)
|
||||
&:not(.hideable)
|
||||
z-index : 2
|
||||
width : (4 * UNIT)
|
||||
&.hideable
|
||||
z-index : 3
|
||||
&.active
|
||||
background-color : rgba(0,0,0,0.5)
|
||||
|
||||
[data-component-aside="left"]
|
||||
left : 0
|
||||
> *
|
||||
left : 0
|
||||
transform translateX(-100%)
|
||||
|
||||
[data-component-aside="right"]
|
||||
right : 0
|
||||
> *
|
||||
right : 0
|
||||
transform translateX(100%)
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
// -- Colors
|
||||
COLOR = #222222
|
||||
BACKGROUND = #f5f5f5
|
||||
THEME = #cccccc
|
||||
WHITE = #ffffff
|
||||
PRIMARY = #e91e63
|
||||
SECONDARY = #00bcd4
|
||||
// THEME = #ef6c00
|
||||
CANCEL = red
|
||||
|
||||
// -- Fonts
|
||||
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
||||
FONT_SIZE = 16px
|
||||
FONT_SIZE_TINY = 80%
|
||||
FONT_SIZE_SMALL = 90%
|
||||
FONT_SIZE_NORMAL = 100%
|
||||
FONT_SIZE_BIG = 120%
|
||||
FONT_WEIGHT_THIN = 300
|
||||
FONT_WEIGHT_NORMAL = 400
|
||||
FONT_WEIGHT_BOLD = 700
|
||||
|
||||
// -- Sizes
|
||||
UNIT = 4rem
|
||||
SPACE = (UNIT * 0.29)
|
||||
OFFSET = (SPACE * 1.75)
|
||||
MENU_WIDTH = (3.85 * UNIT)
|
||||
HEADER_HEIGHT = (1.65 * UNIT)
|
||||
BUTTON_HEIGHT = (2.5 * SPACE)
|
||||
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
||||
LOADING_HEIGHT = (1.5 * UNIT)
|
||||
|
||||
// -- Shadows
|
||||
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
||||
ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
|
||||
ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
|
||||
ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
|
||||
ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
|
||||
|
||||
// -- Animations
|
||||
ANIMATION_DURATION = 450ms
|
||||
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
|
||||
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
###
|
||||
@todo
|
||||
###
|
||||
|
||||
Aside = require '../../components/aside'
|
||||
Button = require '../../components/button'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
# -- States & Properties
|
||||
|
||||
# -- Events
|
||||
onClick: (ref, method) ->
|
||||
@refs[ref][method]()
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
<section>
|
||||
<h2>Aside</h2>
|
||||
<Aside ref="left" hideable=true>
|
||||
<Button caption="Close" onClick={@onClick.bind null, "left", "hide"} />
|
||||
</Aside>
|
||||
<Aside ref="right" type="right"/>
|
||||
<nav>
|
||||
<Button caption="Show aside left" onClick={@onClick.bind null, "left", "show"} />
|
||||
<Button caption="Show aside right" onClick={@onClick.bind null, "right", "show"} />
|
||||
</nav>
|
||||
</section>
|
||||
100
spec/index.cjsx
100
spec/index.cjsx
|
|
@ -1,107 +1,15 @@
|
|||
"use strict"
|
||||
|
||||
# -- Components
|
||||
Autocomplete = require "../components/autocomplete"
|
||||
Button = require "../components/button"
|
||||
Form = require "../components/form"
|
||||
|
||||
Dialog = require './examples/dialog'
|
||||
Aside = require './components/aside'
|
||||
|
||||
Test = React.createClass
|
||||
getInitialState: ->
|
||||
submitable : false
|
||||
|
||||
onInputChange: (event, input) ->
|
||||
console.log "onInputChange -> #{input.getValue()}"
|
||||
|
||||
onFormValid: (event, form) ->
|
||||
console.log "onFormValid", form.getValue()
|
||||
@setState submitable: true
|
||||
|
||||
onFormError: (event, form) ->
|
||||
console.log "onFormError", form.getValue()
|
||||
@setState submitable: false
|
||||
|
||||
onButtonClick: (event, button) ->
|
||||
console.log "onButtonClick", button
|
||||
|
||||
onShowDialog: ->
|
||||
console.log "onShowDialog"
|
||||
@refs.dialog.show()
|
||||
|
||||
onAutocompleteValues: ->
|
||||
console.log @refs.autocomplete_multiple.getValue()
|
||||
console.log @refs.autocomplete_simple.getValue()
|
||||
|
||||
# -- Render
|
||||
render: ->
|
||||
attributes = [
|
||||
ref: "name", label: "Your Name", required: true#, onChange: @onInputChange
|
||||
,
|
||||
ref: "description", multiline: true, label: "Description", value: "Doer"
|
||||
,
|
||||
ref: "birthdate", type: "date", label: "Birthdate"
|
||||
,
|
||||
ref: "years", type: "number", label: "Years"
|
||||
,
|
||||
ref: "twitter", label: "Nickname", disabled: true
|
||||
,
|
||||
ref: "nomad", type: "checkbox", label: "Are you a nomad?", value: true
|
||||
,
|
||||
ref: "cow", type: "checkbox", label: "Are you a cow?", value: false
|
||||
,
|
||||
ref: "girl", type: "checkbox", label: "Are you a girl?", value: false, disabled: true
|
||||
,
|
||||
ref: "nomad_2", type: "radio", label: "Are you a nomad_2?", value: true
|
||||
,
|
||||
ref: "cow_2", type: "radio", label: "Are you a cow_2?", value: false
|
||||
,
|
||||
ref: "girl_2", type: "radio", label: "Are you a girl_2?", value: false, disabled: true
|
||||
,
|
||||
type: "submit", caption: "Send", style: "primary anchor", disabled: true
|
||||
]
|
||||
attributes = []
|
||||
|
||||
countries = ["Spain", "England", "USA", "Thailand", "Tongo", "Slovenia"]
|
||||
countries_selected = ["USA", "Tongo"]
|
||||
countries_obj =
|
||||
"ES-es" : "Spain"
|
||||
"TH-th" : "Thailand"
|
||||
"EN-gb" : "England"
|
||||
"EN-en" : "USA"
|
||||
countries_obj_selected = "TH-th"
|
||||
|
||||
<app>
|
||||
<test>
|
||||
<h1>React-Kit <small>New way for create</small></h1>
|
||||
<br/>
|
||||
|
||||
<h2>Autocomplete</h2>
|
||||
<Autocomplete ref="autocomplete_multiple" placeholder="elements is up to you..."
|
||||
dataSource={countries} value={countries_selected}/>
|
||||
<Autocomplete ref="autocomplete_simple" multiple=false exact=false
|
||||
dataSource={countries_obj} value={countries_obj_selected}/>
|
||||
<Button caption="Get values of autocomplete" onClick={@onAutocompleteValues} />
|
||||
|
||||
<h2>Forms</h2>
|
||||
<Form attributes={attributes} />
|
||||
|
||||
<br/>
|
||||
<h2>Buttons</h2>
|
||||
<Button caption="Show dialog" onClick={@onShowDialog}/>
|
||||
|
||||
|
||||
<Button caption="Login" disabled={not @state.submitable} />
|
||||
<Button caption="Primary" style="primary" icon="access_alarm" />
|
||||
<Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
|
||||
<Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
|
||||
|
||||
<Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
|
||||
<Button type="circle" icon="explore" style="primary" />
|
||||
<Button type="circle" icon="zoom_in" style="secondary" />
|
||||
<Button type="circle" icon="input" disabled={true} />
|
||||
|
||||
# -- Dialog
|
||||
<Dialog ref="dialog" />
|
||||
</app>
|
||||
<Aside />
|
||||
</test>
|
||||
|
||||
React.render <Test/>, document.body
|
||||
|
|
|
|||
Loading…
Reference in New Issue