aldehyde 0.0.2 → 0.0.3

package/src/components/controls/action/index.tsx

@@ -1,228 +0,0 @@
-import * as React from 'react'
-import {RefObject} from 'react'
-import {Button, Checkbox as AntdCheckbox, Popconfirm, Popover,} from 'antd'
-import './index.css'
-import {ActionConfig, Comparator, DtmplData} from "../../tmpl/interface";
-import {FormInstance} from "antd/lib/form/hooks/useForm";
-import {ButtonType} from "antd/lib/button/button";
-import FieldsEditCard from "../../detail/edit/fields-edit-card"
-import {SizeType} from "antd/lib/config-provider/SizeContext";
-import ActionUtils from './utils';
-
-const CheckboxGroup = AntdCheckbox.Group;
-
-export  type ActionButtonType = 'primary-block' | 'dashed' | 'primary'
-export  type ActionButtonHiddenType = 'hidden' | 'disabled'
-
-interface ActionProps {
-    disabled?: boolean,
-    actionConfig: ActionConfig,
-    data?: DtmplData[] |object[],
-    formRef?: RefObject<FormInstance>,
-    doAction: (string, Array, object) => void,
-    serial?: number,
-    buttonType?: ActionButtonType,
-    hiddenType?: ActionButtonHiddenType,
-    buttonSize?: SizeType,
-};
-
-interface ActionState {
-    popoverVisible: boolean,
-
-};
-
-export default class Action extends React.PureComponent<ActionProps, ActionState> {
-
-    static defaultProps = {
-        buttonType: 'dashed',
-        hiddenType: 'hidden',
-        buttonSize: undefined,
-    }
-
-    state = {
-        popoverVisible: false,
-    }
-
-    componentDidMount() {
-        const {} = this.props;
-        this.setState({})
-    }
-
-    componentDidUpdate(prevProps) {
-        const {} = this.props;
-        if (this.props != prevProps) {
-            // this.setState({collapse:!this.state.collapse})
-        }
-    }
-
-
-    isShow = () => {
-        const {actionConfig, data, formRef} = this.props;
-        return ActionUtils.isShow(actionConfig, data, formRef);
-    }
-
-
-    getValue = () => {
-        const {data, formRef, actionConfig} = this.props;
-        let value = {};
-        //从 dtmplData 与 ref
-        //dtmplData取第一个
-        let dtmplValue = data ? data[0] : undefined;
-        let upperFormValue = formRef ? formRef.current : undefined;
-        for (let fieldConfig of actionConfig.writes) {
-            if(!fieldConfig){
-                continue;
-            }
-            if (upperFormValue) {
-                if (upperFormValue.getFieldValue(fieldConfig.id)) {
-                    value[fieldConfig.id] = ActionUtils.getFormRefValue(formRef, fieldConfig.id);
-                }else{
-                    if(dtmplValue){
-                        if(dtmplValue['fieldMap']){
-                            value[fieldConfig.id] = dtmplValue ?dtmplValue['fieldMap'][fieldConfig.id] : undefined;
-                        }else{
-                            value[fieldConfig.id] = dtmplValue ?dtmplValue[fieldConfig.id] : undefined;
-                        }
-                    }
-                }
-            }else{
-                if(dtmplValue) {
-                    if (dtmplValue['fieldMap']) {
-                        value[fieldConfig.id] = dtmplValue ? dtmplValue['fieldMap'][fieldConfig.id] : undefined;
-                    } else {
-                        value[fieldConfig.id] = dtmplValue ? dtmplValue[fieldConfig.id] : undefined;
-                    }
-                }
-            }
-        }
-        console.log("actionValue:",value);
-        return value;
-    }
-    onOk = (value: object) => {
-        console.log('action form value:', value);
-        const {actionConfig, doAction, data, disabled, buttonType} = this.props;
-        this.setState({
-            popoverVisible: false,
-        })
-        doAction(actionConfig.id, this.getCodes(), value);
-    }
-    onCancel = () => {
-        this.setState({
-            popoverVisible: false,
-        })
-    }
-    onValuesChange = (value: object) => {
-        const {actionConfig, doAction, data, formRef} = this.props;
-        if (formRef && formRef.current) {
-            formRef.current.setFieldsValue(value);
-        }
-    }
-
-
-    getButtonType = () => {
-        const {buttonType} = this.props;
-        let bType: ButtonType = !buttonType ? "dashed" : buttonType.split("-")[0] == "dashed" ? "dashed" : "primary";
-        return bType;
-    }
-
-    blockButton = (): boolean => {
-        const {buttonType} = this.props;
-        let block = buttonType && buttonType.includes('block');
-        return block;
-    }
-
-
-    formButton = () => {
-        const {popoverVisible} = this.state;
-        const {actionConfig, doAction, data, disabled, buttonType,hiddenType, buttonSize} = this.props;
-        let disabled_ = disabled;
-        if (!this.isShow()) {
-            if (!hiddenType || hiddenType == 'hidden') {
-                return null;
-            } else {
-                disabled_ = true;
-            }
-        }
-        return <Popover placement="leftBottom" visible={popoverVisible} trigger="click" content={
-            <FieldsEditCard okDanger={actionConfig.beforeExeConfirm == 'danger'} needConfirm={true} title={actionConfig.title} onCancel={() => this.onCancel()} fields={actionConfig.writes}
-                            value={this.getValue()} onOk={this.onOk}
-                            onValuesChange={this.onValuesChange}/>}>
-            <Button danger={actionConfig.beforeExeConfirm == 'danger'} type={this.getButtonType()} block={this.blockButton()} size={buttonSize}
-                    onClick={() => this.setState({popoverVisible: !popoverVisible})}
-                    disabled={disabled_} >{actionConfig.title}</Button>
-        </Popover>
-    }
-
-
-    getCodes = () => {
-        const {data,} = this.props;
-        let codes = [];
-        if (data) {
-            if (data instanceof Array) {
-                for (let d of data) {
-                    if (d) {
-                        codes.push(d['code']);
-                    }
-                }
-            }
-        }
-        return codes;
-    }
-
-    withoutFormButton = () => {
-        const {actionConfig, doAction, data, disabled, buttonType, hiddenType, buttonSize} = this.props;
-        let disabled_ = disabled;
-        if (!this.isShow()) {
-            if (!hiddenType || hiddenType == 'hidden') {
-                return null;
-            } else {
-                disabled_ = true;
-            }
-        }
-        let codes = this.getCodes();
-        let block = this.blockButton();
-        let bType = this.getButtonType();
-        return !actionConfig.beforeExeConfirm || actionConfig.beforeExeConfirm == 'default' ?
-            <Popconfirm key={actionConfig.id}
-                        placement="rightBottom"
-                        title={`确定要执行【${actionConfig.title}】吗？`}
-                        onConfirm={() => {
-                            doAction(actionConfig.id, codes, {})
-                        }}
-                        disabled={disabled_}
-                        okText="确定"
-                        cancelText="取消"
-            >
-                <Button size={buttonSize} type={bType} block={block} disabled={disabled_}
-                >{actionConfig.title}</Button>
-            </Popconfirm> :
-            actionConfig.beforeExeConfirm == 'danger' ?
-                <Popconfirm key={actionConfig.id}
-                            placement="rightBottom"
-                            title={`确定要执行【${actionConfig.title}】吗？`}
-                            onConfirm={() => {
-                                doAction(actionConfig.id, codes, {})
-                            }}
-                            disabled={disabled_}
-                            okText="确定"
-                            cancelText="取消"
-                            okType={'danger'}
-                >
-                    <Button type={bType} block={block} danger={true} size={buttonSize} disabled={disabled_}
-                    >{actionConfig.title}</Button>
-                </Popconfirm> :
-                <Button type={bType} block={block} size={buttonSize}
-                        onClick={() => doAction(actionConfig.id, codes, {})}
-                        disabled={disabled_}
-                >{actionConfig.title}</Button>
-    }
-
-    render() {
-        const {} = this.state;
-        const {actionConfig, doAction, data, disabled, buttonType} = this.props;
-        return <>
-            {actionConfig.writes && actionConfig.writes.length > 0 ? this.formButton() : this.withoutFormButton()}
-        </>;
-    }
-
-}

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

@@ -1,80 +0,0 @@
-import React from 'react'
-import {AutoComplete as AntdAutoComplete, Input} from "antd";
-import {EControlProps} from "../../tmpl/interface";
-import Units from "../../units";
-import HCDataSource from "../../tmpl/hc-data-source";
-
-const {TextArea} = Input;
-
-interface AutoCompleteProps extends EControlProps {
-
-}
-
-const AutoComplete: React.FC<AutoCompleteProps> = (props) => {
-
-    const {id,value, itemType, fieldConfig, onChange} = props;
-
-    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);
-        }
-    }
-
-
-    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
-    let disabled: boolean = fieldConfig.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
-        })
-        //  debugger
-        return options
-    };
-
-    entryControl = <AntdAutoComplete
-        allowClear={true}
-        dropdownMatchSelectWidth={true}
-        options={getSelectArray()}
-        onChange={changeValue}
-        value={value}
-        //style={{width: scalableWidth}}
-    >
-        <TextArea
-            style={{
-                height: 150,
-            }}
-            {...antdControlProps}
-        />
-    </AntdAutoComplete>
-
-    return entryControl;
-}
-
-export default AutoComplete;

package/src/components/controls/cascader/index.js

@@ -1,97 +0,0 @@
-import React from 'react'
-import Super from "../../tmpl/superagent"
-import {Cascader as AntdCascader} from 'antd'
-
-export default class Cascader extends React.Component{
-
-    state={
-        options:[]
-    }
-    handleChange=(value)=>{
-        let res=""
-        res=value.join("->")
-        console.log(res)
-        this.triggerChange(res)
-    }
-    triggerChange = (changedValue) => {
-        const { onChange } = this.props
-        if (onChange) {
-          onChange(changedValue);
-        }
-      }
-    requestLinkage=(optionKey)=>{ //第一级联动
-        const optGroupId=optionKey.split("@")[0]
-        const time=optionKey.split("@")[1]
-        Super.super({
-			url:`/meta/dict/cas_ops/${optGroupId}`,
-		}).then((res)=>{
-			const ops=[]
-            res.options.forEach((item)=>{
-                const op={}
-                op["value"]=item.title
-                op["label"]=item.title
-                op["key"]=item.id
-                op["isLeaf"]= false
-                ops.push(op)
-            })
-            this.setState({
-                options:ops,
-                time
-            })
-		})
-    }
-    loadData = (selectedOptions) => { //子集联动
-        const targetOption = selectedOptions[selectedOptions.length - 1]
-        targetOption.loading = true
-        this.setState({
-            time:this.state.time-1
-        })
-        if(selectedOptions && this.state.time>=1){
-            let id="";
-            selectedOptions.forEach((item)=>{
-                id=item.key
-            })
-            Super.super({
-                url:`v2/meta/dict/cas_ops/${id}`,
-            }).then((res)=>{
-                const ops=[]
-                const time=this.state.time
-                res.options.forEach((item)=>{
-                    let op={}
-                    op["value"]=item.title
-                    op["label"]=item.title
-                    op["key"]=item.id
-                    if(time===1){
-                        op["isLeaf"]= true
-                    }else{
-                        op["isLeaf"]= false
-                    }
-                    ops.push(op)
-                })
-                setTimeout(() => {
-                    targetOption.loading = false;
-                    targetOption.children =ops
-                    this.setState({
-                        options: [...this.state.options],
-                    });
-                }, 300);
-            })
-        }       
-      }
-    
-    render(){
-        const { optionGroupKey,fieldName }=this.props
-        return (
-            <AntdCascader
-                onClick={()=>this.requestLinkage(optionGroupKey)}
-                placeholder={`请选择${fieldName}`}
-                style={{width:220}}
-                options={this.state.options}
-                loadData={this.loadData}
-                displayRender={label=>label.join('->')}
-                getPopupContainer={trigger => trigger.parentNode}
-                onChange={this.handleChange}
-            />
-        )
-    }
-}

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

@@ -1,150 +0,0 @@
-import React from "react";
-import {Button, Col, Modal, Popconfirm, Row} from 'antd';
-import {RemoteStructServiceProvider} from 'ketcher-core'
-// import { StandaloneStructServiceProvider } from 'ketcher-standalone'
-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 {
-
-}
-
-interface ChemStrucState {
-    modalVisible: boolean,
-    molFileLoaded: boolean,
-    molFile: any,
-}
-
-export default class ChemStruc extends React.PureComponent<ChemStrucProps, ChemStrucState> {
-
-    static defaultProps = {
-        viewOrEdit: 'view',
-    }
-
-    state = {
-        modalVisible: false,
-        molFileLoaded: false,
-        molFile: undefined,
-    }
-
-    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} = this.props
-        if (value) {
-            let val = JSON.parse(value);
-            let molFile
-            if (val.valid == true) {//此处要优化
-                molFile = await HcserviceV3.loadFileTxt(val.base.path);
-            } else if (val.valid == 'new') {
-                molFile = val.body;
-            } else {
-                molFile = undefined;
-            }
-            console.log('molFile:', molFile);
-            // urilib.resolve('');
-            global.ketcher.setMolecule(molFile);
-            this.setState({
-                molFile,
-            })
-        }
-    }
-
-    saveMolfile = async () => {
-        let value = await global.ketcher.getKet();
-        //let value = await global.ketcher.getGraphAsync();
-        console.log('ket value:', value);
-        this.triggerChange(value);
-        this.setState({
-            modalVisible: false,
-        })
-    }
-
-    triggerChange = (changedValue) => {
-        const {onChange} = this.props
-        if (onChange) {
-            onChange(JSON.stringify({valid: 'new', body: changedValue}));
-        }
-    }
-
-
-    showView = async () => {
-        await this.loadData();
-        this.setState({
-            modalVisible: true
-        })
-    }
-    onCancel = () => {
-        this.setState({
-            modalVisible: false,
-        })
-    }
-
-    render() {
-        const {disabled, viewOrEdit, value} = this.props
-        const {molFile} = this.state
-        const structServiceProvider = new RemoteStructServiceProvider("")
-        return (
-            <>
-                <Button
-                    onClick={this.showView}>
-                    <DeploymentUnitOutlined/> {viewOrEdit == 'view' ? '查 看' : ' 编 辑'}
-                </Button>
-                <Modal
-                    closable={false}
-                    visible={this.state.modalVisible}
-                    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()
-                    }}>取消</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;
-                                //await ketcher.setMolecule(await HcserviceV3.loadFileTxt(value.base.path));
-                            }} staticResourcesUrl={"ketcher"} structServiceProvider={structServiceProvider}
-                                    errorHandler={undefined}/>
-                            {/*<Editor staticResourcesUrl={"ketcher"} structServiceProvider={structServiceProvider}   />*/}
-                        </Col>
-                    </Row>
-                </Modal>
-            </>
-        );
-    }
-}

package/src/components/controls/chemstruc/index.css

@@ -1,28 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.chemstruc-edit-upload{
-  width: 230px;
-}
-
-.ant-upload-list-picture-card-container,
-.ant-upload-select-picture-card{
-  width: 66px!important;
-  height:66px!important;
-}
-/*控制ketcher的选择工具栏的显示层级，modal为1000，所以此处为1020*/
-.ToolbarMultiToolItem-module_portal__yDg5_{
-  z-index: 1020!important;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/components/controls/collapse-card/index.css

@@ -1,9 +0,0 @@
-
-.collapse .ant-card-body {
-    padding:0px
-}
-
-.ant-card-head-title button{
-    font-size: 16px;
-    padding:0px;
-}

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

@@ -1,59 +0,0 @@
-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";
-
-interface CollapseCardProps extends CardProps {
-    initCollapse?: boolean,
-};
-
-interface CollapseCardState {
-    collapse: boolean
-};
-export default class CollapseCard extends React.PureComponent<CollapseCardProps, CollapseCardState> {
-
-    state = {
-        collapse: false,
-    }
-
-    componentDidMount() {
-        const {initCollapse} = this.props;
-        this.setState({
-            collapse: initCollapse,
-        })
-    }
-
-    componentDidUpdate(prevProps) {
-        const {initCollapse} = this.props;
-        if (this.props != prevProps) {
-            this.setState({
-                collapse: initCollapse,
-            })
-        }
-    }
-
-    cardTitle = () => {
-        const {title} = this.props;
-        const {collapse} = this.state;
-        if (collapse) {
-            return <Button type="text" onClick={() => {
-                this.setState({collapse: false})
-            }}><RightOutlined/>{title}</Button>
-        } else {
-            return <Button type="text" onClick={() => {
-                this.setState({collapse: true})
-            }}><DownOutlined/>{title}</Button>
-        }
-    }
-
-    render() {
-        const {collapse} = this.state;
-            const { extra, title, className,initCollapse, ...other } = this.props;
-        return <Card {...other} extra={collapse ? "" : extra}
-                     className={`${className} ${collapse ? 'collapse' : ""}`} title={this.cardTitle()}>
-            {collapse ? "" : this.props.children}
-        </Card>;
-    }
-
-}

package/src/components/controls/color-picker/index.css

@@ -1,27 +0,0 @@
-
-.color {
-    width: 108px;
-    height: 24px;
-    border-radius: 2px;
-    display: inline-block;
-    /*background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,*/
-}
-.swatch {
-    padding: 5px;
-    background: #fff;
-    border-radius: 1px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
-    display: inline-block;
-    cursor: pointer;
-}
-.popover{
-    position: absolute;
-    z-index: 2;
-}
-.cover{
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-}