Merge pull request #777 from cdswyda/fix/undo-redo

fix: undo rodo 不可用时图标灰化

src/controllers/handler.js

@@ -5046,9 +5046,15 @@ export default function luckysheetHandler() {
 
     //回退 重做 按钮
     $("#luckysheet-icon-undo").click(function (event) {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
         controlHistory.redo(event);
     });
     $("#luckysheet-icon-redo").click(function (event) {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
         controlHistory.undo(event);
     });
 

src/controllers/listener.js

@@ -7,6 +7,20 @@ import method from '../global/method';
 import { getluckysheetfile } from '../methods/get'
 import { toJson } from '../global/api';
 
+let undoTimer,redoTimer;
+function undoAccessible(len) {
+    clearTimeout(undoTimer);
+    undoTimer = setTimeout(() => {
+        $('#luckysheet-icon-undo')[len ? 'removeClass' : 'addClass']('disabled');
+    }, 10);
+}
+function redoAccessible(len) {
+    clearTimeout(redoTimer);
+    redoTimer = setTimeout(() => {
+        $('#luckysheet-icon-redo')[len ? 'removeClass' : 'addClass']('disabled');
+    }, 10);
+}
+
 const initListener = function(){
     // createProxy(Store,['jfredo']);
     createProxy(Store, 'jfredo',(target, property, val, receiver)=>{
@@ -14,7 +28,13 @@ const initListener = function(){
             //  钩子函数
             method.createHookFunction('updated',val)
         }
+        undoAccessible(Store.jfredo.length);
     } );
+    createProxy(Store, 'jfundo',(target, property, val, receiver)=>{
+        redoAccessible(Store.jfundo.length);
+    } );
+    
+
 
     createProxy(Store, 'asyncLoad', (target, property, val, receiver)=>{
         if(property === 'length' && val === 0){

src/controllers/toolbar.js

@@ -106,7 +106,7 @@ export function createToolbarHtml() {
     const fontarray = locale().fontarray;
     const defaultFmtArray = locale().defaultFmt;
     const htmlMap = {
-        undo: `<div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="${toolbar.undo}"
+        undo: `<div class="luckysheet-toolbar-button luckysheet-inline-block disabled" data-tips="${toolbar.undo}"
         id="luckysheet-icon-undo" role="button" style="user-select: none;">
             <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block"
             style="user-select: none;">
@@ -120,7 +120,7 @@ export function createToolbarHtml() {
                 </div>
             </div>
         </div>`,
-        redo: `<div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="${toolbar.redo}"
+        redo: `<div class="luckysheet-toolbar-button luckysheet-inline-block disabled" data-tips="${toolbar.redo}"
         id="luckysheet-icon-redo" role="button" style="user-select: none;">
             <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block"
             style="user-select: none;">

src/css/luckysheet-core.css

@@ -7352,3 +7352,8 @@ fieldset[disabled] .btn-danger.focus {
     white-space: nowrap;
 }
 
+#luckysheet-icon-undo.disabled,
+#luckysheet-icon-redo.disabled {
+    cursor: default;
+    opacity: .4;
+}