fix(ux): the shui date picker for the schedule editor

pull/11293/head
charlie 2024-04-22 12:12:10 +08:00
parent d88dcd0fd4
commit 239590d205
2 changed files with 22 additions and 3 deletions

View File

@ -208,3 +208,13 @@ label.day-enabled {
.dark-theme .datepicker td { .dark-theme .datepicker td {
border-bottom: none; border-bottom: none;
} }
#time-repeater {
input.form-input, select.form-select {
@apply h-8 mt-0;
}
select.form-select {
@apply leading-none;
}
}

View File

@ -18,6 +18,13 @@
:repeater {}}) :repeater {}})
(defonce *timestamp (atom default-timestamp-value)) (defonce *timestamp (atom default-timestamp-value))
(defn- date->goog-date
[d]
(cond
(some->> d (instance? js/Date))
(goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))
:else d))
(defonce *show-time? (atom false)) (defonce *show-time? (atom false))
(rum/defc time-input < rum/reactive (rum/defc time-input < rum/reactive
[default-value] [default-value]
@ -46,7 +53,7 @@
[{:keys [num duration kind]}] [{:keys [num duration kind]}]
(let [show? (rum/react *show-repeater?)] (let [show? (rum/react *show-repeater?)]
(if (or show? (and num duration kind)) (if (or show? (and num duration kind))
[:div.w.full.flex.flex-row.justify-left [:div.w.full.flex.flex-row.justify-left.items-center
[:input#repeater-num.form-input.w-8.mr-2.px-1.sm:w-20.sm:px-2.text-center [:input#repeater-num.form-input.w-8.mr-2.px-1.sm:w-20.sm:px-2.text-center
{:default-value num {:default-value num
:on-change (fn [event] :on-change (fn [event]
@ -90,7 +97,7 @@
[e] [e]
(when e (util/stop e)) (when e (util/stop e))
(let [{:keys [repeater] :as timestamp} @*timestamp (let [{:keys [repeater] :as timestamp} @*timestamp
date (:date-picker/date @state/state) date (-> (:date-picker/date @state/state) date->goog-date)
timestamp (assoc timestamp :date (or date (t/today))) timestamp (assoc timestamp :date (or date (t/today)))
kind (if (= "w" (:duration repeater)) "++" ".+") kind (if (= "w" (:duration repeater)) "++" ".+")
timestamp (assoc-in timestamp [:repeater :kind] kind) timestamp (assoc-in timestamp [:repeater :kind] kind)
@ -162,7 +169,8 @@
format format
{:command :page-ref}) {:command :page-ref})
(state/clear-editor-action!) (state/clear-editor-action!)
(reset! commands/*current-command nil))))] (reset! commands/*current-command nil))
(state/set-state! :date-picker/date d)))]
[:div#date-time-picker.flex.flex-col.sm:flex-row [:div#date-time-picker.flex.flex-col.sm:flex-row
;; inline container ;; inline container
[:div.border-red-500 [:div.border-red-500
@ -170,6 +178,7 @@
{:mode "single" {:mode "single"
:initial-focus true :initial-focus true
:show-week-number true :show-week-number true
:selected _date
:on-select select-handler! :on-select select-handler!
:on-day-key-down (fn [^js d _ ^js e] :on-day-key-down (fn [^js d _ ^js e]
(when (= "Enter" (.-key e)) (when (= "Enter" (.-key e))