3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +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

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

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