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

Fixed typo "suggestions"

old
Javi Jimenez Villar 2015-06-22 17:36:17 +07:00
parent 9d31e56260
commit 7eb81fbdcd
2 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/autocomplete/index.cjsx
View File

@ -30,7 +30,7 @@ module.exports = React.createClass
getInitialState: ->
focus : false
dataSource : _index @props.dataSource
sugestions : {}
suggestions : {}
values : {}
# -- Lifecycle
@ -39,33 +39,33 @@ module.exports = React.createClass
# -- Events
onFocus: ->
@refs.sugestions.getDOMNode().scrollTop = 0
@setState focus: true, sugestions: @_getSugestions()
@refs.suggestions.getDOMNode().scrollTop = 0
@setState focus: true, suggestions: @_getSuggestions()
onBlur: (event) ->
setTimeout (=> @setState focus: false, sugestions: {}), 300
setTimeout (=> @setState focus: false, suggestions: {}), 300
onChange: ->
sugestions = {}
suggestions = {}
value = @refs.input.getValue().toLowerCase().trim()
if value.length > 0
@setState focus: true, sugestions: sugestions = @_getSugestions value
@setState focus: false if Object.keys(sugestions).length is 0
@setState focus: true, suggestions: suggestions = @_getSuggestions value
@setState focus: false if Object.keys(suggestions).length is 0
onKeyPress: (event) ->
query = @refs.input.getValue().trim()
if event.which is 13 and query isnt ""
for key, label of @state.sugestions when query.toLowerCase() is label.toLowerCase()
sugestion = {"#{key}": label}
for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
suggestion = {"#{key}": label}
break
unless @props.exact
@_addValue sugestion or {"#{query}": query}
else if sugestion
@_addValue sugestion
@_addValue suggestion or {"#{query}": query}
else if suggestion
@_addValue suggestion
onSelect: (event) ->
key = event.target.getAttribute "id"
@_addValue {"#{key}": @state.sugestions[key]}
@_addValue {"#{key}": @state.suggestions[key]}
onDelete: (event) ->
delete @state.values[event.target.getAttribute "id"]
@ -84,8 +84,8 @@ module.exports = React.createClass
}
<Input {...@props} value="" ref="input" onChange={@onChange}
onKeyPress={@onKeyPress} onFocus={@onFocus} onBlur={@onBlur}/>
<ul ref="sugestions" data-role="sugestions" onClick={@onSelect}>
{<li id={key}>{label}</li> for key, label of @state.sugestions}
<ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
{<li id={key}>{label}</li> for key, label of @state.suggestions}
</ul>
</div>
@ -118,12 +118,12 @@ module.exports = React.createClass
@refs.input.setValue if @props.multiple then "" else value[key]
@props.onChange? @
_getSugestions: (query) ->
sugestions = {}
_getSuggestions: (query) ->
suggestions = {}
for key, label of @state.dataSource when not @state.values[key]
if not query or label.toLowerCase().trim().indexOf(query) is 0
sugestions[key] = label
sugestions
suggestions[key] = label
suggestions
# -- Private methods
_index = (data = {}) ->

22
components/autocomplete/style.styl
View File

@ -3,32 +3,38 @@
[data-component-autocomplete]
position : relative
// -- Children
> [data-role] > *
font-size : FONT_SIZE_SMALL
cursor : pointer
> [data-role="values"]
> *
display : inline-block
margin-right : (SPACE / 2)
padding : (SPACE / 2)
margin : 0 (SPACE / 2) (SPACE / 2) 0
padding : (SPACE / 4) (SPACE / 2)
font-size : FONT_SIZE_SMALL
color : WHITE
background-color : THEME
cursor : pointer
> [data-role="sugestions"]
z-index : 1
border-radius : (SPACE / 8)
> [data-role="suggestions"]
z-index : 10
position : absolute
width : 100%
overflow-x : hidden
overflow-y : scroll
max-height : (2 * UNIT)
max-height : 0
margin-top : -(SPACE)
background-color : WHITE
cursor : pointer
visibility : hidden
box-shadow : ZDEPTH_SHADOW_1
transition max-height ANIMATION_DURATION ANIMATION_EASE
> *
padding : (SPACE / 2)
&:hover
color : WHITE
background-color : THEME
// -- Styles
&.focus
> [data-role="sugestions"]
> [data-role="suggestions"]
max-height : 25vh
visibility : visible