Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00
Code Issues Activity

🐛 Fix incorrect event handling on file-menu

Browse source 
Don't wait team to be present for open the menu,
because with slow connection speed it can cause
unexpected ux glitche showing menu when the component
inner request is resoved
This commit is contained in:
Andrey Antukh 2024-12-09 10:15:13 +01:00
parent aeb1ac41da
commit 2f79d71262
2 changed files with 116 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/app/main/ui/dashboard/file_menu.cljs
View file

@ -13,7 +13,6 @@
[app.main.data.exports.files :as fexp] [app.main.data.exports.files :as fexp]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.notifications :as ntf] [app.main.data.notifications :as ntf]
[app.main.refs :as refs]
[app.main.repo :as rp] [app.main.repo :as rp]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.context-menu-a11y :refer [context-menu*]] [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
@ -57,9 +56,8 @@
(mf/defc file-menu* (mf/defc file-menu*
{::mf/props :obj} {::mf/props :obj}
[{:keys [files show on-edit on-menu-close top left navigate origin parent-id can-edit]}] [{:keys [files on-edit on-menu-close top left navigate origin parent-id can-edit]}]
(assert (seq files) "missing `files` prop") (assert (seq files) "missing `files` prop")
(assert (boolean? show) "missing `show` prop")
(assert (fn? on-edit) "missing `on-edit` prop") (assert (fn? on-edit) "missing `on-edit` prop")
(assert (fn? on-menu-close) "missing `on-menu-close` prop") (assert (fn? on-menu-close) "missing `on-menu-close` prop")
(assert (boolean? navigate) "missing `navigate` prop") (assert (boolean? navigate) "missing `navigate` prop")
@ -74,12 +72,11 @@
multi? (> file-count 1) multi? (> file-count 1)
current-team-id (mf/use-ctx ctx/current-team-id) current-team-id (mf/use-ctx ctx/current-team-id)
teams (mf/use-state nil) teams* (mf/use-state nil)
default-team (-> (mf/deref refs/teams) teams (deref teams*)
(get current-team-id))
current-team (or (get @teams current-team-id) default-team) current-team (get teams current-team-id)
other-teams (remove #(= (:id %) current-team-id) (vals @teams)) other-teams (remove #(= (:id %) current-team-id) (vals teams))
current-projects (remove #(= (:id %) (:project-id file)) current-projects (remove #(= (:id %) (:project-id file))
(:projects current-team)) (:projects current-team))
@ -207,21 +204,13 @@
on-export-standard-files on-export-standard-files
(mf/use-fn (mf/use-fn
(mf/deps on-export-files) (mf/deps on-export-files)
(partial on-export-files :legacy-zip)) (partial on-export-files :legacy-zip))]
;; NOTE: this is used for detect if component is still mounted (mf/with-effect []
mounted-ref (mf/use-ref true)]
(mf/use-effect
(mf/deps show)
(fn []
(when show
(->> (rp/cmd! :get-all-projects) (->> (rp/cmd! :get-all-projects)
(rx/map group-by-team) (rx/map group-by-team)
(rx/subs! #(when (mf/ref-val mounted-ref) (rx/subs! #(reset! teams* %))))
(reset! teams %)))))))
(when current-team
(let [sub-options (let [sub-options
(concat (concat
(for [project current-projects] (for [project current-projects]
@ -339,10 +328,10 @@
[:> context-menu* [:> context-menu*
{:on-close on-menu-close {:on-close on-menu-close
:show show
:fixed (or (not= top 0) (not= left 0)) :fixed (or (not= top 0) (not= left 0))
:show true
:min-width true :min-width true
:top top :top top
:left left :left left
:options options :options options
:origin parent-id}])))) :origin parent-id}])))

1
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -406,7 +406,6 @@
;; so the menu can be handled ;; so the menu can be handled
[:div {:style {:pointer-events "all"}} [:div {:style {:pointer-events "all"}}
[:> file-menu* {:files (vals selected-files) [:> file-menu* {:files (vals selected-files)
:show (:menu-open dashboard-local)
:left (+ 24 (:x (:menu-pos dashboard-local))) :left (+ 24 (:x (:menu-pos dashboard-local)))
:top (:y (:menu-pos dashboard-local)) :top (:y (:menu-pos dashboard-local))
:can-edit can-edit :can-edit can-edit