디자이너 컴포넌트 - 보고서 구성요소(Parts)

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { Viewer as ReportViewer, Designer } from "@mescius/activereportsjs-react";
import { FontStore } from "@mescius/activereportsjs/core";

function App() {
  const designer = React.useRef();
  const viewer = React.useRef();
  React.useEffect(() => {
    designer.current.getPanelsAPI().then(function(panelsApi){
      panelsApi.menu.open("libraries-list");
    })
  });  
  const [designerVisible, setDesignerVisible] = React.useState(true);
  function onDesignerInit(){
    const appBarSettings = {
      visible: true, // Show the app bar
      homeTab: {
        visible: true, // Show the home tab
      },
      contextActionsTab: {
        visible: false, // Hide the context actions tab
      },
      parametersTab: {
        visible: false, // Hide the parameters tab
      },
    };
    const toolBarSettings = {
      visible: true, // Show the toolbar
    };
    const menuSettings = {
      visible: true, // Show the main menu
      toolBox: {
        visible: false, // Hide the Tool Box
      },
      documentExplorer: {
        visible: true, // Show the Document Explorer
      },
      groupEditor: {
        visible: false, // Hide the Group Editor
      },
      layerEditor: {
        visible: false, // Hide the Layer Editor
      },
      logo: {
        visible: false, // Hide the logo
      },
    };
    const dataTabSettings = {
      dataTab: {
        visible: false, // Hide the Data tab
      },
    };
    const propertyGridSettings = {
      propertiesTab: {
        visible: true, // Show the Properties tab
      },
      mode: "Basic", // Set the Property Grid mode to "Advanced" or "Basic"
    };
    const statusBarSettings = {
      visible: false, // Hide the status bar
    };
    const themeConfig = {
      initialTheme: "ActiveReports",
      themeSelector: {
        isEnabled: true,
        availableThemes: ["ActiveReports", "ActiveReportsDark"]
      }      
    };
    const libraries = [
      {
        id: 'reports/ReportLib.rdlx-json',
        name: 'ReportLib',
        displayName: "Sales Data Visualizers"
      }
    ];                
    return {
      appBar: appBarSettings,
      toolBar: toolBarSettings,
      menu: menuSettings,
      data: dataTabSettings,
      propertyGrid: propertyGridSettings,
      statusBar: statusBarSettings,
      themeConfig : themeConfig,
      reportPartsLibraries: libraries,
    };
  }
  function onDesignerOpen() {
    setDesignerVisible(true);
  }

  function onReportPreview(report){
    setDesignerVisible(false);
    viewer.current.open(report.definition);
    return Promise.resolve();
  }

  return (
    <Fragment>
      <div id="designer-toolbar" class="container-fluid">
        <div class="row mt-3 mb-3">
          {!designerVisible && (
            <button
              type="button"
              class="btn btn-outline-primary btn-sm col-sm-2 ml-1"
              onClick={() => onDesignerOpen()}
            >
              Open Designer
            </button>
          )}
        </div>
      </div>
      <div
        id="designer-host"
        style={{ display: designerVisible ? "block" : "none" }}
      >
        <Designer report={{ id: "reports/init-template.rdlx-json" }} 
                  ref={designer} 
                  onRender={onReportPreview} 
                  onInit={onDesignerInit}                  
                  />
      </div>
      {!designerVisible && (
        <div id="viewer-host">
          <ReportViewer ref={viewer} />
        </div>
      )}
    </Fragment>
  );
}

FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
ReactDOM.render(<App />, document.getElementById("root"));