|
|
|
@ -30,7 +30,7 @@ function callLifeHook(self, life) {
|
|
|
|
|
if (hook) { |
|
|
|
|
hooks = hooks.concat(isArray(hook) ? hook : [hook]); |
|
|
|
|
} |
|
|
|
|
each(hooks, function (i, hook) { |
|
|
|
|
each(hooks, (i, hook) => { |
|
|
|
|
hook.call(self); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
@ -53,7 +53,7 @@ export class Widget extends OB {
|
|
|
|
|
baseCls: "", |
|
|
|
|
extraCls: "", |
|
|
|
|
cls: "", |
|
|
|
|
css: null |
|
|
|
|
css: null, |
|
|
|
|
|
|
|
|
|
// vdom: false
|
|
|
|
|
}); |
|
|
|
@ -132,6 +132,7 @@ export class Widget extends OB {
|
|
|
|
|
// 加个保险
|
|
|
|
|
if (initCallbackCalled === true) { |
|
|
|
|
_global.console && console.error("组件: 请检查beforeInit内部的写法,callback只能执行一次"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
initCallbackCalled = true; |
|
|
|
@ -140,18 +141,19 @@ export class Widget extends OB {
|
|
|
|
|
// 加个保险
|
|
|
|
|
if (renderCallbackCalled === true) { |
|
|
|
|
_global.console && console.error("组件: 请检查beforeRender内部的写法,callback只能执行一次"); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
renderCallbackCalled = true; |
|
|
|
|
this._render(); |
|
|
|
|
this.__afterRender(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
if (this.options.beforeRender || this.beforeRender) { |
|
|
|
|
this.__async = true; |
|
|
|
|
const beforeRenderResult = (this.options.beforeRender || this.beforeRender).call(this, render); |
|
|
|
|
if (beforeRenderResult instanceof Promise) { |
|
|
|
|
beforeRenderResult.then(render).catch(function (e) { |
|
|
|
|
beforeRenderResult.then(render).catch(e => { |
|
|
|
|
_global.console && console.error(e); |
|
|
|
|
render(); |
|
|
|
|
}); |
|
|
|
@ -160,13 +162,13 @@ export class Widget extends OB {
|
|
|
|
|
this._render(); |
|
|
|
|
this.__afterRender(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
if (this.options.beforeInit || this.beforeInit) { |
|
|
|
|
this.__asking = true; |
|
|
|
|
const beforeInitResult = (this.options.beforeInit || this.beforeInit).call(this, init); |
|
|
|
|
if (beforeInitResult instanceof Promise) { |
|
|
|
|
beforeInitResult.then(init).catch(function (e) { |
|
|
|
|
beforeInitResult.then(init).catch(e => { |
|
|
|
|
_global.console && console.error(e); |
|
|
|
|
init(); |
|
|
|
|
}); |
|
|
|
@ -206,11 +208,11 @@ export class Widget extends OB {
|
|
|
|
|
this._initElementWidth(); |
|
|
|
|
this._initElementHeight(); |
|
|
|
|
if (o._baseCls || o.baseCls || o.extraCls) { |
|
|
|
|
this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || "")); |
|
|
|
|
this.element.addClass(`${o._baseCls || ""} ${o.baseCls || ""} ${o.extraCls || ""}`); |
|
|
|
|
} |
|
|
|
|
if (o.cls) { |
|
|
|
|
if (isFunction(o.cls)) { |
|
|
|
|
const cls = this.__watch(o.cls, (context, newValue) => { |
|
|
|
|
let cls = this.__watch(o.cls, (context, newValue) => { |
|
|
|
|
this.element.removeClass(cls).addClass(cls = newValue); |
|
|
|
|
}); |
|
|
|
|
this.element.addClass(cls); |
|
|
|
@ -229,7 +231,7 @@ export class Widget extends OB {
|
|
|
|
|
} |
|
|
|
|
if (o.css) { |
|
|
|
|
if (isFunction(o.css)) { |
|
|
|
|
const css = this.__watch(o.css, (context, newValue) => { |
|
|
|
|
let css = this.__watch(o.css, (context, newValue) => { |
|
|
|
|
for (const k in css) { |
|
|
|
|
if (isNull(newValue[k])) { |
|
|
|
|
newValue[k] = ""; |
|
|
|
@ -247,14 +249,13 @@ export class Widget extends OB {
|
|
|
|
|
__watch(getter, handler, options) { |
|
|
|
|
if (_global.Fix) { |
|
|
|
|
this._watchers = this._watchers || []; |
|
|
|
|
const watcher = new Fix.Watcher(null, () => { |
|
|
|
|
return getter.call(this, this); |
|
|
|
|
}, (handler && ((v) => { |
|
|
|
|
const watcher = new Fix.Watcher(null, () => getter.call(this, this), (handler && (v => { |
|
|
|
|
handler.call(this, this, v); |
|
|
|
|
})) || BI.emptyFn, extend({ deep: true }, options)); |
|
|
|
|
this._watchers.push(() => { |
|
|
|
|
watcher.teardown(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return watcher.value; |
|
|
|
|
} else { |
|
|
|
|
return getter(); |
|
|
|
@ -374,7 +375,7 @@ export class Widget extends OB {
|
|
|
|
|
each(els, (i, el) => { |
|
|
|
|
if (el) { |
|
|
|
|
_lazyCreateWidget(el, { |
|
|
|
|
element: this |
|
|
|
|
element: this, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
@ -422,6 +423,7 @@ export class Widget extends OB {
|
|
|
|
|
this.__afterMount(lifeHook, predicate); |
|
|
|
|
// }, 0);
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -444,10 +446,12 @@ export class Widget extends OB {
|
|
|
|
|
|
|
|
|
|
_update(nextProps, shouldUpdate) { |
|
|
|
|
callLifeHook(this, "beforeUpdate"); |
|
|
|
|
let res; |
|
|
|
|
if (shouldUpdate) { |
|
|
|
|
const res = this.update && this.update(nextProps, shouldUpdate); |
|
|
|
|
res = this.update && this.update(nextProps, shouldUpdate); |
|
|
|
|
} |
|
|
|
|
callLifeHook(this, "updated"); |
|
|
|
|
|
|
|
|
|
return res; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -476,7 +480,7 @@ export class Widget extends OB {
|
|
|
|
|
this.options._disabled = true; |
|
|
|
|
} |
|
|
|
|
// 递归将所有子组件使能
|
|
|
|
|
each(this._children, function (i, child) { |
|
|
|
|
each(this._children, (i, child) => { |
|
|
|
|
!child._manualSetEnable && child._setEnable && child._setEnable(enable); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
@ -488,7 +492,7 @@ export class Widget extends OB {
|
|
|
|
|
this.options._invalid = true; |
|
|
|
|
} |
|
|
|
|
// 递归将所有子组件使有效
|
|
|
|
|
each(this._children, function (i, child) { |
|
|
|
|
each(this._children, (i, child) => { |
|
|
|
|
!child._manualSetValid && child._setValid && child._setValid(valid); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
@ -525,36 +529,36 @@ export class Widget extends OB {
|
|
|
|
|
this.__setElementVisible(true); |
|
|
|
|
this._mount(); |
|
|
|
|
if (o.animation && !lastVisible) { |
|
|
|
|
this.element.removeClass(o.animation + "-leave").removeClass(o.animation + "-leave-active").addClass(o.animation + "-enter"); |
|
|
|
|
this.element.removeClass(`${o.animation}-leave`).removeClass(`${o.animation}-leave-active`).addClass(`${o.animation}-enter`); |
|
|
|
|
if (this._requestAnimationFrame) { |
|
|
|
|
cancelAnimationFrame(this._requestAnimationFrame); |
|
|
|
|
} |
|
|
|
|
this._requestAnimationFrame = () => { |
|
|
|
|
this.element.addClass(o.animation + "-enter-active"); |
|
|
|
|
this.element.addClass(`${o.animation}-enter-active`); |
|
|
|
|
}; |
|
|
|
|
requestAnimationFrame(this._requestAnimationFrame); |
|
|
|
|
if (this._animationDuring) { |
|
|
|
|
clearTimeout(this._animationDuring); |
|
|
|
|
} |
|
|
|
|
this._animationDuring = setTimeout(() => { |
|
|
|
|
this.element.removeClass(o.animation + "-enter").removeClass(o.animation + "-enter-active"); |
|
|
|
|
this.element.removeClass(`${o.animation}-enter`).removeClass(`${o.animation}-enter-active`); |
|
|
|
|
}, o.animationDuring); |
|
|
|
|
} |
|
|
|
|
} else if (visible === false) { |
|
|
|
|
if (o.animation && lastVisible) { |
|
|
|
|
this.element.removeClass(o.animation + "-enter").removeClass(o.animation + "-enter-active").addClass(o.animation + "-leave"); |
|
|
|
|
this.element.removeClass(`${o.animation}-enter`).removeClass(`${o.animation}-enter-active`).addClass(`${o.animation}-leave`); |
|
|
|
|
if (this._requestAnimationFrame) { |
|
|
|
|
cancelAnimationFrame(this._requestAnimationFrame); |
|
|
|
|
} |
|
|
|
|
this._requestAnimationFrame = () => { |
|
|
|
|
this.element.addClass(o.animation + "-leave-active"); |
|
|
|
|
this.element.addClass(`${o.animation}-leave-active`); |
|
|
|
|
}; |
|
|
|
|
requestAnimationFrame(this._requestAnimationFrame); |
|
|
|
|
if (this._animationDuring) { |
|
|
|
|
clearTimeout(this._animationDuring); |
|
|
|
|
} |
|
|
|
|
this._animationDuring = setTimeout(() => { |
|
|
|
|
this.element.removeClass(o.animation + "-leave").removeClass(o.animation + "-leave-active"); |
|
|
|
|
this.element.removeClass(`${o.animation}-leave`).removeClass(`${o.animation}-leave-active`); |
|
|
|
|
this.__setElementVisible(false); |
|
|
|
|
}, o.animationDuring); |
|
|
|
|
} else { |
|
|
|
@ -582,8 +586,8 @@ export class Widget extends OB {
|
|
|
|
|
doBehavior() { |
|
|
|
|
const args = arguments; |
|
|
|
|
// 递归将所有子组件使有效
|
|
|
|
|
each(this._children, function (i, child) { |
|
|
|
|
child.doBehavior && child.doBehavior.apply(child, args); |
|
|
|
|
each(this._children, (i, child) => { |
|
|
|
|
child.doBehavior && child.doBehavior(...args); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -602,7 +606,7 @@ export class Widget extends OB {
|
|
|
|
|
name = widget.getName(); |
|
|
|
|
} |
|
|
|
|
if (isKey(name)) { |
|
|
|
|
name = name + ""; |
|
|
|
|
name = `${name}`; |
|
|
|
|
} |
|
|
|
|
name = name || widget.getName() || uniqueId("widget"); |
|
|
|
|
if (this._children[name]) { |
|
|
|
@ -613,6 +617,7 @@ export class Widget extends OB {
|
|
|
|
|
// TODO: self待删
|
|
|
|
|
remove(self._children, this); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return (this._children[name] = widget); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -620,20 +625,21 @@ export class Widget extends OB {
|
|
|
|
|
if (!isKey(name) || name === this.getName()) { |
|
|
|
|
return this; |
|
|
|
|
} |
|
|
|
|
name = name + ""; |
|
|
|
|
let widget = void 0, other = {}; |
|
|
|
|
any(this._children, function (i, wi) { |
|
|
|
|
name = `${name}`; |
|
|
|
|
let widget = void 0; |
|
|
|
|
const other = {}; |
|
|
|
|
any(this._children, (i, wi) => { |
|
|
|
|
if (i === name) { |
|
|
|
|
widget = wi; |
|
|
|
|
|
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
other[i] = wi; |
|
|
|
|
}); |
|
|
|
|
if (!widget) { |
|
|
|
|
any(other, function (i, wi) { |
|
|
|
|
return (widget = wi.getWidgetByName(i)); |
|
|
|
|
}); |
|
|
|
|
any(other, (i, wi) => (widget = wi.getWidgetByName(i))); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return widget; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -646,7 +652,7 @@ export class Widget extends OB {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hasWidget(name) { |
|
|
|
|
return this._children[name] != null; |
|
|
|
|
return isNotNull(this._children[name]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getName() { |
|
|
|
@ -664,11 +670,13 @@ export class Widget extends OB {
|
|
|
|
|
attr(key, value) { |
|
|
|
|
if (isPlainObject(key)) { |
|
|
|
|
each(key, (k, v) => this.attr(k, v)); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (isNotNull(value)) { |
|
|
|
|
return this.options[key] = value; |
|
|
|
|
this.options[key] = value; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return this.options[key]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -729,7 +737,7 @@ export class Widget extends OB {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
__d() { |
|
|
|
|
each(this._children, function (i, widget) { |
|
|
|
|
each(this._children, (i, widget) => { |
|
|
|
|
widget && widget._unMount && widget._unMount(); |
|
|
|
|
}); |
|
|
|
|
this._children = {}; |
|
|
|
@ -747,7 +755,6 @@ export class Widget extends OB {
|
|
|
|
|
this.destroyed = null; |
|
|
|
|
this._isDestroyed = true; |
|
|
|
|
// this._purgeRef(); // 清除ref的时机还是要仔细考虑一下
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_unMount() { |
|
|
|
@ -767,7 +774,7 @@ export class Widget extends OB {
|
|
|
|
|
|
|
|
|
|
_empty () { |
|
|
|
|
this._assetMounted(); |
|
|
|
|
each(this._children, function (i, widget) { |
|
|
|
|
each(this._children, (i, widget) => { |
|
|
|
|
widget && widget._unMount && widget._unMount(); |
|
|
|
|
}); |
|
|
|
|
this._children = {}; |
|
|
|
@ -801,9 +808,9 @@ export class Widget extends OB {
|
|
|
|
|
// this.purgeListeners();
|
|
|
|
|
|
|
|
|
|
// 去掉组件绑定的watcher
|
|
|
|
|
each(this._watchers, function (i, unwatches) { |
|
|
|
|
each(this._watchers, (i, unwatches) => { |
|
|
|
|
unwatches = isArray(unwatches) ? unwatches : [unwatches]; |
|
|
|
|
each(unwatches, function (j, unwatch) { |
|
|
|
|
each(unwatches, (j, unwatch) => { |
|
|
|
|
unwatch(); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
@ -839,7 +846,7 @@ export class Widget extends OB {
|
|
|
|
|
this._purgeRef(); |
|
|
|
|
this.purgeListeners(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let context = null, current = null; |
|
|
|
|
const contextStack = [], currentStack = []; |
|
|
|
@ -882,35 +889,42 @@ export function useStore(_store) {
|
|
|
|
|
} |
|
|
|
|
if (current) { |
|
|
|
|
const currentStore = current._store; |
|
|
|
|
let delegate = {}, origin; |
|
|
|
|
const delegate = {}; |
|
|
|
|
let origin; |
|
|
|
|
if (_global.Proxy) { |
|
|
|
|
const proxy = new Proxy(delegate, { |
|
|
|
|
get: function (target, key) { |
|
|
|
|
get (target, key) { |
|
|
|
|
return Reflect.get(origin, key); |
|
|
|
|
}, |
|
|
|
|
set: function (target, key, value) { |
|
|
|
|
set (target, key, value) { |
|
|
|
|
return Reflect.set(origin, key, value); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
current._store = function () { |
|
|
|
|
origin = (_store || currentStore).apply(this, arguments); |
|
|
|
|
delegate.$delegate = origin; |
|
|
|
|
|
|
|
|
|
return origin; |
|
|
|
|
}; |
|
|
|
|
return current.$storeDelegate = proxy; |
|
|
|
|
current.$storeDelegate = proxy; |
|
|
|
|
|
|
|
|
|
return current.$storeDelegate; |
|
|
|
|
} |
|
|
|
|
current._store = function () { |
|
|
|
|
const st = (_store || currentStore).apply(this, arguments); |
|
|
|
|
extend(delegate, st); |
|
|
|
|
|
|
|
|
|
return st; |
|
|
|
|
}; |
|
|
|
|
return current.$storeDelegate = delegate; |
|
|
|
|
current.$storeDelegate = delegate; |
|
|
|
|
|
|
|
|
|
return current.$storeDelegate; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export function useContext(inject) { |
|
|
|
|
// 通过组件找最近的store
|
|
|
|
|
const vm = Widget.findStore(Widget.current || Widget.context); |
|
|
|
|
let vm = Widget.findStore(Widget.current || Widget.context); |
|
|
|
|
if (vm) { |
|
|
|
|
if (inject) { |
|
|
|
|
if (vm.$$computed && inject in vm.$$computed) { |
|
|
|
@ -928,9 +942,11 @@ export function useContext(inject) {
|
|
|
|
|
} |
|
|
|
|
vm = vm._parent; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return vm; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -949,18 +965,19 @@ export function watch(vm, watch, handler) {
|
|
|
|
|
if (isArray(handler)) { |
|
|
|
|
for (let i = 0; i < handler.length; i++) { |
|
|
|
|
watchers.push(Fix.watch(vm.model, key, innerHandler, { |
|
|
|
|
store: vm |
|
|
|
|
store: vm, |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
watchers.push(Fix.watch(vm.model, key, innerHandler, { |
|
|
|
|
store: vm |
|
|
|
|
store: vm, |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// vm中一定有_widget
|
|
|
|
|
Widget.current._watchers || (Widget.current._watchers = []); |
|
|
|
|
Widget.current._watchers = Widget.current._watchers.concat(watchers); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
handler = watch; |
|
|
|
@ -974,6 +991,7 @@ export function onBeforeMount(beforeMount) {
|
|
|
|
|
if (current) { |
|
|
|
|
if (current.__isMounting) { |
|
|
|
|
beforeMount(); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (!current.beforeMount) { |
|
|
|
@ -989,6 +1007,7 @@ export function onMounted(mounted) {
|
|
|
|
|
if (current) { |
|
|
|
|
if (current._isMounted && !this.__async) { |
|
|
|
|
mounted(); |
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (!current.mounted) { |
|
|
|
@ -998,7 +1017,7 @@ export function onMounted(mounted) {
|
|
|
|
|
} |
|
|
|
|
current.mounted.push(mounted); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export function onBeforeUnmount(beforeDestroy) { |
|
|
|
|
if (current) { |
|
|
|
@ -1026,7 +1045,7 @@ Widget.registerRenderEngine = function (engine) {
|
|
|
|
|
Widget._renderEngine = engine; |
|
|
|
|
}; |
|
|
|
|
Widget.registerRenderEngine({ |
|
|
|
|
createElement: function (widget) { |
|
|
|
|
createElement (widget) { |
|
|
|
|
if (isWidget(widget)) { |
|
|
|
|
const o = widget.options; |
|
|
|
|
if (o.element) { |
|
|
|
@ -1035,13 +1054,15 @@ Widget.registerRenderEngine({
|
|
|
|
|
if (o.tagName) { |
|
|
|
|
return BI.$(document.createElement(o.tagName)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.$(document.createDocumentFragment()); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.$(widget); |
|
|
|
|
}, |
|
|
|
|
createFragment: function () { |
|
|
|
|
createFragment () { |
|
|
|
|
return document.createDocumentFragment(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
export function mount(widget, container, predicate, hydrate) { |
|
|
|
@ -1049,8 +1070,8 @@ export function mount(widget, container, predicate, hydrate) {
|
|
|
|
|
// 将widget的element元素都挂载好,并建立相互关系
|
|
|
|
|
widget.element.data("__widgets", [widget]); |
|
|
|
|
const res = widget._mount(true, false, false, function (w) { |
|
|
|
|
each(w._children, function (i, child) { |
|
|
|
|
const ws = child.element.data("__widgets"); |
|
|
|
|
each(w._children, (i, child) => { |
|
|
|
|
let ws = child.element.data("__widgets"); |
|
|
|
|
if (!ws) { |
|
|
|
|
ws = []; |
|
|
|
|
} |
|
|
|
@ -1063,19 +1084,21 @@ export function mount(widget, container, predicate, hydrate) {
|
|
|
|
|
const c = Widget._renderEngine.createElement; |
|
|
|
|
BI.DOM.patchProps(widget.element, c(c(container).children()[0])); |
|
|
|
|
|
|
|
|
|
const triggerLifeHook = function (w) { |
|
|
|
|
const triggerLifeHook = w => { |
|
|
|
|
w.beforeMount && w.beforeMount(); |
|
|
|
|
w.mounted && w.mounted(); |
|
|
|
|
each(w._children, function (i, child) { |
|
|
|
|
each(w._children, (i, child) => { |
|
|
|
|
triggerLifeHook(child); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
// 最后触发组件树生命周期函数
|
|
|
|
|
triggerLifeHook(widget); |
|
|
|
|
|
|
|
|
|
return res; |
|
|
|
|
} |
|
|
|
|
if (container) { |
|
|
|
|
Widget._renderEngine.createElement(container).append(widget.element); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return widget._mount(true, false, false, predicate); |
|
|
|
|
} |
|
|
|
|