mirror of
https://github.com/hariroshan/elm-native-library.git
synced 2025-01-06 03:54:33 +03:00
added datePicker
This commit is contained in:
parent
c4512d33ba
commit
8f95fb5b24
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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(
|
||||
|
@ -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,
|
||||
},
|
||||
]
|
||||
|
@ -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)
|
||||
|
56
src/Main.elm
56
src/Main.elm
@ -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"
|
||||
]
|
||||
[]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user