aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/controls/auto-complete/index.tsx

@@ -1,78 +1,82 @@
-import React from 'react'
-import {AutoComplete as AntdAutoComplete, Input} from "antd";
-import {EControlProps} from "../../tmpl/interface";
+import React from "react";
+import { AutoComplete as AntdAutoComplete, Input } from "antd";
+import { EControlProps } from "../../tmpl/interface";
 import HCDataSource from "../../tmpl/hc-data-source";
+import { useLocale } from "../../locale/useLocale";
 
-const {TextArea} = Input;
+const { TextArea } = Input;
 
-interface AutoCompleteProps extends EControlProps {
-
-}
+interface AutoCompleteProps extends EControlProps {}
 
 const AutoComplete: React.FC<AutoCompleteProps> = (props) => {
+  const { id, value, itemType, fieldConfig, onChange } = props;
+  const { translate } = useLocale();
 
-    const {id,value, itemType, fieldConfig, onChange} = props;
-
-    let entryControl = undefined;
+  let entryControl = undefined;
 
-    const changeValue = (value1) => {
-        if (onChange) {
-            let newvalue=undefined;
-            if (value1 === undefined) {
-                return "";
-            }
-            let bb = value1.startsWith("@@");
-            if (bb) {
-                newvalue= (value?value:"") + value1.substring(2, value1.length);
-            } else {
-                newvalue=value1;
-            }
-            onChange(newvalue);
-        }
+  const changeValue = (value1) => {
+    if (onChange) {
+      let newvalue = undefined;
+      if (value1 === undefined) {
+        return "";
+      }
+      let bb = value1.startsWith("@@");
+      if (bb) {
+        newvalue = (value ? value : "") + value1.substring(2, value1.length);
+      } else {
+        newvalue = value1;
+      }
+      onChange(newvalue);
     }
+  };
 
+  let placeholder = !fieldConfig.disabled
+    ? translate("${请输入}${" + fieldConfig.title + "}")
+    : translate("${无需输入}");
+  let disabled: boolean = fieldConfig.disabled;
 
-    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
-    let disabled: boolean = fieldConfig.disabled;
+  let antdControlProps = {
+    id,
+    placeholder,
+    disabled,
+  };
 
-    let antdControlProps = {
-      id, placeholder, disabled,
+  const getSelectArray = () => {
+    let data = HCDataSource.getEnums(fieldConfig.mstrucId);
+    if (!data) {
+      return [];
     }
+    const options = [];
+    data.map((item) => {
+      const option = {
+        value: "@@" + item.value,
+        label: item.title,
+      };
+      options.push(option);
+      return false;
+    });
+    return options;
+  };
 
-    const getSelectArray = () => {
-        let data = HCDataSource.getEnums(fieldConfig.mstrucId);
-        if (!data) {
-            return [];
-        }
-        const options = []
-        data.map((item) => {
-            const option = {
-                value: "@@" + item.value,
-                label: item.title
-            };
-            options.push(option)
-            return false
-        })
-        return options
-    };
-
-    entryControl = <AntdAutoComplete
-        allowClear={true}
-        dropdownMatchSelectWidth={true}
-        options={getSelectArray()}
-        onChange={changeValue}
-        value={value}
-        //style={{width: scalableWidth}}
+  entryControl = (
+    <AntdAutoComplete
+      allowClear={true}
+      dropdownMatchSelectWidth={true}
+      options={getSelectArray()}
+      onChange={changeValue}
+      value={value}
+      //style={{width: scalableWidth}}
     >
-        <TextArea
-            style={{
-                height: 150,
-            }}
-            {...antdControlProps}
-        />
+      <TextArea
+        style={{
+          height: 150,
+        }}
+        {...antdControlProps}
+      />
     </AntdAutoComplete>
+  );
 
-    return entryControl;
-}
+  return entryControl;
+};
 
 export default AutoComplete;

package/src/aldehyde/controls/chemstruc/graph.tsx

@@ -1,148 +1,184 @@
 import React from "react";
-import {Button, Col, Modal, Popconfirm, Row} from 'antd';
-import {RemoteStructServiceProvider} from 'ketcher-core'
-import {Editor} from "ketcher-react";
-import 'miew/dist/Miew.min.css'
-import 'ketcher-react/dist/index.css'
-import './index.css'
-import HcserviceV3 from '../../tmpl/hcservice-v3'
-import {VEControlProps} from '../../tmpl/interface'
-import {DeploymentUnitOutlined} from '@ant-design/icons';
-
-interface ChemStrucProps extends VEControlProps {
-
-}
+import { Button, Col, Modal, Popconfirm, Row } from "antd";
+import { RemoteStructServiceProvider } from "ketcher-core";
+import { Editor } from "ketcher-react";
+import "miew/dist/Miew.min.css";
+import "ketcher-react/dist/index.css";
+import "./index.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { VEControlProps } from "../../tmpl/interface";
+import { DeploymentUnitOutlined } from "@ant-design/icons";
+import { LocaleContext } from "../../locale/LocaleProvider";
+
+interface ChemStrucProps extends VEControlProps {}
 
 interface ChemStrucState {
-    modalOpen?: boolean,
-    molFileLoaded?: boolean,
+  modalOpen?: boolean;
+  molFileLoaded?: boolean;
 }
 
-export default class ChemStruc extends React.PureComponent<ChemStrucProps, ChemStrucState> {
-
-    static defaultProps = {
-        viewOrEdit: 'view',
+export default class ChemStruc extends React.PureComponent<
+  ChemStrucProps,
+  ChemStrucState
+> {
+  static defaultProps = {
+    viewOrEdit: "view",
+  };
+
+  state = {
+    modalOpen: false,
+    molFileLoaded: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  componentDidMount() {}
+
+  //
+  // async componentDidUpdate(prevProps, prevState, snapshot) {
+  //     const {value} = this.props
+  //     const {value:preValue} = prevProps;
+  //
+  //     if(Object.entries(value).toString() != Object.entries(preValue).toString()){
+  //         await this.loadData();
+  //     }
+  // }
+
+  loadData = async () => {
+    const { value, serverKey } = this.props;
+    if (value) {
+      let val = JSON.parse(value);
+      let molFile;
+      if (val.valid == true) {
+        //此处要优化
+        molFile = await HcserviceV3.loadFileTxt(serverKey, val.base.path);
+      } else if (val.valid == "new") {
+        molFile = val.body;
+      } else {
+        molFile = undefined;
+      }
+      //console.log('molFile:', molFile);
+
+      //因一有别名就报错,不能显示
+      //去掉别名
+      let reg1 = /"alias":\s*\S*,/g;
+      // let reg1 = new RegExp('/a/',"g"); // 加'g'，删除字符串里所有的"a"
+      let molFile1 = molFile.replace(reg1, "");
+      // console.log('molFile1:', molFile1);
+      global.ketcher.setMolecule(molFile1);
     }
-
-    state = {
-        modalOpen: false,
-        molFileLoaded: false,
-    }
-
-    componentDidMount() {
-
-    }
-
-    //
-    // async componentDidUpdate(prevProps, prevState, snapshot) {
-    //     const {value} = this.props
-    //     const {value:preValue} = prevProps;
-    //
-    //     if(Object.entries(value).toString() != Object.entries(preValue).toString()){
-    //         await this.loadData();
-    //     }
-    // }
-
-
-    loadData = async () => {
-        const {value,serverKey} = this.props
-        if (value) {
-            let val = JSON.parse(value);
-            let molFile
-            if (val.valid == true) {//此处要优化
-                molFile = await HcserviceV3.loadFileTxt(serverKey,val.base.path);
-            } else if (val.valid == 'new') {
-                molFile = val.body;
-            } else {
-                molFile =  undefined;
-            }
-            //console.log('molFile:', molFile);
-
-            //因一有别名就报错,不能显示
-            //去掉别名
-            let reg1=/"alias":\s*\S*,/g
-           // let reg1 = new RegExp('/a/',"g"); // 加'g'，删除字符串里所有的"a"
-            let molFile1 = molFile.replace(reg1,"");
-            // console.log('molFile1:', molFile1);
-            global.ketcher.setMolecule(molFile1);
-        }
+  };
+
+  saveMolfile = async () => {
+    let value = await global.ketcher.getKet();
+    //let value = await global.ketcher.getGraphAsync();
+    //console.log('ket value:', value);
+    this.triggerChange(value);
+    this.setState({
+      modalOpen: false,
+    });
+  };
+
+  triggerChange = (changedValue) => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(JSON.stringify({ valid: "new", body: changedValue }));
     }
-
-    saveMolfile = async () => {
-        let value = await global.ketcher.getKet();
-        //let value = await global.ketcher.getGraphAsync();
-        //console.log('ket value:', value);
-        this.triggerChange(value);
-        this.setState({
-            modalOpen: false,
-        })
-    }
-
-    triggerChange = (changedValue) => {
-        const {onChange} = this.props
-        if (onChange) {
-            onChange(JSON.stringify({valid: 'new', body: changedValue}));
-        }
-    }
-
-
-    showView = async () => {
-        await this.loadData();
-        this.setState({
-            modalOpen: true
-        })
-    }
-    onCancel = () => {
-        this.setState({
-            modalOpen: false,
-        })
-    }
-
-    render() {
-        const {disabled, viewOrEdit} = this.props
-
-        const structServiceProvider = new RemoteStructServiceProvider("")
-        return (
-            <>
-                <Button
-                    onClick={this.showView}>
-                    <DeploymentUnitOutlined/> {viewOrEdit == 'view' ? '查 看' : ' 编 辑'}
-                </Button>
-                <Modal
-                    closable={false}
-                    open={this.state.modalOpen}
-                    forceRender={true}
-                    centered
-                    style={{maxWidth: 'calc(100vw - 62px)', maxHeight: 'calc(100vw - 50px)'}}
-                    width={1200}
-                    onCancel={() => {
-                        this.onCancel()
+  };
+
+  showView = async () => {
+    await this.loadData();
+    this.setState({
+      modalOpen: true,
+    });
+  };
+  onCancel = () => {
+    this.setState({
+      modalOpen: false,
+    });
+  };
+
+  render() {
+    const { disabled, viewOrEdit } = this.props;
+    const { translate } = this.context;
+
+    const structServiceProvider = new RemoteStructServiceProvider("");
+    return (
+      <>
+        <Button onClick={this.showView}>
+          <DeploymentUnitOutlined />{" "}
+          {viewOrEdit == "view" ? translate("${查看}") : translate("${编辑}")}
+        </Button>
+        <Modal
+          closable={false}
+          open={this.state.modalOpen}
+          forceRender={true}
+          centered
+          style={{
+            maxWidth: "calc(100vw - 62px)",
+            maxHeight: "calc(100vw - 50px)",
+          }}
+          width={1200}
+          onCancel={() => {
+            this.onCancel();
+          }}
+          footer={
+            disabled
+              ? [
+                  <Button
+                    key={1}
+                    onClick={() => {
+                      this.onCancel();
                     }}
-                    footer={disabled ? [<Button key={1} onClick={() => {
-                        this.onCancel()
-                    }}>取消</Button>] : [<Popconfirm key={2} placement="top" title={"确定要取消本次编辑的数据吗？"}
-                                                   onConfirm={this.onCancel} okText="确定"
-                                                   cancelText="取消"><Button>取消</Button></Popconfirm>,
-                        <Button key={3} onClick={() => {
-                            this.saveMolfile();
-                        }} type='primary'>确定</Button>]}
-                    bodyStyle={{width: '1200px'}}
-                >
-                    <Row style={{
-                        height: '430px',
-                        border: '1px solid #00f',
-                        maxWidth: 'calc(100vw - 92px)',
-                        maxHeight: 'calc(100vw - 80px)'
-                    }}>
-                        <Col key={1} span={24} style={{height: '430px'}}>
-                            <Editor onInit={async (ketcher) => {
-                                global.ketcher = ketcher;
-                            }} staticResourcesUrl={"ketcher"} structServiceProvider={structServiceProvider}
-                                    errorHandler={undefined}/>
-                        </Col>
-                    </Row>
-                </Modal>
-            </>
-        );
-    }
+                  >
+                    {translate("${取消}")}
+                  </Button>,
+                ]
+              : [
+                  <Popconfirm
+                    key={2}
+                    placement="top"
+                    title={translate("${确定要取消本次编辑的数据吗}?")}
+                    onConfirm={this.onCancel}
+                    okText={translate("${确定}")}
+                    cancelText={translate("${取消}")}
+                  >
+                    <Button>取消</Button>
+                  </Popconfirm>,
+                  <Button
+                    key={3}
+                    onClick={() => {
+                      this.saveMolfile();
+                    }}
+                    type="primary"
+                  >
+                    确定
+                  </Button>,
+                ]
+          }
+          bodyStyle={{ width: "1200px" }}
+        >
+          <Row
+            style={{
+              height: "430px",
+              border: "1px solid #00f",
+              maxWidth: "calc(100vw - 92px)",
+              maxHeight: "calc(100vw - 80px)",
+            }}
+          >
+            <Col key={1} span={24} style={{ height: "430px" }}>
+              <Editor
+                onInit={async (ketcher) => {
+                  global.ketcher = ketcher;
+                }}
+                staticResourcesUrl={"ketcher"}
+                structServiceProvider={structServiceProvider}
+                errorHandler={undefined}
+              />
+            </Col>
+          </Row>
+        </Modal>
+      </>
+    );
+  }
 }

package/src/aldehyde/controls/collapse-card/index.tsx

@@ -1,67 +1,109 @@
-import * as React from 'react'
-import {Button, Card} from 'antd'
-import './index.css'
-import {DownOutlined, RightOutlined} from '@ant-design/icons';
-import {CardProps} from "antd/lib/card";
+import * as React from "react";
+import { Button, Card } from "antd";
+import "./index.css";
+import { DownOutlined, RightOutlined } from "@ant-design/icons";
+import { CardProps } from "antd/lib/card";
 import ToolTipBar from "../../detail/tooltipbar";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface CollapseCardProps extends CardProps {
-    initCollapse?: boolean,
-    tip?:any,
-    showRightNav?:boolean,
-};
+  initCollapse?: boolean;
+  tip?: any;
+  showRightNav?: boolean;
+}
 
 interface CollapseCardState {
-    collapse?: boolean,
-};
-export default class CollapseCard extends React.PureComponent<CollapseCardProps, CollapseCardState> {
-
-    state = {
-        collapse: false,
-    }
+  collapse?: boolean;
+}
+export default class CollapseCard extends React.PureComponent<
+  CollapseCardProps,
+  CollapseCardState
+> {
+  state = {
+    collapse: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    componentDidMount() {
-        const {initCollapse} = this.props;
-        this.setState({
-            collapse: initCollapse,
-        })
-    }
+  componentDidMount() {
+    const { initCollapse } = this.props;
+    this.setState({
+      collapse: initCollapse,
+    });
+  }
 
-    componentDidUpdate(prevProps) {
-        const {initCollapse} = this.props;
-        if (this.props != prevProps) {
-            this.setState({
-                collapse: initCollapse,
-            })
-        }
+  componentDidUpdate(prevProps) {
+    const { initCollapse } = this.props;
+    if (this.props != prevProps) {
+      this.setState({
+        collapse: initCollapse,
+      });
     }
+  }
 
-    cardTitle = () => {
-        const {title,tip} = this.props;
-        const {collapse} = this.state;
-        if(!title || 'null'==title){//没title不显示card 头 ，同时不支持伸缩。
-            return null;
-        };
-        let titleBegin=null;
-        if (collapse) {
-            titleBegin= <Button type="text" onClick={() => {
-                this.setState({collapse: false})
-            }}><RightOutlined/>{title}</Button>
-        } else {
-            titleBegin= <Button type="text" onClick={() => {
-                this.setState({collapse: true})
-            }}><DownOutlined/>{title}</Button>
-        }
-        return <>{titleBegin}<ToolTipBar content={tip}></ToolTipBar></>;
+  cardTitle = () => {
+    const { title, tip } = this.props;
+    const { collapse } = this.state;
+    const { translate } = this.context;
+    if (!title || "null" == title) {
+      //没title不显示card 头 ，同时不支持伸缩。
+      return null;
     }
-
-    render() {
-        const {collapse} = this.state;
-            const { extra, title, className,initCollapse,showRightNav, ...other } = this.props;
-        return <Card {...other}  size={'small'} extra={collapse ? "" : extra} style={{width:showRightNav?"90%":'100%'}}
-                     className={`${className} ${collapse ? 'collapse' : ""}`} title={this.cardTitle()}>
-            {collapse ? null : this.props.children}
-        </Card>;
+    let titleBegin = null;
+    if (collapse) {
+      titleBegin = (
+        <Button
+          type="text"
+          onClick={() => {
+            this.setState({ collapse: false });
+          }}
+        >
+          <RightOutlined />
+          {translate("${" + title + "}")}
+        </Button>
+      );
+    } else {
+      titleBegin = (
+        <Button
+          type="text"
+          onClick={() => {
+            this.setState({ collapse: true });
+          }}
+        >
+          <DownOutlined />
+          {translate("${" + title + "}")}
+        </Button>
+      );
     }
+    return (
+      <>
+        {titleBegin}
+        <ToolTipBar content={tip}></ToolTipBar>
+      </>
+    );
+  };
 
+  render() {
+    const { collapse } = this.state;
+    const {
+      extra,
+      title,
+      className,
+      initCollapse,
+      showRightNav,
+      ...other
+    } = this.props;
+    return (
+      <Card
+        {...other}
+        size={"small"}
+        extra={collapse ? "" : extra}
+        style={{ width: showRightNav ? "90%" : "100%" }}
+        className={`${className} ${collapse ? "collapse" : ""}`}
+        title={this.cardTitle()}
+      >
+        {collapse ? null : this.props.children}
+      </Card>
+    );
+  }
 }