...
 
Commits (2)
...@@ -84,7 +84,7 @@ module App = ...@@ -84,7 +84,7 @@ module App =
[ str "Latest SDK" ] ] ] ] [ str "Latest SDK" ] ] ] ]
section [ Id "search" section [ Id "search"
Class "container" ] Class "container" ]
[ Search.view state.Search (SearchMsg >> dispatch) ] ( Search.view state.Search (SearchMsg >> dispatch) )
section [ Id "releases" section [ Id "releases"
Class "container" ] Class "container" ]
[ h2 [ ] [ str "Releases" ] [ h2 [ ] [ str "Releases" ]
...@@ -116,7 +116,7 @@ module App = ...@@ -116,7 +116,7 @@ module App =
str "Built with " str "Built with "
a [ Href "https://fsharp.org" ] [ str "F#" ] a [ Href "https://fsharp.org" ] [ str "F#" ]
str ", " str ", "
a [ Href "http://fable.io" ] [ str "Fable" ] // DevSkim: ignore DS137138 a [ Href "https://fable.io" ] [ str "Fable" ]
str " and " str " and "
a [ Href "https://elmish.github.io" ] [ str "Elmish" ] a [ Href "https://elmish.github.io" ] [ str "Elmish" ]
str " - Check it out on " str " - Check it out on "
......
...@@ -125,15 +125,17 @@ module Search = ...@@ -125,15 +125,17 @@ module Search =
| SelectionChanged selected -> | SelectionChanged selected ->
{ model with SelectedSuggestion = selected }, Cmd.none { model with SelectedSuggestion = selected }, Cmd.none
| FilterSet (filter, queryText) -> | FilterSet (filter, queryText) ->
let sugs = suggestionsForQuery filter model.Query let sugs = suggestionsForQuery filter queryText
{ model with Filter = filter; Query = queryText { model with Filter = filter; Query = queryText
Suggestions = sugs; SelectedSuggestion = sugs.Head }, Cmd.none Suggestions = sugs; SelectedSuggestion = sugs.Head }, Cmd.none
module private Refs = module private Refs =
let mutable input : Browser.HTMLElement = null let mutable unfocusDiv : Browser.HTMLElement = null
let ClassL l = Class (l |> String.concat " ") let ClassL l = Class (l |> String.concat " ")
let unfocus _ = if Refs.unfocusDiv <> null then Refs.unfocusDiv.focus ()
let selectedIndex model = let selectedIndex model =
model.Suggestions |> List.findIndex (fun sug -> sug = model.SelectedSuggestion) model.Suggestions |> List.findIndex (fun sug -> sug = model.SelectedSuggestion)
...@@ -152,11 +154,11 @@ module Search = ...@@ -152,11 +154,11 @@ module Search =
dispatch (SelectionChanged newSelected) dispatch (SelectionChanged newSelected)
event.preventDefault() event.preventDefault()
| "Escape" -> | "Escape" ->
dispatch (FocusChanged false) unfocus ()
| "Enter" -> | "Enter" ->
match model.SelectedSuggestion.Valid with match model.SelectedSuggestion.Valid with
| Valid filter -> | Valid filter ->
if Refs.input <> null then Refs.input.blur() unfocus ()
dispatch (FilterSet (filter, model.SelectedSuggestion.Text)) dispatch (FilterSet (filter, model.SelectedSuggestion.Text))
| Invalid -> () | Invalid -> ()
| _ -> () | _ -> ()
...@@ -170,29 +172,32 @@ module Search = ...@@ -170,29 +172,32 @@ module Search =
| Invalid -> fun _ -> () ) | Invalid -> fun _ -> () )
Role "option" Role "option"
HTMLAttr.Custom ("aria-selected", (sug = selected)) HTMLAttr.Custom ("aria-selected", (sug = selected))
OnClick (fun _ -> match sug.Valid with OnClick (fun e -> match sug.Valid with
| Valid filter -> dispatch (FilterSet (filter, sug.Text)) | Valid filter ->
unfocus ()
dispatch (FilterSet (filter, sug.Text))
| Invalid -> ()) ] | Invalid -> ()) ]
[ yield str sug.Text [ yield str sug.Text
if not (String.IsNullOrWhiteSpace(sug.Label)) if not (String.IsNullOrWhiteSpace(sug.Label))
then yield span [ Class "label" ] [ str sug.Label ] ] then yield span [ Class "label" ] [ str sug.Label ] ]
let view model dispatch = let view model dispatch =
div [ Class "input-wrapper" [ div [ Class "input-wrapper"
OnFocus (fun _ -> dispatch (FocusChanged true)) OnFocus (fun _ -> dispatch (FocusChanged true))
OnBlur (fun _ -> dispatch (FocusChanged false)) OnBlur (fun _ -> dispatch (FocusChanged false))
OnKeyDown (handleSearchKeyDown model dispatch) ] OnKeyDown (handleSearchKeyDown model dispatch) ]
[ yield input [ Placeholder "Find a version..." [ yield input [ Placeholder "Find a version..."
Props.Type "search" Props.Type "search"
OnChange (fun e -> dispatch (QueryChanged e.Value)) OnChange (fun e -> dispatch (QueryChanged e.Value))
Helpers.valueOrDefault model.Query Helpers.valueOrDefault model.Query
SpellCheck false SpellCheck false
AutoCorrect "off" AutoCorrect "off"
AutoComplete "off" AutoComplete "off"
AutoCapitalize "off" AutoCapitalize "off"
Props.Ref (fun elem -> Refs.input <- elem :?> Browser.HTMLElement) ClassL [ if model.InFocus then yield "focus" ] ]
ClassL [ if model.InFocus then yield "focus" ] ] if model.InFocus then
if model.InFocus then yield div [ Id "search-suggestions" ]
yield div [ Id "search-suggestions" ] [ ul [ Role "listbox" ]
[ ul [ Role "listbox" ] (model.Suggestions |> List.map (sugLi dispatch model.SelectedSuggestion)) ] ]
(model.Suggestions |> List.map (sugLi dispatch model.SelectedSuggestion)) ] ] div [ TabIndex -1
Props.Ref (fun elem -> Refs.unfocusDiv <- elem :?> Browser.HTMLElement) ] [ ] ]