From 444d3f5d4b516835f87ff430b4a83d71a0add4e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <hakon.flatval@cognite.com>
Date: Mon, 17 Jul 2023 16:49:32 +0200
Subject: [PATCH] chore: allow custom content to toolbar

---
 .../RevealToolbar/RevealToolbar.tsx           | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
index 2339f12fe43..d9cb4f28b04 100644
--- a/react-components/src/components/RevealToolbar/RevealToolbar.tsx
+++ b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -15,32 +15,34 @@ const defaultStyle: ToolBarProps = {
   }
 };
 
-export const RevealToolbar = (toolBarProps: ToolBarProps): ReactElement => {
-  if (toolBarProps.className === undefined && toolBarProps.style === undefined) {
-    toolBarProps = { ...toolBarProps, ...defaultStyle };
-  }
-  return (
-    <ToolBar {...toolBarProps}>
-      <>
-        <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
+const defaultContent = (
+  <>
+    <Button type="ghost" icon="Layers" aria-label="3D Resource layers" />
+
+    <div className="cogs-toolbar-divider" />
 
-        <div className="cogs-toolbar-divider" />
+    <FitModelsButton />
+    <Button type="ghost" icon="Collapse" aria-label="Focus asset" />
 
-        <FitModelsButton />
-        <Button type="ghost" icon="Collapse" aria-label="Focus asset" />
+    <div className="cogs-toolbar-divider" />
 
-        <div className="cogs-toolbar-divider" />
+    <SlicerButton />
+    <Button type="ghost" icon="Ruler" aria-label="Make measurements" />
 
-        <SlicerButton />
-        <Button type="ghost" icon="Ruler" aria-label="Make measurements" />
+    <div className="cogs-toolbar-divider" />
 
-        <div className="cogs-toolbar-divider" />
+    <Button type="ghost" icon="Settings" aria-label="Show settings" />
+    <Button type="ghost" icon="Help" aria-label="Display help" />
+  </>
+);
 
-        <Button type="ghost" icon="Settings" aria-label="Show settings" />
-        <Button type="ghost" icon="Help" aria-label="Display help" />
-      </>
-    </ToolBar>
-  );
+export const RevealToolbar = (
+  props: ToolBarProps & { toolBarContent?: JSX.Element }
+): ReactElement => {
+  if (props.className === undefined && props.style === undefined) {
+    props = { ...props, ...defaultStyle };
+  }
+  return <ToolBar {...props}>{props.toolBarContent ?? defaultContent}</ToolBar>;
 };
 
 RevealToolbar.FitModelsButton = FitModelsButton;