Translation/src/app.tsx

import {Button, ComboBox, hot, PlainTextEdit, Text, View, Window} from "@nodegui/react-nodegui";
import React from "react";
import {AlignmentFlag, QIcon} from "@nodegui/nodegui";
import nodeguiIcon from "../assets/nodegui.jpg";
import {RNComboBox} from "@nodegui/react-nodegui/dist/components/ComboBox/RNComboBox";
import {RNText} from "@nodegui/react-nodegui/dist/components/Text/RNText";
import tencentTmt from "./tencent";
import {RNPlainTextEdit} from "@nodegui/react-nodegui/dist/components/PlainTextEdit/RNPlainTextEdit";
import baiduTranslate from "./baidu"
import Translate from "./components/Translate";

class App extends React.Component<any, any> {
    private getComboBoxHandler: (key: ("sourceIndex" | "targetIndex")) => (index: number) => void;
    private sourceLang: Array<{text:string,lang:string}>;
    private lang: { [key: string]: string };
    private sourceRef: React.RefObject<RNComboBox>;
    private targetRef:React.RefObject<RNComboBox>;
    private labelRef: React.RefObject<RNText>;
    private sourceTextRef: React.RefObject<RNPlainTextEdit>;
    private tencentTextRef: React.RefObject<RNPlainTextEdit>;
    private baiduTextRef: React.RefObject<RNPlainTextEdit>;

    constructor(props: any) {
        super(props);
        this.state = {
            additionalButtons: [],
            size: {height: 300, width: 900},
            allow:false,
        }
        this.sourceRef=React.createRef<RNComboBox>()
        this.targetRef=React.createRef<RNComboBox>()
        this.labelRef=React.createRef<RNText>()
        this.sourceTextRef=React.createRef<RNPlainTextEdit>()
        this.tencentTextRef=React.createRef<RNPlainTextEdit>()
        this.baiduTextRef=React.createRef<RNPlainTextEdit>()
        this.getComboBoxHandler = (key: 'sourceIndex' | 'targetIndex') => {
            return (index: number) => {
                let ref
                if(key==='sourceIndex'){
                    ref=this.targetRef
                }else{
                    ref=this.sourceRef
                }
                if (ref.current?.currentIndex() === index) {
                    for(let langIndex in this.sourceLang){
                        if(+langIndex!==index){
                            ref.current?.setCurrentIndex(+langIndex)
                            break
                        }
                    }
                }

                // console.debug(`${key}选中${this.sourceLang[index].text}`)
            }
        }
        this.lang = {
            'en': '英语',
            'zh': '中文'
        }
        this.sourceLang = []


        for (let key in this.lang) {
            this.sourceLang.push({text: this.lang[key],lang:key})
        }
    }

    componentDidMount() {
        this.labelRef.current?.setAlignment(AlignmentFlag.AlignCenter)
    }

    render() {

        const winIcon = new QIcon(nodeguiIcon);

        const comboHandler = {
            currentIndexChanged: this.getComboBoxHandler("sourceIndex"),
        }
        const targetComboHandler = {
            currentIndexChanged: this.getComboBoxHandler("targetIndex")
        }

        const sourceHandler={
            textChanged:()=>{
                let flag=(this.sourceTextRef.current?.toPlainText().length||0)>0
                this.setState({allow:flag})
            }
        }

        const translateHandler={
            clicked:()=>{
                let source=this.sourceTextRef.current?.toPlainText()||''
                let target=this.sourceLang[this.targetRef.current?.currentIndex()||0].lang
                tencentTmt(source,target)
                    .then(res=>{
                        console.info(res);
                        this.tencentTextRef.current?.setPlainText(res.TargetText)
                    }).catch(err=>console.error("error", err))

                baiduTranslate(source,target).then((res: { text: () => any; })=>res.text()).then((res: string)=>{
                    console.info(res)
                    let r=JSON.parse(res)
                    this.baiduTextRef.current?.setPlainText(r["trans_result"][0]["dst"])
                }).catch((err: any)=>console.error("error", err))
            }
        }

        return (
            <Window styleSheet={styleSheet}
                    windowIcon={winIcon} size={this.state.size}>
                <View id="rootView">
                    <View style={`flex-direction:row`}>
                        <ComboBox style={`flex:1;`} items={this.sourceLang.concat({lang:'auto',text:'自动'})} currentIndex={0}
                                  on={comboHandler} ref={this.sourceRef}></ComboBox>
                        <ComboBox style={`flex:1;`} items={this.sourceLang} currentIndex={1}
                                  on={targetComboHandler} ref={this.targetRef}></ComboBox>
                    </View>
                    <View style={`flex-direction:row;flex:1;`}>

                        <View style={`flex-direction:column;flex:1;`}>
                            <PlainTextEdit placeholderText='请输入原文'
                            ref={this.sourceTextRef}
                            on={sourceHandler}
                            style={`flex:9`}
                            ></PlainTextEdit>
                            <Text id="tencent" style={`flex:1`}  ref={this.labelRef}></Text>
                        </View>


                        <Translate targetTextRef={this.tencentTextRef} name={"腾讯翻译"} href={"https://cloud.tencent.com/product/tmt"}/>
                        <Translate targetTextRef={this.baiduTextRef} name={"百度翻译"} href={"https://api.fanyi.baidu.com/"}/>

                    </View>
                    <View style={`align-items:'center';padding:5px`}>
                        <Button enabled={this.state.allow} text="翻译" on={translateHandler}></Button>
                    </View>
                </View>
            </Window>
        );
    }
}

const styleSheet = `
#rootView{
 height: '100%';
 flex-direction:'column';
}

QPushButton{
  width:300;
  color:red;
  font-size:20px;
  background-color:gray;
  border-radius:10px;
}
QPushButton:pressed{
  background-color:gray;
}
QPushButton:enabled{ 
    background-color: white;
}
`

export default hot(App);