-
-
Notifications
You must be signed in to change notification settings - Fork 81
/
date_time.cljs
120 lines (110 loc) · 2.76 KB
/
date_time.cljs
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
(ns portal.ui.viewer.date-time
(:require [clojure.spec.alpha :as s]
[portal.colors :as c]
[portal.ui.styled :as d]
[portal.ui.theme :as theme]))
;;; :spec
(s/def ::date-time
(s/or :inst inst?
:unix number?
:iso-8601 string?))
;;;
(defn parse [date]
(cond
(inst? date) date
;; unix timestamps
(number? date)
(js/Date. (* date 1000))
(string? date)
(let [date (.parse js/Date date)]
(when-not (js/isNaN date) (js/Date. date)))))
(def ^:private days
["Sunday"
"Monday"
"Tuesday"
"Wednesday"
"Thursday"
"Friday"
"Saturday"])
(def ^:private months
["January"
"February"
"March"
"April"
"May"
"June"
"July"
"August"
"September"
"October"
"November"
"December"])
(defn inspect-time [value]
(when-let [value (parse value)]
(let [hour (.getHours value)
minute (.getMinutes value)
second (.getSeconds value)
theme (theme/use-theme)
style {:color (::c/number theme)}
border {:color (::c/border theme)}
keyword {:color (::c/keyword theme)}]
[d/div
{:title "Time"
:style
{:display :flex
:align-items :center}}
[d/span
{:title "Hour" :style style}
(let [hour (mod hour 12)]
(if (= hour 0) 12 hour))]
[d/span {:style border} ":"]
[d/span
{:title "Minute" :style style}
(when (< minute 10) "0") minute]
[d/span {:style border} ":"]
[d/span
{:title "Second" :style style}
(when (< second 10) "0")
second]
[d/div {:style {:width "0.25em"}}]
[d/span
{:style keyword}
(if (> hour 11) "PM" "AM")]])))
(defn inspect-date [value]
(let [value (parse value)
day (.getDay value)
date (.getDate value)
month (.getMonth value)
year (.getFullYear value)
theme (theme/use-theme)
style {:color (::c/number theme)}
border {:color (::c/border theme)}]
[d/div
{:title "Date"
:style
{:display :flex
:align-items :center}}
[d/span
{:title (nth months month) :style style}
(inc month)]
[d/span {:style border} "/"]
[d/span
{:title (nth days day) :style style}
(when (< date 10) "0") date]
[d/span {:style border} "/"]
[d/span
{:title "Year" :style style}
year]]))
(defn inspect-date-time [value]
(let [value (parse value)]
[d/div
{:style
{:display :flex
:align-items :center}}
[inspect-date value]
[d/div {:style {:width "0.75em"}}]
[inspect-time value]]))
(def viewer
{:predicate parse
:component inspect-date-time
:name :portal.viewer/date-time})