added listview

nativescript-bind-elm/src/Native.elm

@@ -1,4 +1,4 @@
-module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, label, span, image)
+module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, image, label, listPicker, span)
 
 import Html exposing (Attribute, Html)
 
@@ -42,6 +42,12 @@ htmlView : List (Attribute msg) -> List (Html msg) -> Html msg
 htmlView =
     buildElement "ns-html-view"
 
+
 image : List (Attribute msg) -> List (Html msg) -> Html msg
 image =
     buildElement "ns-image"
+
+
+listPicker : List (Attribute msg) -> List (Html msg) -> Html msg
+listPicker =
+    buildElement "ns-list-picker"

nativescript-bind-elm/src/Native/Attributes.elm

@@ -2,6 +2,8 @@ module Native.Attributes exposing (..)
 
 import Html exposing (Attribute)
 import Html.Attributes exposing (attribute)
+import Html.Attributes exposing (property)
+import Json.Encode as E
 
 
 fontSize : String -> Attribute msg
@@ -842,3 +844,13 @@ stretch =
 tintColor : String -> Attribute msg
 tintColor =
     attribute "tint-color"
+
+
+items : E.Value -> Attribute msg
+items =
+    property "items"
+
+
+selectedIndex : String -> Attribute msg
+selectedIndex =
+    attribute "selected-index"

nativescript-bind-res/Native/Constants.res

@@ -153,6 +153,7 @@ let textBase: array<string> =
       "textShadow",
       "textTransform",
       "whiteSpace",
+      "textWrap",
     ]->Belt.Array.map(dashed),
   ]->Belt.Array.concatMany
 
@@ -245,16 +246,10 @@ let image =
     ]->Belt.Array.map(dashed),
   ]->Belt.Array.concatMany
 
+let listPicker = [view, ["items", "selectedIndex"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
+
 // Js.log("****************************")
-// [
-//   "decodeHeight",
-//   "decodeWidth",
-//   "isLoading",
-//   "loadMode",
-//   "src",
-//   "stretch",
-//   "tintColor",
-// ]
+// ["items", "selectedIndex"]
 // ->Belt.Array.map(dashed)
 // ->Belt.Array.forEach(prop =>
 //   Js.log(

nativescript-bind-res/Native/Elements.res

@@ -92,6 +92,32 @@ module Image = {
 
   let handler: Types.handler = buildHandler(new, Constants.image, Helper.addView)
 }
+module ListPicker = {
+  %%private(
+    @module("@nativescript/core") @new
+    external new: unit => Types.nativeObject = "ListPicker"
+  )
+  let tagName = "ns-list-picker"
+
+  let handler: Types.handler = {
+    init: (. ()) => new(),
+    observedAttributes: Constants.listPicker,
+    render: Js.Nullable.return((. current: Types.htmlElement, _) => {
+      current.data
+      ->Js.Nullable.toOption
+      ->Belt.Option.forEach(data => {
+        data->Types.setItems(current.items)
+      })
+
+      Helper.addView(. current.parentElement, current)
+    }),
+    handlerKind: Types.Element,
+    update: NativescriptCore.update,
+    dispose: NativescriptCore.dispose,
+    addEventListener: NativescriptCore.addEventListener,
+    removeEventListener: NativescriptCore.removeEventListener,
+  }
+}
 
 let all: array<Types.customElement> = [
   {
@@ -126,4 +152,8 @@ let all: array<Types.customElement> = [
     tagName: Image.tagName,
     handler: Image.handler,
   },
+  {
+    tagName: ListPicker.tagName,
+    handler: ListPicker.handler,
+  },
 ]

nativescript-bind-res/Native/Types.res

@@ -17,6 +17,9 @@ type constructor = {
 @set
 external setContent: (nativeObject, 'a) => unit = "content"
 
+@set
+external setItems: (nativeObject, 'a) => unit = "items"
+
 type navigationConfig = {create: unit => nativeObject}
 
 @send
@@ -40,6 +43,7 @@ and htmlElement = {
   handler: Js.Nullable.t<handler>,
   data: Js.Nullable.t<nativeObject>,
   children: array<htmlElement>,
+  items: array<string>
 }
 and frameMethods = {pageAdded: (. htmlElement) => unit}
 and handlerKind =

src/Main.elm

@@ -3,6 +3,7 @@ module Main exposing (main)
 import Browser
 import Html exposing (Html)
 import Json.Decode as D
+import Json.Encode as E
 import Native
 import Native.Attributes as NA
 import Native.Event as Event
@@ -120,6 +121,41 @@ counter model =
             ]
 
 
+
+{-
+   Native.datePicker
+       [ NA.year "1980"
+       , NA.month "4"
+       , NA.day "20"
+       , NA.minDate "1980-02-01"
+       ]
+       []
+       , Native.htmlView
+       [ NA.html """
+       <!DOCTYPE html>
+       <html>
+           <head>
+           </head>
+           <body>
+               <span style="color: green">Hello World</span>
+           </body>
+       </html>
+       """
+       ]
+       []
+
+       Native.label [ NA.textWrap "true" ]
+                           [ Native.formattedString []
+                               [ Native.span
+                                   [ NA.text "red"
+                                   , NA.style "color: red"
+                                   ]
+                                   []
+                               ]
+                           ]
+-}
+
+
 detailsPage : Model -> Page.Page Msg
 detailsPage model =
     Page.page []
@@ -141,30 +177,11 @@ detailsPage model =
                 Layout.flexboxLayout
                     [ NA.flexDirection "column"
                     ]
-                    [ Native.datePicker
-                        [ NA.year "1980"
-                        , NA.month "4"
-                        , NA.day "20"
-                        , NA.minDate "1980-02-01"
-                        ]
-                        []
-                    , Native.htmlView
-                        [ NA.html """
-                        <!DOCTYPE html>
-                        <html>
-                            <head>
-                            </head>
-                            <body>
-                                <span style="color: green">Hello World</span>
-                            </body>
-                        </html>
-                        """
-                        ]
-                        []
-                    , Native.image
-                        [ NA.src "https://art.nativescript.org/logo/export/NativeScript_Logo_Blue_White.png"
-                        , NA.stretch "aspectFill"
-                        , NA.height "40%"
+                    [ Native.listPicker
+                        [ E.list E.string
+                            [ "2022", "2021", "2020" ]
+                            |> NA.items
+                        , NA.selectedIndex "1"
                         ]
                         []
                     ]