feat:😈 history undo-redo功能完成

This commit is contained in:
荣彬 2020-08-02 08:52:58 +08:00
parent 9d8a7306a6
commit 59292259a6
3 changed files with 35 additions and 4 deletions

View File

@ -24,6 +24,7 @@
"@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"@ali/ve-icons": "^4.1.14",
"react": "^16.8.1",
"react-dom": "^16.8.1"
},

View File

@ -0,0 +1,8 @@
.lowcode-plugin-undo-redo{
.next-btn-ghost.next-btn-dark{
color: #3c3c3c;
}
.next-btn-ghost.next-btn-dark[disabled]{
color: #ccc;
}
}

View File

@ -1,10 +1,12 @@
import React, { PureComponent } from 'react';
import './index.scss';
import { Editor, Title } from '@ali/lowcode-editor-core';
import { TopIcon } from '@ali/lowcode-editor-skeleton';
import Icon from '@ali/ve-icons';
import { Button } from '@alifd/next';
import { Designer } from '@ali/lowcode-designer';
import { PluginProps } from '@ali/lowcode-types';
import './index.scss';
export interface IProps extends PluginProps {
editor: Editor;
logo?: string;
@ -78,8 +80,28 @@ export default class UndoRedo extends PureComponent<IProps, IState> {
const { undoEnable, redoEnable } = this.state;
return (
<div className="lowcode-plugin-undo-redo">
<TopIcon icon="houtui" title="后退" disabled={!undoEnable} onClick={this.handleUndoClick} />
<TopIcon icon="qianjin" title="前进" disabled={!redoEnable} onClick={this.handleRedoClick} />
<Button
size="18px"
data-tip="撤销"
data-dir="bottom"
className="ve-local-history-item"
onClick={this.handleUndoClick}
ghost
disabled={!undoEnable}
>
<Icon name="amindUndo" size="18px" />
</Button>
<Button
size="18px"
data-tip="恢复"
data-dir="bottom"
className="ve-local-history-item"
onClick={this.handleRedoClick}
ghost
disabled={!redoEnable}
>
<Icon name="forward" size="18px" />
</Button>
</div>
);
}