3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 12:16:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Move files to other projects and teams

Browse source
This commit is contained in:
Andrés Moya 2021-02-25 15:39:38 +01:00
parent 6a345c4b8a
commit c6765a48c5
10 changed files with 290 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/src/app/main/ui/components/context_menu.cljs
View file

@ -12,9 +12,11 @@
[rumext.alpha :as mf]
[goog.object :as gobj]
[app.main.ui.components.dropdown :refer [dropdown']]
[app.main.ui.icons :as i]
[app.common.uuid :as uuid]
[app.util.data :refer [classnames]]
[app.util.dom :as dom]))
[app.util.dom :as dom]
[app.util.object :as obj]))
(mf/defc context-menu
{::mf/wrap-props false}
@ -24,6 +26,7 @@
(assert (vector? (gobj/get props "options")) "missing `options` prop")
(let [open? (gobj/get props "show")
on-close (gobj/get props "on-close")
options (gobj/get props "options")
is-selectable (gobj/get props "selectable")
selected (gobj/get props "selected")
@ -31,11 +34,20 @@
left (gobj/get props "left" 0)
fixed? (gobj/get props "fixed?" false)
offset (mf/use-state 0)
local (mf/use-state {:offset 0
:levels [{:parent-option nil
:options options}]})
on-local-close
(mf/use-callback
(fn []
(swap! local assoc :levels [{:parent-option nil
:options options}])
(on-close)))
check-menu-offscreen
(mf/use-callback
(mf/deps top @offset)
(mf/deps top (:offset @local))
(fn [node]
(when (and node (not fixed?))
(let [{node-height :height} (dom/get-bounding-rect node)
@ -44,19 +56,58 @@
(- node-height)
0)]
(if (not= target-offset @offset)
(reset! offset target-offset))))))]
(if (not= target-offset (:offset @local))
(swap! local assoc :offset target-offset))))))
enter-submenu
(mf/use-callback
(mf/deps options)
(fn [option-name sub-options]
(fn [event]
(dom/stop-propagation event)
(swap! local update :levels
conj {:parent-option option-name
:options sub-options}))))
exit-submenu
(mf/use-callback
(fn [event]
(dom/stop-propagation event)
(swap! local update :levels pop)))
props (obj/merge props #js {:on-close on-local-close})]
(when open?
[:> dropdown' props
[:div.context-menu {:class (classnames :is-open open?
:fixed fixed?
:is-selectable is-selectable)
:style {:top (+ top @offset)
:style {:top (+ top (:offset @local))
:left left}}
[:ul.context-menu-items {:ref check-menu-offscreen}
(for [[action-name action-handler] options]
[:li.context-menu-item {:class (classnames :is-selected (and selected (= action-name selected)))
:key action-name}
[:a.context-menu-action {:on-click action-handler}
action-name]])]]])))
(let [level (-> @local :levels peek)]
[:ul.context-menu-items {:ref check-menu-offscreen}
(when-let [parent-option (:parent-option level)]
[:*
[:li.context-menu-item
[:a.context-menu-action.submenu-back
{:data-no-close true
:on-click exit-submenu}
[:span i/arrow-slide]
parent-option]]
[:li.separator]])
(for [[option-name option-handler sub-options] (:options level)]
(if (= option-name :separator)
[:li.separator]
[:li.context-menu-item
{:class (classnames :is-selected (and selected
(= option-name selected)))
:key option-name}
(if-not sub-options
[:a.context-menu-action {:on-click option-handler}
option-name]
[:a.context-menu-action.submenu
{:data-no-close true
:on-click (enter-submenu option-name sub-options)}
option-name
[:span i/arrow-slide]])
]))])]])))