added events

added items setter when values are not equal

app/src/Main.elm

@@ -30,7 +30,8 @@ type NavPage
 
 type alias Model =
     { count : Int
-    , options : List String
+    , options : List Int
+    , email : String
     , current : NavPage
     , next : Maybe NavPage
     , history : List NavPage
@@ -40,7 +41,8 @@ type alias Model =
 init : ( Model, Cmd Msg )
 init =
     ( { count = 0
-      , options = [ "2022", "2021", "2020" ]
+      , options = [ 2022, 2021, 2020 ]
+      , email = ""
       , current = Details
       , history = [ Details ]
       , next = Just Details
@@ -53,6 +55,8 @@ type Msg
     = Inc
     | Dec
     | Replace
+    | OnTextChange String
+    | OnDateChange { day : Int, month : Int, year : Int }
 
 
 
@@ -63,11 +67,20 @@ type Msg
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
+        OnDateChange str ->
+            let
+                _ =
+                    Debug.log "lear" str
+            in
+            ( model, Cmd.none )
+
+        OnTextChange str ->
+            ( { model | email = str }, Cmd.none )
+
         Replace ->
             ( { model
                 | options =
                     List.range 0 model.count
-                        |> List.map String.fromInt
               }
             , Cmd.none
             )
@@ -120,13 +133,13 @@ counter model =
             ]
             [ Native.button
                 [ NA.text "Increment"
-                , Event.on "tap" (D.succeed Inc)
+                , Event.onTap Inc
                 , NA.fontSize "24"
                 ]
                 []
             , helloWorld model.count
             , Native.button
-                [ Event.on "tap" (D.succeed Dec)
+                [ Event.onTap Dec
                 , NA.fontSize "24"
                 ]
                 [ Native.formattedString []
@@ -235,31 +248,32 @@ counter model =
 
 detailsPage : Model -> Page.Page Msg
 detailsPage model =
+    let
+        _ =
+            Debug.log "Model options" model.options
+    in
     Page.pageWithActionBar []
         -- Event.on "navigatedTo" (D.succeed Destory)
         -- [ Native.actionBar []
-        [ Native.listView
-            [ E.list E.int [ 2022, 2021, 2020, 2019, 2018, 2017 ] |> NA.items
-            , NA.itemTemplateSelector "{{ $value % 2 == 0 ? 'even' : 'odd' }}"
-            , NA.separatorColor "#dedede"
-            ]
-            [ Layout.asElement <|
-                Layout.stackLayout
-                    [ NA.key "even"
-                    , NA.padding "20, 20"
+        [ Layout.asElement <|
+            Layout.stackLayout
+                []
+                [ counter model
+                , Native.listView
+                    [ E.list E.int model.options |> NA.items
+                    , NA.itemTemplateSelector "{{ $value % 2 == 0 ? 'even' : 'odd' }}"
                     ]
-                    [ Native.label [ NA.text "{{ $value.toString() }}", NA.color "green" ] []
+                    [ Layout.asElement <|
+                        Layout.stackLayout
+                            [ NA.key "even" ]
+                            [ Native.label [ NA.text "{{ $value.toString() }}", NA.color "green" ] []
+                            ]
+                    , Layout.asElement <|
+                        Layout.stackLayout
+                            [ NA.key "odd" ]
+                            [ Native.label [ NA.text "{{ $value.toString() }}", NA.color "red" ] [] ]
                     ]
-            , Layout.asElement <|
-                Layout.stackLayout
-                    [ NA.key "odd" ]
-                    [ Native.label [ NA.text "{{ $value.toString() }}", NA.color "red" ] [] ]
-            ]
-
-        --     Native.actionBar [ NA.flat "true", NA.title "Home" ]
-        --     []
-        -- , Layout.asElement <|
-        --
+                ]
         ]
 
 

elm-native-js/Native/Elements.res

@@ -314,6 +314,17 @@ module ListView = {
   %%private(
     @module("@nativescript/core") @new
     external new: unit => Types.nativeObject = "ListView"
+
+    let itemsSetter = (current: Types.htmlElement, newItems) => {
+      current.data
+      ->Js.Nullable.toOption
+      ->Belt.Option.forEach(data => {
+        if !Belt.Array.eq(data.items, newItems, (x, y) => x == y) {
+          data->Types.setItems(newItems)
+          data->Types.refresh
+        }
+      })
+    }
   )
   let tagName = "ns-list-view"
 
@@ -322,7 +333,9 @@ module ListView = {
     observedAttributes: Constants.listView,
     render: Js.Nullable.return((. current: Types.htmlElement, _) => {
       current.data->Js.Nullable.toOption->Belt.Option.forEach(ListPicker.setItems(current))
-      Types.definePropertyInHtml(. current, "items", {set: ListPicker.setItems(current)})
+
+      Types.definePropertyInHtml(. current, "items", {set: itemsSetter(current)})
+
       Helper.addView(. current.parentElement, current)
     }),
     handlerKind: Types.Element,

elm-native-js/Native/Helper.res

@@ -174,4 +174,8 @@ let dbg2 = (x, lbl) => {
   x
 }
 
+let tap = (fx, x) => {
+  fx(x)->ignore
+  x
+}
 let flip: (('a, 'b) => 'c, 'b, 'a) => 'c = (fx, x, y) => fx(y, x)

elm-native-js/Native/Types.res

@@ -7,7 +7,8 @@ type rec nativeObject = {
   off: (. event, event => unit) => unit,
   destroyNode: (. unit) => unit,
   insertChild: Js.Nullable.t<(. nativeObject, int) => unit>,
-  constructor: constructorRec
+  items: array<string>,
+  constructor: constructorRec,
 }
 
 type constructor = {
@@ -34,6 +35,9 @@ external navigate: (nativeObject, navigationConfig) => unit = "navigate"
 @send
 external bindExpression: (Obj.t, bindingOptions) => unit = "bind"
 
+@send
+external refresh: nativeObject => unit = "refresh"
+
 type rec handler = {
   init: (. unit) => nativeObject,
   observedAttributes: array<string>,

elm-native/src/Native/Event.elm

@@ -1,4 +1,17 @@
-module Native.Event exposing (on)
+module Native.Event exposing
+    ( on
+    , onBlur
+    , onBusyChange
+    , onDateChange
+    , onFocus
+    , onItemTap
+    , onLoaded
+    , onReturnPress
+    , onSelectedIndexChange
+    , onTap
+    , onTextChange
+    , onUnloaded
+    )
 
 import Html exposing (Attribute)
 import Html.Events as Event
@@ -8,17 +21,63 @@ import Json.Decode as D
 on : String -> D.Decoder msg -> Attribute msg
 on eventName =
     Event.on eventName
-{-
-view Base
 
-  "accessibilityBlurEvent",
-  "accessibilityFocusChangedEvent",
-  "accessibilityFocusEvent",
-  "createdEvent",
-  "layoutChangedEvent",
-  "loadedEvent",
-  "propertyChangeEvent",
-  "showingModallyEvent",
-  "shownModallyEvent",
-  "unloadedEvent",
- -}
+
+onTextChange : (String -> msg) -> Attribute msg
+onTextChange msg =
+    on "textChange" (D.field "value" D.string |> D.map msg)
+
+
+onTap : msg -> Attribute msg
+onTap msg =
+    on "tap" (D.succeed msg)
+
+
+onReturnPress : msg -> Attribute msg
+onReturnPress msg =
+    on "returnPress" (D.succeed msg)
+
+
+onFocus : msg -> Attribute msg
+onFocus msg =
+    on "focus" (D.succeed msg)
+
+
+onBlur : msg -> Attribute msg
+onBlur msg =
+    on "blur" (D.succeed msg)
+
+
+onLoaded : msg -> Attribute msg
+onLoaded msg =
+    on "loaded" (D.succeed msg)
+
+
+onUnloaded : msg -> Attribute msg
+onUnloaded msg =
+    on "unloaded" (D.succeed msg)
+
+
+onBusyChange : msg -> Attribute msg
+onBusyChange msg =
+    on "busyChange" (D.succeed msg)
+
+
+onDateChange : ({ day : Int, month : Int, year : Int } -> msg) -> Attribute msg
+onDateChange msg =
+    on "dateChange"
+        (D.map3 (\day month year -> msg { day = day, month = month, year = year })
+            (D.at [ "object", "day" ] D.int)
+            (D.at [ "object", "month" ] D.int)
+            (D.at [ "object", "year" ] D.int)
+        )
+
+
+onSelectedIndexChange : (Int -> msg) -> Attribute msg
+onSelectedIndexChange msg =
+    on "selectedIndexChange" (D.field "value" D.int |> D.map msg)
+
+
+onItemTap : D.Decoder msg -> Attribute msg
+onItemTap itemDecoder =
+    on "itemTap" (D.field "item" itemDecoder)