@pdfme/ui 5.5.2 → 5.5.3-dev.2

package/dist/types/src/components/Designer/RightSidebar/ListView/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SidebarProps } from '../../../../types.js';
-declare const ListView: (props: Pick<SidebarProps, "schemas" | "onSortEnd" | "onEdit" | "size" | "hoveringSchemaId" | "onChangeHoveringSchemaId" | "changeSchemas">) => React.JSX.Element;
+declare const ListView: (props: Pick<SidebarProps, "schemas" | "onSortEnd" | "onEdit" | "hoveringSchemaId" | "onChangeHoveringSchemaId" | "changeSchemas">) => React.JSX.Element;
 export default ListView;

package/dist/types/src/components/Designer/RightSidebar/layout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare const SIDEBAR_H_PADDING_PX = 16;
+export declare const SIDEBAR_V_PADDING_PX = 8;
+export declare const SIDEBAR_HEADER_HEIGHT = 60;
+type SectionProps = {
+    children: React.ReactNode;
+};
+type SidebarFrameProps = SectionProps & {
+    className?: string;
+};
+export declare const SidebarFrame: ({ children, className }: SidebarFrameProps) => React.JSX.Element;
+export declare const SidebarHeader: ({ children }: SectionProps) => React.JSX.Element;
+export declare const SidebarBody: ({ children }: SectionProps) => React.JSX.Element;
+export declare const SidebarFooter: ({ children }: SectionProps) => React.JSX.Element;
+export {};

package/dist/types/src/constants.d.ts

@@ -7,3 +7,5 @@ export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";
 export declare const DEFAULT_MAX_ZOOM = 2;
+export declare const DESIGNER_CLASSNAME = "pdfme-designer-";
+export declare const UI_CLASSNAME = "pdfme-ui-";

package/dist/types/src/helper.d.ts

@@ -54,7 +54,6 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     schemaId: string;
 }[];
 export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
-export declare const getSidebarContentHeight: (sidebarHeight: number) => number;
 export declare const changeSchemas: (args: {
     objs: {
         key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.2",
+  "version": "5.5.3-dev.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/CtlBar.tsx

@@ -8,6 +8,7 @@ import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
 import { I18nContext } from '../contexts.js';
 import { useMaxZoom } from '../helper.js';
+import { UI_CLASSNAME } from '../constants.js';
 
 const { Text } = Typography;
 
@@ -29,6 +30,7 @@ const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <Button
+        className={UI_CLASSNAME + 'zoom-out'}
         type="text"
         disabled={minZoom >= nextZoomOut}
         onClick={() => setZoomLevel(nextZoomOut)}
@@ -38,6 +40,7 @@ const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
         {Math.round(zoomLevel * 100)}%
       </Text>
       <Button
+        className={UI_CLASSNAME + 'zoom-in'}
         type="text"
         disabled={maxZoom < nextZoomIn}
         onClick={() => setZoomLevel(nextZoomIn)}
@@ -57,13 +60,14 @@ type PagerProps = {
 const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Button type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
+      <Button className={UI_CLASSNAME + 'page-prev'} type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
         <ChevronLeft size={16} color={style.textStyle.color} />
       </Button>
       <Text strong style={style.textStyle}>
         {pageCursor + 1}/{pageNum}
       </Text>
       <Button
+        className={UI_CLASSNAME + 'page-next'}
         type="text"
         disabled={pageCursor + 1 >= pageNum}
         onClick={() => setPageCursor(pageCursor + 1)}
@@ -80,7 +84,7 @@ type ContextMenuProps = {
 };
 const ContextMenu = ({ items, style }: ContextMenuProps) => (
   <Dropdown menu={{ items }} placement="top" arrow trigger={['click']}>
-    <Button type="text">
+    <Button className={UI_CLASSNAME + 'context-menu'} type="text">
       <Ellipsis size={16} color={style.textStyle.color} />
     </Button>
   </Dropdown>
@@ -139,6 +143,7 @@ const CtlBar = (props: CtlBarProps) => {
   return (
     <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
       <div
+        className={UI_CLASSNAME + 'control-bar'}
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -155,14 +160,18 @@ const CtlBar = (props: CtlBarProps) => {
         }}
       >
         {pageNum > 1 && (
-          <Pager
-            style={{ textStyle }}
-            pageCursor={pageCursor}
-            pageNum={pageNum}
-            setPageCursor={setPageCursor}
-          />
+          <div className={UI_CLASSNAME + 'pager'}>
+            <Pager
+              style={{ textStyle }}
+              pageCursor={pageCursor}
+              pageNum={pageNum}
+              setPageCursor={setPageCursor}
+            />
+          </div>
         )}
-        <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        <div className={UI_CLASSNAME + 'zoom'}>
+          <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        </div>
         {contextMenuItems.length > 0 && (
           <ContextMenu items={contextMenuItems} style={{ textStyle }} />
         )}

package/src/components/Designer/Canvas/index.tsx

@@ -22,9 +22,9 @@ import {
 } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../constants.js';
 import { usePrevious } from '../../../hooks.js';
-import { uuid, round, flatten } from '../../../helper.js';
+import { round, flatten, uuid } from '../../../helper.js';
 import Paper from '../../Paper.js';
 import Renderer from '../../Renderer.js';
 import Selecto from './Selecto.js';
@@ -52,6 +52,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
   return (
     <Button
       id={DELETE_BTN_ID}
+      className={DESIGNER_CLASSNAME + 'delete-button'}
       style={{
         position: 'absolute',
         zIndex: 1,
@@ -350,6 +351,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'canvas'}
       style={{
         position: 'relative',
         overflow: 'auto',

package/src/components/Designer/LeftSidebar.tsx

@@ -4,7 +4,7 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import Renderer from '../Renderer.js';
-import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { LEFT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../constants.js';
 import { setFontNameRecursively } from '../../helper';
 import { OptionsContext, PluginsRegistry } from '../../contexts.js';
 import PluginIcon from './PluginIcon.js';
@@ -83,6 +83,7 @@ const LeftSidebar = ({
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'left-sidebar'}
       style={{
         left: 0,
         right: 0,
@@ -98,9 +99,12 @@ const LeftSidebar = ({
       {pluginsRegistry.entries().map(([label, plugin]) => {
         if (!plugin?.propPanel.defaultSchema) return null;
 
+        const pluginType = plugin.propPanel.defaultSchema.type;
+
         return (
           <Draggable key={label} scale={scale} basePdf={basePdf} plugin={plugin}>
             <Button
+              className={DESIGNER_CLASSNAME + 'plugin-' + pluginType}
               onMouseDown={() => setIsDragging(true)}
               style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
             >

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -1,6 +1,7 @@
 import { Space, Button, Form } from 'antd';
 import React from 'react';
 import type { PropPanelWidgetProps } from '@pdfme/common';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import {
   AlignStartVertical,
   AlignStartHorizontal,
@@ -213,6 +214,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
       <Space.Compact>
         {layoutBtns.map((btn) => (
           <Button
+            className={DESIGNER_CLASSNAME + 'align-' + btn.id}
             key={btn.id}
             style={{ padding: 7 }}
             disabled={activeElements.length <= 2 && ['vertical', 'horizontal'].includes(btn.id)}

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -1,5 +1,5 @@
 import { useForm } from 'form-render';
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext, useState, useEffect, useCallback } from 'react';
 import type {
   Dict,
   ChangeSchemaItem,
@@ -12,12 +12,14 @@ import { isBlankPdf } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
-import { getSidebarContentHeight, debounce } from '../../../../helper.js';
+import { debounce } from '../../../../helper.js';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget.js';
 import WidgetRenderer from './WidgetRenderer.js';
 import ButtonGroupWidget from './ButtonGroupWidget.js';
 import { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/es/interface.js';
+import { SidebarBody, SidebarFrame, SidebarHeader, SIDEBAR_H_PADDING_PX } from '../layout.js';
 
 // Import FormRender as a default import
 import FormRenderComponent from 'form-render';
@@ -41,8 +43,7 @@ type DetailViewProps = Pick<
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } =
-    props;
+  const { schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -50,10 +51,13 @@ const DetailView = (props: DetailViewProps) => {
   const options = useContext(OptionsContext);
 
   // Define a type-safe i18n function that accepts string keys
-  const typedI18n = (key: string): string => {
-    // Use a type assertion to handle the union type constraint
-    return typeof i18n === 'function' ? i18n(key as keyof Dict) : key;
-  };
+  const typedI18n = useCallback(
+    (key: string): string => {
+      // Use a type assertion to handle the union type constraint
+      return typeof i18n === 'function' ? i18n(key as keyof Dict) : key;
+    },
+    [i18n],
+  );
 
   const [widgets, setWidgets] = useState<{
     [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
@@ -83,7 +87,7 @@ const DetailView = (props: DetailViewProps) => {
       });
     }
     setWidgets(newWidgets);
-  }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
+  }, [activeSchema, options, pluginsRegistry, props, token, typedI18n]);
 
   useEffect(() => {
     // Create a type-safe copy of the schema with editable property
@@ -94,7 +98,7 @@ const DetailView = (props: DetailViewProps) => {
     form.setValues(values);
   }, [activeSchema, form]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id]);
+  useEffect(() => form.resetFields(), [activeSchema.id, form]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -423,15 +427,20 @@ const DetailView = (props: DetailViewProps) => {
   }
 
   return (
-    <div>
-      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+    <SidebarFrame className={DESIGNER_CLASSNAME + 'detail-view'}>
+      <SidebarHeader>
         <Button
+          className={DESIGNER_CLASSNAME + 'back-button'}
           style={{
             position: 'absolute',
+            left: SIDEBAR_H_PADDING_PX,
             zIndex: 100,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            transform: 'translateY(-50%)',
+            top: '50%',
+            paddingTop: '3px',
           }}
           onClick={deselectSchema}
           icon={<Menu strokeWidth={1.5} size={20} />}
@@ -439,15 +448,8 @@ const DetailView = (props: DetailViewProps) => {
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {typedI18n('editField')}
         </Text>
-      </div>
-      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      <div
-        style={{
-          height: getSidebarContentHeight(size.height),
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-      >
+      </SidebarHeader>
+      <SidebarBody>
         <FormRenderComponent
           form={form}
           schema={propPanelSchema}
@@ -455,8 +457,8 @@ const DetailView = (props: DetailViewProps) => {
           watch={{ '#': handleWatch }}
           locale="en-US"
         />
-      </div>
-    </div>
+      </SidebarBody>
+    </SidebarFrame>
   );
 };
 

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -135,29 +135,27 @@ const SelectableSortableContainer = (
       }}
     >
       <>
-        <div style={{ height: '100%', overflowY: 'auto' }}>
-          <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
-            <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
-              {schemas.map((schema) => (
-                <SelectableSortableItem
-                  key={schema.id}
-                  style={{
-                    border: `1px solid ${
-                      schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
-                    }`,
-                  }}
-                  schema={schema}
-                  schemas={schemas}
-                  isSelected={isItemSelected(schema.id) || activeId === schema.id}
-                  onEdit={onEdit}
-                  onSelect={onSelectionChanged}
-                  onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
-                  onMouseLeave={() => onChangeHoveringSchemaId(null)}
-                />
-              ))}
-            </ul>
-          </SortableContext>
-        </div>
+        <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
+          <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
+            {schemas.map((schema) => (
+              <SelectableSortableItem
+                key={schema.id}
+                style={{
+                  border: `1px solid ${
+                    schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
+                  }`,
+                }}
+                schema={schema}
+                schemas={schemas}
+                isSelected={isItemSelected(schema.id) || activeId === schema.id}
+                onEdit={onEdit}
+                onSelect={onSelectionChanged}
+                onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
+                onMouseLeave={() => onChangeHoveringSchemaId(null)}
+              />
+            ))}
+          </ul>
+        </SortableContext>
         {createPortal(
           <DragOverlay adjustScale>
             {activeId

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -1,42 +1,30 @@
 import React, { useContext, useState } from 'react';
 import type { SidebarProps } from '../../../../types.js';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants.js';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { I18nContext } from '../../../../contexts.js';
-import { getSidebarContentHeight } from '../../../../helper.js';
-import { theme, Input, Typography, Divider, Button } from 'antd';
+import { Input, Typography, Button } from 'antd';
 import SelectableSortableContainer from './SelectableSortableContainer.js';
+import { SidebarBody, SidebarFooter, SidebarFrame, SidebarHeader } from '../layout.js';
 
 const { Text } = Typography;
 const { TextArea } = Input;
 
-const headHeight = 40;
-
 const ListView = (
   props: Pick<
     SidebarProps,
     | 'schemas'
     | 'onSortEnd'
     | 'onEdit'
-    | 'size'
     | 'hoveringSchemaId'
     | 'onChangeHoveringSchemaId'
     | 'changeSchemas'
   >,
 ) => {
-  const {
-    schemas,
-    onSortEnd,
-    onEdit,
-    size,
-    hoveringSchemaId,
-    onChangeHoveringSchemaId,
-    changeSchemas,
-  } = props;
-  const { token } = theme.useToken();
+  const { schemas, onSortEnd, onEdit, hoveringSchemaId, onChangeHoveringSchemaId, changeSchemas } =
+    props;
   const i18n = useContext(I18nContext);
   const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = useState(false);
   const [fieldNamesValue, setFieldNamesValue] = useState('');
-  const height = getSidebarContentHeight(size.height);
 
   const commitBulk = () => {
     const names = fieldNamesValue.split('\n');
@@ -60,23 +48,22 @@ const ListView = (
   };
 
   return (
-    <div>
-      <div style={{ height: headHeight, display: 'flex', alignItems: 'center' }}>
+    <SidebarFrame className={DESIGNER_CLASSNAME + 'list-view'}>
+      <SidebarHeader>
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {i18n('fieldsList')}
         </Text>
-      </div>
-      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      <div style={{ height: height - headHeight }}>
+      </SidebarHeader>
+      <SidebarBody>
         {isBulkUpdateFieldNamesMode ? (
           <TextArea
             wrap="off"
             value={fieldNamesValue}
             onChange={(e) => setFieldNamesValue(e.target.value)}
             style={{
-              paddingLeft: 30,
-              height: height - headHeight,
-              width: RIGHT_SIDEBAR_WIDTH - 35,
+              height: '100%',
+              width: '100%',
+              resize: 'none',
               lineHeight: '2.75rem',
             }}
           />
@@ -89,32 +76,40 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div
-          style={{
-            paddingTop: '0.5rem',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-          }}
-        >
-          {isBulkUpdateFieldNamesMode ? (
-            <>
-              <Button size="small" type="text" onClick={commitBulk}>
-                <u> {i18n('commitBulkUpdateFieldName')}</u>
-              </Button>
-              <span style={{ margin: '0 1rem' }}>/</span>
-              <Button size="small" type="text" onClick={() => setIsBulkUpdateFieldNamesMode(false)}>
-                <u> {i18n('cancel')}</u>
-              </Button>
-            </>
-          ) : (
-            <Button size="small" type="text" onClick={startBulk}>
-              <u> {i18n('bulkUpdateFieldName')}</u>
+      </SidebarBody>
+      <SidebarFooter>
+        {isBulkUpdateFieldNamesMode ? (
+          <>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-commit'}
+              size="small"
+              type="text"
+              onClick={commitBulk}
+            >
+              <u> {i18n('commitBulkUpdateFieldName')}</u>
+            </Button>
+            <span>/</span>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-cancel'}
+              size="small"
+              type="text"
+              onClick={() => setIsBulkUpdateFieldNamesMode(false)}
+            >
+              <u> {i18n('cancel')}</u>
             </Button>
-          )}
-        </div>
-      </div>
-    </div>
+          </>
+        ) : (
+          <Button
+            className={DESIGNER_CLASSNAME + 'bulk-update'}
+            size="small"
+            type="text"
+            onClick={startBulk}
+          >
+            <u> {i18n('bulkUpdateFieldName')}</u>
+          </Button>
+        )}
+      </SidebarFooter>
+    </SidebarFrame>
   );
 };
 

package/src/components/Designer/RightSidebar/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { theme, Button } from 'antd';
 import type { SidebarProps } from '../../../types.js';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../constants.js';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import ListView from './ListView/index.js';
 import DetailView from './DetailView/index.js';
@@ -21,6 +21,7 @@ const Sidebar = (props: SidebarProps) => {
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'right-sidebar'}
       style={{
         position: 'absolute',
         right: 0,
@@ -29,43 +30,40 @@ const Sidebar = (props: SidebarProps) => {
         width: sidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0,
       }}
     >
-      <div>
-        <Button
-          style={{
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            top: '1rem',
-            right: '1rem',
-            zIndex: 100,
-          }}
-          icon={sidebarOpen ? <ArrowRight {...iconProps} /> : <ArrowLeft {...iconProps} />}
-          onClick={() => setSidebarOpen(!sidebarOpen)}
-        />
-        <div
-          style={{
-            width: RIGHT_SIDEBAR_WIDTH,
-            height: '100%',
-            display: sidebarOpen ? 'block' : 'none',
-            top: 0,
-            right: 0,
-            position: 'absolute',
-            padding: '0.7rem 1rem',
-            overflowY: 'auto',
-            fontFamily: "'Open Sans', sans-serif",
-            boxSizing: 'border-box',
-            background: token.colorBgLayout,
-          }}
-        >
-          <div>
-            {getActiveSchemas().length === 0 ? (
-              <ListView {...props} />
-            ) : (
-              <DetailView {...props} activeSchema={getLastActiveSchema()} />
-            )}
-          </div>
-        </div>
+      <Button
+        className={DESIGNER_CLASSNAME + 'sidebar-toggle'}
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          top: '14px',
+          right: '16px',
+          paddingTop: '2px',
+          zIndex: 100,
+        }}
+        icon={sidebarOpen ? <ArrowRight {...iconProps} /> : <ArrowLeft {...iconProps} />}
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+      />
+      <div
+        style={{
+          width: RIGHT_SIDEBAR_WIDTH,
+          height: '100%',
+          display: sidebarOpen ? 'flex' : 'none',
+          top: 0,
+          right: 0,
+          position: 'absolute',
+          fontFamily: "'Open Sans', sans-serif",
+          boxSizing: 'border-box',
+          background: token.colorBgLayout,
+          borderLeft: `1px solid ${token.colorSplit}`,
+        }}
+      >
+        {getActiveSchemas().length === 0 ? (
+          <ListView {...props} />
+        ) : (
+          <DetailView {...props} activeSchema={getLastActiveSchema()} />
+        )}
       </div>
     </div>
   );