forked from alibaba/lowcode-plugins
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.tsx
More file actions
111 lines (96 loc) · 2.39 KB
/
index.tsx
File metadata and controls
111 lines (96 loc) · 2.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { PureComponent } from 'react';
import { ILowCodePluginContext, project } from '@alilc/lowcode-engine';
import { Button, Icon } from '@alifd/next';
import { PluginProps } from '@alilc/lowcode-types';
import './index.scss';
export interface IProps extends PluginProps {
logo?: string;
}
export interface IState {
undoEnable: boolean;
redoEnable: boolean;
}
class UndoRedo extends PureComponent<IProps, IState> {
static displayName = 'LowcodeUndoRedo';
private history: any;
constructor(props: any) {
super(props);
this.state = {
undoEnable: false,
redoEnable: false,
};
this.init();
}
init = (): void => {
project.onChangeDocument(doc => {
this.history = doc.history;
this.updateState(this.history?.getState() || 0);
this.history.onChangeState(() => {
this.updateState(this.history?.getState() || 0);
});
});
};
updateState = (state: number): void => {
this.setState({
undoEnable: !!(state & 1),
redoEnable: !!(state & 2),
});
};
handleUndoClick = (): void => {
this.history.back();
};
handleRedoClick = (): void => {
this.history.forward();
};
render(): React.ReactNode {
const { undoEnable, redoEnable } = this.state;
return (
<div className="lowcode-plugin-undo-redo">
<Button
size="medium"
data-tip="撤销"
data-dir="bottom"
onClick={this.handleUndoClick}
ghost
disabled={!undoEnable}
>
<Icon type="houtui" />
</Button>
<Button
size="medium"
data-tip="恢复"
data-dir="bottom"
onClick={this.handleRedoClick}
ghost
disabled={!redoEnable}
>
<Icon type="qianjin" />
</Button>
</div>
);
}
}
const plugin = (ctx: ILowCodePluginContext) => {
return {
// 插件名，注册环境下唯一
name: 'PluginUndoRedo',
// 依赖的插件（插件名数组）
dep: [],
// 插件的初始化函数，在引擎初始化之后会立刻调用
init() {
// 往引擎增加面板
ctx.skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'undoRedo',
content: UndoRedo,
props: {
align: 'right',
width: 88,
},
})
},
};
};
plugin.pluginName = 'PluginUndoRedo'
export default plugin