aldehyde 0.2.97 → 0.2.99

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/color-picker/index.tsx

@@ -1,85 +1,114 @@
-import React from 'react'
-import { Button, Card,  Popover, Space} from "antd";
-import {CloseOutlined,CloseCircleOutlined} from '@ant-design/icons'
-import {VEControlProps} from "../../tmpl/interface";
-import './index.css'
-import Swatches from 'react-color'
-
-interface PickerProps extends VEControlProps {
-
+import React from "react";
+import { Button, Card, Popover, Space } from "antd";
+import { CloseOutlined, CloseCircleOutlined } from "@ant-design/icons";
+import { VEControlProps } from "../../tmpl/interface";
+import "./index.css";
+import Swatches from "react-color";
+import { LocaleContext } from "../../locale/LocaleProvider";
+
+interface PickerProps extends VEControlProps {}
+
+interface PickerState {
+  displayColorPicker?: boolean;
 }
 
-interface PickerState  {
-    displayColorPicker?:boolean
-}
-
-export default class CollapseCard extends React.PureComponent<PickerProps, PickerState> {
-
-    state = {
-        displayColorPicker:false,
+export default class CollapseCard extends React.PureComponent<
+  PickerProps,
+  PickerState
+> {
+  state = {
+    displayColorPicker: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  componentDidMount() {
+    this.setState({});
+  }
+
+  componentDidUpdate(prevProps) {
+    const {} = this.props;
+    if (this.props != prevProps) {
+      this.setState({});
     }
+  }
 
-    componentDidMount() {
-
-        this.setState({
-
-        })
-    }
-
-    componentDidUpdate(prevProps) {
-        const {} = this.props;
-        if (this.props != prevProps) {
-            this.setState({
-
-            })
-        }
+  handleChange = (value) => {
+    if (value && value.hex) {
+      this.props.onChange(value.hex);
+    } else {
+      this.props.onChange("");
     }
-
-    handleChange=(value)=>{
-        if(value && value.hex){
-            this.props.onChange(value.hex);
-        }else{
-            this.props.onChange("");
+  };
+
+  render() {
+    const { displayColorPicker } = this.state;
+    const { value, viewOrEdit, ...other } = this.props;
+    const { translate } = this.context;
+
+    return viewOrEdit == "view" ? (
+      <div className={"color"} style={{ background: value }}>
+        {value}
+      </div>
+    ) : (
+      <Popover
+        open={displayColorPicker}
+        content={
+          <Card
+            size={"small"}
+            style={{ width: 320 }}
+            title={translate("${颜色选择}")}
+            bodyStyle={{ overflow: "auto" }}
+            extra={
+              <>
+                <Space size={[8, 0]}>
+                  {
+                    <Button
+                      onClick={() => {
+                        this.setState({ displayColorPicker: false });
+                      }}
+                    >
+                      <CloseOutlined />
+                    </Button>
+                  }
+                </Space>
+              </>
+            }
+          >
+            <Swatches color={value} onChange={this.handleChange} />
+          </Card>
         }
-
-    }
-
-    render() {
-        const {displayColorPicker} = this.state;
-        const {value,viewOrEdit,  ...other } = this.props;
-
-       return (viewOrEdit=='view'? <div className={ 'color' } style={{background:value}}>{value}</div> :
-           <Popover open={displayColorPicker}
-                    content={
-                        <Card size={'small'}
-                              style={{width: 320}}
-                              title={"颜色选择"}
-                              bodyStyle={{overflow: 'auto'}}
-                              extra={<><Space size={[8, 0]}>
-                                  {<Button onClick={() => {
-                                      this.setState({displayColorPicker: false});
-                                  }}><CloseOutlined/></Button>
-                                  }
-                              </Space></>}
-                        >
-                            <Swatches
-                                color={ value }
-                                      onChange={ this.handleChange } />
-                        </Card>
-                    }
-           >
-               <div>
-                   <span onClick={ ()=>{
-                       this.setState({displayColorPicker: !displayColorPicker});
-                   } }  className={ 'color' } style={{background:value,cursor:'pointer'}} >{value?value :
-                       <Button type={'link'}>选择颜色</Button>}</span>
-                   <span>{value?<Button type={'text'} onClick={()=>{this.handleChange(undefined)}}>
-                       <CloseCircleOutlined />
-                   </Button>:""}</span>
-               </div>
-
-        </Popover>)
-
-    }
-
+      >
+        <div>
+          <span
+            onClick={() => {
+              this.setState({ displayColorPicker: !displayColorPicker });
+            }}
+            className={"color"}
+            style={{ background: value, cursor: "pointer" }}
+          >
+            {value ? (
+              value
+            ) : (
+              <Button type={"link"}>{translate("${选择颜色}")}</Button>
+            )}
+          </span>
+          <span>
+            {value ? (
+              <Button
+                type={"text"}
+                onClick={() => {
+                  this.handleChange(undefined);
+                }}
+              >
+                <CloseCircleOutlined />
+              </Button>
+            ) : (
+              ""
+            )}
+          </span>
+        </div>
+      </Popover>
+    );
+  }
 }