package virtual_dom

  1. Overview
  2. Docs
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Source file vdom_input_widgets.ml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
open Core
open Virtual_dom.Vdom
include Vdom_input_widgets_intf

module Decimal = struct
  type t = float

  let invariant t =
    if not (Float.is_finite t)
    then failwithf "Cannot represent non-finite float as decimal: %f" t ()
  ;;

  let of_string s =
    let t = Float.of_string s in
    invariant t;
    t
  ;;

  let to_string t =
    invariant t;
    sprintf "%.12g" t
  ;;
end

module Validated = struct
  type 'a t =
    | Initial
    (* This is used to avoid marking as invalid a field that hasn't ever been
       touched by the user, to improve UX. *)
    | Valid of
        { input : string option
        ; value : 'a
        }
    | Invalid of
        { input : string
        ; last_valid : 'a option
        ; error : string
        }
  [@@deriving equal, sexp, bin_io, compare]

  type 'a update = 'a t [@@deriving equal, sexp, bin_io, compare]

  let lift (type a) (module M : Stringable.S with type t = a) =
    (module struct
      type nonrec t = a t

      let to_string = function
        | Initial -> ""
        | Invalid { input; last_valid = _; error = _ } -> input
        | Valid { input; value } ->
          (match input with
           | Some input -> input
           | None -> M.to_string value)
      ;;

      let of_string s =
        try Valid { input = Some s; value = M.of_string s } with
        | exn -> Invalid { input = s; last_valid = None; error = Exn.to_string exn }
      ;;
    end : Stringable.S
      with type t = a t)
  ;;

  let initial_empty = Initial
  let return value = Valid { input = None; value }

  let get_current = function
    | Valid { input = _; value } -> Some value
    | Invalid _ | Initial -> None
  ;;

  let get_last = function
    | Valid { input = _; value } -> Some value
    | Invalid { input = _; last_valid; error = _ } -> last_valid
    | Initial -> None
  ;;

  let get_error = function
    | Initial | Valid _ -> None
    | Invalid { input = _; last_valid = _; error } -> Some error
  ;;

  let is_invalid = function
    | Invalid _ -> true
    | Valid _ | Initial -> false
  ;;

  let is_initial_empty = function
    | Initial -> true
    | _ -> false
  ;;

  let update old new_ =
    match old, new_ with
    | Initial, _ -> new_
    | _, Valid _ -> new_
    | Valid { input = _; value = old }, Invalid { input; last_valid = _; error } ->
      Invalid { input; last_valid = Some old; error }
    | ( Invalid { input = _; last_valid; error = _ }
      , Invalid { input; last_valid = None; error } ) ->
      Invalid { input; last_valid; error }
    | Invalid _, Invalid { input = _; last_valid = Some _; error = _ } -> new_
    | _, Initial -> old
  ;;
end

let maybe_invalid validated attrs =
  if Validated.is_invalid validated
  then Attr.create "aria-invalid" "true" :: attrs
  else attrs
;;

module Time_compat = struct
  module Ofday = struct
    type t = Time_ns.Ofday.t

    let of_string = Time_ns.Ofday.of_string

    (* The browser expects a HH:mm format with optional trailing ":ss" or ":ss.SSS";
       [Time_ns.Ofday.to_string] provides precision in nanoseconds, which is too much. *)
    let to_string = Time_ns.Ofday.to_millisecond_string
  end

  let zoned zone : (module Stringable.S with type t = Time_ns.t) =
    (module struct
      type t = Time_ns.t

      (* Format from the browser: yyyy-MM-ddThh:mm *)
      let of_string s =
        let parts = String.split_on_chars s ~on:[ 'T'; ':' ] in
        let date = List.nth_exn parts 0 |> Date.of_string in
        let hr = List.nth_exn parts 1 |> Int.of_string in
        let min = List.nth_exn parts 2 |> Int.of_string in
        let ofday = Time_ns.Ofday.create ~hr ~min () in
        Time_ns.of_date_ofday ~zone date ofday
      ;;

      let to_string t =
        let s = Time_ns.to_string_iso8601_basic ~zone t in
        (* The browser expect a yyyy-MM-ddThh:mm format and it allows
           trailing ":ss" or ":ss.SSS".

           to_string_iso8601_basic format: 2019-01-30T01:00:00.000000000+01:00

           desired format after cutting:   2019-01-30T01:00:00
        *)
        String.lsplit2_exn ~on:'.' s |> Tuple2.get1
      ;;
    end)
  ;;
end

let maybe_disabled ~disabled attrs = if disabled then Attr.disabled :: attrs else attrs
let add_attrs attrs' attrs = attrs @ attrs' |> Attrs.merge_classes_and_styles

let structural_list ?(orientation = `Vertical) attrs children =
  let layout_style =
    match orientation with
    | `Vertical -> Css_gen.(display `Block)
    | `Horizontal -> Css_gen.(display `Inline_block)
  in
  Node.ul
    ~attr:
      (Attr.many_without_merge
         ([ Attr.style
              Css_gen.(create ~field:"list-style" ~value:"none" @> margin_left (`Px 0))
          ]
          |> add_attrs attrs))
    (List.map children ~f:(fun child -> Node.li ~attr:(Attr.style layout_style) [ child ]))
;;

module Value_normalizing_hook = struct
  module Unsafe = Js_of_ocaml.Js.Unsafe
  open Js_of_ocaml
  open Js_of_ocaml.Dom_html

  let is_active element =
    let document_active_element = Unsafe.get document (Js.string "activeElement") in
    phys_equal element document_active_element
  ;;

  let value_property = Js.string "value"
  let get_value element : 'a Js.t = Unsafe.get element value_property
  let set_value element value = Unsafe.set element value_property value

  let install_event_handler element ~f =
    (* This event handler normalizes the value on the input element on the [change] event.
       For a text entry, this means when the user presses enter, and when the user blurs
       the element. Why don't we simply [to_string] the value in the model? Because for
       some input elements, you can have a change event that fires after the value changes
       but before [Incr_dom] can update the model. For example, this happens when you
       press the up arrow on a number input. This leads to a bug where the value in the
       model swaps back and forth with the value in the element. *)
    let change_handler _ =
      let value = Js.to_string (get_value element) in
      Option.iter (f value) ~f:(fun normalized ->
        set_value element (Js.string normalized));
      Js._true
    in
    let change_handler = Dom.handler change_handler in
    addEventListener element Event.change change_handler Js._false
  ;;

  module M = struct
    module State = struct
      type t = { mutable event_id : event_listener_id }
    end

    module Input = struct
      type t =
        { value : string
        ; f : string -> string option
        }

      let sexp_of_t { value; _ } = Sexp.Atom value
      let combine _left right = right
    end

    let init { Input.value; f } element =
      if not (is_active element) then set_value element (Js.string value);
      let event_id = install_event_handler element ~f in
      { State.event_id }
    ;;

    let on_mount _input _state _element = ()
    let destroy _input { State.event_id } _element = removeEventListener event_id

    let update ~old_input ~new_input state element =
      destroy old_input state element;
      let { State.event_id } = init new_input element in
      state.State.event_id <- event_id
    ;;
  end

  include Attr.Hooks.Make (M)

  (* [create value ~f] will set the "value" property to [value] if the element is not
     focused and on each change, run the current value through [f] to re-set it. Again,
     this only happens if the element is not focused. If [f] returns [None], no change
     takes place. *)
  let create value ~f = Attr.create_hook "value:normalized" (create { value; f })
end

module Dropdown = struct
  let impl
        ?(extra_attrs = [])
        ?(disabled = false)
        values
        ~equal
        ~selected
        ~to_string
        ~on_change
    =
    Node.select
      ~attr:
        (Attr.many_without_merge
           ([ Attr.class_ "widget-dropdown"
            ; Attr.on_change (fun _ value ->
                on_change (Int.of_string value |> List.nth_exn values))
            ]
            |> maybe_disabled ~disabled
            |> add_attrs extra_attrs))
      (List.mapi values ~f:(fun index value ->
         Node.option
           ~attr:
             (Attr.many_without_merge
                [ Attr.value (Int.to_string index)
                ; Attr.bool_property "selected" (equal value selected)
                ])
           [ Node.text (to_string value) ]))
  ;;

  let of_values
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Equal with type t = t)
        values
        ~selected
        ~on_change
    =
    impl
      ?extra_attrs
      ?disabled
      values
      ~equal:M.equal
      ~selected
      ~to_string:M.to_string
      ~on_change
  ;;

  let of_values_opt
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Equal with type t = t)
        values
        ~selected
        ~on_change
    =
    let values = None :: List.map values ~f:Option.some in
    let to_string = Option.value_map ~default:"" ~f:M.to_string in
    impl
      ?extra_attrs
      ?disabled
      values
      ~equal:[%equal: M.t option]
      ~selected
      ~to_string
      ~on_change
  ;;

  let of_enum
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Enum with type t = t)
        ~selected
        ~on_change
    =
    impl
      ?extra_attrs
      ?disabled
      M.all
      ~equal:M.equal
      ~selected
      ~to_string:M.to_string
      ~on_change
  ;;

  let of_enum_opt
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Enum with type t = t)
        ~selected
        ~on_change
    =
    let values = None :: List.map M.all ~f:Option.some in
    let to_string = Option.value_map ~default:"" ~f:M.to_string in
    impl
      ?extra_attrs
      ?disabled
      values
      ~equal:[%equal: M.t option]
      ~selected
      ~to_string
      ~on_change
  ;;
end

module Checkbox = struct
  let impl ?(extra_attrs = []) ?(disabled = false) ~is_checked ~label ~on_toggle () =
    Node.label
      ~attr:(Attr.many_without_merge extra_attrs)
      [ Node.input
          ~attr:
            (Attr.many_without_merge
               ([ Attr.type_ "checkbox"
                ; Attr.on_click (fun _ev -> on_toggle ())
                ; Attr.bool_property "checked" is_checked
                ]
                |> maybe_disabled ~disabled))
          []
      ; Node.text label
      ]
  ;;

  let simple ?extra_attrs ?disabled ~is_checked ~label ~on_toggle () =
    Node.div
      ~attr:(Attr.class_ "checkbox-container")
      [ impl ?extra_attrs ?disabled ~is_checked ~label ~on_toggle () ]
  ;;
end

module Checklist = struct
  let impl
        ?(extra_attrs = [])
        ?(disabled = false)
        values
        ~is_checked
        ~on_toggle
        ~to_string
    =
    structural_list
      ([ Attr.classes [ "widget-checklist"; "checkbox-container" ] ]
       |> add_attrs extra_attrs)
      (List.map values ~f:(fun item ->
         Checkbox.impl
           ~extra_attrs
           ~disabled
           ~is_checked:(is_checked item)
           ~label:(to_string item)
           ~on_toggle:(fun () -> on_toggle item)
           ()))
  ;;

  let of_values
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Display with type t = t)
        values
        ~is_checked
        ~on_toggle
    =
    impl ?extra_attrs ?disabled values ~is_checked ~on_toggle ~to_string:M.to_string
  ;;

  let of_enum
        (type t)
        ?extra_attrs
        ?disabled
        (module M : Enum with type t = t)
        ~is_checked
        ~on_toggle
    =
    impl ?extra_attrs ?disabled M.all ~is_checked ~on_toggle ~to_string:M.to_string
  ;;
end

module Multi_select = struct
  module Repeated_click_behavior = struct
    type t =
      | No_action
      | Clear_all
      | Select_all
  end

  let impl
        (type t cmp)
        ?(repeated_click_behavior = Repeated_click_behavior.No_action)
        ?(extra_attrs = [])
        ?(disabled = false)
        ?size
        (module M : Set with type t = t and type comparator_witness = cmp)
        values
        ~selected
        ~on_change
    =
    let open Js_of_ocaml in
    let size = Option.value size ~default:(List.length values) in
    let attrs =
      [ Attr.create "multiple" ""
      ; Attr.create "size" (Int.to_string size)
      ; Attr.on_change (fun evt (_ : string) ->
          let target =
            match
              Js.Opt.to_option (Js.Opt.bind evt##.target Dom_html.CoerceTo.select)
            with
            | Some target -> target
            | None ->
              failwith
                "Multi_select [on_change] event fired with a missing target or target \
                 that was not a select element."
          in
          let collection_to_list collection =
            List.init collection##.length ~f:(fun i ->
              Js.Opt.get (collection##item i) (fun () -> assert false))
          in
          let options = collection_to_list target##.options in
          let selected_values =
            List.filter_map (List.zip_exn values options) ~f:(fun (value, option) ->
              Option.some_if (Js.to_bool option##.selected) value)
          in
          on_change (Set.of_list (module M) selected_values))
      ]
      @ extra_attrs
      |> maybe_disabled ~disabled
    in
    let options =
      List.map values ~f:(fun value ->
        let is_selected = Set.mem selected value in
        Node.option
          (* [Attr.bool_property] keeps the state of the option in sync by setting the JS
             property. [Attr.selected] modifies the DOM attribute so that selected options
             can be styled with CSS. [Attr.selected] alone does not update the state
             properly if the model changes, so both are needed. *)
          ~attr:
            (Attr.many_without_merge
               ([ Some (Attr.bool_property "selected" is_selected)
                ; Some
                    (Attr.on_click (fun evt ->
                       let was_repeated_click =
                         (not (Js.to_bool evt##.ctrlKey))
                         && Set.equal selected (Set.singleton (module M) value)
                       in
                       match was_repeated_click, repeated_click_behavior with
                       | false, _ | true, No_action -> Effect.Ignore
                       | true, Clear_all -> on_change (Set.empty (module M))
                       | true, Select_all -> on_change (Set.of_list (module M) values)))
                ]
                |> List.filter_opt))
          [ Node.text (M.to_string value) ])
    in
    Node.select ~attr:(Attr.many_without_merge attrs) options
  ;;

  let of_values
        (type t cmp)
        ?extra_attrs
        ?repeated_click_behavior
        ?disabled
        ?size
        (module M : Set with type t = t and type comparator_witness = cmp)
        values
        ~selected
        ~on_change
    =
    impl
      ?extra_attrs
      ?repeated_click_behavior
      ?disabled
      ?size
      (module M)
      values
      ~selected
      ~on_change
  ;;

  let of_enum
        (type t cmp)
        ?extra_attrs
        ?repeated_click_behavior
        ?disabled
        ?size
        (module M : Enum_set with type t = t and type comparator_witness = cmp)
        ~selected
        ~on_change
    =
    impl
      ?extra_attrs
      ?repeated_click_behavior
      ?disabled
      ?size
      (module M)
      M.all
      ~selected
      ~on_change
  ;;
end

module Entry = struct
  module Call_on_input_when = struct
    type t =
      | Text_changed
      | Enter_key_pressed_or_focus_lost

    let listener = function
      | Text_changed -> Attr.on_input
      | Enter_key_pressed_or_focus_lost -> Attr.on_change
    ;;
  end

  let normalize (module M : Stringable.S) s =
    match M.to_string (M.of_string s) with
    | exception _ -> Some ""
    | v -> Some v
  ;;

  let maybe_on_return on_return attrs =
    match on_return with
    | None -> attrs
    | Some on_return ->
      Attr.on_keydown (fun ev ->
        if ev##.keyCode = 13 then on_return () else Effect.Ignore)
      :: attrs
  ;;

  let input_node ?(extra_attrs = []) ?(disabled = false) ?(placeholder = "") attrs =
    Node.input
      ~attr:
        (Attr.many_without_merge
           (attrs
            |> add_attrs [ Attr.placeholder placeholder; Attr.create "spellcheck" "false" ]
            |> maybe_disabled ~disabled
            |> add_attrs extra_attrs))
      []
  ;;

  let raw ?extra_attrs ?disabled ?placeholder ?on_return ~value ~on_input () =
    [ Attr.string_property "value" value; Attr.on_input (fun _ev -> on_input) ]
    |> maybe_on_return on_return
    |> input_node ?extra_attrs ?disabled ?placeholder
  ;;

  let stringable_input_opt
        (type t)
        ?extra_attrs
        ?(call_on_input_when = Call_on_input_when.Text_changed)
        ?disabled
        ?placeholder
        ?(should_normalize = true)
        (module M : Stringable.S with type t = t)
        ~type_attrs
        ~value
        ~on_input
    =
    let value =
      let value = Option.value_map ~f:M.to_string value ~default:"" in
      if should_normalize
      then Value_normalizing_hook.create value ~f:(normalize (module M))
      else Value_normalizing_hook.create value ~f:(const None)
    in
    [ Call_on_input_when.listener call_on_input_when (fun _ev -> function
        | "" -> on_input None
        | s -> on_input (Option.try_with (fun () -> M.of_string s)))
    ; value
    ]
    |> add_attrs type_attrs
    |> input_node ?extra_attrs ?disabled ?placeholder
  ;;

  let of_stringable
        (type t)
        ?extra_attrs
        ?call_on_input_when
        ?disabled
        ?placeholder
        (module M : Stringable.S with type t = t)
        ~value
        ~on_input
    =
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module M)
      ~type_attrs:[ Attr.type_ "text" ]
      ~value
      ~on_input
  ;;

  let validated
        (type t)
        ?extra_attrs
        ?(call_on_input_when = Call_on_input_when.Text_changed)
        ?disabled
        ?placeholder
        ?on_return
        (module M : Stringable.S with type t = t)
        ~value
        ~on_input
    =
    let (module V) = Validated.lift (module M) in
    let value_attr =
      match (value : V.t) with
      | Initial -> Attr.string_property "value" ""
      | _ -> Value_normalizing_hook.create (V.to_string value) ~f:(normalize (module V))
    in
    [ Call_on_input_when.listener call_on_input_when (fun _ev s ->
        on_input (V.of_string s))
    ; value_attr
    ; Attr.type_ "text"
    ]
    |> maybe_on_return on_return
    |> maybe_invalid value
    |> input_node ?extra_attrs ?disabled ?placeholder
  ;;

  let text ?extra_attrs ?call_on_input_when ?disabled ?placeholder ~value ~on_input () =
    of_stringable
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module String)
      ~value
      ~on_input
  ;;

  let number
        (type t)
        ?extra_attrs
        ?call_on_input_when
        ?disabled
        ?placeholder
        (module M : Stringable.S with type t = t)
        ~value
        ~step
        ~on_input
    =
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module M)
      ~type_attrs:[ Attr.type_ "number"; Attr.create_float "step" step ]
      ~value
      ~on_input
  ;;

  let range
        (type t)
        ?extra_attrs
        ?call_on_input_when
        ?disabled
        ?placeholder
        (module M : Stringable.S with type t = t)
        ~value
        ~step
        ~on_input
    =
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module M)
      ~type_attrs:[ Attr.type_ "range"; Attr.create_float "step" step ]
      ~value
      ~on_input
  ;;

  let time ?extra_attrs ?call_on_input_when ?disabled ?placeholder ~value ~on_input () =
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module Time_compat.Ofday)
      ~should_normalize:false
      ~type_attrs:[ Attr.type_ "time" ]
      ~value
      ~on_input
  ;;

  let date ?extra_attrs ?call_on_input_when ?disabled ?placeholder ~value ~on_input () =
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module Date)
      ~should_normalize:false
      ~type_attrs:[ Attr.type_ "date" ]
      ~value
      ~on_input
  ;;

  let datetime_local
        ?extra_attrs
        ?call_on_input_when
        ?disabled
        ?placeholder
        ?utc_offset
        ~value
        ~on_input
        ()
    =
    let hours =
      Option.value_map
        utc_offset
        (* getTimezoneOffset returns the time zone difference, in minutes, from current
           locale to UTC. Utc offset is the difference from UTC to current locale which
           is where the minus comes from.

           The minutes have to be converted to hours since that is the format
           Time.Zone.of_utc_offset expects for the utc_offset. *)
        ~default:((new%js Js_of_ocaml.Js.date_now)##getTimezoneOffset / -60)
        ~f:(fun utc_offset -> Time_ns.Span.to_hr utc_offset |> Float.to_int)
    in
    let (module Zoned_time) = Time_compat.zoned (Time.Zone.of_utc_offset ~hours) in
    stringable_input_opt
      ?extra_attrs
      ?call_on_input_when
      ?disabled
      ?placeholder
      (module Zoned_time)
      ~type_attrs:[ Attr.type_ "datetime-local" ]
      ~should_normalize:false
      ~value
      ~on_input
  ;;

  let text_area
        ?(extra_attrs = [])
        ?(call_on_input_when = Call_on_input_when.Text_changed)
        ?(disabled = false)
        ?(placeholder = "")
        ~value
        ~on_input
        ()
    =
    Node.textarea
      ~attr:
        (Attr.many_without_merge
           ([ Attr.placeholder placeholder
            ; Call_on_input_when.listener call_on_input_when (fun _ev value ->
                on_input value)
            ; Value_normalizing_hook.create value ~f:Option.return
            ]
            |> maybe_disabled ~disabled
            |> add_attrs extra_attrs))
      []
  ;;

  (* According to
     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value the
     value must be set in hex format and will always comes back in hex format. *)
  let color_picker
        ?(extra_attr = Attr.empty)
        ?(call_on_input_when = Call_on_input_when.Text_changed)
        ?disabled
        ~value
        ~on_input
        ()
    =
    let (`Hex value_) = value in
    [ Attr.(type_ "color" @ value_prop value_ @ extra_attr)
    ; Call_on_input_when.listener call_on_input_when (fun _ev s -> on_input (`Hex s))
    ]
    |> input_node ?disabled
  ;;
end

module Button = struct
  let with_validation ?(extra_attrs = []) text ~validation ~on_click =
    match validation with
    | Ok result ->
      Node.button
        ~attr:
          (Attr.many_without_merge
             ([ Attr.on_click (fun _ev -> on_click result); Attr.type_ "button" ]
              |> add_attrs extra_attrs))
        [ Node.text text ]
    | Error reason ->
      Node.button
        ~attr:
          (Attr.many_without_merge
             ([ Attr.disabled
              ; Attr.type_ "button"
              ; Attr.create "tooltip" reason
              ; Attr.create "tooltip-position" "top"
              ]
              |> add_attrs extra_attrs))
        [ Node.text text ]
  ;;

  let simple ?(extra_attrs = []) ?(disabled = false) text ~on_click =
    Node.button
      ~attr:
        (Attr.many_without_merge
           ([ Attr.type_ "button"; Attr.on_click (fun _ev -> on_click ()) ]
            |> maybe_disabled ~disabled
            |> add_attrs extra_attrs))
      [ Node.text text ]
  ;;
end

module Radio_buttons = struct
  module Style = struct
    type t =
      | Native
      | Button_like of { extra_attrs : checked:bool -> Attr.t list }

    let barebones_button_like =
      Button_like
        { extra_attrs =
            (fun ~checked ->
               if checked
               then
                 [ Attr.style
                     Css_gen.(
                       border ~width:(`Px 1) ~color:(`Hex "#D0D0D0") ~style:`Solid ()
                       @> background_color (`Hex "#404040")
                       @> color (`Hex "#F7F7F7"))
                 ]
               else
                 [ Attr.style
                     Css_gen.(
                       border ~width:(`Px 1) ~color:(`Hex "#D0D0D0") ~style:`Solid ()
                       @> background_color (`Hex "#EFEFEF"))
                 ])
        }
    ;;
  end

  let hide_native_inputs =
    Css_gen.(create ~field:"appearance" ~value:"none" @> uniform_margin (`Px 0))
  ;;

  let impl
        ?(extra_attrs = [])
        ?(disabled = false)
        ?(style : Style.t = Native)
        ~orientation
        ~name
        ~on_click
        ~selected
        ~to_string
        ~equal
        values
    =
    let input_attrs, label_attrs =
      match style with
      | Native -> [], fun ~checked:_ -> []
      | Button_like { extra_attrs } -> [ Attr.style hide_native_inputs ], extra_attrs
    in
    structural_list
      ~orientation
      ([ Attr.classes [ "widget-radio-buttons"; "radio-button-container" ] ]
       |> add_attrs extra_attrs)
      (List.map values ~f:(fun item ->
         let checked = Option.value_map selected ~default:false ~f:(equal item) in
         Node.label
           ~attr:(Attr.many_without_merge (label_attrs ~checked))
           [ Node.input
               ~attr:
                 (Attr.many_without_merge
                    ([ Attr.type_ "radio"
                     ; Attr.name name
                     ; Attr.classes [ "radio-button" ]
                     ; Attr.on_click (fun _ev -> on_click item)
                     ; Attr.bool_property "checked" checked
                     ]
                     @ input_attrs
                     |> maybe_disabled ~disabled))
               []
           ; Node.text (to_string item)
           ]))
  ;;

  let of_values
        (type t)
        ?extra_attrs
        ?disabled
        ?style
        (module E : Equal with type t = t)
        ~name
        ~on_click
        ~selected
        values
    =
    impl
      ?extra_attrs
      ?disabled
      ?style
      ~orientation:`Vertical
      ~name
      ~on_click
      ~selected
      ~to_string:E.to_string
      ~equal:E.equal
      values
  ;;

  let of_values_horizontal
        (type t)
        ?extra_attrs
        ?disabled
        ?style
        (module E : Equal with type t = t)
        ~name
        ~on_click
        ~selected
        values
    =
    impl
      ?extra_attrs
      ?disabled
      ?style
      ~orientation:`Horizontal
      ~name
      ~on_click
      ~selected
      ~to_string:E.to_string
      ~equal:E.equal
      values
  ;;
end

module File_select = struct
  module Js = Js_of_ocaml.Js

  let accept_attrs = function
    | None -> Attr.empty
    | Some accepts ->
      Attr.create
        "accept"
        (List.map accepts ~f:(function
           | `Extension s -> if String.is_prefix s ~prefix:"." then s else "." ^ s
           | `Mimetype s -> s)
         |> String.concat ~sep:",")
  ;;

  let list ?(extra_attrs = []) ?accept ~on_input () =
    Node.input
      ~attr:
        (Attr.many_without_merge
           ([ Attr.type_ "file"
            ; accept_attrs accept
            ; Attr.create "multiple" ""
            ; Attr.on_file_input (fun _ev file_list ->
                let files =
                  List.init file_list##.length ~f:(fun i ->
                    file_list##item i
                    |> Js.Opt.to_option
                    |> Option.value_exn
                         ~message:[%string "couldn't get file %{i#Int}"])
                in
                on_input files)
            ]
            |> add_attrs extra_attrs))
      []
  ;;

  let single ?(extra_attrs = []) ?accept ~on_input () =
    Node.input
      ~attr:
        (Attr.many_without_merge
           ([ Attr.type_ "file"
            ; accept_attrs accept
            ; Attr.on_file_input (fun _ev file_list ->
                let file = file_list##item 0 |> Js.Opt.to_option in
                on_input file)
            ]
            |> add_attrs extra_attrs))
      []
  ;;
end
OCaml

Innovation. Community. Security.