fix(editor): revise date-picker opending conditions

Releated logseq#8238
cybaj · Jan 18, 2023 · 6f01b40 · 6f01b40
1 parent acda57e
commit 6f01b40
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 31 deletions.
diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs
@@ -2101,30 +2101,37 @@
         [:button.p-1.mr-2 p])]
      [:code "Property name begins with a non-numeric character and can contain alphanumeric characters and . * + ! - _ ? $ % & = < >. If -, + or . are the first character, the second character (if any) must be non-numeric."]]))
 
-(rum/defcs timestamp-cp < rum/reactive
+(rum/defcs timestamp-cp
+  < rum/reactive
+  (rum/local false ::show-datepicker?)
   [state block typ ast]
-  (let [ts-block (state/sub :editor/set-timestamp-block)
-        active? #(= (get block :block/uuid) (get-in ts-block [:block :block/uuid]))]
+  (let [ts-block-id (state/sub [:editor/set-timestamp-block :block :block/uuid])
+        active? (= (get block :block/uuid) ts-block-id)
+        *show-datapicker? (get state ::show-datepicker?)]
     [:div.flex.flex-col.gap-4.timestamp
      [:div.text-sm.flex.flex-row
       [:div.opacity-50.font-medium.timestamp-label
        (str typ ": ")]
       [:a.opacity-80.hover:opacity-100
        {:on-mouse-down (fn [e]
                          (util/stop e)
-                         (if (active?)
-                          (do
-                            (reset! commands/*current-command nil)
-                            (state/clear-editor-action!)
-                            (state/set-timestamp-block! nil))
+                         (state/clear-editor-action!)
+                         (editor-handler/escape-editing false)
+                         (if active?
+                           (do
+                             (reset! *show-datapicker? false)
+                             (reset! commands/*current-command nil)
+                             (state/set-timestamp-block! nil))
                            (do
+                             (reset! *show-datapicker? true)
                              (reset! commands/*current-command typ)
-                             (state/set-editor-action! :datepicker)
                              (state/set-timestamp-block! {:block block
                                                           :typ typ}))))}
        [:span.time-start "<"] [:time (repeated/timestamp->text ast)] [:span.time-stop ">"]]]
-     (when (active?)
-          (datetime-comp/date-picker nil nil (repeated/timestamp->map ast)))]))
+     ;; date-picker in rendering-mode
+     (if (and active? @*show-datapicker?)
+       (datetime-comp/date-picker nil nil (repeated/timestamp->map ast))
+       (reset! *show-datapicker? false))]))
 
 (defn- target-forbidden-edit?
   [target]

diff --git a/src/main/frontend/components/datetime.cljs b/src/main/frontend/components/datetime.cljs
@@ -144,24 +144,23 @@
                                    (contains? #{"deadline" "scheduled"}
                                               (string/lower-case current-command)))
         date (state/sub :date-picker/date)]
-    (when (= :datepicker (state/sub :editor/action))
-      [:div#date-time-picker.flex.flex-row {:on-click (fn [e] (util/stop e))
-                                            :on-mouse-down (fn [e] (.stopPropagation e))}
-       (ui/datepicker
-        date
-        {:deadline-or-schedule? deadline-or-schedule?
-         :on-change
-         (fn [e date]
-           (util/stop e)
-           (let [date (t/to-default-time-zone date)
-                 journal (date/journal-name date)]
-             (when-not deadline-or-schedule?
+    [:div#date-time-picker.flex.flex-row {:on-click (fn [e] (util/stop e))
+                                          :on-mouse-down (fn [e] (.stopPropagation e))}
+     (ui/datepicker
+      date
+      {:deadline-or-schedule? deadline-or-schedule?
+       :on-change
+       (fn [e date]
+         (util/stop e)
+         (let [date (t/to-default-time-zone date)
+               journal (date/journal-name date)]
+           (when-not deadline-or-schedule?
                ;; similar to page reference
-               (editor-handler/insert-command! id
-                                               (page-ref/->page-ref journal)
-                                               format
-                                               {:command :page-ref})
-               (state/clear-editor-action!)
-               (reset! commands/*current-command nil))))})
-       (when deadline-or-schedule?
-         (time-repeater))])))
+             (editor-handler/insert-command! id
+                                             (page-ref/->page-ref journal)
+                                             format
+                                             {:command :page-ref})
+             (state/clear-editor-action!)
+             (reset! commands/*current-command nil))))})
+     (when deadline-or-schedule?
+       (time-repeater))]))
diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs
@@ -555,6 +555,7 @@
       (= :property-value-search action)
       (animated-modal "property-value-search" (property-value-search id) true)
 
+      ;; date-picker in editing-mode
       (= :datepicker action)
       (animated-modal "date-picker" (datetime-comp/date-picker id format nil) false)