From 3a97b0f93d565b90dbaa0932172a485b2fa5fc89 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 23 Mar 2022 20:20:02 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-10735=20feat:=20=E6=8A=98=E5=8F=A0?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/config/widget.js | 8 ++ demo/js/widget/collapase/API.md | 12 +++ demo/js/widget/collapase/demo.collapse.js | 59 ++++++++++++ src/widget/collapse/collapse.js | 108 ++++++++++++++++++++++ 4 files changed, 187 insertions(+) create mode 100644 demo/js/widget/collapase/API.md create mode 100644 demo/js/widget/collapase/demo.collapse.js create mode 100644 src/widget/collapse/collapse.js diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 37b467282..d2e1b1d5b 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -194,4 +194,12 @@ Demo.WIDGET_CONFIG = [{ id: 420, text: "滚动sliders", value: "demo.slider" +}, { + pId: 4, + id: 414, + text: "折叠面板" +}, { + pId: 414, + text: "bi.collapse", + value: "demo.collapse" }]; \ No newline at end of file diff --git a/demo/js/widget/collapase/API.md b/demo/js/widget/collapase/API.md new file mode 100644 index 000000000..2ba16aa32 --- /dev/null +++ b/demo/js/widget/collapase/API.md @@ -0,0 +1,12 @@ +## API + +### bi.collapse + +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ---------- | ------- | -------------------- | +| accordion | 手风琴模式 | boolean | false | +| bordered | 带边框风格的折叠面板 | boolean | true | +| ghost | 使折叠面板透明且无边框 | boolean | false | +| openMotion | 展开动画 | object | { animation: "bi-slide-up", animationDuring: 100} +| value | 初始化选中面板的 key | string\[]
number\[] | - | +| listeners | 监听切换面板事件 | [{eventName: "EVENT_EXPAND", action:(activeKey) => void}] | - | diff --git a/demo/js/widget/collapase/demo.collapse.js b/demo/js/widget/collapase/demo.collapse.js new file mode 100644 index 000000000..b75e29c57 --- /dev/null +++ b/demo/js/widget/collapase/demo.collapse.js @@ -0,0 +1,59 @@ +Demo.Collapse = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-collapse" + }, + + render: function () { + var self = this; + + var items = [{ + value: "test", + popup: { + cls: "mvc-border", + items: BI.createItems([{ + text: "项目1", + value: 1 + }, { + text: "项目2", + value: 2 + }, { + text: "项目3", + value: 3 + }, { + text: "项目4", + value: 4 + }], { + type: "bi.single_select_item", + height: 25 + }) + } + }, { + value: 2, + popup: { + type: "bi.label", + value: "给岁月以文明，而不是给文明以岁月" + } + }, { + value: 3, + popup: { + type: "bi.label", + value: "漂流瓶隐没于黑暗里，在一千米见方的宇宙中，只有生态球里的小太阳发出一点光芒。在这个小小的生命世界中，几只清澈的水球在零重力环境中静静地飘浮着，有一条小鱼从一只水球中蹦出，跃入另一只水球，轻盈地穿游于绿藻之间。" + } + }]; + + return { + type: "bi.vertical", + items: [{ + type: "bi.collapse", + accordion: true, + items: items, + value: [2], + }], + width: '60%', + tgap: 100, + hgap: 100 + }; + } +}); + +BI.shortcut("demo.collapse", Demo.Collapse); diff --git a/src/widget/collapse/collapse.js b/src/widget/collapse/collapse.js new file mode 100644 index 000000000..f899c3588 --- /dev/null +++ b/src/widget/collapse/collapse.js @@ -0,0 +1,108 @@ +BI.Collapse = BI.inherit(BI.Widget, { + + props: { + baseCls: "bi-collapse", + items: [], + value: [], + trigger: "click", + accordion: false, + bordered: true, + ghost: false, + isDefaultInit: false, + openMotion: { + animation: "bi-slide-up", + animationDuring: 200 + } + }, + + render: function () { + var o = this.options; + + var collapseCls = o.ghost ? "" : "bi-background " + (o.bordered ? "bi-border bi-border-radius" : ""); + + this.expanders = {}; + + return { + type: "bi.vertical", + cls: collapseCls, + items: this._getItems(this.options.items) + + }; + }, + + _getItems: function (items) { + var self = this, o = this.options; + + return BI.map(items, function (index, item) { + var isActive = BI.contains(self._getCurrentValue(o.value), item.value); + var cls = o.ghost || index === 0 ? "" : "bi-border-top"; + + var el = BI.extend({ + type: "bi.arrow_group_node", + height: 30, + text: item.text, + value: item.value, + open: isActive + }, item.el); + + var popup = BI.extend({ + animation: o.openMotion.animation, + animationDuring: o.openMotion.animationDuring + }, item.popup); + + return BI.extend({ + type: "bi.expander", + cls: cls, + isDefaultInit: o.isDefaultInit, + trigger: o.trigger, + listeners: [{ + eventName: BI.Expander.EVENT_EXPAND, + action: function () { + self._hideOtherExpander(item.value); + self.fireEvent(BI.Collapse.EVENT_EXPAND, item.value); + } + }] + }, item, { + el: el, + popup: popup, + ref: function (_ref) { + BI.isFunction(item.ref) && item.ref(_ref); + self.expanders[item.value] = _ref; + } + }); + }); + }, + + _hideOtherExpander: function (expandKey) { + if (this.options.accordion) { + BI.each(this.expanders, function (key, expander) { + key !== (expandKey + "") && expander.hideView(); + }); + } + }, + + _getCurrentValue: function (v) { + var values = BI.isNotEmptyArray(v) ? v : BI.isKey(v) ? [v] : []; + + return this.options.accordion ? values.slice(0, 1) : values; + }, + + getValue: function () { + var value = []; + BI.each(this.expanders, function (key, expander) { + expander.isExpanded() && value.push(key); + }); + + return value; + }, + + setValue: function (v) { + var values = BI.map(this._getCurrentValue(v), function (idx, value) {return value + "";}); + BI.each(this.expanders, function (key, expander) { + BI.contains(values, key) ? expander.showView() : expander.hideView(); + }); + } +}); + +BI.Collapse.EVENT_EXPAND = "EVENT_EXPAND"; +BI.shortcut("bi.collapse", BI.Collapse);