aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/layout/MainPage.tsx

@@ -1,286 +1,321 @@
-import React from 'react'
-import {Layout} from 'antd'
-import Footer from './footer/index';
-import {BlockMenu} from "../tmpl/interface";
-import Header from './header';
-import SideBar from './sidebar';
+import React from "react";
+import { Layout } 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 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";
 
-const {Content, Sider} = Layout;
+const { Content, Sider } = Layout;
 
 interface MainPageProps {
-    children: any,
-    match?: any,
-    footer?:any,
-    sideBartitle?:any,
-    sideBarLogo?:any,
+  children: any;
+  match?: any;
+  footer?: any;
+  sideBartitle?: any;
+  sideBarLogo?: any;
 }
 
 interface MainPageState {
-    collapsed?: boolean,
-    currentL2MenuId?: string,
-    blocks?: BlockMenu[],
-    currentBlockId?: string,
-    isImporter?: boolean,
-    sideBartitle?: string,
-    sideBarLogo?: any,
+  collapsed?: boolean;
+  currentL2MenuId?: string;
+  blocks?: BlockMenu[];
+  currentBlockId?: string;
+  isImporter?: boolean;
+  sideBartitle?: string;
+  sideBarLogo?: any;
 }
 
 class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
-    scrollbarRef = React.createRef();
-    state = {
-        collapsed: false,
-        blocks: [],
-        currentL2MenuId: undefined,
-        currentBlockId: undefined,
-        isImporter: false,
-        sideBartitle: undefined,
-    }
+  scrollbarRef = React.createRef();
+  state = {
+    collapsed: false,
+    blocks: [],
+    currentL2MenuId: undefined,
+    currentBlockId: undefined,
+    isImporter: false,
+    sideBartitle: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    async componentDidMount() {
-        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];
-                }
-            }
+  async componentDidMount() {
+    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 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,
-            sideBartitle:propsSideBartitle?propsSideBartitle: blockRes ?blockRes.programName:null,
-        }));
-
+      }
     }
+    let { sideBartitle: propsSideBartitle } = this.props;
+    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,
+      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];
-                }
-            }
+  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,
-            }));
-        }
+    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,
-            }));
-        }
+    if (!blockId) {
+      blockId = this.findBlockIdOfL2Menu(l2MenuId);
+    }
+    if (blockId && currentBlockId != blockId) {
+      this.setState((state) => ({
+        currentBlockId: blockId,
+      }));
     }
+  }
 
-    findBlockTitle = (blockId: string) => {
-        let blockTitle: string;
-        const {blocks} = this.state;
-        if (blockId) {
-            for (const block of blocks) {
-                if (block.id == blockId) {
-                    blockTitle = block.title;
-                    break;
-                }
-            }
+  findBlockTitle = (blockId: string) => {
+    let blockTitle: string;
+    const { blocks } = this.state;
+    if (blockId) {
+      for (const block of blocks) {
+        if (block.id == blockId) {
+          blockTitle = block.title;
+          break;
         }
-        let title = blockTitle ? blockTitle + '-' : "";
-        let programName = Units.programName() ? Units.programName() : 'HYDROCARBON';
-        title = title + programName;
-        return title;
+      }
     }
+    let title = blockTitle ? blockTitle + "-" : "";
+    let programName = Units.programName() ? Units.programName() : "HYDROCARBON";
+    title = title + programName;
+    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;
-                            }
-                        }
-                    }
+  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;
+      }
     }
+    return blockId;
+  };
 
-    findCurrentBlock = () => {
-        const {blocks, currentL2MenuId, currentBlockId} = this.state;
-        let result: BlockMenu = undefined;
-
-        if (currentL2MenuId) {
-            for (const block of blocks) {
+  findCurrentBlock = () => {
+    const { blocks, currentL2MenuId, currentBlockId } = this.state;
+    let result: BlockMenu = undefined;
 
-                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 (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;
+              }
             }
-        }
-        if (currentBlockId && !result) {
-            for (const block of blocks) {
-                if (block.id === currentBlockId) {
-                    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 (!result) {
-            result = blocks.at(0);
+      }
+    }
+    if (currentBlockId && !result) {
+      for (const block of blocks) {
+        if (block.id === currentBlockId) {
+          result = block;
+          break;
         }
-        return result;
+      }
     }
+    if (!result) {
+      result = blocks.at(0);
+    }
+    return result;
+  };
 
-    toggle = () => {
-        this.setState((state) => ({
-            collapsed: !this.state.collapsed,
-        }));
-    };
-
-    render() {
-
-        const {footer,sideBarLogo}=this.props;
-        const {collapsed, currentL2MenuId, currentBlockId, isImporter, sideBartitle} = this.state;
-        //滚动条回到顶部
-        // 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}>
+  toggle = () => {
+    this.setState((state) => ({
+      collapsed: !this.state.collapsed,
+    }));
+  };
 
-                {/*<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}>*/}
+  render() {
+    const { footer, sideBarLogo } = 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 ? '导入-' : "") + 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 title={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: 1960,
-                                paddingBottom: '8px',
-                            }}>
-                                {this.props.children}
-                            </Content>
-                            <Footer content={footer}/>
-                        </Layout>
-                    </Layout>
-                </DocumentTitle>
-            </Scrollbars>
-        )
-    }
+        {/*    </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
+                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: 1960,
+                  paddingBottom: "8px",
+                }}
+              >
+                {this.props.children}
+              </Content>
+              <Footer content={footer} />
+            </Layout>
+          </Layout>
+        </DocumentTitle>
+      </Scrollbars>
+    );
+  }
 }
 
-export default withRouter(MainPage);
+export default withRouter(MainPage);