How to use this.closeWindow method in Appium Xcuitest Driver

Best JavaScript code snippet using appium-xcuitest-driver

Run Appium Xcuitest Driver automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Sign up Free
_

tools_app.js

Source: tools_app.js Github

copy
1"use strict";
2
3
4class InputView extends React.Component {
5    constructor(props) {
6        super(props);
7        this.closeWindow = this.closeWindow.bind(this);
8        this.inputValue = this.inputValue.bind(this);
9        this.submit = this.submit.bind(this);
10    }
11
12    closeWindow = e => {
13        this.props.cannel();
14        this.state = {}
15    }
16
17    submit = e => {
18        this.props.then(this.state);
19        this.state = {}
20    }
21
22    inputValue = e => {
23        const key = e.target.getAttribute("data");
24        const value = e.target.value;
25        const index = e.target.getAttribute("index");
26        const {argsGroup = []} = this.props;
27        argsGroup[index]["val"] = value;
28        this.setState({[key]: value});
29    }
30
31    renderLineHTML = ({i = 0, val, key, placeholder}, type = "input") => {
32        switch (type) {
33            case "input":
34                return (<input index={i} placeholder={placeholder} value={val} data={key}
35                               onChange={this.inputValue}
36                               autoComplete="off"/>);
37            case "multiline":
38                return (<textarea rows="5" cols="30" index={i} placeholder={placeholder} value={val} data={key}
39                                  onChange={this.inputValue}
40                                  autoComplete="off"/>)
41            default:
42                return "";
43        }
44    }
45
46    renderBodyHTML = (argsGroup = []) => {
47        const that = this;
48        return argsGroup.map(({
49                                  label = "",
50                                  key = "",
51                                  val,
52                                  viewOnly = false,
53                                  placeholder = "请输入参数",
54                                  type = "input"
55                              }, i) => (
56            <div className="input-view">
57                <label>{label}</label>
58                {viewOnly ? (<span className="view-only">{val}</span>) : (that.renderLineHTML({
59                    i,
60                    val,
61                    key,
62                    placeholder
63                }, type))}
64            </div>
65        ));
66    }
67
68    render = () => {
69        const {showWindow = false, title = "", argsGroup = [], msg = ""} = this.props;
70        return (
71            <div className={showWindow ? "modal mask show" : "modal mask"}>
72                <div className="content">
73                    <div className="mask-header">
74                        <span className="title">{title}</span>
75                    </div>
76                    <div className="mask-body">
77                        {0 === argsGroup.length ? (
78                            <div className="no-value">{msg}</div>) : this.renderBodyHTML(argsGroup)}
79                    </div>
80                    <div className="mask-footer">
81                        <div className="btn-group">
82                            <span className="submit" onClick={this.submit}>确定</span>
83                            <span className="cancel" onClick={this.closeWindow}>取消</span>
84                        </div>
85                    </div>
86                </div>
87            </div>
88        );
89    }
90}
91
92class VideoManagerApp extends React.Component {
93
94    constructor(props) {
95        super(props);
96        this.state = {
97            viewContentHTML: (<div className="no-value">未有信息显示</div>)
98        };
99        this.clickPageItem = this.clickPageItem.bind(this);
100    }
101
102    componentDidMount() {
103        this.renderVideoList();
104    }
105
106    closeWindow = () => {
107        this.setState({
108            showScanWindow: false,
109            showNewVideoWindow: false,
110            showVideoDetailWindow: false,
111            showModifyVideoWindow: false,
112            showDeleteVideoWindow: false,
113        });
114    }
115
116    openScanWindow = () => {
117        this.setState({
118            showScanWindow: true,
119            argsGroup: [{label: "目录位置", key: "path", placeholder: "输入要扫描的目录地址"}],
120        });
121    }
122
123    scanDir = value => {
124        const that = this;
125        Req({
126            method: "POST",
127            url: "/backend/aip/video/scan",
128            data: value,
129        }).then(value => {
130            if (value) {
131                const viewContentHTML = (
132                    <div className="view">
133                        <div className="title">
134                            <div className="col-md-1"></div>
135                            <div className="col-md-7">名称</div>
136                            <div className="col-md-2">大小</div>
137                            <div className="col-md-2">操作</div>
138                        </div>
139                        <div className="values">
140                            {value ? value.map(({name, path, size, mode, modifyTime}, i) =>
141                                <div className="value">
142                                    <div className="col-md-1">{i + 1}</div>
143                                    <div className="col-md-7">{name}</div>
144                                    <div className="col-md-2">{Math.round(size * 1000) / 1000 / 1000} KB</div>
145                                    <div className="col-md-2 options">
146                                        <span onClick={() => this.openNewVideoWindow(
147                                            {name, path, size, mode, modifyTime})}>
148                                            上新
149                                        </span>
150                                    </div>
151                                </div>) : ""}
152                        </div>
153                    </div>
154                );
155
156                that.setState({viewContentHTML});
157            }
158        });
159        this.setState({showScanWindow: false});
160    }
161
162    openNewVideoWindow = ({name, path, size, mode, modifyTime}) => {
163        const that = this;
164        Req({
165            method: "POST",
166            url: "/backend/aip/video/ffmpeg",
167            data: {path}
168        }).then(value => {
169            const {FFmpegJSON = "{}", id = 0, path = "", name = ""} = value;
170            const {streams = [], format = {}} = JSON.parse(FFmpegJSON);
171            const {codec_long_name, coded_width, coded_height} = streams[0];
172            const {duration, size, filename} = format;
173            const videoName = path.slice(path.lastIndexOf("/") + 1, path.length);
174            that.setState({
175                instance: {
176                    id: id,
177                    size: size,
178                    width: coded_width,
179                    height: coded_height,
180                    duration: duration,
181                    title: videoName
182                },
183                argsGroup: [
184                    {label: "唯一标识码", key: "name", val: name, viewOnly: true},
185                    {label: "视频存储路径", key: "path", val: filename, viewOnly: true},
186                    {label: "视频编码", key: "codec", val: codec_long_name, viewOnly: true},
187                    {label: "大小", key: "size", val: size, viewOnly: true},
188                    {label: "分辨率", key: "resolving", val: `${coded_width}*${coded_height}`, viewOnly: true},
189                    {label: "时长", key: "duration", val: parseFloat(duration), viewOnly: true},
190                    {label: "视频标题", key: "title", placeholder: "输入视频标题", val: videoName},
191                    {label: "描述", key: "describe", placeholder: "输入视频描述信息", type: "multiline"},
192                ],
193                showNewVideoWindow: true
194            });
195        });
196    }
197
198    newVideo = value => {
199        if (null == value) {
200            return
201        }
202        const {instance} = this.state;
203        if (value.name) {
204            delete instance.name;
205        }
206        this.setState({showNewVideoWindow: false});
207        Object.assign(instance, value);
208        Req({
209            method: "POST",
210            url: "/backend/aip/video",
211            data: instance
212        }).then(() => {
213            alert("创建视频成功");
214        }).catch(({msg = ""}) => {
215            alert("创建视频失败。 " + msg);
216        });
217    }
218
219    clickPageItem(activeNum = 0) {
220        this.setState({
221            page: activeNum
222        });
223        this.renderVideoList();
224    }
225
226    renderVideoList = () => {
227        const that = this;
228        const {page = 0, count = 10} = this.state;
229        Req({
230            method: "GET",
231            url: `/backend/aip/video/list?page=${page}&count=${count}`,
232        }).then(value => {
233            const {total, data = []} = value;
234            that.setState({
235                viewContentHTML: (
236                    <div className="view">
237                        <div className="title">
238                            <div className="col-md-1"></div>
239                            <div className="col-md-4">名称</div>
240                            <div className="col-md-2">大小</div>
241                            <div className="col-md-3">修改时间</div>
242                            <div className="col-md-2">操作</div>
243                        </div>
244                        <div className="values">
245                            {data ? data.map((v, i) => {
246                                const {title, size, modifyTime} = v;
247                                return (
248                                    <div className="value">
249                                        <div className="col-md-1">{i + 1}</div>
250                                        <div className="col-md-4">{title}</div>
251                                        <div
252                                            className="col-md-2">{size / 1000 > 1000 ? size / 1000000 + " MB" : size / 1000 + " KB"}</div>
253                                        <div className="col-md-3">{modifyTime}</div>
254                                        <div className="col-md-2 options">
255                                            <span onClick={() => this.showVideoDetail(v)}>详情</span>
256                                            <span onClick={() => this.showModifyVideo(v)}>修改</span>
257                                            <span onClick={() => this.showDeleteVideo(v)}>下架</span>
258                                        </div>
259                                    </div>)
260                            }) : (<span className="no-value">未上架视频</span>)}
261                        </div>
262                    </div>
263                ),
264                pageComponentHTML: (
265                    <div className="view">
266                        <PageComponent position="pull-left" activeNum={page} docCount={data ? data.length : 0}
267                                       total={total}
268                                       clickPageCallback={that.clickPageItem}/>
269                    </div>
270                )
271            });
272        }).catch(({code, message}) => {
273            checkErrorCode(code);
274        });
275    }
276
277    showVideoDetail = video => {
278        const {title, name, describe, duration, height, width, size, path, createTime, modifyTime} = video;
279        this.setState({
280            showVideoDetailWindow: true,
281            argsGroup: [
282                {label: "视频标题", key: "title", val: title, viewOnly: true},
283                {label: "上新时间", key: "createTime", val: createTime, viewOnly: true},
284                {label: "上架时间", key: "modifyTime", val: modifyTime, viewOnly: true},
285                {label: "描述", key: "describe", val: describe, type: "multiline", viewOnly: true},
286                {label: "唯一标识码", key: "name", val: name, viewOnly: true},
287                {label: "视频存储路径", key: "path", val: path, viewOnly: true},
288                {label: "大小", key: "size", val: size, viewOnly: true},
289                {label: "分辨率", key: "resolving", val: `${width}*${height}`, viewOnly: true},
290                {label: "时长", key: "duration", val: duration + " 秒", viewOnly: true},
291            ],
292        });
293    }
294
295    videoDetail = () => {
296        this.closeWindow();
297    }
298
299    showModifyVideo = video => {
300        const {title, describe} = video;
301        this.setState({
302            showModifyVideoWindow: true,
303            argsGroup: [
304                {label: "视频标题", key: "title", val: title},
305                {label: "描述", key: "describe", val: describe, type: "multiline"},
306            ],
307            instance: video,
308        });
309    }
310
311    modifyVideo = (value) => {
312        const that = this;
313        const {instance} = this.state;
314        Object.assign(instance, value)
315        Req({
316            method: "POST",
317            url: "/backend/aip/video",
318            data: instance
319        }).then(() => {
320            that.renderVideoList();
321        });
322        this.closeWindow();
323    }
324
325    showDeleteVideo = video => {
326        const {id, title} = video;
327        this.setState({
328            showDeleteVideoWindow: true,
329            argsGroup: [],
330            msg: "确认下架视频 " + title,
331            instance: id,
332        })
333    }
334
335    deleteVideo = () => {
336        const that = this;
337        const {instance} = this.state;
338        Req({
339            method: "DELETE",
340            url: "/backend/aip/video?id=" + instance,
341        }).then(() => {
342            that.renderVideoList();
343        });
344        this.closeWindow();
345    }
346
347    render = () => {
348        const {
349            showScanWindow = false,
350            showNewVideoWindow = false,
351            showVideoDetailWindow = false,
352            showModifyVideoWindow = false,
353            showDeleteVideoWindow = false,
354            argsGroup = [],
355            viewContentHTML = "",
356            pageComponentHTML = "",
357            msg = ""
358        } = this.state;
359        return (
360            <div className="main">
361
362                <InputView showWindow={showScanWindow} title="输入扫描目录" argsGroup={argsGroup}
363                           then={this.scanDir} cannel={this.closeWindow}/>
364                <InputView showWindow={showNewVideoWindow} title="视频上新" argsGroup={argsGroup}
365                           then={this.newVideo} cannel={this.closeWindow}/>
366                <InputView showWindow={showVideoDetailWindow} title="视频详情" argsGroup={argsGroup}
367                           then={this.videoDetail} cannel={this.closeWindow}/>
368                <InputView showWindow={showModifyVideoWindow} title="修改视频信息" argsGroup={argsGroup}
369                           then={this.modifyVideo} cannel={this.closeWindow}/>
370                <InputView showWindow={showDeleteVideoWindow} title="确认下架视频" msg={msg}
371                           then={this.deleteVideo} cannel={this.closeWindow}/>
372                <div className="top">
373                    <div className="title">视频管理</div>
374                    <div className="bar">
375                        <div>
376                            <div onClick={this.openScanWindow}>目录扫描</div>
377                            <div onClick={this.renderVideoList}>视频库</div>
378                        </div>
379                    </div>
380                </div>
381                {viewContentHTML}
382                {pageComponentHTML}
383            </div>
384        );
385    }
386}
387
388class NavConfigApp extends React.Component {
389
390    constructor(props) {
391        super(props);
392        this.state = {};
393    }
394
395    componentDidMount() {
396        this.loadData();
397    }
398
399    loadData = () => {
400        let that = this;
401        Req({
402            method: "GET",
403            url: "/backend/aip/dictionary/group",
404        }).then(value => {
405            if (value) {
406                that.setState({nav: value});
407            }
408        }).catch(({code}) => {
409            if (401 === code) {
410                that.setState(() => ({
411                    token: null,
412                    who: null,
413                }));
414                that.setState({nav: []});
415                // TODO
416                alert("请登录");
417            }
418        });
419    }
420
421    renderGroupList = (dictionaryGroup = []) => dictionaryGroup.map((d, i) => {
422        const {id, name, groupType, values = []} = d;
423        return (
424            <div>
425                <div className="value" data={id}>
426                    <div className="col-md-1">{i + 1}</div>
427                    <div className="col-md-2">{name}</div>
428                    <div className="col-md-5">{groupType}</div>
429                    <div className="col-md-3 options">
430                        <span index={i} onClick={this.openModifyDictionaryWindow}>修改</span>
431                        <span index={i} onClick={this.openDeleteDictionaryWindow}>删除</span>
432                        <span index={i} onClick={this.openAppendDictionaryWindow}>新增子级</span>
433                    </div>
434                </div>
435                {values ? values.map((v, j) => {
436                    const {id, name, data} = v;
437                    return (
438                        <div className="value" data={id}>
439                            <div className="col-md-2">{i + 1} - {j + 1}</div>
440                            <div className="col-md-2">{name}</div>
441                            <div className="col-md-5">{data}</div>
442                            <div className="col-md-3 options">
443                                <span onClick={() => this.openModifyDictionaryItemWindow(v)}>修改</span>
444                                <span onClick={() => this.openDeleteDictionaryItemWindow(v)}>删除</span>
445                            </div>
446                        </div>
447                    );
448                }) : ""}
449            </div>
450        )
451    })
452
453    openCreateDictionaryWindow = e => this.setState({
454        showCreateDictionaryGroupWindow: true,
455        argsGroup: [{label: "标签组名", key: "name"}, {label: "code", key: "groupType"}]
456    })
457
458    closeWindow = e => this.setState({
459        showCreateDictionaryGroupWindow: false,
460        showModifyDictionaryGroupWindow: false,
461        showDeleteDictionaryGroupWindow: false,
462        showAppendDictionaryWindow: false,
463        showModifyDictionaryItemWindow: false,
464        showDeleteDictionaryItemWindow: false,
465    })
466
467    createDictionaryGroup = value => {
468        let that = this;
469        Req({
470            method: "PUT",
471            url: "/backend/aip/dictionary/group",
472            data: value
473        }).then(data => {
474            that.loadData();
475        }).catch(({msg}) => {
476            that.setState({err: msg});
477        });
478        that.setState({showCreateDictionaryGroupWindow: false});
479    }
480
481    openModifyDictionaryWindow = e => {
482        const index = e.target.getAttribute("index");
483        const {nav = []} = this.state;
484        const {name, groupType} = nav[index] || {};
485        this.setState({
486            showModifyDictionaryGroupWindow: true,
487            index,
488            argsGroup: [{label: "标签组名", key: "name", val: name}, {label: "code", key: "groupType", val: groupType}]
489        })
490    }
491
492    modifyDictionaryGroup = value => {
493        if (null == value) {
494            return
495        }
496        const {index, nav = []} = this.state;
497        const {id, name, groupType} = nav[index] || {};
498        const target = Object.assign({id, name, groupType}, value)
499        let that = this;
500        Req({
501            method: "POST",
502            url: "/backend/aip/dictionary/group",
503            data: target
504        }).then(data => {
505            that.loadData();
506        }).catch(({msg}) => {
507            that.setState({err: msg});
508        });
509        that.setState({showModifyDictionaryGroupWindow: false});
510    }
511
512    openDeleteDictionaryWindow = e => {
513        const index = e.target.getAttribute("index");
514        const {nav = []} = this.state;
515        this.setState({
516            showDeleteDictionaryGroupWindow: true,
517            msg: `确定删除${nav[index].name}?`,
518            index,
519        });
520    }
521
522    deleteDictionaryGroup = () => {
523        const {index, nav = []} = this.state;
524        const {id} = nav[index] || {};
525        let that = this;
526        Req({
527            method: "DELETE",
528            url: "/backend/aip/dictionary/group?id=" + id,
529        }).then(data => {
530            that.loadData();
531        }).catch(({msg}) => {
532            that.setState({err: msg});
533        });
534        that.setState({showDeleteDictionaryGroupWindow: false});
535    }
536
537    openAppendDictionaryWindow = e => {
538        const index = e.target.getAttribute("index");
539        this.setState({
540            showAppendDictionaryWindow: true,
541            argsGroup: [{label: "标签名", key: "name"}, {label: "标签值", key: "data"}],
542            index,
543        });
544    }
545
546    appendDictionary = value => {
547        const {index, nav = []} = this.state;
548        const {id} = nav[index] || {};
549        Object.assign(value, {groupID: id})
550        let that = this;
551        Req({
552            method: "PUT",
553            url: "/backend/aip/dictionary",
554            data: value
555        }).then(data => {
556            that.loadData();
557        }).catch(({msg}) => {
558            that.setState({err: msg});
559        });
560        that.setState({showAppendDictionaryWindow: false});
561    }
562
563    openModifyDictionaryItemWindow = v => {
564        this.setState({
565            showModifyDictionaryItemWindow: true,
566            argsGroup: [{label: "标签名", key: "name", val: v.name}, {label: "标签值", key: "data", val: v.data}],
567            target: v,
568        })
569    }
570
571    modifyDictionaryItem = value => {
572        if (null == value) {
573            return
574        }
575        const {target = {}} = this.state;
576        Object.assign(target, value);
577        let that = this;
578        Req({
579            method: "POST",
580            url: "/backend/aip/dictionary",
581            data: target
582        }).then(() => {
583            that.loadData();
584        }).catch(({msg}) => {
585            that.setState({err: msg});
586        });
587        that.setState({showModifyDictionaryItemWindow: false});
588    }
589
590    deleteDictionaryItem = () => {
591        let that = this;
592        const {target = {}} = this.state;
593        Req({
594            method: "DELETE",
595            url: "/backend/aip/dictionary?id=" + target.id,
596        }).then(data => {
597            that.loadData();
598        }).catch(({msg}) => {
599            that.setState({err: msg});
600        });
601        that.setState({showDeleteDictionaryItemWindow: false});
602    }
603
604    openDeleteDictionaryItemWindow = v => {
605        this.setState({
606            showDeleteDictionaryItemWindow: true,
607            msg: `确定删除子标签 ${v.name}?`,
608            target: v,
609        });
610    }
611
612    render = () => {
613        const {
614            nav = [],
615            showCreateDictionaryGroupWindow = false,
616            showModifyDictionaryGroupWindow = false,
617            showDeleteDictionaryGroupWindow = false,
618            showAppendDictionaryWindow = false,
619            showModifyDictionaryItemWindow = false,
620            showDeleteDictionaryItemWindow = false,
621            msg,
622            argsGroup = []
623        } = this.state;
624        return (
625            <div>
626                <InputView showWindow={showCreateDictionaryGroupWindow} title="创建标签组" argsGroup={argsGroup}
627                           then={this.createDictionaryGroup} cannel={this.closeWindow}/>
628                <InputView showWindow={showModifyDictionaryGroupWindow} title="修改标签组" argsGroup={argsGroup}
629                           then={this.modifyDictionaryGroup} cannel={this.closeWindow}/>
630                <InputView showWindow={showDeleteDictionaryGroupWindow} title="删除标签组" msg={msg}
631                           then={this.deleteDictionaryGroup} cannel={this.closeWindow}/>
632                <InputView showWindow={showAppendDictionaryWindow} title="追加子标签" argsGroup={argsGroup}
633                           then={this.appendDictionary} cannel={this.closeWindow}/>
634                <InputView showWindow={showModifyDictionaryItemWindow} title="修改子标签" argsGroup={argsGroup}
635                           then={this.modifyDictionaryItem} cannel={this.closeWindow}/>
636                <InputView showWindow={showDeleteDictionaryItemWindow} title="删除子标签" msg={msg}
637                           then={this.deleteDictionaryItem} cannel={this.closeWindow}/>
638                <div className="main">
639                    <div className="top">
640                        <div className="title">导航配置</div>
641                        <div className="bar">
642                            <div>
643                                <div onClick={this.openCreateDictionaryWindow}>创建导航</div>
644                                <div>删除导航</div>
645                            </div>
646                        </div>
647                    </div>
648                    <div className="view">
649                        <div className="title">
650                            <div className="col-md-1"></div>
651                            <div className="col-md-2">导航名称</div>
652                            <div className="col-md-5">标签值</div>
653                            <div className="col-md-3">操作</div>
654                        </div>
655                        <div className="values">
656                            {this.renderGroupList(nav)}
657                        </div>
658                    </div>
659                </div>
660            </div>
661        );
662    }
663}
664
665class ToolsApp extends React.Component {
666
667    constructor(props) {
668        super(props);
669        this.state = {};
670    }
671
672    renderMainView = (activeCode = 0) => {
673        switch (activeCode) {
674            case 0:
675                return <NavConfigApp/>
676            case 3:
677                return <VideoManagerApp/>
678        }
679    };
680
681    changeView = (activeCode = 0) => {
682        this.setState({activeCode});
683    }
684
685    render() {
686        const {activeCode = 0} = this.state;
687        return (
688            <div className="tools_app">
689                <div className="left_control">
690                    <div>
691                        <div className="title"
692                             onClick={e => window.location.href = "/video-storage/index.html"}>{"<- "}返回首页
693                        </div>
694                    </div>
695                    <div className="line"/>
696                    <div>
697                        <div className="title">字典</div>
698                        <div onClick={e => this.changeView(0)}
699                             className={activeCode === 0 ? "item active" : "item"}>导航配置
700                        </div>
701                        <div onClick={e => this.changeView(1)}
702                             className={activeCode === 1 ? "item active" : "item"}>标签管理
703                        </div>
704                        <div onClick={e => this.changeView(2)}
705                             className={activeCode === 2 ? "item active" : "item"}>目录配置
706                        </div>
707                    </div>
708                    <div className="line"/>
709                    <div>
710                        <div className="title">内容</div>
711                        <div onClick={e => this.changeView(3)}
712                             className={activeCode === 3 ? "item active" : "item"}>视频管理
713                        </div>
714                        <div onClick={e => this.changeView(4)}
715                             className={activeCode === 4 ? "item active" : "item"}>图片管理
716                        </div>
717                        <div onClick={e => this.changeView(5)}
718                             className={activeCode === 5 ? "item active" : "item"}>小说管理
719                        </div>
720                        <div onClick={e => this.changeView(6)}
721                             className={activeCode === 6 ? "item active" : "item"}>直播管理
722                        </div>
723                    </div>
724                    <div className="line"/>
725                    <div>
726                        <div onClick={e => this.changeView(7)}
727                             className={activeCode === 7 ? "item active" : "item"}>用户
728                        </div>
729                        <div onClick={e => this.changeView(8)}
730                             className={activeCode === 8 ? "item active" : "item"}>用户管理
731                        </div>
732                    </div>
733                    <div className="bottom-view">
734                        <div>
735                            <div className="title">v 0.0.1</div>
736                        </div>
737                    </div>
738                </div>
739                {this.renderMainView(activeCode)}
740            </div>
741        );
742    }
743}
744
745ReactDOM.render(<ToolsApp theme="dark"/>, document.getElementById("app"));
746
Full Screen

Layout.jsx

Source: Layout.jsx Github

copy
1import React, { Component, Fragment } from 'react';
2import { Link } from 'react-router-dom';
3import { ipcRenderer } from 'electron';
4
5class Layout extends Component {
6  constructor(props){
7    super(props);
8    this.CloseWindow = this.CloseWindow.bind(this);
9    this.MinimizeWindow = this.MinimizeWindow .bind(this);
10  }
11  CloseWindow(){
12    ipcRenderer.send('close');
13  }
14  MinimizeWindow(){
15    ipcRenderer.send('minimize');
16  }
17  render(){
18    return(
19      <div class="Layout">
20        <div className="app_Navigation">
21
22          <div className="infos">
23            <i className="fas fa-layer-group"></i>
24            <p className="appName"> 
25              Electron UI -- Build with React -- Environnement Webpack 
26            </p>
27          </div>
28
29          <div className="controls">
30            <div className="navButton Close_button" onClick={this.CloseWindow}>
31              <i className="fas fa-times"></i>
32            </div>
33            <div className="navButton Minimize_button" onClick={this.MinimizeWindow}>
34              <i className="fas fa-angle-down"></i>
35            </div>
36          </div>
37
38        </div>
39        {this.props.children}
40      </div>
41    );
42  }
43}
44
45export default Layout;
46
Full Screen

note.js

Source: note.js Github

copy
1import React,{Component}                    from 'react';
2import {connect}                            from 'react-redux';
3import {Link}                               from 'react-router';
4
5//component
6import { noteAction }                       from '../../actions/noteAction';
7
8@connect((store) =>{
9  return {
10    note              : store.note,
11  };
12})
13
14class Note extends React.Component{
15
16  closeWindow(){
17    const noteText = '';
18    const status   = '';
19    this.props.dispatch( noteAction(noteText,status) );
20  }
21
22  returnView(note){
23    const status = ['notLogin','addMember']
24    switch( note.status ){
25      case status[0] :
26        return(
27          <div className="action">
28            <Link to="/member/-signin" onClick={this.closeWindow.bind(this)}>SignIn</Link>
29            <Link to="/member/-signup" onClick={this.closeWindow.bind(this)}>SignUp</Link>
30            <button className="closeWindow" onClick={this.closeWindow.bind(this)}>ClOSE</button>
31          </div>
32        )
33        break;
34
35      case status[1] :
36        return(
37          <div className="action">
38            <button className="closeWindow" onClick={this.closeWindow.bind(this)}>ClOSE</button>
39          </div>
40        )
41        break;
42    }
43  }
44
45  render(){
46    const {note} = this.props;
47    if( note.data!='' ){
48      return (
49        <article id="note">
50          <article className="null" onClick={this.closeWindow.bind(this)}></article>
51          <article className="in">
52            <div className="text">
53              {note.data}
54            </div>
55            {this.returnView(note)}
56          </article>
57        </article>
58      )
59    }else{
60      return null;
61    }
62  }
63}
64
65function mapStateToProps(state){
66  return{
67    note        : state.note,
68  }
69}
70
71export default connect(mapStateToProps)(Note);
72
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Appium Xcuitest Driver on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)