From 0f153cbe3ddef843579d51cadc5d1fb30e99d5e5 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Mon, 16 Nov 2020 16:18:38 +0800
Subject: [PATCH] hooks api

---
 dist/fix/fix.compact.ie.js |  39 ++++---
 dist/fix/fix.compact.js    |  39 ++++---
 hooks.html                 | 217 +++++++++++++++++++++++++++++++++++++
 src/core/widget.js         |  85 ++++++++++++---
 4 files changed, 324 insertions(+), 56 deletions(-)
 create mode 100644 hooks.html

diff --git a/dist/fix/fix.compact.ie.js b/dist/fix/fix.compact.ie.js
index 7710468dca..38a51bf1d0 100644
--- a/dist/fix/fix.compact.ie.js
+++ b/dist/fix/fix.compact.ie.js
@@ -11,6 +11,25 @@
                 vm._watchers.push(createWatcher(vm, key, handler));
             }
         }
+        BI.each(vm.$watchDelayCallbacks, function (i, watchDelayCallback) {
+            var innerWatch = watchDelayCallback[0];
+            var innerHandler = watchDelayCallback[1];
+            if (BI.isKey(innerWatch)) {
+                var key = innerWatch;
+                innerWatch = {};
+                innerWatch[key] = innerHandler;
+            }
+            for (var key in innerWatch) {
+                var handler = innerWatch[key];
+                if (BI.isArray(handler)) {
+                    for (var i = 0; i < handler.length; i++) {
+                        vm._watchers.push(createWatcher(vm, key, handler[i]));
+                    }
+                } else {
+                    vm._watchers.push(createWatcher(vm, key, handler));
+                }
+            }
+        });
     }
 
     function createWatcher (vm, keyOrFn, cb, options) {
@@ -89,26 +108,6 @@
     //     return result;
     // };
 
-    BI.watch = function (watch, handler) {
-        if (BI.Widget.current) {
-            if (BI.isKey(watch)) {
-                var key = watch;
-                watch = {};
-                watch[key] = handler;
-            }
-            for (var key in watch) {
-                var handler = watch[key];
-                if (BI.isArray(handler)) {
-                    for (var i = 0; i < handler.length; i++) {
-                        BI.Widget.current._watchers.push(createWatcher(BI.Widget.current, key, handler[i]));
-                    }
-                } else {
-                    BI.Widget.current._watchers.push(createWatcher(BI.Widget.current, key, handler));
-                }
-            }
-        }
-    };
-
     _.each(["populate", "addItems", "prependItems"], function (name) {
         var old = BI.Loader.prototype[name];
         BI.Loader.prototype[name] = function () {
diff --git a/dist/fix/fix.compact.js b/dist/fix/fix.compact.js
index 433d107b7b..2e00a6c1d1 100644
--- a/dist/fix/fix.compact.js
+++ b/dist/fix/fix.compact.js
@@ -11,6 +11,25 @@
                 vm._watchers.push(createWatcher(vm, key, handler));
             }
         }
+        BI.each(vm.$watchDelayCallbacks, function (i, watchDelayCallback) {
+            var innerWatch = watchDelayCallback[0];
+            var innerHandler = watchDelayCallback[1];
+            if (BI.isKey(innerWatch)) {
+                var key = innerWatch;
+                innerWatch = {};
+                innerWatch[key] = innerHandler;
+            }
+            for (var key in innerWatch) {
+                var handler = innerWatch[key];
+                if (BI.isArray(handler)) {
+                    for (var i = 0; i < handler.length; i++) {
+                        vm._watchers.push(createWatcher(vm, key, handler[i]));
+                    }
+                } else {
+                    vm._watchers.push(createWatcher(vm, key, handler));
+                }
+            }
+        });
     }
 
     function createWatcher (vm, keyOrFn, cb, options) {
@@ -98,26 +117,6 @@
     //     return result;
     // };
 
-    BI.watch = function (watch, handler) {
-        if (BI.Widget.current) {
-            if (BI.isKey(watch)) {
-                var key = watch;
-                watch = {};
-                watch[key] = handler;
-            }
-            for (var key in watch) {
-                var handler = watch[key];
-                if (BI.isArray(handler)) {
-                    for (var i = 0; i < handler.length; i++) {
-                        BI.Widget.current._watchers.push(createWatcher(BI.Widget.current, key, handler[i]));
-                    }
-                } else {
-                    BI.Widget.current._watchers.push(createWatcher(BI.Widget.current, key, handler));
-                }
-            }
-        }
-    };
-
     _.each(["populate", "addItems", "prependItems"], function (name) {
         var old = BI.Loader.prototype[name];
         BI.Loader.prototype[name] = function () {
diff --git a/hooks.html b/hooks.html
new file mode 100644
index 0000000000..40d5ba6e6e
--- /dev/null
+++ b/hooks.html
@@ -0,0 +1,217 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
+    <script src="./dist/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                expand: false,
+                showClearAll: false,
+                hasUndo: false,
+                hasRedo: false
+            };
+        },
+
+        computed: {
+            expandText: function () {
+                return this.model.expand ? "expand" : "not-expand";
+            },
+            clearAllText: function () {
+                return this.model.showClearAll ? "showClearAll" : "not-showClearAll";
+            },
+            undoText: function () {
+                return this.model.hasUndo ? "hasUndo" : "not-hasUndo";
+            },
+            redoText: function () {
+                return this.model.hasRedo ? "hasRedo" : "not-hasRedo";
+            }
+        },
+
+        actions: {
+            setExpand: function () {
+                this.model.expand = !this.model.expand;
+            },
+            setClearAll: function () {
+                this.model.showClearAll = !this.model.showClearAll;
+            },
+            setUndo: function () {
+                this.model.hasUndo = !this.model.hasUndo;
+            },
+            setRedo: function () {
+                this.model.hasRedo = !this.model.hasRedo;
+            }
+        }
+    });
+
+    BI.model("demo.model", Model);
+    function expandFunction () {
+        var button;
+        var store = BI.useStore(function () {
+            return BI.Models.getModel("demo.model");
+        });
+        BI.onBeforeMount(function () {
+
+        });
+        BI.onMounted(function () {
+
+        });
+        BI.onBeforeUnmount(function () {
+
+        });
+        BI.onUnmounted(function () {
+
+        });
+        BI.watch("expandText", function (val) {
+            button.setText(val);
+        });
+        return function () {
+            return {
+                type: "bi.button",
+                ref: function (_ref) {
+                    button = _ref;
+                },
+                text: store.model.expandText,
+                handler: function () {
+                    store.setExpand();
+                }
+            };
+        };
+    }
+
+    function clearAllFunction () {
+        var button;
+        var store = BI.useStore(function () {
+            return BI.Models.getModel("demo.model");
+        });
+        BI.onBeforeMount(function () {
+
+        });
+        BI.onMounted(function () {
+
+        });
+        BI.onBeforeUnmount(function () {
+
+        });
+        BI.onUnmounted(function () {
+
+        });
+        BI.watch("clearAllText", function (val) {
+            button.setText(val);
+        });
+        return function () {
+            return {
+                type: "bi.button",
+                ref: function (_ref) {
+                    button = _ref;
+                },
+                text: store.model.clearAllText,
+                handler: function () {
+                    store.setClearAll();
+                }
+            };
+        };
+    }
+
+    function undoFunction () {
+        var button;
+        var store = BI.useStore(function () {
+            return BI.Models.getModel("demo.model");
+        });
+        BI.onBeforeMount(function () {
+
+        });
+        BI.onMounted(function () {
+
+        });
+        BI.onBeforeUnmount(function () {
+
+        });
+        BI.onUnmounted(function () {
+
+        });
+        BI.watch("undoText", function (val) {
+            button.setText(val);
+        });
+        return function () {
+            return {
+                type: "bi.button",
+                ref: function (_ref) {
+                    button = _ref;
+                },
+                text: store.model.undoText,
+                handler: function () {
+                    store.setUndo();
+                }
+            };
+        };
+    }
+
+    function redoFunction () {
+        var button;
+        var store = BI.useStore(function () {
+            return BI.Models.getModel("demo.model");
+        });
+        BI.onBeforeMount(function () {
+
+        });
+        BI.onMounted(function () {
+
+        });
+        BI.onBeforeUnmount(function () {
+
+        });
+        BI.onUnmounted(function () {
+
+        });
+        BI.watch("redoText", function (val) {
+            button.setText(val);
+        });
+        return function () {
+            return {
+                type: "bi.button",
+                ref: function (_ref) {
+                    button = _ref;
+                },
+                text: store.model.redoText,
+                handler: function () {
+                    store.setRedo();
+                }
+            };
+        };
+    }
+
+    var Widget = BI.inherit(BI.Widget, {
+        setup: function () {
+            var expandComponent = expandFunction();
+            var clearAllComponent = clearAllFunction();
+            var undoComponent = undoFunction();
+            var redoComponent = redoFunction();
+            return function () {
+                return {
+                    type: "bi.vertical",
+                    items: [expandComponent(), clearAllComponent(), undoComponent(), redoComponent()]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>
diff --git a/src/core/widget.js b/src/core/widget.js
index f309497a25..a8690a16f4 100644
--- a/src/core/widget.js
+++ b/src/core/widget.js
@@ -7,6 +7,15 @@
  */
 
 !(function () {
+    function callLifeHook (self, life) {
+        if (self[life]) {
+            var hooks = BI.isArray(self[life]) ? self[life] : [self[life]];
+            BI.each(hooks, function (i, hook) {
+                hook();
+            });
+        }
+    }
+
     BI.Widget = BI.Widget || BI.inherit(BI.OB, {
         _defaultConfig: function () {
             return BI.extend(BI.Widget.superclass._defaultConfig.apply(this), {
@@ -28,7 +37,11 @@
 
         // 覆盖父类的_constructor方法，widget不走ob的生命周期
         _constructor: function () {
-            // do nothing
+            if (this.setup) {
+                pushTarget(this);
+                this.render = this.setup();
+                popTarget();
+            }
         },
 
         _lazyConstructor: function () {
@@ -84,10 +97,10 @@
 
         _render: function () {
             this.__asking = false;
-            this.beforeCreate && this.beforeCreate();
+            callLifeHook(this, "beforeCreate");
             this._initElement();
             this._initEffects();
-            this.created && this.created();
+            callLifeHook(this, "created");
         },
 
         /**
@@ -172,11 +185,6 @@
         _initElement: function () {
             var self = this;
             var els = this.render && this.render();
-            if (!els) {
-                pushTarget(this);
-                els = this.setup && this.setup();
-                popTarget();
-            }
             if (BI.isPlainObject(els)) {
                 els = [els];
             }
@@ -210,7 +218,7 @@
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
             }
-            lifeHook !== false && this.beforeMount && this.beforeMount();
+            lifeHook !== false && callLifeHook(this, "beforeMount");
             this._isMounted = true;
             this._mountChildren && this._mountChildren();
             BI.each(this._children, function (i, widget) {
@@ -218,7 +226,7 @@
                 !self.isValid() && widget._setValid(false);
                 widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
-            lifeHook !== false && this.mounted && this.mounted();
+            lifeHook !== false && callLifeHook(this, "mounted");
             this.fireEvent(BI.Events.MOUNT);
             predicate && predicate(this);
             return true;
@@ -457,7 +465,7 @@
         },
 
         __d: function () {
-            this.beforeDestroy && this.beforeDestroy();
+            callLifeHook(this, "beforeDestroy");
             this.beforeDestroy = null;
             BI.each(this._children, function (i, widget) {
                 widget && widget._unMount && widget._unMount();
@@ -465,7 +473,7 @@
             this._children = {};
             this._parent = null;
             this._isMounted = false;
-            this.destroyed && this.destroyed();
+            callLifeHook(this, "destroyed");
             this.destroyed = null;
         },
 
@@ -526,24 +534,69 @@
         BI.Widget.current = current = currentStack.pop();
     }
 
+    BI.useStore = function (_store) {
+        if (current && current.store) {
+            return current.store;
+        }
+        if (current && current.$storeDelegate) {
+            return current.$storeDelegate;
+        }
+        if (current) {
+            var delegate = {};
+            current._store = function () {
+                var st = _store.apply(this, arguments);
+                BI.extend(delegate, st);
+                return st;
+            };
+            return current.$storeDelegate = delegate;
+        }
+    };
+
+    BI.watch = function (watch, handler) {
+        if (BI.Widget.current) {
+            BI.Widget.current.$watchDelayCallbacks || (BI.Widget.current.$watchDelayCallbacks = []);
+            BI.Widget.current.$watchDelayCallbacks.push([watch, handler]);
+        }
+    };
+
     BI.onBeforeMount = function (beforeMount) {
         if (current) {
-            current.beforeMount = beforeMount;
+            if (!current.beforeMount) {
+                current.beforeMount = [];
+            } else if (!BI.isArray(current.beforeMount)) {
+                current.beforeMount = [current.beforeMount];
+            }
+            current.beforeMount.push(beforeMount);
         }
     };
     BI.onMounted = function (mounted) {
         if (current) {
-            current.mounted = mounted;
+            if (!current.mounted) {
+                current.mounted = [];
+            } else if (!BI.isArray(current.mounted)) {
+                current.mounted = [current.mounted];
+            }
+            current.mounted.push(mounted);
         }
     };
     BI.onBeforeUnmount = function (beforeDestroy) {
         if (current) {
-            current.beforeDestroy = beforeDestroy;
+            if (!current.beforeDestroy) {
+                current.beforeDestroy = [];
+            } else if (!BI.isArray(current.beforeDestroy)) {
+                current.beforeDestroy = [current.beforeDestroy];
+            }
+            current.beforeDestroy.push(beforeDestroy);
         }
     };
     BI.onUnmounted = function (destroyed) {
         if (current) {
-            current.destroyed = destroyed;
+            if (!current.destroyed) {
+                current.destroyed = [];
+            } else if (!BI.isArray(current.destroyed)) {
+                current.destroyed = [current.destroyed];
+            }
+            current.destroyed.push(destroyed);
         }
     };