VUU-33 use componentId for screenshot

ScottLogic · Sep 6, 2023 · 82f0107 · 82f0107
1 parent 602b557
commit 82f0107
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -33,10 +33,11 @@ type RadioValue = typeof radioValues[number];
 type SaveLayoutPanelProps = {
   onCancel: () => void;
   onSave: (layoutMetadata: Omit<LayoutMetadata, "id">) => void;
+  componentId?: string
 };
 
 export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
-  const { onCancel, onSave } = props;
+  const { onCancel, onSave, componentId } = props;
 
   const [layoutName, setLayoutName] = useState<string>("");
   const [group, setGroup] = useState<string>("");
@@ -45,9 +46,11 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
   const [screenshot, setScreenshot] = useState<string | undefined>();
 
   useEffect(() => {
-    takeScreenshot(document.getElementsByClassName("vuuShell-content")[0] as HTMLElement).then(screenshot =>
-      setScreenshot(screenshot)
-    )
+    if (componentId) {
+      takeScreenshot(document.getElementById(componentId) as HTMLElement).then(screenshot =>
+        setScreenshot(screenshot)
+      )
+    }
   }, [])
 
   const handleSubmit = () => {

diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx
@@ -83,6 +83,7 @@ const ShellWithNewTheme = () => {
             <SaveLayoutPanel
               onCancel={handleCloseDialog}
               onSave={handleSave}
+              componentId={action.options.controlledComponentId}
             />
           );
           return true;