3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 15:08:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix broken hooks rule on shapes fills component

Browse source
This commit is contained in:
Andrey Antukh 2023-09-12 16:06:53 +02:00
parent 385fd9c4e6
commit 393863b29f
1 changed files with 99 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

53
frontend/src/app/main/ui/shapes/fills.cljs
View file

@ -18,26 +18,17 @@
(def no-repeat-padding 1.05)
;; FIXME: this component breaks hooks rules
(mf/defc fills
(mf/defc fills*
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
render-id (unchecked-get props "render-id")
shape-type (dm/get-prop shape :type)
fill-image (:fill-image shape)
shape-fills (:fills shape [])]
type (dm/get-prop shape :type)
image (get shape :fill-image)
fills (get shape :fills [])
(when (or (some? fill-image)
(or (= shape-type :image)
(= shape-type :text))
(> (count shape-fills) 1)
(some :fill-color-gradient shape-fills))
(let [selrect (dm/get-prop shape :selrect)
selrect (dm/get-prop shape :selrect)
metadata (get shape :metadata)
x (dm/get-prop selrect :x)
y (dm/get-prop selrect :y)
@ -45,19 +36,19 @@
height (dm/get-prop selrect :height)
has-image? (or (some? metadata)
(some? fill-image))
(some? image))
uri (cond
(some? metadata)
(cfg/resolve-file-media metadata)
(some? fill-image)
(cfg/resolve-file-media fill-image))
(some? image)
(cfg/resolve-file-media image))
embed (embed/use-data-uris [uri])
transform (gsh/transform-str shape)
;; When true the image has not loaded yet
;; When tru e the image has not loaded yet
loading? (and (some? uri)
(not (contains? embed uri)))
@ -68,13 +59,13 @@
:height height
:data-loading loading?}
pat-props (if (= :path shape-type)
pat-props (if (= :path type)
(obj/set! pat-props "patternTransform" transform)
pat-props)]
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
[:* {:key (dm/str shape-index)}
(for [[fill-index value] (reverse (d/enumerate shape-fills))]
(for [[fill-index value] (reverse (d/enumerate fills))]
(when (some? (:fill-color-gradient value))
(let [gradient (:fill-color-gradient value)
props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
@ -93,8 +84,8 @@
(-> (obj/set! "width" (* width no-repeat-padding))
(obj/set! "height" (* height no-repeat-padding)))))
[:g
(for [[fill-index value] (reverse (d/enumerate shape-fills))]
(let [style (attrs/get-fill-style value fill-index render-id shape-type)
(for [[fill-index value] (reverse (d/enumerate fills))]
(let [style (attrs/get-fill-style value fill-index render-id type)
props #js {:key (dm/str fill-index)
:width width
:height height
@ -115,4 +106,20 @@
:x 0
:y 0
:width width
:height height}]])]])])))))
:height height}]])]])])))
(mf/defc fills
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
type (dm/get-prop shape :type)
image (:fill-image shape)
fills (:fills shape [])]
(when (or (some? image)
(or (= type :image)
(= type :text))
(> (count fills) 1)
(some :fill-color-gradient fills))
[:> fills* props])))