aldehyde 0.2.196 → 0.2.198

package/src/aldehyde/layout/MainPage.tsx

@@ -1,335 +1,334 @@
-import React from "react";
-import { Layout, Affix } from "antd";
-import Footer from "./footer/index";
-import { BlockMenu } from "../tmpl/interface";
-import Header from "./header";
-import SideBar from "./sidebar";
-import HCDataSource from "../tmpl/hc-data-source";
-import DocumentTitle from "react-document-title";
-import Units from "../units";
-import Scrollbars from "react-custom-scrollbars";
-import "./common.css";
-import "./coverstyle.css";
-import withRouter from "../routable/withroute";
-import { LocaleContext } from "../locale/LocaleProvider";
-import { useVarCssColor } from "../hooks/useVarCssColor";
-import { generate } from "@ant-design/colors";
-
-const { Content, Sider } = Layout;
-
-interface MainPageProps {
-  children: any;
-  match?: any;
-  footer?: any;
-  sideBartitle?: any;
-  sideBarLogo?: any;
-  leftHeader?: any;
-  leftCollapsedHeader?: any;
-}
-
-interface MainPageState {
-  collapsed?: boolean;
-  currentL2MenuId?: string;
-  blocks?: BlockMenu[];
-  currentBlockId?: string;
-  isImporter?: boolean;
-  sideBartitle?: string;
-  sideBarLogo?: any;
-  programDocumentTitle?:string;
-}
-
-class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
-  scrollbarRef = React.createRef();
-  state = {
-    collapsed: false,
-    blocks: [],
-    currentL2MenuId: undefined,
-    currentBlockId: undefined,
-    isImporter: false,
-    sideBartitle: undefined,
-    programDocumentTitle:Units.programName() ? Units.programName() : "HYDROCARBON"
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  async componentDidMount() {
-    useVarCssColor(generate("rgb(22, 119, 255)"));
-    localStorage.setItem("version", "v1");
-
-    var currentURL = new URL(window.location.href);
-    //console.log('main page currentURL:',currentURL);
-    const search = window.location.href.split("?")[1];
-    var searchParams = new URLSearchParams("?" + search);
-    let blockId = searchParams.get("blockId");
-    let l2MenuId = searchParams.get("menuId");
-    //进一步找找l2MenuId
-    if (!l2MenuId) {
-      let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
-      if (sourcePart) {
-        let source = sourcePart[0].split("-");
-        if (source[0] === "menu") {
-          l2MenuId = source[1];
-        }
-      }
-    }
-    let { sideBartitle: propsSideBartitle } = this.props;
-
-    let {programDocumentTitle}=this.state;
-    let blockRes = await HCDataSource.requestBlocks(
-      l2MenuId ? l2MenuId : undefined,
-      blockId ? blockId : undefined
-    );
-    this.setState((state) => ({
-      isImporter: currentURL.hash.indexOf("/importer") > 0,
-      blocks: blockRes && blockRes.blocks ? blockRes.blocks : [],
-      currentL2MenuId: blockRes ? blockRes.l2MenuId : null,
-      currentBlockId: blockRes ? blockRes.blockId : null,
-      programDocumentTitle:blockRes?.programName?blockRes.programName:programDocumentTitle,
-      sideBartitle: propsSideBartitle
-        ? propsSideBartitle
-        : blockRes
-        ? blockRes.programName
-        : null,
-    }));
-  }
-
-  async componentDidUpdate(prevProps, prevState) {
-    var currentURL = new URL(window.location.href);
-    const search = window.location.href.split("?")[1];
-    var searchParams = new URLSearchParams("?" + search);
-    let blockId = searchParams.get("blockId");
-    let l2MenuId = searchParams.get("menuId");
-    let isImporter_ = currentURL.hash.indexOf("/importer") > 0;
-    if (prevState.isImporter != isImporter_) {
-      this.setState((state) => ({
-        isImporter: isImporter_,
-      }));
-    }
-    //进一步找找l2MenuId
-    if (!l2MenuId) {
-      let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
-      if (sourcePart) {
-        let source = sourcePart[0].split("-");
-        if (source[0] === "menu") {
-          l2MenuId = source[1];
-        }
-      }
-    }
-
-    const { currentL2MenuId, currentBlockId } = this.state;
-    if (l2MenuId && currentL2MenuId != l2MenuId) {
-      this.setState((state) => ({
-        currentL2MenuId: l2MenuId,
-      }));
-    }
-
-    if (!blockId) {
-      blockId = this.findBlockIdOfL2Menu(l2MenuId);
-    }
-    if (blockId && currentBlockId != blockId) {
-      this.setState((state) => ({
-        currentBlockId: blockId,
-      }));
-    }
-  }
-
-  findBlockTitle = (blockId: string) => {
-    let blockTitle: string;
-    const { blocks,programDocumentTitle } = this.state;
-    if (blockId) {
-      for (const block of blocks) {
-        if (block.id == blockId) {
-          blockTitle = block.title;
-          break;
-        }
-      }
-    }
-    let title = blockTitle ? blockTitle + "-" : "";
-
-    title = title + programDocumentTitle;
-    return title;
-  };
-
-  findBlockIdOfL2Menu = (leMenuId: string) => {
-    let blockId: string = undefined;
-    const { blocks } = this.state;
-    if (leMenuId) {
-      for (const block of blocks) {
-        if (block.l1Menus) {
-          for (const menul1 of block.l1Menus) {
-            for (const menul2 of menul1.l2Menus) {
-              if (menul2.id == leMenuId) {
-                blockId = block.id;
-                break;
-              }
-            }
-          }
-        } else {
-          for (const menul1 of block.items) {
-            if (menul1.items) {
-              for (const menul2 of menul1.items) {
-                if (menul2.id == leMenuId) {
-                  blockId = block.id;
-                  break;
-                }
-              }
-            } else {
-              if (menul1.id == leMenuId) {
-                blockId = block.id;
-                break;
-              }
-            }
-          }
-        }
-      }
-    }
-    return blockId;
-  };
-
-  findCurrentBlock = () => {
-    const { blocks, currentL2MenuId, currentBlockId } = this.state;
-    let result: BlockMenu = undefined;
-
-    if (currentL2MenuId) {
-      for (const block of blocks) {
-        if (block.l1Menus) {
-          for (const menul1 of block.l1Menus) {
-            for (const menul2 of menul1.l2Menus) {
-              if (menul2.id == currentL2MenuId) {
-                result = block;
-                break;
-              }
-            }
-          }
-        } else {
-          for (const menul1 of block.items) {
-            if (menul1.items) {
-              for (const menul2 of menul1.items) {
-                if (menul2.id == currentL2MenuId) {
-                  result = block;
-                  break;
-                }
-              }
-            } else {
-              if (menul1.id == currentL2MenuId) {
-                result = block;
-                break;
-              }
-            }
-          }
-        }
-      }
-    }
-    if (currentBlockId && !result) {
-      for (const block of blocks) {
-        if (block.id === currentBlockId) {
-          result = block;
-          break;
-        }
-      }
-    }
-    if (!result) {
-      result = blocks.at(0);
-    }
-    return result;
-  };
-
-  toggle = () => {
-    this.setState((state) => ({
-      collapsed: !this.state.collapsed,
-    }));
-  };
-
-  render() {
-    const { footer, sideBarLogo, leftHeader, leftCollapsedHeader } = this.props;
-    const {
-      collapsed,
-      currentL2MenuId,
-      currentBlockId,
-      isImporter,
-      sideBartitle,
-    } = this.state;
-    const { translate } = this.context;
-    //滚动条回到顶部
-    // document.body.scrollTop = document.documentElement.scrollTop = 0;
-    // @ts-ignore
-    // eslint-disable-next-line no-unused-expressions
-    this.scrollbarRef?.current?.scrollToTop();
-    return (
-      <Scrollbars
-        ref={this.scrollbarRef}
-        style={{ height: "calc(100vh)" }}
-        autoHide
-        autoHideTimeout={1000}
-      >
-        {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'80px'}}>*/}
-        {/*    <Col span={12}>*/}
-        {/*        <img style={{height:'60px'}} src={Logo}></img>*/}
-        {/*    </Col>*/}
-        {/*    <Col  span={4}>*/}
-
-        {/*    </Col>*/}
-        {/*</Row>*/}
-        <DocumentTitle
-          title={
-            (isImporter ? translate("${导入}-") : "") +
-            this.findBlockTitle(currentBlockId)
-          }
-        >
-          <Layout>
-            <Sider
-              theme={"light"}
-              style={{
-                // background: '#0f4da1',
-                overflow: "auto",
-                height: "100vh",
-                position: "fixed",
-                left: 0,
-                top: 0,
-                bottom: 0,
-              }}
-              collapsed={collapsed}
-            >
-              <SideBar
-                header={leftHeader}
-                collapsedHeader={leftCollapsedHeader}
-                title={translate("${" + sideBartitle + "}")}
-                logo={sideBarLogo}
-                blockMenu={this.findCurrentBlock()}
-                currentL2MenuId={currentL2MenuId}
-                collapsed={collapsed}
-              />
-            </Sider>
-            <Layout
-              style={
-                collapsed
-                  ? { background: "#fff", marginLeft: 80 }
-                  : {
-                      background: "#fff",
-                      marginLeft: 200,
-                    }
-              }
-            >
-              <Header toggle={this.toggle} {...this.state} />
-              <Content
-                style={{
-                  margin: "24px 16px 0",
-                  overflow: "initial",
-                  minHeight: "calc(100vh)",
-                  minWidth: 760,
-                  // maxWidth: 3060,
-                  paddingBottom: "8px",
-                }}
-              >
-                {this.props.children}
-              </Content>
-              <Footer content={footer} />
-            </Layout>
-          </Layout>
-        </DocumentTitle>
-      </Scrollbars>
-    );
-  }
-}
-
-export default withRouter(MainPage);
+import React from "react";
+import { Layout, Affix } from "antd";
+import Footer from "./footer/index";
+import { BlockMenu } from "../tmpl/interface";
+import Header from "./header";
+import SideBar from "./sidebar";
+import HCDataSource from "../tmpl/hc-data-source";
+import DocumentTitle from "react-document-title";
+import Units from "../units";
+import Scrollbars from "react-custom-scrollbars";
+import "./common.css";
+import "./coverstyle.css";
+import withRouter from "../routable/withroute";
+import { LocaleContext } from "../locale/LocaleProvider";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { generate } from "@ant-design/colors";
+
+const { Content, Sider } = Layout;
+
+interface MainPageProps {
+  children: any;
+  match?: any;
+  footer?: any;
+  sideBartitle?: any;
+  sideBarLogo?: any;
+  leftHeader?: any;
+  leftCollapsedHeader?: any;
+}
+
+interface MainPageState {
+  collapsed?: boolean;
+  currentL2MenuId?: string;
+  blocks?: BlockMenu[];
+  currentBlockId?: string;
+  isImporter?: boolean;
+  sideBartitle?: string;
+  sideBarLogo?: any;
+  programDocumentTitle?:string;
+}
+
+class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
+  scrollbarRef = React.createRef();
+  state = {
+    collapsed: false,
+    blocks: [],
+    currentL2MenuId: undefined,
+    currentBlockId: undefined,
+    isImporter: false,
+    sideBartitle: undefined,
+    programDocumentTitle:Units.programName() ? Units.programName() : "HYDROCARBON"
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  async componentDidMount() {
+    useVarCssColor(generate("rgb(22, 119, 255)"));
+    localStorage.setItem("version", "v1");
+
+    var currentURL = new URL(window.location.href);
+    //console.log('main page currentURL:',currentURL);
+    const search = window.location.href.split("?")[1];
+    var searchParams = new URLSearchParams("?" + search);
+    let blockId = searchParams.get("blockId");
+    let l2MenuId = searchParams.get("menuId");
+    //进一步找找l2MenuId
+    if (!l2MenuId) {
+      let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
+      if (sourcePart) {
+        let source = sourcePart[0].split("-");
+        if (source[0] === "menu") {
+          l2MenuId = source[1];
+        }
+      }
+    }
+    let { sideBartitle: propsSideBartitle } = this.props;
+
+    let {programDocumentTitle}=this.state;
+    let blockRes = await HCDataSource.requestBlocks(
+      l2MenuId ? l2MenuId : undefined,
+      blockId ? blockId : undefined
+    );
+    this.setState((state) => ({
+      isImporter: currentURL.hash.indexOf("/importer") > 0,
+      blocks: blockRes && blockRes.blocks ? blockRes.blocks : [],
+      currentL2MenuId: blockRes ? blockRes.l2MenuId : null,
+      currentBlockId: blockRes ? blockRes.blockId : null,
+      programDocumentTitle:blockRes?.programName?blockRes.programName:programDocumentTitle,
+      sideBartitle: propsSideBartitle
+        ? propsSideBartitle
+        : blockRes
+        ? blockRes.programName
+        : null,
+    }));
+  }
+
+  async componentDidUpdate(prevProps, prevState) {
+    var currentURL = new URL(window.location.href);
+    const search = window.location.href.split("?")[1];
+    var searchParams = new URLSearchParams("?" + search);
+    let blockId = searchParams.get("blockId");
+    let l2MenuId = searchParams.get("menuId");
+    let isImporter_ = currentURL.hash.indexOf("/importer") > 0;
+    if (prevState.isImporter != isImporter_) {
+      this.setState((state) => ({
+        isImporter: isImporter_,
+      }));
+    }
+    //进一步找找l2MenuId
+    if (!l2MenuId) {
+      let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
+      if (sourcePart) {
+        let source = sourcePart[0].split("-");
+        if (source[0] === "menu") {
+          l2MenuId = source[1];
+        }
+      }
+    }
+
+    const { currentL2MenuId, currentBlockId } = this.state;
+    if (l2MenuId && currentL2MenuId != l2MenuId) {
+      this.setState((state) => ({
+        currentL2MenuId: l2MenuId,
+      }));
+    }
+
+    if (!blockId) {
+      blockId = this.findBlockIdOfL2Menu(l2MenuId);
+    }
+    if (blockId && currentBlockId != blockId) {
+      this.setState((state) => ({
+        currentBlockId: blockId,
+      }));
+    }
+  }
+
+  findBlockTitle = (blockId: string) => {
+    let blockTitle: string;
+    const { blocks,programDocumentTitle } = this.state;
+    if (blockId) {
+      for (const block of blocks) {
+        if (block.id == blockId) {
+          blockTitle = block.title;
+          break;
+        }
+      }
+    }
+    let title = blockTitle ? blockTitle + "-" : "";
+
+    title = title + programDocumentTitle;
+    return title;
+  };
+
+  findBlockIdOfL2Menu = (leMenuId: string) => {
+    let blockId: string = undefined;
+    const { blocks } = this.state;
+    if (leMenuId) {
+      for (const block of blocks) {
+        if (block.l1Menus) {
+          for (const menul1 of block.l1Menus) {
+            for (const menul2 of menul1.l2Menus) {
+              if (menul2.id == leMenuId) {
+                blockId = block.id;
+                break;
+              }
+            }
+          }
+        } else {
+          for (const menul1 of block.items) {
+            if (menul1.items) {
+              for (const menul2 of menul1.items) {
+                if (menul2.id == leMenuId) {
+                  blockId = block.id;
+                  break;
+                }
+              }
+            } else {
+              if (menul1.id == leMenuId) {
+                blockId = block.id;
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+    return blockId;
+  };
+
+  findCurrentBlock = () => {
+    const { blocks, currentL2MenuId, currentBlockId } = this.state;
+    let result: BlockMenu = undefined;
+
+    if (currentL2MenuId) {
+      for (const block of blocks) {
+        if (block.l1Menus) {
+          for (const menul1 of block.l1Menus) {
+            for (const menul2 of menul1.l2Menus) {
+              if (menul2.id == currentL2MenuId) {
+                result = block;
+                break;
+              }
+            }
+          }
+        } else {
+          for (const menul1 of block.items) {
+            if (menul1.items) {
+              for (const menul2 of menul1.items) {
+                if (menul2.id == currentL2MenuId) {
+                  result = block;
+                  break;
+                }
+              }
+            } else {
+              if (menul1.id == currentL2MenuId) {
+                result = block;
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+    if (currentBlockId && !result) {
+      for (const block of blocks) {
+        if (block.id === currentBlockId) {
+          result = block;
+          break;
+        }
+      }
+    }
+    if (!result) {
+      result = blocks.at(0);
+    }
+    return result;
+  };
+
+  toggle = () => {
+    this.setState((state) => ({
+      collapsed: !this.state.collapsed,
+    }));
+  };
+
+  render() {
+    const { footer, sideBarLogo, leftHeader, leftCollapsedHeader } = this.props;
+    const {
+      collapsed,
+      currentL2MenuId,
+      currentBlockId,
+      isImporter,
+      sideBartitle,
+    } = this.state;
+    const { translate } = this.context;
+    //滚动条回到顶部
+    // document.body.scrollTop = document.documentElement.scrollTop = 0;
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.scrollbarRef?.current?.scrollToTop();
+    return (
+      <Scrollbars
+        ref={this.scrollbarRef}
+        style={{ height: "calc(100vh)" }}
+        autoHide
+        autoHideTimeout={1000}
+      >
+        {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'80px'}}>*/}
+        {/*    <Col span={12}>*/}
+        {/*        <img style={{height:'60px'}} src={Logo}></img>*/}
+        {/*    </Col>*/}
+        {/*    <Col  span={4}>*/}
+
+        {/*    </Col>*/}
+        {/*</Row>*/}
+        <DocumentTitle
+          title={
+            (isImporter ? translate("${导入}-") : "") +
+            this.findBlockTitle(currentBlockId)
+          }
+        >
+          <Layout>
+            <Sider
+              theme={"light"}
+              style={{
+                overflow: "auto",
+                height: "100vh",
+                position: "fixed",
+                left: 0,
+                top: 0,
+                bottom: 0,
+              }}
+              collapsed={collapsed}
+            >
+              <SideBar
+                header={leftHeader}
+                collapsedHeader={leftCollapsedHeader}
+                title={translate("${" + sideBartitle + "}")}
+                logo={sideBarLogo}
+                blockMenu={this.findCurrentBlock()}
+                currentL2MenuId={currentL2MenuId}
+                collapsed={collapsed}
+              />
+            </Sider>
+            <Layout
+              style={
+                collapsed
+                  ? { background: "#fff", marginLeft: 80 }
+                  : {
+                      background: "#fff",
+                      marginLeft: 200,
+                    }
+              }
+            >
+              <Header toggle={this.toggle} {...this.state} />
+              <Content
+                style={{
+                  margin: "24px 16px 0",
+                  overflow: "initial",
+                  minHeight: "calc(100vh)",
+                  minWidth: 760,
+                  // maxWidth: 3060,
+                  paddingBottom: "8px",
+                }}
+              >
+                {this.props.children}
+              </Content>
+              <Footer content={footer} />
+            </Layout>
+          </Layout>
+        </DocumentTitle>
+      </Scrollbars>
+    );
+  }
+}
+
+export default withRouter(MainPage);