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

Improved height for dataSource container & fixed typos.

old
Javi Jimenez Villar 2015-06-27 22:30:21 +07:00
parent b78a7b05a0
commit dd9d3e2598
3 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/dropdown/index.cjsx
View File

@ -24,7 +24,6 @@ module.exports = React.createClass
# -- Events
onSelect: (event) ->
console.log "onSelect", event.target
@setState active: true
onItem: (event) ->
@ -33,17 +32,17 @@ module.exports = React.createClass
# -- Render
render: ->
className = @props.className
className += " active" if @state.active is true
console.log "render.className", className
<div data-component-dropdown={@props.type} className={className}>
if @state.active is true
className += " active"
stylesheet = height: @getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
<div data-component-dropdown={@props.type}
className={className}>
<span onClick={@onSelect}>{@props.dataSource[@state.value]}</span>
<ul onClick={@onItem}>
{
for key, label of @props.dataSource
<li id={key} className={"selected" if key is @state.value}>{label}</li>
}
<ul onClick={@onItem} style={stylesheet}>
{
for key, label of @props.dataSource
<li id={key} className={"selected" if key is @state.value}>{label}</li>
}
</ul>
</div>

37
components/dropdown/style.styl
View File

@ -3,36 +3,38 @@
[data-component-dropdown]
position : relative
margin-bottom : SPACE
width : (4 * UNIT)
height : INPUT_HEIGHT
width : inherit
color : COLOR
border-bottom : 1px solid lighten(COLOR, 75%)
// -- Class
&.active
> span
opacity : 0
transform translateY(25%)
transform translateY((INPUT_HEIGHT / 4))
&:after
transform scale(0)
> ul
z-index : 2
visibility : visible
height : auto
opacity : 1
transform translateY(0%)
box-shadow ZDEPTH_SHADOW_1
> li
opacity : 1
transition opacity ANIMATION_DURATION ANIMATION_EASE
&:not(.active) > ul
pointer-events :none
// -- Children
> *
width : 100%
transition-property opacity, transform, box-shadow, height
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
> span
display : block
// padding : (SPACE / 2) 0
line-height : INPUT_HEIGHT
font-size : FONT_SIZE_NORMAL
transition-property opacity, transform
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
&:after
SIZE = (INPUT_HEIGHT / 7)
position : absolute
@ -41,30 +43,33 @@
top : SPACE
width : 0
height : 0
border-left : SIZE solid transparent
border-right : SIZE solid transparent
border-left : BORDER = SIZE solid transparent
border-right : BORDER
border-top : SIZE solid lighten(COLOR, 75%)
transition transform ANIMATION_DURATION ANIMATION_EASE
> ul
z-index : -1
z-index : 2
position : absolute
overflow : hidden
top : 0
left : -(OFFSET = (SPACE / 1.25))
right : -(OFFSET)
width : auto
height : 0
max-height : 50vh
list-style : none
opacity : 0
background-color : WHITE
border-radius : BORDER_RADIUS
transform translateY(-(INPUT_HEIGHT))
transform translateY(-(INPUT_HEIGHT / 2))
transition-property height, box-shadow, opacity, transform
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
> li
padding : (SPACE / 2) OFFSET
font-size : FONT_SIZE_SMALL
opacity : 0
&:hover
background-color : BACKGROUND
cursor : pointer
&.selected
color : THEME
color : PRIMARY

4
spec/components/dropdown.cjsx
View File

@ -14,6 +14,7 @@ module.exports = React.createClass
"TH-th" : "Thailand"
"EN-gb" : "England"
"EN-en" : "USA"
"FR-fr" : "France"
# -- Events
onAutocompleteValues: (ref, method) ->
@ -28,10 +29,7 @@ module.exports = React.createClass
<section>
<h2>Dropdown</h2>
<p>lorem ipsum...</p>
<Dropdown ref="dropdown" dataSource={@state.countries_obj} />
<Dropdown ref="dropdown" dataSource={@state.countries_obj}
value={countries_obj_selected} />
</section>