From cfcf8fc0331287f3a4fe518b2a93dda5bb181ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Mon, 13 Nov 2023 09:54:14 +0100
Subject: [PATCH] [ivette/sidebar] beautify code for selector
---
ivette/src/renderer/Sidebar.tsx | 32 ++++++++------------------------
1 file changed, 8 insertions(+), 24 deletions(-)
diff --git a/ivette/src/renderer/Sidebar.tsx b/ivette/src/renderer/Sidebar.tsx
index f27b3383a53..c7b33a3bdff 100644
--- a/ivette/src/renderer/Sidebar.tsx
+++ b/ivette/src/renderer/Sidebar.tsx
@@ -46,32 +46,16 @@ function Selector(props: SelectorProps): JSX.Element {
const className = classes(
'sidebar-selector',
'dome-color-frame',
- selected === id ? 'sidebar-selector-selected' : ''
+ selected === id && 'sidebar-selector-selected',
);
-
+ const onClick = React.useCallback(() => setSelected(id), [setSelected, id]);
+ const component =
+ iconPath
+ ? <img className="sidebar-selector-icon" src={iconPath} alt={label} />
+ : <label className="sidebar-selector-label">{label}</label>;
return (
- <div className={className}>
- {iconPath ?
- <img
- className="sidebar-selector-icon"
- src={iconPath}
- alt={label}
- title={title}
- onClick={
- () => setSelected(id)
- }
- />
- :
- <label
- className="sidebar-selector-label"
- onClick={
- () => setSelected(id)
- }
- >
- {label.slice(0, 4).toLocaleUpperCase()}
- </label>
- }
- <br/>
+ <div className={className} title={title} onClick={onClick}>
+ {component}
</div>
);
}
--
GitLab