0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-02 18:11:20 -05:00

Improve css handling performance on title-bar component

This commit is contained in:
Andrey Antukh 2023-07-13 15:34:28 +02:00
parent e8de8c2401
commit 00f4abbad9

View file

@ -5,14 +5,14 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.title-bar
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(mf/defc title-bar
{::mf/wrap-props false}
{::mf/wrap-props false}
[props]
(let [collapsable? (unchecked-get props "collapsable?")
collapsed? (unchecked-get props "collapsed?")
@ -21,22 +21,20 @@
children (unchecked-get props "children")
on-btn-click (unchecked-get props "on-btn-click")
btn-children (unchecked-get props "btn-children")
klass (unchecked-get props "klass")]
[:div {:class (dom/classnames (css :title-bar) true
klass true)}
klass (dm/str (stl/css :title-bar) " "
(unchecked-get props "klass"))]
[:div {:class klass}
(if collapsable?
[:button {:class (dom/classnames (css :toggle-btn) true)
:on-click on-collapsed}
[:span {:class (dom/classnames (css :collased-icon) true
(css :rotated) collapsed?)}
[:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
[:span {:class (stl/css-case
:collased-icon true
:rotated collapsed?)}
i/arrow-refactor]
[:div {:class (dom/classnames (css :title) true)}
title]]
[:div {:class (dom/classnames (css :title-only) true)}
title])
[:div {:class (stl/css :title)} title]]
[:div {:class (stl/css :title-only)} title])
children
(when (some? on-btn-click)
[:button {:class (dom/classnames (css :title-button) true)
[:button {:class (stl/css :title-button)
:on-click on-btn-click}
btn-children])]))
btn-children])]))