added datePicker

This commit is contained in:
hariroshan 2023-01-09 13:43:17 +05:30
parent c4512d33ba
commit 8f95fb5b24
6 changed files with 92 additions and 33 deletions

View File

@ -1,4 +1,4 @@
module Native exposing (activityIndicator, button, formattedString, label, span)
module Native exposing (activityIndicator, button, formattedString, label, span, datePicker)
import Html exposing (Attribute, Html)
@ -31,3 +31,7 @@ formattedString =
span : List (Attribute msg) -> List (Html msg) -> Html msg
span =
buildElement "ns-span"
datePicker : List (Attribute msg) -> List (Html msg) -> Html msg
datePicker =
buildElement "ns-datepicker"

View File

@ -767,3 +767,38 @@ enableSwipeBackNavigation =
statusBarStyle : String -> Attribute msg
statusBarStyle =
attribute "status-bar-style"
date : String -> Attribute msg
date =
attribute "date"
iosPreferredDatePickerStyle : String -> Attribute msg
iosPreferredDatePickerStyle =
attribute "ios-preferred-date-picker-style"
maxDate : String -> Attribute msg
maxDate =
attribute "max-date"
minDate : String -> Attribute msg
minDate =
attribute "min-date"
day : String -> Attribute msg
day =
attribute "day"
month : String -> Attribute msg
month =
attribute "month"
year : String -> Attribute msg
year =
attribute "year"

View File

@ -214,15 +214,10 @@ let formattedString =
let span = [formattedString, ["text"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
let datePicker = [view, ["date", "day", "iosPreferredDatePickerStyle", "maxDate", "minDate", "month", "year"]->Belt.Array.map(dashed)]->Belt.Array.concatMany
// Js.log("****************************")
// [
// "accessibilityAnnouncePageEnabled",
// "actionBarHidden",
// "androidStatusBarBackground",
// "backgroundSpanUnderStatusBar",
// "enableSwipeBackNavigation",
// "statusBarStyle",
// ]
// ["date", "day", "iosPreferredDatePickerStyle", "maxDate", "minDate", "month", "year"]
// ->Belt.Array.map(dashed)
// ->Belt.Array.forEach(prop =>
// Js.log(

View File

@ -65,6 +65,15 @@ module Span = {
let handler: Types.handler = buildHandler(new, Constants.span, Helper.addSpan)
}
module DatePicker = {
%%private(
@module("@nativescript/core") @new
external new: unit => Types.nativeObject = "DatePicker"
)
let tagName = "ns-datepicker"
let handler: Types.handler = buildHandler(new, Constants.datePicker, Helper.addView)
}
let all: array<Types.customElement> = [
{
@ -87,4 +96,8 @@ let all: array<Types.customElement> = [
tagName: Span.tagName,
handler: Span.handler,
},
{
tagName: DatePicker.tagName,
handler: DatePicker.handler,
},
]

View File

@ -37,9 +37,7 @@ let addView: (. Types.htmlElement, Types.htmlElement) => unit = %raw(`
if (parentElement.data == null) return
requestAnimationFrame(() => {
const children = Array.from(parentElement.children)
const hasActionBar = children.some(x =>
x.tagName.toLowerCase() === "ns-action-bar"
)
const hasActionBar = children.some(x => x.tagName.toLowerCase() === "ns-action-bar")
const index = children.indexOf(thisElement)
const currentIdx = hasActionBar ? index - 1 : index
parentElement.data.insertChild(thisElement.data, currentIdx)

View File

@ -91,6 +91,35 @@ helloWorld count =
-- , Native.button [ NA.text "Tap", Event.on "tap" (D.succeed Inc) ] []
counter model =
Layout.asElement <|
Layout.flexboxLayout
[ NA.justifyContent "space-between"
, NA.height "70%"
]
[ Native.button
[ NA.text "Increment"
, Event.on "tap" (D.succeed Inc)
, NA.fontSize "24"
]
[]
, helloWorld model.count
, Native.button
[ Event.on "tap" (D.succeed Dec)
, NA.fontSize "24"
]
[ Native.formattedString []
[ Native.span
[ NA.text "Decrement"
, NA.style "color: red"
, NA.fontStyle "italic"
]
[]
]
]
]
detailsPage : Model -> Page.Page Msg
detailsPage model =
Page.page []
@ -110,30 +139,15 @@ detailsPage model =
[]
, Layout.asElement <|
Layout.flexboxLayout
[ NA.justifyContent "space-between"
, NA.height "70%"
[ NA.flexDirection "column"
]
[ Native.button
[ NA.text "Increment"
, Event.on "tap" (D.succeed Inc)
, NA.fontSize "24"
[ Native.datePicker
[ NA.year "1980"
, NA.month "4"
, NA.day "20"
, NA.minDate "1980-02-01"
]
[]
, helloWorld model.count
, Native.button
[ Event.on "tap" (D.succeed Dec)
, NA.fontSize "24"
]
[ Native.formattedString []
[
Native.span
[ NA.text "Decrement"
, NA.style "color: red"
, NA.fontStyle "italic"
]
[]
]
]
]
]
)