added segmented bar

nativescript-bind-elm/src/Native.elm

@@ -1,4 +1,4 @@
-module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, image, label, listPicker, progress, scrollView, span, searchBar)
+module Native exposing (activityIndicator, button, datePicker, formattedString, htmlView, image, label, listPicker, progress, scrollView, span, searchBar, segmentedBar, segmentedBarItem)
 
 import Html exposing (Attribute, Html)
 
@@ -66,3 +66,12 @@ scrollView =
 searchBar : List (Attribute msg) -> List (Html msg) -> Html msg
 searchBar =
     buildElement "ns-search-bar"
+
+segmentedBar : List (Attribute msg) -> List (Html msg) -> Html msg
+segmentedBar =
+    buildElement "ns-segmented-bar"
+
+
+segmentedBarItem : List (Attribute msg) -> List (Html msg) -> Html msg
+segmentedBarItem =
+    buildElement "ns-segmented-bar-item"

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

@@ -908,3 +908,15 @@ textFieldBackgroundColor =
 textFieldHintColor : String -> Attribute msg
 textFieldHintColor =
     attribute "text-field-hint-color"
+
+
+title : String -> Attribute msg
+title =
+    attribute "title"
+
+
+selectedBackgroundColor : String -> Attribute msg
+selectedBackgroundColor =
+    attribute "selected-background-color"
+
+

nativescript-bind-res/Native/Constants.res

@@ -270,15 +270,23 @@ let searchBar =
     ["hint", "text", "textFieldBackgroundColor", "textFieldHintColor"]->Belt.Array.map(dashed),
   ]->Belt.Array.concatMany
 
-Js.log("****************************")
-["hint", "text", "textFieldBackgroundColor", "textFieldHintColor"]
-->Belt.Array.map(dashed)
-->Belt.Array.forEach(prop =>
-  Js.log(
-    `
-${camelCased(prop)} =  attribute "${prop}"
-    `,
-  )
-)
+let segmentedBarItem = [view, ["title"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
 
-Js.log("****************************")
+let segmentedBar =
+  [
+    view,
+    ["selectedBackgroundColor", "selectedIndex"]->Belt.Array.map(dashed),
+  ]->Belt.Array.concatMany
+
+// Js.log("****************************")
+// ["hint", "text", "textFieldBackgroundColor", "textFieldHintColor"]
+// ->Belt.Array.map(dashed)
+// ->Belt.Array.forEach(prop =>
+//   Js.log(
+//     `
+// ${camelCased(prop)} =  attribute "${prop}"
+//     `,
+//   )
+// )
+
+// Js.log("****************************")

nativescript-bind-res/Native/Elements.res

@@ -149,6 +149,26 @@ module SearchBar = {
   let handler: Types.handler = buildHandler(new, Constants.searchBar, Helper.addView)
 }
 
+module SegmentedBar = {
+  %%private(
+    @module("@nativescript/core") @new
+    external new: unit => Types.nativeObject = "SegmentedBar"
+  )
+  let tagName = "ns-segmented-bar"
+
+  let handler: Types.handler = buildHandler(new, Constants.segmentedBar, Helper.addView)
+}
+
+module SegmentedBarItem = {
+  %%private(
+    @module("@nativescript/core") @new
+    external new: unit => Types.nativeObject = "SegmentedBarItem"
+  )
+  let tagName = "ns-segmented-bar-item"
+
+  let handler: Types.handler = buildHandler(new, Constants.segmentedBarItem, Helper.addItems)
+}
+
 let all: array<Types.customElement> = [
   {
     tagName: Label.tagName,
@@ -198,4 +218,12 @@ let all: array<Types.customElement> = [
     tagName: SearchBar.tagName,
     handler: SearchBar.handler,
   },
+  {
+    tagName: SegmentedBar.tagName,
+    handler: SegmentedBar.handler,
+  },
+  {
+    tagName: SegmentedBarItem.tagName,
+    handler: SegmentedBarItem.handler,
+  },
 ]

nativescript-bind-res/Native/Helper.res

@@ -71,6 +71,20 @@ let addSpan: (. Types.htmlElement, Types.htmlElement) => unit = %raw(`
     }
     `)
 
+
+let addItems: (. Types.htmlElement, Types.htmlElement) => unit = %raw(`
+    function(parentElement, thisElement) {
+        if (parentElement.data == null) return
+        requestAnimationFrame(() => {
+            const children = Array.from(parentElement.children)
+            const index = children.indexOf(thisElement)
+            if (parentElement.data.items == null)
+              return (parentElement.data.items = [thisElement.data])
+
+            parentElement.data.items.push(thisElement.data)
+        })
+    }
+    `)
 let dbg = x => {
   Js.log(x)
   x

src/Main.elm

@@ -188,13 +188,13 @@ counter model =
                 ]
                 []
 
-            , Native.listPicker
-                [ E.list E.string
-                    [ "2022", "2021", "2020" ]
-                    |> NA.items
-                , NA.selectedIndex "1"
-                ]
-                []
+        , Native.listPicker
+            [ E.list E.string
+                [ "2022", "2021", "2020" ]
+                |> NA.items
+            , NA.selectedIndex "1"
+            ]
+            []
 -}
 
 
@@ -203,7 +203,11 @@ detailsPage model =
     Page.page []
         -- Event.on "navigatedTo" (D.succeed Destory)
         (Layout.stackLayout []
-            [ Native.searchBar [ NA.hint "Enter search term here..", NA.text "Hello" ] []
+            [ Native.segmentedBar [ NA.selectedBackgroundColor "red" ]
+                [ Native.segmentedBarItem [ NA.title "First" ] []
+                , Native.segmentedBarItem [ NA.title "Second" ] []
+                , Native.segmentedBarItem [ NA.title "Third" ] []
+                ]
             ]
         )