aardio 范例: web.view( WebView2 浏览器控件) - 调用 React hooks

//web.view( WebView2 浏览器控件) - 调用 React hooks
import sys.device;
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2";right=966;bottom=622)
winform.add(
button={cls="button";text="列出系统 PCI 硬件设备";left=615;top=537;right=869;bottom=606;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="在 aardio 中设置 React 组件数据";z=2};
static={cls="static";left=8;top=6;right=956;bottom=503;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.static);

/*
wb.export 导出 aardio 函数为 Javascript 全局对象（ Promise 对象 ）, 
JavaScript 调用这些 aardio 函数时将会使用 JSON 自动转换跨编程语言的参数和返回值。
这种经由 JSON 转换的对象与 JavaScript 完全兼容，例如下面返回的 result 可以直接作为 JavaScript 表格的数据源使用。

而通过 wb.external 导出的 aardio 函数则只能返回 COM 代理对象，返回的 aardio 对象不能作为 JavaScript 表格的数据源使用。
*/  
wb.export(
    getData = function(){

        var result = table.array();

        var devInfo = sys.device(,"PCI");
        for( index,classGuid,deviceDesc 
            in devInfo.each(8/*_SPDRP_CLASSGUID*/,0/*_SPDRP_DEVICEDESC*/) ){
            table.push(result,{classGuid:classGuid,deviceDesc:deviceDesc});
        }

        thread.delay(1000);//模拟耗时 loading
        return result;
    };
)

wb.html = /**
<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>WebView2</title> 
    <script src="https://lib.baomitu.com/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://lib.baomitu.com/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://lib.baomitu.com/dayjs/1.11.7/dayjs.min.js"></script>
    <script src="https://lib.baomitu.com/antd/5.14.1/antd.min.js"></script>
    <link rel="stylesheet" href="https://lib.baomitu.com/antd/5.14.1/reset.min.css"> 
    <script src="https://lib.baomitu.com/babel-standalone/7.22.20/babel.min.js"></script> 
    <script>!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).mitt=n()}(this,function(){return function(e){return{all:e=e||new Map,on:function(n,t){var f=e.get(n);f?f.push(t):e.set(n,[t])},off:function(n,t){var f=e.get(n);f&&(t?f.splice(f.indexOf(t)>>>0,1):e.set(n,[]))},emit:function(n,t){var f=e.get(n);f&&f.slice().map(function(e){e(t)}),(f=e.get("*"))&&f.slice().map(function(e){e(n,t)})}}}});
    emitter = mitt();//github.com/developit/mitt </script>
</head>
<body>  

<script type="text/babel"> 
    const { useState,useEffect,useCallback,useRef } =  React;
    const { Button,Table,DatePicker,Alert,Tooltip,Space } = antd;

    const App = () => { 
            const [data,setData] = useState([]);
            const [loading,setLoading] = useState(false); 

            useEffect(() => {
                emitter.on("setData", setData);  
                emitter.on("setLoading", setLoading); 
                return () =>  {
                    emitter.off("setData", setData); 
                    emitter.off("setLoading", setLoading); 
                }
            },[])


            return ( 
                <div style={{ width: '100%', margin: '0 auto', padding:'10px' }}>    
                <Button onClick={ 
                    async ()=> {
                        setData([]);
                        setLoading(true);
                        var ds = await getData();
                        setData(ds);
                        setLoading(false);
                    }
                } loading={loading}>列出系统 PCI 硬件设备</Button>

                <br/><br/>

                <Table size="middle"  
                    sortDirections={['ascend', 'descend', 'ascend']} 
                    dataSource={data} 
                    columns={[
                        {
                            title: 'GUID',
                            dataIndex: 'classGuid',
                            width: 300,
                            key: 'classGuid',

                        },
                        {
                            title: '硬件设备',
                            dataIndex: 'deviceDesc',
                            key: 'deviceDesc',
                            sorter: (a, b) => a.classGuid > b.classGuid,
                            defaultSortOrder: 'descend',
                        }
                ]} />

                </div> 
            );
    };

    const root = ReactDOM.createRoot(document.getElementById('app'))
    root.render(<App />); 
</script>

<div id="app"></div>
</body> 
**/

//调用 JS 函数
wb.emit = lambda(...) wb.xcall("emitter.emit",...);

// aardio 按钮事件
winform.button.oncommand = function(id,event){
    winform.button.disabledText = {"✶";"✸";"✹";"✺";"✹";"✷"};

    var result = table.array();

    wb.emit("setData",result);
    wb.emit("setLoading",true);

    var devInfo = sys.device(,"PCI");
    for( index,classGuid,deviceDesc 
        in devInfo.each(8/*_SPDRP_CLASSGUID*/,0/*_SPDRP_DEVICEDESC*/) ){
        table.push(result,{classGuid:classGuid,deviceDesc:deviceDesc});
    }

    thread.delay(1000);//模拟耗时 loading
    wb.emit("setData",result);
    wb.emit("setLoading",false);

    winform.button.disabledText = null;
}

winform.show();
win.loopMessage();
Markdown 格式