Add inline preview feature

epam · Mar 22, 2024 · 695490a · 695490a
1 parent 0afdc3a
commit 695490a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/app/src/preview/componentPreview/utils/previewUtils.ts b/app/src/preview/componentPreview/utils/previewUtils.ts
@@ -26,12 +26,12 @@ export const componentsPreviewMap = componentsStructure.reduce<Map<string, { pre
     const config = Comp?.config;
     if (config) {
         const previewIds = getPreviewOptions(config);
-        if (previewIds?.length) {
-            acc.set(entry.id, {
-                previewIds,
-                config,
-            });
-        }
+        // if (previewIds?.length) {
+        acc.set(entry.id, {
+            previewIds,
+            config,
+        });
+        // }
     }
     return acc;
 }, new Map());

diff --git a/app/src/preview/componentPreview/view/editPreviewModal.tsx b/app/src/preview/componentPreview/view/editPreviewModal.tsx
@@ -14,7 +14,7 @@ import {
 import { componentItems, componentsPreviewMap, getDefaultPreviewId } from '../utils/previewUtils';
 import { useArrayDataSource } from '@epam/uui-core';
 import { TTheme } from '../../../common/docs/docsConstants';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { isPreviewIdInline } from '../../../common/docs/componentEditor/previewLinkUtils';
 
 const title = 'Edit';
@@ -41,7 +41,14 @@ export function EditPreviewModal(modalProps: IModal<TComponentPreviewParams>) {
         previewItems = previewItems.concat([{ id: previewId, name: '<inline>' }]);
     }
 
-    const dsComponents = useArrayDataSource({ items: componentItems }, [componentItems]);
+    const componentItemsAll: { id: string, name: string }[] = useMemo(() => {
+        if (!componentItems.find(({ id }) => id === componentId)) {
+            return componentItems.concat([{ id: componentId, name: componentId }]);
+        }
+        return componentItems;
+    }, [componentId]);
+
+    const dsComponents = useArrayDataSource({ items: componentItemsAll }, [componentItemsAll]);
     const dsPreview = useArrayDataSource<{ id: string, name: string }, unknown, unknown>({ items: previewItems }, [previewItems]);
     const dsThemes = useArrayDataSource({ items: Object.values(TTheme).map((id) => ({ id, name: id })) }, []);
 

diff --git a/app/src/preview/componentPreview/view/previewToolbar.tsx b/app/src/preview/componentPreview/view/previewToolbar.tsx
@@ -8,7 +8,7 @@ import { useUuiContext } from '@epam/uui-core';
 import { useMemo, useState } from 'react';
 import { TComponentPreviewParams } from '../types';
 import { EditPreviewModal } from './editPreviewModal';
-import { componentItems, componentsPreviewMap } from '../utils/previewUtils';
+import { componentsPreviewMap } from '../utils/previewUtils';
 import { isPreviewIdInline } from '../../../common/docs/componentEditor/previewLinkUtils';
 
 interface IPreviewToolbar {
@@ -163,10 +163,7 @@ export function PreviewToolbar(props: IPreviewToolbar) {
 }
 
 function normalizeModalValue(propsValue: TComponentPreviewParams): TComponentPreviewParams {
-    let componentId: string;
-    if (propsValue.componentId && componentItems.find((i) => i.id === propsValue.componentId)) {
-        componentId = propsValue.componentId;
-    }
+    const componentId: string = propsValue.componentId;
     const previewItems = componentsPreviewMap.get(componentId)?.previewIds || [];
 
     let previewId: string;