mirror of
https://github.com/penpot/penpot.git
synced 2025-01-06 14:50:20 -05:00
🐛 Fix incorrect event handling on file-menu
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
parent
aeb1ac41da
commit
2f79d71262
2 changed files with 116 additions and 128 deletions
|
|
@ -13,7 +13,6 @@
|
|||
[app.main.data.exports.files :as fexp]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.notifications :as ntf]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.context-menu-a11y :refer [context-menu*]]
|
||||
|
|
@ -57,9 +56,8 @@
|
|||
|
||||
(mf/defc file-menu*
|
||||
{::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 (boolean? show) "missing `show` prop")
|
||||
(assert (fn? on-edit) "missing `on-edit` prop")
|
||||
(assert (fn? on-menu-close) "missing `on-menu-close` prop")
|
||||
(assert (boolean? navigate) "missing `navigate` prop")
|
||||
|
|
@ -74,12 +72,11 @@
|
|||
multi? (> file-count 1)
|
||||
|
||||
current-team-id (mf/use-ctx ctx/current-team-id)
|
||||
teams (mf/use-state nil)
|
||||
default-team (-> (mf/deref refs/teams)
|
||||
(get current-team-id))
|
||||
teams* (mf/use-state nil)
|
||||
teams (deref teams*)
|
||||
|
||||
current-team (or (get @teams current-team-id) default-team)
|
||||
other-teams (remove #(= (:id %) current-team-id) (vals @teams))
|
||||
current-team (get teams current-team-id)
|
||||
other-teams (remove #(= (:id %) current-team-id) (vals teams))
|
||||
current-projects (remove #(= (:id %) (:project-id file))
|
||||
(:projects current-team))
|
||||
|
||||
|
|
@ -207,142 +204,134 @@
|
|||
on-export-standard-files
|
||||
(mf/use-fn
|
||||
(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
|
||||
mounted-ref (mf/use-ref true)]
|
||||
(mf/with-effect []
|
||||
(->> (rp/cmd! :get-all-projects)
|
||||
(rx/map group-by-team)
|
||||
(rx/subs! #(reset! teams* %))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps show)
|
||||
(fn []
|
||||
(when show
|
||||
(->> (rp/cmd! :get-all-projects)
|
||||
(rx/map group-by-team)
|
||||
(rx/subs! #(when (mf/ref-val mounted-ref)
|
||||
(reset! teams %)))))))
|
||||
(let [sub-options
|
||||
(concat
|
||||
(for [project current-projects]
|
||||
{:name (get-project-name project)
|
||||
:id (get-project-id project)
|
||||
:handler (on-move (:id current-team)
|
||||
(:id project))})
|
||||
(when (seq other-teams)
|
||||
[{:name (tr "dashboard.move-to-other-team")
|
||||
:id "move-to-other-team"
|
||||
:options
|
||||
(for [team other-teams]
|
||||
{:name (get-team-name team)
|
||||
:id (get-project-id team)
|
||||
:options
|
||||
(for [sub-project (:projects team)]
|
||||
{:name (get-project-name sub-project)
|
||||
:id (get-project-id sub-project)
|
||||
:handler (on-move (:id team)
|
||||
(:id sub-project))})})}]))
|
||||
|
||||
(when current-team
|
||||
(let [sub-options
|
||||
(concat
|
||||
(for [project current-projects]
|
||||
{:name (get-project-name project)
|
||||
:id (get-project-id project)
|
||||
:handler (on-move (:id current-team)
|
||||
(:id project))})
|
||||
(when (seq other-teams)
|
||||
[{:name (tr "dashboard.move-to-other-team")
|
||||
:id "move-to-other-team"
|
||||
:options
|
||||
(for [team other-teams]
|
||||
{:name (get-team-name team)
|
||||
:id (get-project-id team)
|
||||
:options
|
||||
(for [sub-project (:projects team)]
|
||||
{:name (get-project-name sub-project)
|
||||
:id (get-project-id sub-project)
|
||||
:handler (on-move (:id team)
|
||||
(:id sub-project))})})}]))
|
||||
options
|
||||
(if multi?
|
||||
[(when can-edit
|
||||
{:name (tr "dashboard.duplicate-multi" file-count)
|
||||
:id "duplicate-multi"
|
||||
:handler on-duplicate})
|
||||
|
||||
options
|
||||
(if multi?
|
||||
[(when can-edit
|
||||
{:name (tr "dashboard.duplicate-multi" file-count)
|
||||
:id "duplicate-multi"
|
||||
:handler on-duplicate})
|
||||
(when (and (or (seq current-projects) (seq other-teams)) can-edit)
|
||||
{:name (tr "dashboard.move-to-multi" file-count)
|
||||
:id "file-move-multi"
|
||||
:options sub-options})
|
||||
|
||||
(when (and (or (seq current-projects) (seq other-teams)) can-edit)
|
||||
{:name (tr "dashboard.move-to-multi" file-count)
|
||||
:id "file-move-multi"
|
||||
:options sub-options})
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-binary-multi" file-count)
|
||||
:id "file-binary-export-multi"
|
||||
:handler on-export-binary-files})
|
||||
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-binary-multi" file-count)
|
||||
:id "file-binary-export-multi"
|
||||
:handler on-export-binary-files})
|
||||
(when (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-binary-multi" file-count)
|
||||
:id "file-binary-export-multi"
|
||||
:handler on-export-binary-files-v3})
|
||||
|
||||
(when (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-binary-multi" file-count)
|
||||
:id "file-binary-export-multi"
|
||||
:handler on-export-binary-files-v3})
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-standard-multi" file-count)
|
||||
:id "file-standard-export-multi"
|
||||
:handler on-export-standard-files})
|
||||
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.export-standard-multi" file-count)
|
||||
:id "file-standard-export-multi"
|
||||
:handler on-export-standard-files})
|
||||
(when (and (:is-shared file) can-edit)
|
||||
{:name (tr "labels.unpublish-multi-files" file-count)
|
||||
:id "file-unpublish-multi"
|
||||
:handler on-del-shared})
|
||||
|
||||
(when (and (:is-shared file) can-edit)
|
||||
{:name (tr "labels.unpublish-multi-files" file-count)
|
||||
:id "file-unpublish-multi"
|
||||
:handler on-del-shared})
|
||||
(when (and (not is-lib-page?) can-edit)
|
||||
{:name :separator}
|
||||
{:name (tr "labels.delete-multi-files" file-count)
|
||||
:id "file-delete-multi"
|
||||
:handler on-delete})]
|
||||
|
||||
(when (and (not is-lib-page?) can-edit)
|
||||
{:name :separator}
|
||||
{:name (tr "labels.delete-multi-files" file-count)
|
||||
:id "file-delete-multi"
|
||||
:handler on-delete})]
|
||||
[{:name (tr "dashboard.open-in-new-tab")
|
||||
:id "file-open-new-tab"
|
||||
:handler on-new-tab}
|
||||
(when (and (not is-search-page?) can-edit)
|
||||
{:name (tr "labels.rename")
|
||||
:id "file-rename"
|
||||
:handler on-edit})
|
||||
|
||||
[{:name (tr "dashboard.open-in-new-tab")
|
||||
:id "file-open-new-tab"
|
||||
:handler on-new-tab}
|
||||
(when (and (not is-search-page?) can-edit)
|
||||
{:name (tr "labels.rename")
|
||||
:id "file-rename"
|
||||
:handler on-edit})
|
||||
(when (and (not is-search-page?) can-edit)
|
||||
{:name (tr "dashboard.duplicate")
|
||||
:id "file-duplicate"
|
||||
:handler on-duplicate})
|
||||
|
||||
(when (and (not is-search-page?) can-edit)
|
||||
{:name (tr "dashboard.duplicate")
|
||||
:id "file-duplicate"
|
||||
:handler on-duplicate})
|
||||
(when (and (not is-lib-page?)
|
||||
(not is-search-page?)
|
||||
(or (seq current-projects) (seq other-teams))
|
||||
can-edit)
|
||||
{:name (tr "dashboard.move-to")
|
||||
:id "file-move-to"
|
||||
:options sub-options})
|
||||
|
||||
(when (and (not is-lib-page?)
|
||||
(not is-search-page?)
|
||||
(or (seq current-projects) (seq other-teams))
|
||||
can-edit)
|
||||
{:name (tr "dashboard.move-to")
|
||||
:id "file-move-to"
|
||||
:options sub-options})
|
||||
(when (and (not is-search-page?)
|
||||
can-edit)
|
||||
(if (:is-shared file)
|
||||
{:name (tr "dashboard.unpublish-shared")
|
||||
:id "file-del-shared"
|
||||
:handler on-del-shared}
|
||||
{:name (tr "dashboard.add-shared")
|
||||
:id "file-add-shared"
|
||||
:handler on-add-shared}))
|
||||
|
||||
(when (and (not is-search-page?)
|
||||
can-edit)
|
||||
(if (:is-shared file)
|
||||
{:name (tr "dashboard.unpublish-shared")
|
||||
:id "file-del-shared"
|
||||
:handler on-del-shared}
|
||||
{:name (tr "dashboard.add-shared")
|
||||
:id "file-add-shared"
|
||||
:handler on-add-shared}))
|
||||
{:name :separator}
|
||||
|
||||
{:name :separator}
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-binary-file")
|
||||
:id "download-binary-file"
|
||||
:handler on-export-binary-files})
|
||||
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-binary-file")
|
||||
:id "download-binary-file"
|
||||
:handler on-export-binary-files})
|
||||
(when (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-binary-file")
|
||||
:id "download-binary-file"
|
||||
:handler on-export-binary-files-v3})
|
||||
|
||||
(when (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-binary-file")
|
||||
:id "download-binary-file"
|
||||
:handler on-export-binary-files-v3})
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-standard-file")
|
||||
:id "download-standard-file"
|
||||
:handler on-export-standard-files})
|
||||
|
||||
(when-not (contains? cf/flags :export-file-v3)
|
||||
{:name (tr "dashboard.download-standard-file")
|
||||
:id "download-standard-file"
|
||||
:handler on-export-standard-files})
|
||||
(when (and (not is-lib-page?) (not is-search-page?) can-edit)
|
||||
{:name :separator})
|
||||
|
||||
(when (and (not is-lib-page?) (not is-search-page?) can-edit)
|
||||
{:name :separator})
|
||||
(when (and (not is-lib-page?) (not is-search-page?) can-edit)
|
||||
{:name (tr "labels.delete")
|
||||
:id "file-delete"
|
||||
:handler on-delete})])]
|
||||
|
||||
(when (and (not is-lib-page?) (not is-search-page?) can-edit)
|
||||
{:name (tr "labels.delete")
|
||||
:id "file-delete"
|
||||
:handler on-delete})])]
|
||||
|
||||
[:> context-menu*
|
||||
{:on-close on-menu-close
|
||||
:show show
|
||||
:fixed (or (not= top 0) (not= left 0))
|
||||
:min-width true
|
||||
:top top
|
||||
:left left
|
||||
:options options
|
||||
:origin parent-id}]))))
|
||||
[:> context-menu*
|
||||
{:on-close on-menu-close
|
||||
:fixed (or (not= top 0) (not= left 0))
|
||||
:show true
|
||||
:min-width true
|
||||
:top top
|
||||
:left left
|
||||
:options options
|
||||
:origin parent-id}])))
|
||||
|
|
|
|||
|
|
@ -406,7 +406,6 @@
|
|||
;; so the menu can be handled
|
||||
[:div {:style {:pointer-events "all"}}
|
||||
[:> file-menu* {:files (vals selected-files)
|
||||
:show (:menu-open dashboard-local)
|
||||
:left (+ 24 (:x (:menu-pos dashboard-local)))
|
||||
:top (:y (:menu-pos dashboard-local))
|
||||
:can-edit can-edit
|
||||
|
|
|
|||
Loading…
Reference in a new issue