59 |
60 |
61 | {getAlerts}
62 |
63 |
64 | )
65 | }
66 | }
67 | }
68 | //
69 |
70 | function select(state) {
71 | return {
72 | alerts: state.alerts
73 | }
74 | }
75 | export default connect(select)(Alerts);
--------------------------------------------------------------------------------
/src/component/backup/LeftArea_1.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux';
3 | import RapCommand from './left/RapCommand.jsx';
4 | import OpenProject from './left/OpenProject.jsx';
5 | import NewProject from './left/NewProject.jsx';
6 | // import RuffSDK from './left/RuffSDK.jsx';
7 | import {tr} from '../lib/Utils'
8 | import { Collapse } from 'antd';
9 | import config from '../config';
10 | const Panel = Collapse.Panel;
11 | class LeftArea extends React.Component {
12 | constructor(props){
13 | super(props)
14 | }
15 | callback(key) {
16 | console.log(key);
17 | }
18 |
19 |
20 | render(){
21 | //console.log(121321,
)
22 | //console.log(123,this.props.config)
23 | //0--Rap 命令 ; 1--选择项目 ; 2--新建项目 10--ruff sdk
24 | //默认是打开 1 2 3
25 | //console.log('public:',config.isPublic)
26 | //if(!config.isPublic){
27 | // return (
28 | //
29 | //
30 | //
31 | //
32 | //
33 | //
34 | //
35 | //
36 | //
37 | //
38 | //
)
39 | //}
40 | return(
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | )
61 | }
62 | }
63 | //
64 | //
65 | //
66 | function select(state) {
67 | return{
68 | config:state.config
69 | }
70 | }
71 | export default connect(select)(LeftArea);
72 |
--------------------------------------------------------------------------------
/src/component/backup/RightArea_1.jsx:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import { Tabs, Icon,Button } from 'antd';
5 | const TabPane = Tabs.TabPane;
6 | import CommandsArea from './rights/CommandsArea.jsx';
7 | import LogsArea from './rights/LogsArea.jsx';
8 | // import CommandArea from './right/CommandArea.jsx';
9 | // import LogArea from './right/LogArea.jsx';
10 | class RightArea extends React.Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | tabKey: "1",
15 | "extra1": '',
16 | "extra2": ''
17 | }
18 | }
19 | changeTab(e) {
20 | // console.log(e,this)
21 | this.setState({ tabKey: e });
22 | }
23 | /**获取扩展的按钮*/
24 | getOperations() {
25 | if (this.state.tabKey == "1") {
26 | return this.state.extra1;
27 | } else if (this.state.tabKey == "2") {
28 | return this.state.extra2;
29 | }
30 | }
31 | getExtraContent(key, data) {
32 | this.setState({[key]: data })
33 | }
34 | render() {
35 | // console.log('rightArea')
36 | // console.log('this.state.tabKey',this.state.tabKey)
37 | return (
38 |
39 |
40 | Rap 命令} key="1">
41 |
42 |
43 | Rap Log} key="2">
44 |
45 |
46 |
47 |
48 | )
49 | }
50 | }
51 | function select(state) {
52 | return{
53 | config:state.config
54 | }
55 | }
56 | export default connect(select)(RightArea);
--------------------------------------------------------------------------------
/src/component/left/LeftContainer.jsx:
--------------------------------------------------------------------------------
1 | /**左侧每个栏目的容器*/
2 | import React, {PropTypes} from 'react';
3 | import {connect} from 'react-redux';
4 | import {LEFT_CHANGE_CLUMTYPE, command} from '../../actions/AppActions'
5 | // import {command}
6 | class LeftContainer extends React.Component {
7 |
8 | constructor(props) {
9 | super(props)
10 | this.state = {
11 | children: this.props.children
12 | }
13 | }
14 | /**显示子元素的逻辑 */
15 | // showChildren() {
16 | // // console.log('clum:'+this.props.clumId,this.props.left)
17 | // //0关闭 1打开 2关闭中
18 | // var typeId = this.props.left['clum' + this.props.clumId];
19 | // if (typeId == 0) {
20 | // return
21 | // } else {
22 | // return this.state.children;
23 | // }
24 | //
25 | // }
26 | /**点击header显示子对象*/
27 | clickHeader() {
28 |
29 | var clumId = this.props.clumId;
30 | //typeId 0关闭 1打开 2关闭中
31 | var typeId = this.props.left['clum' + clumId];
32 | // console.log('clumID:',clumId,"typeId:",typeId)
33 | if (typeId == 0) {//关闭的时候打开
34 | command(LEFT_CHANGE_CLUMTYPE, { key: clumId, value: 1 });
35 | } else if (typeId == 1) {//rap command会有一个延时效果，不再这里关闭
36 | command(LEFT_CHANGE_CLUMTYPE, { key: clumId, value: 2 });
37 | }else {//打开的时候进入关闭中状态
38 | command(LEFT_CHANGE_CLUMTYPE, { key: clumId, value: 0 });
39 | }
40 |
41 | }
42 | render() {
43 | return (
44 |
45 |
{this.props.header}
46 |
47 | {this.state.children }
48 |
49 |
50 | )
51 | }
52 | }
53 | function select(state) {
54 | return {
55 | left: state.left
56 | }
57 | }
58 | export default connect(select)(LeftContainer);
59 | LeftContainer.propTypes = {
60 | header: PropTypes.string.isRequired,//顶部的文字
61 | clumId: PropTypes.number.isRequired//栏目的id
62 | // show: PropTypes.bool.isRequired,//是否显示
63 | // changeType:PropTypes.func.isRequired,//改变状态的回调
64 |
65 | }
--------------------------------------------------------------------------------
/src/component/left/openproject/Item.jsx:
--------------------------------------------------------------------------------
1 | import React, {PropTypes} from 'react';
2 | import {
3 | addLog,
4 | command,
5 | REMOVE_RUFF_PROJECT,
6 | COLOR_GREEN
7 | } from '../../../actions/AppActions';
8 | import {tr, cutCharByLength} from '../../../lib/Utils';
9 | export default class Item extends React.Component {
10 | constructor(props) {
11 | super(props)
12 | var index = this.props.index;
13 | this.aniShow = `widthShow 0.4s ease ${index * 0.1}s both`;
14 | this.isFirst = false;
15 | // console.log(this.aniShow)
16 | }
17 |
18 | componentDidMount() {
19 |
20 | var item = this.refs.hisItem;
21 | item.addEventListener('animationend', ()=> {
22 | // console.log('animationend',this.props.aniType)
23 | if (this.props.aniType == 1) {//只有打开状态才不断的重复
24 | item.style.width = '100%';
25 | item.style.animation = '';
26 | }
27 |
28 | })
29 | }
30 |
31 | componentDidUpdate() {
32 | // console.log('componentDidUpdate')
33 | if (this.props.aniType == 1) {
34 | this.refs.hisItem.style.animation = this.aniShow;
35 | this.refs.hisItem.style.animationPlayState = "running";
36 | }
37 | }
38 |
39 | render() {
40 | // console.log(123123)
41 | var item = this.props.item;
42 | var index = this.props.index;
43 | if (this.props.aniType == 1) {
44 | var aniStyle = {
45 | width: '0px',
46 | animation: `widthShow 0.4s ease ${index * 0.1}s`,
47 | animationFillMode: 'both'
48 | };
49 | } else {
50 | aniStyle = {
51 | width: '100%',
52 | animation: `widthClose 0.2s ease ${index * 0.1}s`,
53 | animationFillMode: 'forwards'
54 | };
55 | }
56 | aniStyle.position = 'relative'
57 | // console.log('aniStyle:',aniStyle)
58 | return (
59 |
60 |
{
61 | this.props.clickCallBack(item.path)
62 | }}>
63 |
{
65 | e.preventDefault();
66 | e.stopPropagation();
67 | command(REMOVE_RUFF_PROJECT, {path: item.path})
68 | addLog(tr(211, item.name), COLOR_GREEN);
69 | }}>X
70 | {`+ ${cutCharByLength(item.name, 16)}`}
71 |
72 |
73 |
74 | )
75 | }
76 | }
77 | // style={{position:'relative'}
78 | Item.propTypes = {
79 | item: PropTypes.object.isRequired,//路径的对象
80 | aniType: PropTypes.number.isRequired,//动画的类型， 1出现 2关闭
81 | index: PropTypes.number.isRequired,
82 | clickCallBack: PropTypes.func.isRequired,//点击后的回调
83 | }
--------------------------------------------------------------------------------
/src/component/right/ExtraButton.jsx:
--------------------------------------------------------------------------------
1 | import React, {PropTypes} from 'react';
2 | import Button from '../ui/Button';
3 | import ToggleSwitch from '../ui/ToggleSwitch';
4 | import {tr} from '../../lib/Utils';
5 |
6 | export default class ExtraButton extends React.Component {
7 | constructor(props) {
8 | super(props)
9 | this.datas = [
10 | {iconName: 'icon-folder', doc: tr(11)},
11 | {iconName: 'icon-save', doc: tr(17)},
12 | {iconName: 'icon-delete', doc: tr(16)},
13 | {iconName: '', doc: tr(23)}
14 | ];
15 |
16 | }
17 |
18 | componentDidMount() {
19 | //初始化渲染执行之后立刻调用
20 | }
21 |
22 | componentDidUpdate(prevProps) {
23 | //在组件的更新已经同步到 DOM 中之后立刻被调用
24 | }
25 |
26 | showInfo(e) {
27 | // console.log('showInfo')
28 | var tip = this.refs.tip;
29 | tip.className = 'infoShow';
30 | // console.log(777,e.getBoundingClientRect)
31 | var rect = e.getBoundingClientRect();
32 | // console.log('rect:',rect);
33 |
34 | tip.style.top = rect.bottom + 9 + 'px';
35 | tip.style.left = rect.left - tip.getBoundingClientRect().width + 36 + 'px';
36 | // console.log('tip:', rect);
37 | }
38 |
39 | hideInfo() {
40 | var tip = this.refs.tip;
41 | tip.className = 'infoHide';
42 | }
43 |
44 | render() {
45 | var self = this;
46 | var id = this.props.id;
47 | var iconName = this.datas[id].iconName;
48 | var buttonStyle = {width: '26px', height: '16px', margin: '1px 0 1px 0'};
49 | buttonStyle = Object.assign(buttonStyle, this.props.buttonStyle);
50 | var content = this.datas[id].doc;
51 | // console.log('style:',buttonStyle);
52 |
53 | var getButton = ()=> {
54 | if (this.props.id != 3) {
55 | return
62 | } else {
63 | var switchValue = this.props.switchType ? 'on' : 'off';
64 | return
71 | }
72 | }
73 | return (
74 |
75 |
81 | {getButton()}
82 |
83 | )
84 | }
85 | }
86 | ExtraButton.propTypes = {
87 | id: PropTypes.number.isRequired,
88 | // fontSize:PropTypes.string,
89 | // style:PropTypes.object,//整体的样式
90 | onClick: PropTypes.func,
91 | buttonStyle: PropTypes.object,//里面图标的样式
92 | switchType: PropTypes.bool,//自动滚屏的开关
93 | }
94 | // {/*shell.openItem(this.props.ruffProjectPath);*/}
--------------------------------------------------------------------------------
/src/component/right/InfoArea.jsx:
--------------------------------------------------------------------------------
1 | /**x右侧上方的信息区域*/
2 | import React from 'react';
3 | import {connect} from 'react-redux';
4 | import {tr, cutCharToCenter} from '../../lib/Utils';
5 | import {saveString} from '../../lib/FileUtil';
6 | import {shell} from 'electron';
7 | import ExtraButton from './ExtraButton';
8 | import {command, addLog, LOG_CLEAN, COLOR_RED, COLOR_GREEN, SHOW_ALERT,CHANGE_CONFIG} from '../../actions/AppActions';
9 | import {PanelSaveLog} from '../../component/Alerts';
10 | class InfoArea extends React.Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | switchType: true
15 | }
16 | }
17 |
18 | componentDidMount() {
19 | //初始化渲染执行之后立刻调用
20 | // this.saveLog();
21 | }
22 |
23 | componentDidUpdate(prevProps) {
24 | //在组件的更新已经同步到 DOM 中之后立刻被调用
25 | }
26 |
27 | saveLog() {
28 | // console.log('saveLog')
29 | command(SHOW_ALERT, {
30 | type: PanelSaveLog, callback: (path)=> {
31 | // console.log('savePath:',path)
32 |
33 | var txt = '';
34 | this.props.logContent.map((item, index)=> {
35 | txt += `${item.value}\r\n`
36 | // console.log('item:',item)
37 | })
38 | // = this.props.logContent;
39 | // console.log('txt:',txt)
40 | saveString(path, txt);
41 | addLog(tr(22), COLOR_GREEN);//22 保存日志成功
42 | addLog(path, COLOR_GREEN);//22 保存日志成功
43 | // addLog(path);//22 保存日志成功
44 | }
45 | })
46 | }
47 |
48 | render() {
49 | var projectPath = this.props.ruffProjectPath;
50 | // console.log(11, projectPath)
51 | var strPath = projectPath ? projectPath : tr(54);//54 请先选择 Ruff 项目
52 | strPath = `[${cutCharToCenter(strPath, 49)}]`
53 | var stylePath = projectPath ? {} : {color: '#ffccff'}
54 |
55 | // console.log('switchClass:')
56 | return (
57 |
58 |
59 |
60 |
Rap Version:{this.props.rapVersion}
61 |
62 |
63 |
{strPath}
64 |
{
65 | shell.openItem(this.props.ruffProjectPath);
66 | addLog(`${tr(11)}: ${this.props.ruffProjectPath}`, COLOR_GREEN);//打开项目文件夹：
67 | } }/>
68 |
69 | {
70 | command(LOG_CLEAN);
71 | setTimeout(()=> {
72 | addLog(tr(200, tr(16)), COLOR_RED);////200 执行命令：清除调试日志
73 | }, 100)
74 | }}/>
75 | {
76 | command(CHANGE_CONFIG,{autoRapLog:!this.state.switchType});
77 | this.setState({switchType:!this.state.switchType})
78 | }}/>
79 |
80 |
81 |
82 | )
83 | }
84 | }
85 | //