Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-30 08:31:19 -05:00
Code Issues Activity

✨ Properly use use-fn hook on layer-item component on sidebar

Browse source
This commit is contained in:
Andrey Antukh 2022-07-28 08:52:42 +02:00
parent b5796b4cdb
commit d2aa985714
1 changed files with 97 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -84,54 +84,57 @@
(:name shape "")
(when (seq (:touched shape)) " *")])))
(defn- make-collapsed-iref
[id]
#(-> (l/in [:expanded id])
(l/derived refs/workspace-local)))
(mf/defc layer-item
[{:keys [index item selected objects] :as props}]
(let [id (:id item)
blocked? (:blocked item)
hidden? (:hidden item)
disable-drag (mf/use-state false)
scroll-to-middle? (mf/use-var true)
expanded-iref (mf/with-memo [id]
(-> (l/in [:expanded id])
(l/derived refs/workspace-local)))
expanded? (mf/deref expanded-iref)
selected? (contains? selected id)
container? (or (cph/frame-shape? item)
(cph/group-shape? item))
disable-drag (mf/use-state false)
scroll-to-middle? (mf/use-var true)
expanded-iref (mf/use-memo
(mf/deps id)
(make-collapsed-iref id))
expanded? (mf/deref expanded-iref)
toggle-collapse
(mf/use-fn
(mf/deps expanded?)
(fn [event]
(dom/stop-propagation event)
(if (and expanded? (kbd/shift? event))
(st/emit! (dwc/collapse-all))
(st/emit! (dwc/toggle-collapse id))))
(st/emit! (dwc/toggle-collapse id)))))
toggle-blocking
(mf/use-fn
(mf/deps id blocked?)
(fn [event]
(dom/stop-propagation event)
(if (:blocked item)
(if blocked?
(st/emit! (dw/update-shape-flags [id] {:blocked false}))
(st/emit! (dw/update-shape-flags [id] {:blocked true})
(dw/deselect-shape id))))
(dw/deselect-shape id)))))
toggle-visibility
(mf/use-fn
(mf/deps hidden?)
(fn [event]
(dom/stop-propagation event)
(if (:hidden item)
(if hidden?
(st/emit! (dw/update-shape-flags [id] {:hidden false}))
(st/emit! (dw/update-shape-flags [id] {:hidden true}))))
(st/emit! (dw/update-shape-flags [id] {:hidden true})))))
select-shape
(mf/use-fn
(mf/deps id)
(fn [event]
(dom/prevent-default event)
(reset! scroll-to-middle? false)
(let [id (:id item)]
(cond
(kbd/shift? event)
(st/emit! (dw/shift-select-shapes id))
@ -141,44 +144,54 @@
(> (count selected) 1)
(st/emit! (dw/select-shape id))
:else
(st/emit! (dw/select-shape id)))))
on-pointer-enter
(mf/use-fn
(mf/deps id)
(fn [event]
(let [id (:id item)]
(st/emit! (dw/highlight-shape id))))
on-pointer-leave
(mf/use-fn
(mf/deps id)
(fn [event]
(let [id (:id item)]
(st/emit! (dw/dehighlight-shape id))))
on-context-menu
(mf/use-fn
(mf/deps item)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(let [pos (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position pos
:shape item}))))
(st/emit! (dw/show-shape-context-menu {:position pos :shape item})))))
on-drag
(mf/use-fn
(mf/deps id selected)
(fn [{:keys [id]}]
(when (not (contains? selected id))
(st/emit! (dw/select-shape id))))
(st/emit! (dw/select-shape id)))))
on-drop
(mf/use-fn
(mf/deps id)
(fn [side _data]
(if (= side :center)
(st/emit! (dw/relocate-selected-shapes (:id item) 0))
(st/emit! (dw/relocate-selected-shapes id 0))
(let [to-index (if (= side :top) (inc index) index)
parent-id (cph/get-parent-id objects (:id item))]
(st/emit! (dw/relocate-selected-shapes parent-id to-index)))))
parent-id (cph/get-parent-id objects id)]
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
on-hold
(mf/use-fn
(mf/deps id expanded?)
(fn []
(when-not expanded?
(st/emit! (dwc/toggle-collapse (:id item)))))
(st/emit! (dwc/toggle-collapse id)))))
[dprops dref] (hooks/use-sortable
:data-type "penpot/layer"
@ -193,9 +206,7 @@
ref (mf/use-ref)]
(mf/use-effect
(mf/deps selected? selected)
(fn []
(mf/with-effect [selected? selected]
(let [single? (= (count selected) 1)
node (mf/ref-val ref)
@ -211,7 +222,7 @@
(reset! scroll-to-middle? true))))))]
#(when (some? subid)
(rx/dispose! subid)))))
(rx/dispose! subid))))
[:li {:on-context-menu on-context-menu
:ref dref