fix: errors due to improperly passing custom props to native elements (…

…#3684) Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
cognitedata · Sep 7, 2023 · 6c0e4a3 · 6c0e4a3
1 parent 143f24f
commit 6c0e4a3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/react-components/src/components/RevealToolbar/RevealToolbar.tsx b/react-components/src/components/RevealToolbar/RevealToolbar.tsx
@@ -23,13 +23,15 @@ const defaultStyle: ToolBarProps = {
   }
 };
 
-type RevealToolbarProps = ToolBarProps & {
+type RevealToolbarProps = ToolBarProps & CustomContent;
+
+type CustomContent = {
   customSettingsContent?: JSX.Element;
   lowFidelitySettings?: Partial<QualitySettings>;
   highFidelitySettings?: Partial<QualitySettings>;
 };
 
-const DefaultContentWrapper = (props: RevealToolbarProps): ReactElement => {
+const DefaultContentWrapper = (props: CustomContent): ReactElement => {
   return (
     <>
       <LayersButton />
@@ -52,15 +54,27 @@ const DefaultContentWrapper = (props: RevealToolbarProps): ReactElement => {
   );
 };
 
-const RevealToolbarContainer = (
-  props: RevealToolbarProps & { toolBarContent?: JSX.Element }
-): ReactElement => {
-  if (props.className === undefined && props.style === undefined) {
-    props = { ...props, ...defaultStyle };
+const RevealToolbarContainer = ({
+  customSettingsContent,
+  lowFidelitySettings,
+  highFidelitySettings,
+  toolBarContent,
+  ...restProps
+}: RevealToolbarProps & { toolBarContent?: JSX.Element }): ReactElement => {
+  if (restProps.className === undefined && restProps.style === undefined) {
+    restProps = { ...restProps, ...defaultStyle };
   }
   return (
     <I18nWrapper translations={translations} addNamespace="reveal-react-components">
-      <ToolBar {...props}>{props.toolBarContent ?? <DefaultContentWrapper {...props} />}</ToolBar>
+      <ToolBar {...restProps}>
+        {toolBarContent ?? (
+          <DefaultContentWrapper
+            customSettingsContent={customSettingsContent}
+            highFidelitySettings={highFidelitySettings}
+            lowFidelitySettings={lowFidelitySettings}
+          />
+        )}
+      </ToolBar>
     </I18nWrapper>
   );
 };

diff --git a/react-components/stories/Toolbar.stories.tsx b/react-components/stories/Toolbar.stories.tsx
@@ -85,11 +85,11 @@ const exampleHighQualitySettings: QualitySettings = {
 
 const exampleLowQualitySettings: QualitySettings = {
   cadBudget: {
-    maximumRenderCost: 95000000,
+    maximumRenderCost: 10_000_000,
     highDetailProximityThreshold: 100
   },
   pointCloudBudget: {
-    numberOfPoints: 12000000
+    numberOfPoints: 2_000_000
   },
   resolutionOptions: {
     maxRenderResolution: 1e5,