New property "label"
parent
dd9d3e2598
commit
a5388c5071
|
@ -1,5 +1,8 @@
|
|||
###
|
||||
@todo
|
||||
|
||||
- Disable options
|
||||
- can set a icon like dispatcher
|
||||
###
|
||||
|
||||
require './style'
|
||||
|
@ -12,6 +15,7 @@ module.exports = React.createClass
|
|||
className : React.PropTypes.string
|
||||
dataSource : React.PropTypes.object
|
||||
value : React.PropTypes.string
|
||||
label : React.PropTypes.string
|
||||
|
||||
getDefaultProps: ->
|
||||
type : "normal"
|
||||
|
@ -34,10 +38,11 @@ module.exports = React.createClass
|
|||
className = @props.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>
|
||||
stylesheet = height: @refs.value.getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
|
||||
|
||||
<div data-component-dropdown={@props.type} className={className}>
|
||||
{ <label>{@props.label}</label> if @props.label }
|
||||
<span ref="value" onClick={@onSelect}>{@props.dataSource[@state.value]}</span>
|
||||
<ul onClick={@onItem} style={stylesheet}>
|
||||
{
|
||||
for key, label of @props.dataSource
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
[data-component-dropdown]
|
||||
position : relative
|
||||
margin-bottom : SPACE
|
||||
height : INPUT_HEIGHT
|
||||
// height : INPUT_HEIGHT
|
||||
width : inherit
|
||||
color : COLOR
|
||||
border-bottom : 1px solid lighten(COLOR, 75%)
|
||||
|
@ -28,8 +28,14 @@
|
|||
// -- Children
|
||||
> *
|
||||
width : 100%
|
||||
> label
|
||||
position : relative
|
||||
bottom : -(SPACE / 4)
|
||||
font-size : FONT_SIZE_TINY
|
||||
color : THEME
|
||||
> span
|
||||
display : block
|
||||
height : INPUT_HEIGHT
|
||||
line-height : INPUT_HEIGHT
|
||||
font-size : FONT_SIZE_NORMAL
|
||||
transition-property opacity, transform
|
||||
|
@ -40,7 +46,7 @@
|
|||
position : absolute
|
||||
content : ""
|
||||
right : (SPACE / 2)
|
||||
top : SPACE
|
||||
bottom : SPACE
|
||||
width : 0
|
||||
height : 0
|
||||
border-left : BORDER = SIZE solid transparent
|
||||
|
|
|
@ -29,7 +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} label="Countries"/>
|
||||
<Dropdown ref="dropdown" dataSource={@state.countries_obj}
|
||||
value={countries_obj_selected} />
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue