fix: esc or click outside to exit new property

pull/10016/head
Tienson Qin 2023-08-14 12:27:41 +08:00
parent 11fc737290
commit 5895e06506
2 changed files with 41 additions and 26 deletions

View File

@ -156,7 +156,7 @@
(rum/defcs property-input < rum/reactive
shortcut/disable-all-shortcuts
[state entity *property-key *property-value {:keys [class-schema? page-configure?]
[state entity *property-key *property-value {:keys [class-schema? page-configure? *configure-show?]
:as opts}]
(let [entity-properties (->> (keys (:block/properties entity))
(map #(:block/original-name (db/entity [:block/uuid %])))
@ -188,7 +188,19 @@
:on-chosen (fn [{:keys [value]}]
(reset! *property-key value)
(add-property-from-dropdown entity value opts))
:input-opts {:on-blur pv/exit-edit-property}})])))
:input-opts {:on-blur (fn []
(when *configure-show?
(reset! *configure-show? false))
(pv/exit-edit-property))
:on-key-down
(fn [e]
(case (util/ekey e)
"Escape"
(do
(when *configure-show?
(reset! *configure-show? false))
(pv/exit-edit-property))
nil))}})])))
(rum/defcs new-property < rum/reactive
(rum/local nil ::property-key)

View File

@ -53,30 +53,33 @@
(js/Date. (date/journal-title->long title))
value)
value' (when-not (string/blank? value)
(tc/to-local-date value))
open-modal! (fn []
(state/set-modal!
#(ui/datepicker value' {:on-change (fn [_e date]
(let [repo (state/get-current-repo)
journal (date/js-date->journal-title date)]
(when-not (db/entity [:block/name (util/page-name-sanity-lc journal)])
(page-handler/create! journal {:redirect? false
:create-first-block? false}))
(when-let [page (db/entity [:block/name (util/page-name-sanity-lc journal)])]
(property-handler/set-block-property! repo (:block/uuid block)
(:block/name property)
(:block/uuid page)))
(exit-edit-property)
(state/close-modal!)))})))]
[:a
{:tabIndex "0"
:on-click open-modal!
:on-key-down (fn [e]
(when (= (util/ekey e) "Enter")
(open-modal!)))}
[:span.inline-flex.items-center
(ui/icon "calendar")
[:span.ml-1 (or title "Pick a date")]]]))
(tc/to-local-date value))]
(ui/dropdown
(fn [{:keys [toggle-fn]}]
[:a
{:tabIndex "0"
:on-click toggle-fn
:on-key-down (fn [e]
(when (= (util/ekey e) "Enter")
toggle-fn))}
[:span.inline-flex.items-center
(ui/icon "calendar")
[:span.ml-1 (or title "Pick a date")]]])
(fn [{:keys [toggle-fn]}]
(ui/datepicker value' {:on-change (fn [_e date]
(let [repo (state/get-current-repo)
journal (date/js-date->journal-title date)]
(when-not (db/entity [:block/name (util/page-name-sanity-lc journal)])
(page-handler/create! journal {:redirect? false
:create-first-block? false}))
(when-let [page (db/entity [:block/name (util/page-name-sanity-lc journal)])]
(property-handler/set-block-property! repo (:block/uuid block)
(:block/name property)
(:block/uuid page)))
(exit-edit-property)
(toggle-fn)))}))
{:modal-class (util/hiccup->class
"origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")})))
(defn- select-page
[block property opts]