vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Dropdown

old
Javi Jimenez Villar 2015-07-29 10:13:27 +07:00
parent d991efc0be
commit e704e3667d
2 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/dropdown/index.cjsx
View File

@ -1,11 +1,10 @@
###
v2
- can set a icon like dispatcher
- can set different template (maybe use a kind of mixin )
###
require './style'
Ripple = require "../ripple"
localCSS = require './style'
Ripple = require '../ripple'
module.exports = React.createClass
@ -21,9 +20,9 @@ module.exports = React.createClass
value : React.PropTypes.string
getDefaultProps: ->
className : ""
className : ''
dataSource : []
type : "normal"
type : 'normal'
getInitialState: ->
active : false
@ -45,7 +44,7 @@ module.exports = React.createClass
onItem: (event) ->
unless @props.disabled
client = event.target.getBoundingClientRect?()
value = event.target.getAttribute("id").toString()
value = event.target.getAttribute('id').toString()
for item in @props.dataSource when item.value.toString() is value
@setState
active : false
@ -58,24 +57,25 @@ module.exports = React.createClass
# -- Render
render: ->
className = @props.className
className += " disabled" if @props.disabled
className = "#{localCSS.root} #{@props.className}"
className += " #{@props.type}" if @props.type
className += ' disabled' if @props.disabled
if @state.active is true
className += " active"
className += ' active'
stylesheet = height: @state.height * @props.dataSource.length
<div data-component-dropdown={@props.type} className={className}>
<div data-react-toolbox='dropdown' className={className}>
{ <label>{@props.label}</label> if @props.label }
<ul ref="values" style={stylesheet} onClick={@onItem}>
<ul ref='values' className={localCSS.values} style={stylesheet} onClick={@onItem}>
{
for item, index in @props.dataSource
<li id={item.value} key={index} className={"selected" if item.value is @state.selected.value}>
<li id={item.value} key={index} className={'selected' if item.value is @state.selected.value}>
{ if @props.template then @props.template item else item.label }
{ <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
{ <Ripple className={localCSS.ripple} origin={@state.ripple}/> if item.value is @state.selected.value }
</li>
}
</ul>
<div ref="value" onClick={@onSelect}>
<div ref='value' className={localCSS.value} onClick={@onSelect}>
{
if @props.template
@props.template @state.selected

126
components/dropdown/style.styl
View File

@ -1,45 +1,97 @@
@import "../constants.styl"
[data-component-dropdown]
:local(.values)
z-index : 2
position : absolute
top : 0
left : -(OFFSET = (SPACE / 1.25))
right : -(OFFSET)
width : auto
height : 0
max-height : 50vh
list-style : none
opacity : 0
overflow : hidden
background-color : WHITE
border-radius : BORDER_RADIUS
transform : translateY(-(INPUT_HEIGHT / 2))
transition-property : height, box-shadow, opacity, transform
transition-duration : ANIMATION_DURATION
transition-timing-function : ANIMATION_EASE
> li
position : relative
padding : (SPACE / 2) OFFSET
opacity : 0
overflow : hidden
cursor : pointer
&.selected
color : PRIMARY
> *
pointer-events : none
> :local(.ripple)
background-color : DIVIDER
:local(.value)
display : block
> span
height : INPUT_HEIGHT
font-size : FONT_SIZE_NORMAL
line-height : INPUT_HEIGHT
> :not(span)
margin : (SPACE / 2) 0
&:after
SIZE = (INPUT_HEIGHT / 7)
position : absolute
content : ""
right : (SPACE / 2)
bottom : SPACE
width : 0
height : 0
border-left : BORDER = SIZE solid transparent
border-right : BORDER
border-top : SIZE solid DIVIDER
transition : transform ANIMATION_DURATION ANIMATION_EASE
:local(.root)
position : relative
margin-bottom : SPACE
width : inherit
color : TEXT
border-bottom : 1px solid DIVIDER
// -- Class
// -- Overrides
&.active
> label, > div
opacity : 0
transform translateY((INPUT_HEIGHT / 4))
transform : translateY((INPUT_HEIGHT / 4))
> div:after
transform scale(0)
transform : scale(0)
> ul
opacity : 1
transform translateY(0%)
box-shadow ZDEPTH_SHADOW_1
transform : translateY(0%)
box-shadow : ZDEPTH_SHADOW_1
> li
opacity : 1
transition opacity ANIMATION_DURATION ANIMATION_EASE
transition : opacity ANIMATION_DURATION ANIMATION_EASE
&:not(.active)
> ul
pointer-events : none
> *, > * > li
transition-delay ANIMATION_DURATION
transition-delay : ANIMATION_DURATION
&.disabled
color : TEXT_SECONDARY
border-bottom-style : dotted
> div:after
transform scale(0)
transform : scale(0)
// -- Children
> *
width : 100%
> label, > div
transition-property opacity, transform
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
transition-property : opacity, transform
transition-duration : ANIMATION_DURATION
transition-timing-function : ANIMATION_EASE
> label + ul
top : SPACE
> label
@ -47,53 +99,3 @@
bottom : -(SPACE / 4)
font-size : FONT_SIZE_TINY
color : TEXT_SECONDARY
> ul
z-index : 2
position : absolute
top : 0
left : -(OFFSET = (SPACE / 1.25))
right : -(OFFSET)
width : auto
height : 0
max-height : 50vh
list-style : none
opacity : 0
overflow : hidden
background-color : WHITE
border-radius : BORDER_RADIUS
transform translateY(-(INPUT_HEIGHT / 2))
transition-property height, box-shadow, opacity, transform
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
> li
position : relative
padding : (SPACE / 2) OFFSET
opacity : 0
overflow : hidden
cursor : pointer
&.selected
color : PRIMARY
> *
pointer-events : none
> [data-component-ripple]
background-color : DIVIDER
> div
display : block
> span
height : INPUT_HEIGHT
font-size : FONT_SIZE_NORMAL
line-height : INPUT_HEIGHT
> :not(span)
margin : (SPACE / 2) 0
&:after
SIZE = (INPUT_HEIGHT / 7)
position : absolute
content : ""
right : (SPACE / 2)
bottom : SPACE
width : 0
height : 0
border-left : BORDER = SIZE solid transparent
border-right : BORDER
border-top : SIZE solid DIVIDER
transition transform ANIMATION_DURATION ANIMATION_EASE