diff --git a/frontend/src/app/main/ui/inspect/left_sidebar.cljs b/frontend/src/app/main/ui/inspect/left_sidebar.cljs index 6f521decc5..e8ef179e92 100644 --- a/frontend/src/app/main/ui/inspect/left_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/left_sidebar.cljs @@ -12,7 +12,7 @@ [app.common.types.component :as ctk] [app.main.data.viewer :as dv] [app.main.store :as st] - [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]] + [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner*]] [app.util.dom :as dom] [app.util.keyboard :as kbd] [okulary.core :as l] @@ -26,7 +26,6 @@ (mf/defc layer-item [{:keys [item selected objects depth component-child? hide-toggle?] :as props}] (let [id (:id item) - hidden? (:hidden item) selected? (contains? selected id) item-ref (mf/use-ref nil) depth (+ depth 1) @@ -68,18 +67,17 @@ (when (and (= (count selected) 1) selected?) (dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true)))) - [:& layer-item-inner + [:> layer-item-inner* {:ref item-ref :item item :depth depth - :read-only? true - :highlighted? false - :selected? selected? - :component-tree? component-tree? - :hidden? hidden? - :filtered? false - :expanded? expanded? - :hide-toggle? hide-toggle? + :is-read-only true + :is-highlighted false + :is-selected selected? + :is-component-tree component-tree? + :is-filtered false + :is-expanded expanded? + :hide-toggle hide-toggle? :on-select-shape select-shape :on-toggle-collapse toggle-collapse} diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index b19093d3d6..5f6c418ca4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -50,8 +50,7 @@ (when (seq enter) (apply st/emit! (map dw/highlight-shape enter)))))))) -(mf/defc layer-item-inner - {::mf/wrap-props false} +(mf/defc layer-item-inner* [{:keys [item depth parent-size name-ref children ref style ;; Flags is-read-only is-highlighted is-selected is-component-tree @@ -188,9 +187,8 @@ children])) ;; Memoized for performance -(mf/defc layer-item - {::mf/props :obj - ::mf/wrap [mf/memo]} +(mf/defc layer-item* + {::mf/wrap [mf/memo]} [{:keys [index item selected objects is-sortable is-filtered depth parent-size is-component-child highlighted style render-children] :or {render-children true}}] (let [id (:id item) @@ -469,7 +467,7 @@ (.observe observer lazy-node) (mf/set-ref-val! observer-ref observer))))) - [:& layer-item-inner + [:> layer-item-inner* {:ref dref :item item :depth depth @@ -508,7 +506,7 @@ visible (take children-count all-children)] (for [[index id] visible] (when-let [item (get objects id)] - [:& layer-item + [:> layer-item* {:item item :highlighted highlighted :selected selected diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 5a14ba7164..46b023152a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -21,7 +21,7 @@ [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.hooks :as hooks] [app.main.ui.notifications.badge :refer [badge-notification]] - [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]] + [app.main.ui.workspace.sidebar.layer-item :refer [layer-item*]] [app.util.dom :as dom] [app.util.globals :as globals] [app.util.i18n :as i18n :refer [tr]] @@ -38,8 +38,7 @@ ;; This components is a piece for sharding equality check between top ;; level frames and try to avoid rerender frames that are does not ;; affected by the selected set. -(mf/defc frame-wrapper - {::mf/props :obj} +(mf/defc frame-wrapper* [{:keys [selected] :as props}] (let [pending-selected (mf/use-var selected) current-selected (mf/use-state selected) @@ -60,7 +59,7 @@ (reset! pending-selected nil) #(rx/dispose! set-selected))) - [:> layer-item props])) + [:> layer-item* props])) (mf/defc layers-tree {::mf/wrap [mf/memo #(mf/throttle % 200)] @@ -76,7 +75,7 @@ (for [[index id] (reverse (d/enumerate (:shapes root)))] (when-let [obj (get objects id)] (if (cfh/frame-shape? obj) - [:& frame-wrapper + [:> frame-wrapper* {:item obj :selected selected :highlighted highlighted @@ -87,7 +86,7 @@ :is-filtered is-filtered :parent-size parent-size :depth -1}] - [:& layer-item + [:> layer-item* {:item obj :selected selected :highlighted highlighted @@ -109,7 +108,7 @@ [:ul {:class (stl/css :element-list)} (for [[index id] (d/enumerate (:shapes root))] (when-let [obj (get objects id)] - [:& layer-item + [:> layer-item* {:item obj :selected selected :index index