💄 Fix component naming style related to layer-item

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
+      :is-read-only true
-      :highlighted? false
+      :is-highlighted false
-      :selected? selected?
+      :is-selected selected?
-      :component-tree? component-tree?
+      :is-component-tree component-tree?
-      :hidden? hidden?
+      :is-filtered false
-      :filtered? false
+      :is-expanded expanded?
-      :expanded? expanded?
+      :hide-toggle hide-toggle?
-      :hide-toggle? hide-toggle?
       :on-select-shape select-shape
       :on-toggle-collapse toggle-collapse}
 

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/defc layer-item-inner*
-  {::mf/wrap-props false}
   [{: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/defc layer-item*
-  {::mf/props :obj
+  {::mf/wrap [mf/memo]}
-   ::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

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/defc frame-wrapper*
-  {::mf/props :obj}
   [{: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