From 1358279afe6ff07690f59eaf06a3c4a393ec62e8 Mon Sep 17 00:00:00 2001 From: hariroshan Date: Mon, 9 Jan 2023 14:20:23 +0530 Subject: [PATCH] added listview --- nativescript-bind-elm/src/Native.elm | 8 ++- .../src/Native/Attributes.elm | 12 ++++ nativescript-bind-res/Native/Constants.res | 13 ++-- nativescript-bind-res/Native/Elements.res | 30 +++++++++ nativescript-bind-res/Native/Types.res | 4 ++ src/Main.elm | 65 ++++++++++++------- 6 files changed, 98 insertions(+), 34 deletions(-) diff --git a/nativescript-bind-elm/src/Native.elm b/nativescript-bind-elm/src/Native.elm index 6f64496..df2721e 100644 --- a/nativescript-bind-elm/src/Native.elm +++ b/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" diff --git a/nativescript-bind-elm/src/Native/Attributes.elm b/nativescript-bind-elm/src/Native/Attributes.elm index c2aa251..0c3e0a5 100644 --- a/nativescript-bind-elm/src/Native/Attributes.elm +++ b/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" diff --git a/nativescript-bind-res/Native/Constants.res b/nativescript-bind-res/Native/Constants.res index 8453cad..ec0e860 100644 --- a/nativescript-bind-res/Native/Constants.res +++ b/nativescript-bind-res/Native/Constants.res @@ -153,6 +153,7 @@ let textBase: array = "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( diff --git a/nativescript-bind-res/Native/Elements.res b/nativescript-bind-res/Native/Elements.res index b18969e..366066d 100644 --- a/nativescript-bind-res/Native/Elements.res +++ b/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 = [ { @@ -126,4 +152,8 @@ let all: array = [ tagName: Image.tagName, handler: Image.handler, }, + { + tagName: ListPicker.tagName, + handler: ListPicker.handler, + }, ] diff --git a/nativescript-bind-res/Native/Types.res b/nativescript-bind-res/Native/Types.res index 2317f86..b07a565 100644 --- a/nativescript-bind-res/Native/Types.res +++ b/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, data: Js.Nullable.t, children: array, + items: array } and frameMethods = {pageAdded: (. htmlElement) => unit} and handlerKind = diff --git a/src/Main.elm b/src/Main.elm index 61563c4..a803393 100644 --- a/src/Main.elm +++ b/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 """ + + + + + + Hello World + + + """ + ] + [] + + 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 """ - - - - - - Hello World - - - """ - ] - [] - , 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" ] [] ]