You can select item with keyboards
parent
a9f09f626d
commit
3a2f8809df
|
@ -52,8 +52,17 @@ module.exports = React.createClass
|
|||
@setState focus: false if Object.keys(suggestions).length is 0
|
||||
|
||||
onKeyPress: (event) ->
|
||||
key_ascii = event.which
|
||||
query = @refs.input.getValue().trim()
|
||||
if event.which is 13 and query isnt ""
|
||||
|
||||
if @state.focus
|
||||
children = @refs.suggestions.getDOMNode().children
|
||||
for child, index in children when child.classList.contains "active"
|
||||
child.classList.remove "active"
|
||||
query = child.getAttribute "id"
|
||||
break
|
||||
|
||||
if key_ascii is 13 and query isnt ""
|
||||
for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
|
||||
suggestion = {"#{key}": label}
|
||||
break
|
||||
|
@ -62,6 +71,13 @@ module.exports = React.createClass
|
|||
else if suggestion
|
||||
@_addValue suggestion
|
||||
|
||||
else if @state.focus and key_ascii in [40, 38]
|
||||
if key_ascii is 40
|
||||
index = if index >= children.length - 1 then 0 else index + 1
|
||||
else
|
||||
index = if index is 0 then children.length - 1 else index - 1
|
||||
children[index].classList.add "active"
|
||||
|
||||
onBlur: (event) ->
|
||||
setTimeout (=> @setState focus: false, suggestions: {}), 300
|
||||
|
||||
|
@ -69,6 +85,12 @@ module.exports = React.createClass
|
|||
key = event.target.getAttribute "id"
|
||||
@_addValue {"#{key}": @state.suggestions[key]}
|
||||
|
||||
onRefreshSelection: (event) ->
|
||||
children = @refs.suggestions.getDOMNode().children
|
||||
for child, index in children when child.classList.contains "active"
|
||||
child.classList.remove "active"
|
||||
break
|
||||
|
||||
onDelete: (event) ->
|
||||
delete @state.values[event.target.getAttribute "id"]
|
||||
@setState focus: false, values: @state.values
|
||||
|
@ -76,8 +98,8 @@ module.exports = React.createClass
|
|||
|
||||
# -- Render
|
||||
render: ->
|
||||
<div data-component-autocomplete={@props.type}
|
||||
className={"focus" if @state.focus}>
|
||||
className = "focus" if @state.focus
|
||||
<div data-component-autocomplete={@props.type} className={className}>
|
||||
{ <label>{@props.label}</label> if @props.label }
|
||||
{
|
||||
if @props.multiple
|
||||
|
@ -88,9 +110,14 @@ module.exports = React.createClass
|
|||
}
|
||||
</ul>
|
||||
}
|
||||
<Input {...@props} ref="input" value="" label="" onFocus={@onFocus}
|
||||
onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
|
||||
<ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
|
||||
<Input {...@props} ref="input" value="" label=""
|
||||
onBlur={@onBlur}
|
||||
onChange={@onChange}
|
||||
onFocus={@onFocus}
|
||||
onKeyDown={@onKeyPress}
|
||||
/>
|
||||
<ul ref="suggestions" data-role="suggestions"
|
||||
onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
|
||||
{<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -2,13 +2,10 @@
|
|||
|
||||
[data-component-autocomplete]
|
||||
position : relative
|
||||
|
||||
// -- Children
|
||||
> label
|
||||
font-size : FONT_SIZE_TINY
|
||||
color : THEME
|
||||
> [data-role] > *
|
||||
font-size : FONT_SIZE_SMALL
|
||||
cursor : pointer
|
||||
> [data-role="values"]
|
||||
> *
|
||||
|
@ -20,25 +17,30 @@
|
|||
background-color : THEME
|
||||
border-radius : (SPACE / 8)
|
||||
> [data-role="suggestions"]
|
||||
z-index : 10
|
||||
z-index : 2
|
||||
position : absolute
|
||||
width : 100%
|
||||
height : 0
|
||||
max-height : 50vh
|
||||
overflow-x : hidden
|
||||
overflow-y : scroll
|
||||
max-height : 0
|
||||
margin-top : -(SPACE)
|
||||
background-color : WHITE
|
||||
visibility : hidden
|
||||
box-shadow : ZDEPTH_SHADOW_1
|
||||
transition max-height ANIMATION_DURATION ANIMATION_EASE
|
||||
opacity : 0
|
||||
transform translateY(-(INPUT_HEIGHT / 2))
|
||||
transition-property height, box-shadow, opacity, transform
|
||||
transition-duration ANIMATION_DURATION
|
||||
transition-timing-function ANIMATION_EASE
|
||||
> *
|
||||
padding : (SPACE / 2)
|
||||
&:hover
|
||||
&:hover, &.active
|
||||
color : WHITE
|
||||
background-color : THEME
|
||||
background-color : FORM_ITEM_SELECT_BACKGROUND
|
||||
|
||||
// -- Styles
|
||||
&.focus
|
||||
> [data-role="suggestions"]
|
||||
max-height : 25vh
|
||||
visibility : visible
|
||||
height : auto
|
||||
opacity : 1
|
||||
transform translateY(0%)
|
||||
box-shadow ZDEPTH_SHADOW_1
|
||||
|
|
|
@ -4,14 +4,19 @@
|
|||
COLOR = #222222
|
||||
BACKGROUND = #f5f5f5
|
||||
THEME = #cccccc
|
||||
THEME = #e91e63
|
||||
WHITE = #ffffff
|
||||
PRIMARY = #e91e63
|
||||
|
||||
SECONDARY = #00bcd4
|
||||
SUCCESS = #259b24
|
||||
CANCEL = #e51c23
|
||||
WARNING = #ff9800
|
||||
FORM_COLOR = COLOR
|
||||
FORM_BORDER_COLOR = lighten(FORM_COLOR, 75%)
|
||||
FORM_BORDER_COLOR_FOCUS = THEME
|
||||
FORM_ITEM_SELECT = THEME
|
||||
FORM_ITEM_SELECT_BACKGROUND = lighten(THEME, 75%)
|
||||
|
||||
// -- Fonts
|
||||
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
||||
|
|
Loading…
Reference in New Issue