feat: add prop to hide panel on initial load (#1171)

package.json

@@ -74,7 +74,6 @@
     "numeral": "^2.0.6",
     "openchemlib": "^7.4.0",
     "openchemlib-utils": "^1.2.0",
-    "prop-types": "^15.7.2",
     "re-resizable": "^6.9.0",
     "react-card-flip": "^1.1.1",
     "react-color": "2.17.2",

src/component/NMRium.tsx

@@ -2,7 +2,6 @@
 
 import { css } from '@emotion/react';
 import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import {
   useEffect,
   useCallback,
@@ -148,6 +147,7 @@ export interface NMRiumProps {
   mode?: NMRiumMode;
   preferences?: NMRiumPreferences;
   emptyText?: ReactNode;
+  initialShowPanels?: boolean;
   /**
    * Returns a custom spinner that will be rendered while loading data.
    */
@@ -214,6 +214,7 @@ function NMRium({
   getSpinner = defaultGetSpinner,
   onDataChange,
   emptyText,
+  initialShowPanels = true,
 }: NMRiumProps) {
   const rootRef = useRef<HTMLDivElement>(null);
   const elementsWraperRef = useRef<HTMLDivElement>(null);
@@ -224,14 +225,15 @@ function NMRium({
       toggle(false);
     },
   });
-  const [isRightPanelHide, hideRightPanel] = useState(false);
+  const [isRightPanelHide, hideRightPanel] = useState(!initialShowPanels);
   const [isResizeEventStart, setResizeEventStart] = useState(false);
 
   const [state, dispatch] = useReducer<Reducer<any, any>, any>(
     spectrumReducer,
     initialState,
     intiState,
   );
+
   const [preferencesState, dispatchPreferences] = useReducer<Reducer<any, any>>(
     preferencesReducer,
     preferencesInitialState,
@@ -430,41 +432,4 @@ function NMRium({
   );
 }
 
-NMRium.propTypes = {
-  onDataChange: PropTypes.func,
-  mode: PropTypes.oneOf(Object.values(NMRiumMode)),
-  preferences: PropTypes.shape({
-    general: PropTypes.shape({
-      disableMultipletAnalysis: PropTypes.bool,
-      hideSetSumFromMolecule: PropTypes.bool,
-    }),
-    panels: PropTypes.shape({
-      hideSpectraPanel: PropTypes.bool,
-      hideInformationPanel: PropTypes.bool,
-      hidePeaksPanel: PropTypes.bool,
-      hideIntegralsPanel: PropTypes.bool,
-      hideRangesPanel: PropTypes.bool,
-      hideStructuresPanel: PropTypes.bool,
-      hideFiltersPanel: PropTypes.bool,
-    }),
-    toolBarButtons: PropTypes.shape({
-      hideZoomTool: PropTypes.bool,
-      hideZoomOutTool: PropTypes.bool,
-      hideImport: PropTypes.bool,
-      hideExportAs: PropTypes.bool,
-      hideSpectraStackAlignments: PropTypes.bool,
-      hideSpectraCenterAlignments: PropTypes.bool,
-      hideRealImaginary: PropTypes.bool,
-      hidePeakTool: PropTypes.bool,
-      hideIntegralTool: PropTypes.bool,
-      hideAutoRangesTool: PropTypes.bool,
-      hideZeroFillingTool: PropTypes.bool,
-      hidePhaseCorrectionTool: PropTypes.bool,
-      hideBaseLineCorrectionTool: PropTypes.bool,
-      hideFFTTool: PropTypes.bool,
-      hideExclusionZonesTool: PropTypes.bool,
-    }),
-  }),
-};
-
 export default memo(NMRium);

src/demo/layouts/Main.jsx → src/demo/layouts/Main.tsx

@@ -1,12 +1,21 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, CSSProperties } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-import routes from '../samples';
+import routes from '../samples.json';
 
-import AdminLayout from './Admin.tsx';
-import SingleDisplayerLayout from './SingleDisplayerLayout.jsx';
+import AdminLayout from './Admin';
+import SingleDisplayerLayout from './SingleDisplayerLayout';
 
-const styles = {
+const styles: Record<
+  | 'bodyContainer'
+  | 'container'
+  | 'normal'
+  | 'error'
+  | 'errorHeader'
+  | 'normalHeader'
+  | 'loadButton',
+  CSSProperties
+> = {
   bodyContainer: {
     display: 'flex',
     justifyContent: 'center',
@@ -15,7 +24,6 @@ const styles = {
     width: '100vw',
     backgroundColor: '#e3e3e3',
   },
-
   container: {
     width: '30%',
     height: '40%',
@@ -49,6 +57,7 @@ const styles = {
     cursor: 'pointer',
   },
 };
+
 async function loadData(url) {
   const response = await fetch(url);
   try {
@@ -70,11 +79,18 @@ function checkStatus(response) {
 }
 
 const Main = (props) => {
-  const [data, setRoutes] = useState({
+  const [data, setRoutes] = useState<{
+    isLoaded: boolean;
+    status: number;
+    routes?: Array<any>;
+    baseURL?: string;
+    path?: string;
+  }>({
     isLoaded: false,
     status: 200,
     routes: [],
   });
+
   const [dashBoardType, setDashBoardType] = useState('');
 
   const loadHandler = useCallback(() => {
@@ -90,11 +106,13 @@ const Main = (props) => {
     const qs = new URL(href).searchParams;
     if (qs.has('sampleURL')) {
       const sampleURL = qs.get('sampleURL');
+      if (!sampleURL) return;
+
       const extention = getFileExtension(sampleURL).toLowerCase();
       switch (extention) {
         case 'json': {
           setDashBoardType('multi');
-          loadData(sampleURL).then((remoteRoutes) => {
+          void loadData(sampleURL).then((remoteRoutes) => {
             if (remoteRoutes) {
               const baseURL = sampleURL.replace(
                 // eslint-disable-next-line no-useless-escape

src/demo/layouts/SingleDisplayerLayout.tsx

@@ -0,0 +1,60 @@
+import { Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { getKey } from '../utility/menu';
+import { possibleViews } from '../views';
+
+interface SingleDisplayerLayoutProps {
+  view: any;
+  patrh: any;
+  path: any;
+}
+
+export default function SingleDisplayerLayout(
+  props: SingleDisplayerLayoutProps,
+) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        top: 0,
+        height: '100vh',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          display: 'block',
+          width: '99%',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          height: '100%',
+          backgroundColor: 'ebecf1',
+        }}
+      >
+        <Suspense fallback={<div>Loading...</div>}>
+          <Switch>
+            <Route
+              path="/"
+              render={(routeProps: any) => {
+                const {
+                  match: {
+                    params: { id },
+                  },
+                } = routeProps;
+                const viewName = props.view ? props.view : 'SingleView';
+
+                const RenderedView = possibleViews[viewName];
+
+                return (
+                  <RenderedView key={id} {...props} id={getKey(props.patrh)} />
+                );
+              }}
+              key={getKey(props.path)}
+            />
+          </Switch>
+        </Suspense>
+      </div>
+    </div>
+  );
+}

src/demo/utility/menu.js → src/demo/utility/menu.ts

@@ -1,11 +1,11 @@
 import { SubMenu, MenuItem } from 'rc-menu';
 import { createElement, cloneElement } from 'react';
 
-function buildMenu(array = []) {
-  let menu = [];
+function buildMenu(array: Array<any> = []) {
+  let menu: Array<any> = [];
   for (const item of array) {
     if (item.children && Array.isArray(item.children)) {
-      menu.push(getMenu([item], [], item.groupName));
+      menu.push(getMenu(item.groupName, [item], []));
     } else {
       menu.push(
         createElement(MenuItem, { key: item.title, ...item }, item.title),
@@ -15,23 +15,28 @@ function buildMenu(array = []) {
   return menu;
 }
 
-// eslint-disable-next-line default-param-last
-function getMenu(array = [], nodes = [], key, parentIndex = 0) {
+function getMenu(
+  key,
+  array: Array<any> = [],
+  nodes: Array<any> = [],
+  parentIndex = 0,
+) {
   let _nodes = nodes;
-  let children = [];
+  let children: Array<any> = [];
 
   if (parentIndex !== -1 && _nodes[parentIndex]) {
     _nodes[parentIndex] = cloneElement(_nodes[parentIndex], {}, children);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-for-in-array
   for (const index in array) {
     if (array[index].children && Array.isArray(array[index].children)) {
       const node = createElement(SubMenu, {
         key: index + key,
         title: array[index].groupName,
       });
       _nodes.push(node);
-      return getMenu(array[index].children, _nodes, index + key, 0);
+      return getMenu(index + key, array[index].children, _nodes, 0);
     } else {
       children.push(
         createElement(
@@ -45,8 +50,8 @@ function getMenu(array = [], nodes = [], key, parentIndex = 0) {
   return _nodes;
 }
 
-function mapTreeToFlatArray(array = []) {
-  let routes = [];
+function mapTreeToFlatArray(array: Array<any> = []) {
+  let routes: Array<any> = [];
   for (const item of array) {
     if (item.children && Array.isArray(item.children)) {
       routes = routes.concat(getFlatArray([item], []));
@@ -57,7 +62,7 @@ function mapTreeToFlatArray(array = []) {
   return routes;
 }
 
-function getFlatArray(inputArray = [], children = []) {
+function getFlatArray(inputArray: Array<any> = [], children: Array<any> = []) {
   let _children = children;
 
   for (const item of inputArray) {