Skip to content

Commit 553570a

Browse files
nioleniole
committed
Add rest of UI examples in Ui spec
1 parent 42c98ed commit 553570a

File tree

3 files changed

+220
-111
lines changed

3 files changed

+220
-111
lines changed

‎source/Ui/DatePicker.elm‎

Lines changed: 135 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,212 +1,244 @@
1-
module Ui.DatePicker exposing
2-
( Model, Msg, init, update, subscriptions, onChange, view, render, setValue
3-
, closeOnSelect )
1+
module Ui.DatePicker
2+
exposing
3+
( Model
4+
, Msg
5+
, init
6+
, update
7+
, subscriptions
8+
, onChange
9+
, view
10+
, render
11+
, setValue
12+
, closeOnSelect
13+
)
414

515
{-| An input component that displays a **Calendar** (in a dropdown) when
616
focused, allowing the user to manipulate the selected date.
717
18+
819
# Model
20+
921
@docs Model, Msg, init, subscriptions, update
1022
23+
1124
# DSL
25+
1226
@docs closeOnSelect
1327
28+
1429
# Events
30+
1531
@docs onChange
1632
33+
1734
# View
35+
1836
@docs view, render
1937
20-
# Functions
2138
@docs setValue
39+
40+
41+
# Functions
42+
2243
-}
2344

2445
import Html.Events.Extra exposing (onPreventDefault)
2546
import Html exposing (node, text)
2647
import Html.Lazy
27-
2848
import Date.Extra.Format exposing (isoDateFormat, format)
2949
import Date.Extra.Config.Configs as DateConfigs
3050
import Time
3151
import Date
32-
3352
import Ui.Helpers.Dropdown as Dropdown exposing (Dropdown)
3453
import Ui.Helpers.Picker as Picker
3554
import Ui.Native.Uid as Uid
3655
import Ui.Calendar
3756
import Ui.Icons
3857
import Ui
39-
4058
import Ui.Styles.DatePicker exposing (defaultStyle)
4159
import Ui.Styles
4260

61+
4362
{-| Representation of a date picker:
63+
4464
- **closeOnSelect** - Whether or not to close the dropdown after selecting
4565
- **format** - The format of the date to render in the input
4666
- **readonly** - Whether or not the date picker is readonly
4767
- **disabled** - Whether or not the date picker is disabled
4868
- **uid** - The unique identifier of the date picker
4969
- **calendar** - The model of the calendar
5070
- **dropdown** - The model of the dropdown
71+
5172
-}
5273
type alias Model =
53-
{ calendar : Ui.Calendar.Model
54-
, closeOnSelect : Bool
55-
, dropdown : Dropdown
56-
, format : String
57-
, disabled : Bool
58-
, readonly : Bool
59-
, uid : String
60-
}
74+
{ calendar : Ui.Calendar.Model
75+
, closeOnSelect : Bool
76+
, dropdown : Dropdown
77+
, format : String
78+
, disabled : Bool
79+
, readonly : Bool
80+
, uid : String
81+
}
6182

6283

6384
{-| Messages that a date picker can receive.
6485
-}
6586
type Msg
66-
= Calendar Ui.Calendar.Msg
67-
| Picker Picker.Msg
68-
| Select Time.Time
69-
| Increment
70-
| Decrement
71-
| NoOp
87+
= Calendar Ui.Calendar.Msg
88+
| Picker Picker.Msg
89+
| Select Time.Time
90+
| Increment
91+
| Decrement
92+
| NoOp
7293

7394

7495
{-| Initializes a date picker with the given date.
7596
7697
datePicker =
77-
Ui.DatePicker.init ()
78-
|> Ui.DatePicker.closeOnSelect true
98+
Ui.DatePicker.init ()
99+
|> Ui.DatePicker.closeOnSelect true
100+
79101
-}
80102
init : () -> Model
81103
init _ =
82-
{ calendar = Ui.Calendar.init ()
83-
, dropdown = Dropdown.init
84-
, format = isoDateFormat
85-
, closeOnSelect = False
86-
, disabled = False
87-
, readonly = False
88-
, uid = Uid.uid ()
89-
}
90-
|> Dropdown.offset 5
104+
{ calendar = Ui.Calendar.init ()
105+
, dropdown = Dropdown.init
106+
, format = isoDateFormat
107+
, closeOnSelect = False
108+
, disabled = False
109+
, readonly = False
110+
, uid = Uid.uid ()
111+
}
112+
|> Dropdown.offset 5
91113

92114

93115
{-| Subscribe to the changes of a date picker.
94116
95-
subscriptions = Ui.DatePicker.onChange DatePickerChanged datePicker
117+
subscriptions =
118+
Ui.DatePicker.onChange DatePickerChanged datePicker
119+
96120
-}
97121
onChange : (Time.Time -> msg) -> Model -> Sub msg
98122
onChange msg model =
99-
Ui.Calendar.onChange msg model.calendar
123+
Ui.Calendar.onChange msg model.calendar
100124

101125

102126
{-| Subscriptions for a date picker.
103127
104-
subscriptions = Sub.map DatePicker (Ui.DatePicker.subscriptions datePicker)
128+
subscriptions =
129+
Sub.map DatePicker (Ui.DatePicker.subscriptions datePicker)
130+
105131
-}
106132
subscriptions : Model -> Sub Msg
107133
subscriptions model =
108-
Sub.batch
109-
[ Ui.Calendar.onChange Select model.calendar
110-
, Sub.map Picker (Picker.subscriptions model)
111-
]
134+
Sub.batch
135+
[ Ui.Calendar.onChange Select model.calendar
136+
, Sub.map Picker (Picker.subscriptions model)
137+
]
112138

113139

114140
{-| Sets whether or not to close the dropdown when selecting an other date.
115141
-}
116142
closeOnSelect : Bool -> Model -> Model
117143
closeOnSelect value model =
118-
{ model | closeOnSelect = value }
144+
{ model | closeOnSelect = value }
119145

120146

121147
{-| Updates a date picker.
122148
123-
( updatedDatePicker, cmd ) = Ui.DatePicker.update msg datePicker
149+
( updatedDatePicker, cmd ) =
150+
Ui.DatePicker.update msg datePicker
151+
124152
-}
125153
update : Msg -> Model -> ( Model, Cmd Msg )
126154
update action model =
127-
case action of
128-
NoOp ->
129-
( model, Cmd.none )
130-
131-
Calendar act ->
132-
let
133-
( calendar, effect ) =
134-
Ui.Calendar.update act model.calendar
135-
in
136-
( { model | calendar = calendar }, Cmd.map Calendar effect )
137-
138-
Select time ->
139-
let
140-
updatedModel =
141-
if model.closeOnSelect then
142-
Dropdown.close model
143-
else
144-
model
145-
in
146-
( updatedModel, Cmd.none )
147-
148-
Picker act ->
149-
( Picker.update act model, Cmd.none )
150-
151-
Decrement ->
152-
( { model | calendar = Ui.Calendar.previousDay model.calendar }
153-
|> Dropdown.open
154-
, Cmd.none
155-
)
156-
157-
Increment ->
158-
( { model | calendar = Ui.Calendar.nextDay model.calendar }
159-
|> Dropdown.open
160-
, Cmd.none
161-
)
155+
case action of
156+
NoOp ->
157+
( model, Cmd.none )
158+
159+
Calendar act ->
160+
let
161+
( calendar, effect ) =
162+
Ui.Calendar.update act model.calendar
163+
in
164+
( { model | calendar = calendar }, Cmd.map Calendar effect )
165+
166+
Select time ->
167+
let
168+
updatedModel =
169+
if model.closeOnSelect then
170+
Dropdown.close model
171+
else
172+
model
173+
in
174+
( updatedModel, Cmd.none )
175+
176+
Picker act ->
177+
( Picker.update act model, Cmd.none )
178+
179+
Decrement ->
180+
( { model | calendar = Ui.Calendar.previousDay model.calendar }
181+
|> Dropdown.open
182+
, Cmd.none
183+
)
184+
185+
Increment ->
186+
( { model | calendar = Ui.Calendar.nextDay model.calendar }
187+
|> Dropdown.open
188+
, Cmd.none
189+
)
162190

163191

164192
{-| Lazily renders a date picker in the given locale.
165193
166194
Ui.DatePicker.view "en_us" model
195+
167196
-}
168197
view : String -> Model -> Html.Html Msg
169198
view locale model =
170-
Html.Lazy.lazy2 render locale model
199+
Html.Lazy.lazy2 render locale model
171200

172201

173202
{-| Renders a date picker in the given locale.
174203
175204
Ui.DatePicker.render "en_us" model
205+
176206
-}
177207
render : String -> Model -> Html.Html Msg
178208
render locale model =
179-
let
180-
dateText =
181-
(format (DateConfigs.getConfig locale) model.format model.calendar.value)
182-
in
183-
Picker.view
184-
{ attributes = Ui.Styles.apply defaultStyle
185-
, address = Picker
186-
, keyActions =
187-
[ ( 40, Increment )
188-
, ( 38, Decrement )
189-
, ( 39, Increment )
190-
, ( 37, Decrement )
191-
]
192-
, contents =
193-
[ node "ui-date-picker-content" [] [ text dateText ]
194-
, Ui.Icons.calendar []
195-
]
196-
, dropdownContents =
197-
[ node "ui-date-picker-calendar"
198-
[ onPreventDefault "mousedown" NoOp ]
199-
[ Html.map Calendar (Ui.Calendar.view locale model.calendar)
200-
]
201-
]
202-
} model
209+
let
210+
dateText =
211+
(format (DateConfigs.getConfig locale) model.format model.calendar.value)
212+
in
213+
Picker.view
214+
{ attributes = Ui.Styles.apply defaultStyle
215+
, address = Picker
216+
, keyActions =
217+
[ ( 40, Increment )
218+
, ( 38, Decrement )
219+
, ( 39, Increment )
220+
, ( 37, Decrement )
221+
]
222+
, contents =
223+
[ node "ui-date-picker-content" [] [ text dateText ]
224+
, Ui.Icons.calendar []
225+
]
226+
, dropdownContents =
227+
[ node "ui-date-picker-calendar"
228+
[ onPreventDefault "mousedown" NoOp ]
229+
[ Html.map Calendar (Ui.Calendar.view locale model.calendar)
230+
]
231+
]
232+
}
233+
model
203234

204235

205236
{-| Sets the value of a date picker
206237
207238
( updatedDatePicker, cmd ) =
208-
Ui.DatePicker.setValue (Ext.Date.create 1980 5 17) datePicker
239+
Ui.DatePicker.setValue (Ext.Date.create 1980 5 17) datePicker
240+
209241
-}
210242
setValue : Date.Date -> Model -> Model
211243
setValue date model =
212-
{ model | calendar = Ui.Calendar.setValue date model.calendar }
244+
{ model | calendar = Ui.Calendar.setValue date model.calendar }

‎source/Ui/DateRangePicker.elm‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ module Ui.DateRangePicker exposing (..)
33
import Html exposing (..)
44
import Time
55
import Ui.DatePicker
6-
import Ui.Helpers.Picker as Picker
76
import Ui.Calendar
87

98

0 commit comments

Comments
 (0)