|
module Elmish.SimpleInput |
|
|
|
(** |
|
Minimal application showing how to use Elmish |
|
You can find more info about Emish architecture and samples at https://elmish.github.io/ |
|
*) |
|
|
|
open Fable.Core.JsInterop |
|
open Fable.Helpers.React |
|
open Fable.Helpers.React.Props |
|
open Elmish |
|
open Elmish.React |
|
|
|
// MODEL |
|
|
|
type Model = |
|
{ Value : string } |
|
|
|
type Msg = |
|
| ChangeValue of string |
|
|
|
let init () = { Value = "" }, Cmd.none |
|
|
|
// UPDATE |
|
let clearStopChars c = |
|
match c with |
|
| '\\' | '/' | ':' | '*' | '?' | '"' |
|
| '<' | '>' | '|' | '+' | '.' | '%' |
|
| '!' | '@' -> "" |
|
| c -> string c |
|
|
|
let ru_en c = |
|
match c with |
|
| 'а' -> "a" | 'б' -> "b" | 'в' -> "v" | 'г' -> "g" |
|
| 'д' -> "d" | 'е' -> "e" | 'ё' -> "e" | 'ж' -> "zh" |
|
| 'з' -> "z" | 'и' -> "i" | 'й' -> "i" | 'к' -> "k" |
|
| 'л' -> "l" | 'м' -> "m" | 'н' -> "n" | 'о' -> "o" |
|
| 'п' -> "p" | 'р' -> "r" | 'с' -> "s" | 'т' -> "t" |
|
| 'у' -> "u" | 'ф' -> "f" | 'х' -> "kh" | 'ц' -> "ts" |
|
| 'ч' -> "ch" | 'ш' -> "sh" | 'щ' -> "shch" | 'ь' -> "" |
|
| 'ъ' -> "ie" | 'ы' -> "y" | 'э' -> "e" | 'ю' -> "iu" |
|
| 'я' -> "ia" | c -> string c |
|
|
|
let toLower c = System.Char.ToLower( c ) |
|
|
|
let processValue value = |
|
value |
|
|> String.map ( |
|
function |
|
| ' ' -> '-' |
|
| c -> c |> toLower ) |
|
|> String.collect clearStopChars |
|
|> String.collect ru_en |
|
|
|
let update (msg:Msg) (model:Model) = |
|
match msg with |
|
| ChangeValue newValue -> |
|
{ Value = processValue newValue |
|
}, Cmd.none |
|
|
|
// VIEW (rendered with React) |
|
|
|
let view model dispatch = |
|
div [ Class "main-container" ] |
|
[ input [ Class "input" |
|
Value model.Value |
|
OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ] |
|
span [ ] |
|
[ str model.Value ] ] |
|
|
|
// App |
|
Program.mkProgram init update view |
|
|> Program.withConsoleTrace |
|
|> Program.withReactSynchronous "elmish-app" |
|
|> Program.run |
/fable-repl.css
Last active