Skip to content

Commit

Permalink
aligny
Browse files Browse the repository at this point in the history
  • Loading branch information
@markus-mind
markus-mind committed Jan 26, 2025
1 parent 9024d70 commit f20ebef
Show file tree
Hide file tree
Showing 7 changed files with 330 additions and 256 deletions.
2 changes: 1 addition & 1 deletion examples/src/DurationDatePickerExample.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ view model =
, div [ style "margin-bottom" "1rem" ]
[ div [ style "margin-bottom" "1rem" ]
[ text "This is a duration picker" ]
, div [ style "margin-bottom" "1rem", style "position" "relative"]
, div [ style "margin-bottom" "1rem", style "position" "relative" ]
[ button [ id "my-button", onClick <| OpenPicker ]
[ text "Picker" ]
, DurationDatePicker.view (userDefinedDatePickerSettings model.zone model.currentTime) model.picker
Expand Down
16 changes: 10 additions & 6 deletions examples/src/ModalPickerExample.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ update msg model =
OpenPicker ->
let
( newPicker, cmd ) =
SingleDatePicker.openPickerOutsideHierarchy "my-button" pickerSettings model.currentTime model.pickedTime model.picker
SingleDatePicker.openPicker "my-button" pickerSettings model.currentTime model.pickedTime model.picker
in
( { model | picker = newPicker }, cmd )

Expand All @@ -60,10 +60,14 @@ update msg model =
( { model | currentTime = newTime }, Cmd.none )

OnViewportChange ->
( model, SingleDatePicker.updatePickerPosition model.picker )
let
( newPicker, cmd ) =
SingleDatePicker.updatePickerPosition model.picker
in
( { model | picker = newPicker }, cmd )

ToggleModal ->
( { model | modalOpen = not model.modalOpen }, SingleDatePicker.updatePickerPosition model.picker )
( { model | modalOpen = not model.modalOpen }, Cmd.none )

NoOp ->
( model, Cmd.none )
Expand Down Expand Up @@ -150,10 +154,10 @@ viewModal model =
[ div [ style "padding" "3rem" ]
-- [ button [ id "my-button", onClick OpenPicker] [ text "Open Picker" ]
-- , SingleDatePicker.view
-- (userDefinedDatePickerSettings model.zone model.currentTime)
-- (userDefinedDatePickerSettings model.zone model.currentTime)
-- model.picker
[ SingleDatePicker.viewDateInput [ id "my-button", onClick <| OpenPicker ]
(userDefinedDatePickerSettings model.zone model.currentTime)
[ SingleDatePicker.viewDateInput [ id "my-button", onClick <| OpenPicker ]
(userDefinedDatePickerSettings model.zone model.currentTime)
model.currentTime
model.pickedTime
model.picker
Expand Down
71 changes: 55 additions & 16 deletions examples/src/SingleDatePickerExample.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,50 @@ import Utilities exposing (adjustAllowedTimesOfDayToClientZone, isDateBeforeToda


type Msg
= OpenPicker
| UpdatePicker SingleDatePicker.Msg
= OpenDetachedPicker String
| UpdateDateInputPicker SingleDatePicker.Msg
| UpdateDetachedPicker SingleDatePicker.Msg
| AdjustTimeZone Zone
| Tick Posix


type alias Model =
{ currentTime : Posix
, zone : Zone
, pickedTime : Maybe Posix
, picker : SingleDatePicker.DatePicker Msg
, dateInputPickerTime : Maybe Posix
, dateInputPicker : SingleDatePicker.DatePicker Msg
, detachedPickerTime : Maybe Posix
, detachedPicker : SingleDatePicker.DatePicker Msg
}


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
OpenPicker ->
( { model | picker = SingleDatePicker.openPicker (userDefinedDatePickerSettings model.zone model.currentTime) model.currentTime model.pickedTime model.picker }, Cmd.none )
OpenDetachedPicker elementId ->
let
( newPicker, cmd ) =
SingleDatePicker.openPicker elementId
(userDefinedDatePickerSettings model.zone model.currentTime)
model.currentTime
model.detachedPickerTime
model.detachedPicker
in
( { model | detachedPicker = newPicker }, cmd )

UpdatePicker subMsg ->
UpdateDetachedPicker subMsg ->
let
( ( newPicker, maybeNewTime ), cmd ) =
SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.picker
SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.detachedPicker
in
( { model | picker = newPicker, pickedTime = maybeNewTime }, cmd )
( { model | detachedPicker = newPicker, detachedPickerTime = maybeNewTime }, cmd )

UpdateDateInputPicker subMsg ->
let
( ( newPicker, maybeNewTime ), cmd ) =
SingleDatePicker.update (userDefinedDatePickerSettings model.zone model.currentTime) subMsg model.dateInputPicker
in
( { model | dateInputPicker = newPicker, dateInputPickerTime = maybeNewTime }, cmd )

AdjustTimeZone newZone ->
( { model | zone = newZone }, Cmd.none )
Expand Down Expand Up @@ -84,6 +102,7 @@ userDefinedDatePickerSettings zone today =
}
, showCalendarWeekNumbers = True
, presets = [ Settings.PresetDate { title = "Preset", date = today } ]

-- , presets = []
, dateInputSettings = dateInputSettings
}
Expand All @@ -107,15 +126,32 @@ view model =
, style "padding" "3rem"
]
[ h1 [ style "margin-bottom" "1rem" ] [ text "SingleDatePicker Example" ]
, div [ style "padding" "0 200px" ]
, div []
[ div [ style "margin-bottom" "1rem" ]
[ text "This is a basic picker" ]
[ text "This is the picker rendered with a date input" ]
, div [ style "position" "relative", style "margin-bottom" "1rem", style "width" "250px" ]
[ SingleDatePicker.viewDateInput []
(userDefinedDatePickerSettings model.zone model.currentTime)
model.currentTime
model.pickedTime
model.picker
model.dateInputPickerTime
model.dateInputPicker
]
, div [ style "margin-bottom" "1rem" ]
[ text "This is the detached picker rendered on click of a button" ]
, div [ style "position" "relative", style "margin-bottom" "1rem", style "display" "flex", style "gap" "1rem", style "align-items" "center" ]
[ button [ id "my-button", onClick (OpenDetachedPicker "my-button") ] [ text "Open the picker here" ]
, SingleDatePicker.view
(userDefinedDatePickerSettings model.zone model.currentTime)
model.detachedPicker
, div []
[ text "Picked time: "
, case model.detachedPickerTime of
Just t ->
text (Utilities.posixToDateString model.zone t ++ " " ++ Utilities.posixToTimeString model.zone t)

Nothing ->
text "No date selected yet!"
]
]
]
]
Expand All @@ -125,8 +161,10 @@ init : ( Model, Cmd Msg )
init =
( { currentTime = Time.millisToPosix 0
, zone = Time.utc
, pickedTime = Nothing
, picker = SingleDatePicker.init UpdatePicker
, dateInputPickerTime = Nothing
, dateInputPicker = SingleDatePicker.init UpdateDateInputPicker
, detachedPickerTime = Nothing
, detachedPicker = SingleDatePicker.init UpdateDetachedPicker
}
, Task.perform AdjustTimeZone Time.here
)
Expand All @@ -135,6 +173,7 @@ init =
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.picker
[ SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.dateInputPicker
, SingleDatePicker.subscriptions (userDefinedDatePickerSettings model.zone model.currentTime) model.detachedPicker
, Time.every 1000 Tick
]
Loading

0 comments on commit f20ebef

Please sign in to comment.