Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加updateModel属性，可以配置自动模式，自动watch属性并响应变化

es6
guy 4 years ago
parent
86e3c2e8f4
commit
5fb75ef130
8 changed files with 229 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      changelog.md
  2. 103
      dev.html
  3. 73
      dist/fix/fix.compact.js
  4. 6
      src/base/single/button/buttons/button.js
  5. 11
      src/base/single/single.js
  6. 7
      src/core/ob.js
  7. 21
      src/core/widget.js
  8. 14
      src/core/wrapper/layout.js

3
changelog.md
Unescape View File

@ -1,4 +1,7 @@
# 更新日志 # 更新日志
2.0(2021-02)
- 增加updateModel属性，可以配置自动模式，自动watch属性并响应变化
2.0(2021-01) 2.0(2021-01)
- 修改了日期下拉面板中的当前时间按钮的交互效果 - 修改了日期下拉面板中的当前时间按钮的交互效果
- 新增年区间和年季度区间控件 - 新增年区间和年季度区间控件

103
dev.html
Unescape View File

@ -0,0 +1,103 @@
<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="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
var Model = BI.inherit(Fix.Model, {
state: function () {
return {
expand: false
};
},
childContext: ["text"],
computed: {
text: function () {
return this.model.expand ? "text-yes" : "text-not";
}
},
actions: {
toggle: function () {
this.model.expand = !this.model.expand;
}
}
});
BI.model("demo.model", Model);
var ChildModel = BI.inherit(Fix.Model, {
context: ["text"]
});
BI.model("demo.child_model", ChildModel);
var Child = BI.inherit(BI.Widget, {
props: {
updateMode: "auto"
},
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.child_model");
});
return {
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.button",
text: store.model.text
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, {
props: {
updateMode: "auto"
},
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
return function () {
return {
type: "bi.vertical",
vgap: 20,
items: [{
type: "demo.child"
}, {
type: "demo.child"
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

73
dist/fix/fix.compact.js vendored
Unescape View File

@ -183,6 +183,79 @@
needPop && popTarget(); needPop && popTarget();
}; };
BI.Widget.prototype._initElement = function () {
var self = this;
var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
var els;
if (this.options.updateMode === "auto") {
// 自动更新模式
var childComponents = {};
var rendered = false;
initWatch(this, {});
this._watchers.push(Fix.watch(this.model, function () {
if (rendered) {
var newEls = render && render.call(this);
BI.each(childComponents, function (i, childComponent) {
var nextProps = BI.get([newEls], childComponent.path);
if (nextProps) {
var shouldUpdate;
if (shouldUpdate = (childComponent.component.shouldUpdate && childComponent.component.shouldUpdate(nextProps))) {
childComponent.component._update(shouldUpdate === true ? nextProps : shouldUpdate);
} else {
childComponent.component._update(nextProps);
}
childComponent.props = BI.extend(childComponent.props, nextProps);
}
});
} else {
els = render && render.call(this);
function traverse (parent, path) {
BI.each(parent, function (i, child) {
const childPath = path.concat(i);
if (BI.isArray(child)) {
traverse(child, childPath);
} else if (BI.isPlainObject(child)) {
if (child.type) {
child.__ref = function (_ref) {
if (_ref) {
var comp = childComponents[this.getName()] = {};
comp.component = _ref;
comp.props = child;
comp.path = childPath;
} else {
delete childComponents[this.getName()];
}
};
}
traverse(child, childPath);
}
});
}
traverse([els], []);
rendered = true;
}
}));
} else {
els = render && render.call(this);
}
if (BI.isPlainObject(els)) {
els = [els];
}
if (BI.isArray(els)) {
BI.each(els, function (i, el) {
if (el) {
BI._lazyCreateWidget(el, {
element: self
});
}
});
}
// if (this._isRoot === true || !(this instanceof BI.Layout)) {
this._mount();
};
var unMount = BI.Widget.prototype.__d; var unMount = BI.Widget.prototype.__d;
BI.Widget.prototype.__d = function () { BI.Widget.prototype.__d = function () {
try { try {

6
src/base/single/button/buttons/button.js
Unescape View File

@ -1,4 +1,3 @@
/** /**
* 文字类型的按钮 * 文字类型的按钮
* @class BI.Button * @class BI.Button
@ -44,7 +43,10 @@ BI.Button = BI.inherit(BI.BasicButton, {
BI.Button.superclass._init.apply(this, arguments); BI.Button.superclass._init.apply(this, arguments);
var o = this.options, self = this; var o = this.options, self = this;
if (BI.isNumber(o.height) && !o.clear && !o.block) { if (BI.isNumber(o.height) && !o.clear && !o.block) {
this.element.css({height: o.height / BI.pixRatio + BI.pixUnit, lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit}); this.element.css({
height: o.height / BI.pixRatio + BI.pixUnit,
lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit
});
} else if (o.clear || o.block) { } else if (o.clear || o.block) {
this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit}); this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit});
} else { } else {

11
src/base/single/single.js
Unescape View File

@ -199,11 +199,20 @@ BI.Single = BI.inherit(BI.Widget, {
return this.options.value; return this.options.value;
}, },
update: function (props) {
if ("value" in props) {
this.setValue(props.value);
}
if ("text" in props) {
this.setText(props.text);
}
},
destroyed: function () { destroyed: function () {
if (BI.isNotNull(this.showTimeout)) { if (BI.isNotNull(this.showTimeout)) {
clearTimeout(this.showTimeout); clearTimeout(this.showTimeout);
this.showTimeout = null; this.showTimeout = null;
} }
BI.Tooltips.remove(this.getName()); BI.Tooltips.remove(this.getName());
}, }
}); });

7
src/core/ob.js
Unescape View File

@ -72,6 +72,9 @@
// 获得一个当前对象的引用 // 获得一个当前对象的引用
_initRef: function () { _initRef: function () {
if (this.options.__ref) {
this.options.__ref.call(this, this);
}
if (this.options.ref) { if (this.options.ref) {
this.options.ref.call(this, this); this.options.ref.call(this, this);
} }
@ -79,6 +82,10 @@
//释放当前对象 //释放当前对象
_purgeRef: function () { _purgeRef: function () {
if (this.options.__ref) {
this.options.__ref.call(null);
this.options.__ref = null;
}
if (this.options.ref) { if (this.options.ref) {
this.options.ref.call(null); this.options.ref.call(null);
this.options.ref = null; this.options.ref = null;

21
src/core/widget.js
Unescape View File

@ -32,7 +32,8 @@
baseCls: "", baseCls: "",
extraCls: "", extraCls: "",
cls: "", cls: "",
css: null css: null,
updateMode: "manual" // manual / auto
}); });
}, },
@ -76,6 +77,10 @@
update: function () { update: function () {
}, },
beforeUpdate: null,
updated: null,
beforeDestroy: null, beforeDestroy: null,
destroyed: null, destroyed: null,
@ -243,6 +248,20 @@
_mountChildren: null, _mountChildren: null,
_update: function (nextProps) {
var o = this.options;
callLifeHook(this, "beforeUpdate");
var nextChange = {};
BI.each(nextProps, function (key, value) {
if (o[key] !== value) {
nextChange[key] = value;
}
});
var res = BI.isNotEmptyObject(nextChange) && this.update(nextChange);
callLifeHook(this, "updated");
return res;
},
isMounted: function () { isMounted: function () {
return this._isMounted; return this._isMounted;
}, },

14
src/core/wrapper/layout.js
Unescape View File

@ -268,19 +268,13 @@ BI.Layout = BI.inherit(BI.Widget, {
if (!child.shouldUpdate) { if (!child.shouldUpdate) {
return null; return null;
} }
return child.shouldUpdate(this._getOptions(item)) === true; return child.shouldUpdate(this._getOptions(item)) !== false;
}, },
updateItemAt: function (index, item) { updateItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length - 1) { if (index < 0 || index > this.options.items.length - 1) {
return; return;
} }
var child = this._children[this._getChildName(index)];
var updated;
if (updated = child.update(this._getOptions(item))) {
return updated;
}
var del = this._children[this._getChildName(index)]; var del = this._children[this._getChildName(index)];
delete this._children[this._getChildName(index)]; delete this._children[this._getChildName(index)];
this.options.items.splice(index, 1); this.options.items.splice(index, 1);
@ -367,7 +361,11 @@ BI.Layout = BI.inherit(BI.Widget, {
patchItem: function (oldVnode, vnode, index) { patchItem: function (oldVnode, vnode, index) {
var shouldUpdate = this.shouldUpdateItem(index, vnode); var shouldUpdate = this.shouldUpdateItem(index, vnode);
if (shouldUpdate === true || (shouldUpdate === null && !this._compare(oldVnode, vnode))) { if (shouldUpdate) {
var child = this._children[this._getChildName(index)];
return child._update(shouldUpdate === true ? this._getOptions(vnode) : shouldUpdate);
}
if (shouldUpdate === null && !this._compare(oldVnode, vnode)) {
return this.updateItemAt(index, vnode); return this.updateItemAt(index, vnode);
} }
}, },

Write Preview
Loading…
Cancel
Save