From ff378ed006bb513e8a10bef152c6edb107508874 Mon Sep 17 00:00:00 2001 From: treecat Date: Tue, 16 Aug 2022 15:46:24 +0800 Subject: [PATCH 1/3] =?UTF-8?q?KERNEL-9408=20feat:=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 144 ++++++++++++++--------- src/base/single/button/buttons/button.js | 60 +++++++--- 2 files changed, 131 insertions(+), 73 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 1f2eeec0a..420a47d77 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -1,6 +1,29 @@ +(function () { + var JokerIcon = BI.inherit(BI.Widget, { + render: function () { + var self = this; + + return { + type: "bi.label", + cls: "anim-rotate", + ref: function(ref) { + self.text = ref; + }, + }; + }, + loading: function () { + this.text.setText("🤡"); + }, + loaded: function () { + this.text.setText(""); + }, + }); + BI.shortcut("demo.joker.icon", JokerIcon); +}()); + Demo.Button = BI.inherit(BI.Widget, { props: { - baseCls: "demo-button" + baseCls: "demo-button", }, render: function () { var items = [{ @@ -16,187 +39,187 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "表示成功状态按钮", level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示错误状态的按钮", level: "error", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.button", text: "一般按钮", block: true, level: "common", - height: 30 + height: 30, }, { type: "bi.button", text: "表示成功状态按钮", block: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", block: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", block: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", block: true, disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", block: true, disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", block: true, // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.button", text: "一般按钮", clear: true, level: "common", - height: 30 + height: 30, }, { type: "bi.button", text: "表示成功状态按钮", clear: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "表示警告状态的按钮", clear: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", text: "表示忽略状态的按钮", clear: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "普通灰化按钮", clear: true, disabled: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "忽略状态灰化按钮", clear: true, disabled: true, level: "ignore", - height: 30 + height: 30, }, { type: "bi.button", text: "带图标的按钮", clear: true, // level: 'ignore', iconCls: "close-font", - height: 30 + height: 30, }, { type: "bi.text_button", text: "文字按钮", - height: 30 + height: 30, }, { type: "bi.button", text: "幽灵按钮（common）", ghost: true, - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "warning", - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "error", - height: 30 + height: 30, }, { type: "bi.button", iconCls: "plus-font", text: "幽灵按钮（common）", ghost: true, level: "success", - height: 30 + height: 30, }, { type: "bi.button", text: "幽灵按钮（common）灰化", disabled: true, ghost: true, - height: 30 + height: 30, }, { type: "bi.button", text: "弹出bubble", bubble: function () { - return BI.parseInt(Math.random() * 100) % 10 + "提示" + return BI.parseInt(Math.random() * 100) % 10 + "提示"; }, handler: function () { BI.Msg.toast("1111"); }, - height: 30 + height: 30, }, { type: "bi.button", text: "自动撑开", @@ -206,76 +229,76 @@ Demo.Button = BI.inherit(BI.Widget, { iconGap: 64, vgap: 16, hgap: 100, - iconPosition: "bottom" + iconPosition: "bottom", }, { type: "bi.button", text: "图标在下面的按钮", iconCls: "close-font", - iconPosition: "bottom" + iconPosition: "bottom", }, { type: "bi.button", text: "图标在左边的按钮", iconCls: "close-font", - iconPosition: "left" + iconPosition: "left", }, { type: "bi.button", text: "图标在右边的按钮", iconCls: "close-font", - iconPosition: "right" + iconPosition: "right", }, { type: "bi.button", text: "浅色的一般按钮", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", text: "浅色的成功按钮", level: "success", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", text: "浅色的警告按钮", level: "warning", iconCls: "plus-font", - light: true + light: true, }, { type: "bi.button", iconCls: "plus-font", text: "浅色的失败按钮", level: "error", cls: "hover-mask", - light: true + light: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "common", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "success", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "error", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "warning", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", text: "朴素的按钮", level: "ignore", - plain: true + plain: true, }, { type: "bi.button", iconCls: "plus-font", @@ -286,7 +309,7 @@ Demo.Button = BI.inherit(BI.Widget, { iconCls: "plus-font", text: "朴素的按钮", plain: true, - disabled: true + disabled: true, }, { type: "bi.button", iconCls: "plus-font", @@ -299,7 +322,7 @@ Demo.Button = BI.inherit(BI.Widget, { } this.setIcon(arr[this.i]); }, - height: 24 + height: 24, }, { type: "bi.button", text: "带加载的按钮", @@ -309,7 +332,7 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "带加载的按钮", @@ -320,7 +343,7 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", clear: true, @@ -332,14 +355,27 @@ Demo.Button = BI.inherit(BI.Widget, { setTimeout(() => { this.loaded(); }, 5 * 1000); - } + }, }, { type: "bi.button", text: "加载中的按钮", loading: true, handler() { console.log("我是无法被触发的!"); - } + }, + }, { + type: "bi.button", + text: "自定义图标按钮（点我修改）", + icon: { + type: "demo.joker.icon", + }, + handler() { + console.log("触发点击事件"); + this.loading(); + setTimeout(() => { + this.loaded(); + }, 5 * 1000); + }, }]; return { @@ -349,10 +385,10 @@ Demo.Button = BI.inherit(BI.Widget, { hgap: 20, items: BI.map(items, function (index, value) { return { - el: value + el: value, }; - }) + }), }; - } + }, }); BI.shortcut("demo.button", Demo.Button); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 63b667aaa..d15051be5 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -62,6 +62,7 @@ bgap: 0, lgap: 0, rgap: 0, + icon: "", iconGap: 0, iconPosition: "left", }); @@ -90,17 +91,30 @@ } var iconInvisible = !o.loading && !o.iconCls; - this.icon = BI.createWidget({ - type: "bi.icon_label", - cls: o.loading ? loadingCls : o.iconCls, - width: this._const.iconWidth, - height: lineHeight, - lineHeight: lineHeight, - // 不设置，自定义按钮无法居中 - iconWidth: o.iconWidth, - iconHeight: o.iconHeight, - invisible: iconInvisible, - }); + if (BI.isObject(o.icon) && BI.isString(o.icon.type)) { + // FineUI 自定义 icon + this.icon = BI.createWidget(o.icon); + o.loading ? (this.icon.loading && this.icon.loading()) + : (this.icon.loaded && this.icon.loaded()); + } else { + // ReactUI 自定义的 icon + if (!o.loading && BI.isObject(o.icon)) { + this.icon = o.icon; + } else { + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.loading ? loadingCls : (o.iconCls || o.icon), + width: this._const.iconWidth, + height: lineHeight, + lineHeight: lineHeight, + // 不设置，自定义按钮无法居中 + iconWidth: o.iconWidth, + iconHeight: o.iconHeight, + invisible: iconInvisible, + }); + } + } + // 用于 whiteSpace var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null; if (BI.isNotNull(o.textWidth)) { @@ -179,23 +193,31 @@ return this.isLoading(); }, - isLoading() { + isLoading: function () { return this._loading === undefined ? this.options.loading : this._loading; }, - loading: function (loading) { + loading: function () { this._loading = true; this.element.addClass("loading"); - // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls - this.icon.element.addClass(loadingCls); - this.icon.setVisible(true); + if (this.icon.loading) { + this.icon.loading(); + } else { + // loadingCls 可以覆盖 iconCls 所以不需要移除 iconCls + this.icon.element.addClass(loadingCls); + this.icon.setVisible(true); + } }, - loaded() { + loaded: function () { this._loading = false; this.element.removeClass("loading"); - this.icon.element.removeClass(loadingCls); - this.icon.setVisible(!!this.options.iconCls); + if (this.icon.loaded) { + this.icon.loaded(); + } else { + this.icon.element.removeClass(loadingCls); + this.icon.setVisible(!!this.options.iconCls); + } }, setText: function (text) { From 6895777066f3f522075255eac5c8ca0ef539dac1 Mon Sep 17 00:00:00 2001 From: treecat Date: Tue, 16 Aug 2022 16:35:29 +0800 Subject: [PATCH 2/3] =?UTF-8?q?KERNEL-9408=20fix:=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=85=B6=E5=AE=83=E6=A1=86=E6=9E=B6=E5=AE=9E=E7=8E=B0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E7=9A=84=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 6 ++++++ src/base/single/button/buttons/button.js | 11 ++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 420a47d77..39b27b716 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -376,6 +376,12 @@ Demo.Button = BI.inherit(BI.Widget, { this.loaded(); }, 5 * 1000); }, + }, { + type: "bi.button", + text: "图标的实现交给其他框架", + icon(element) { + element.append("🧙"); + }, }]; return { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index d15051be5..f9aa8586e 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -91,15 +91,16 @@ } var iconInvisible = !o.loading && !o.iconCls; - if (BI.isObject(o.icon) && BI.isString(o.icon.type)) { - // FineUI 自定义 icon + if (BI.isPlainObject(o.icon)) { this.icon = BI.createWidget(o.icon); o.loading ? (this.icon.loading && this.icon.loading()) : (this.icon.loaded && this.icon.loaded()); } else { - // ReactUI 自定义的 icon - if (!o.loading && BI.isObject(o.icon)) { - this.icon = o.icon; + if (!o.loading && BI.isFunction(o.icon)) { + this.icon = BI.createWidget({ + type: "bi.layout", + }); + o.icon(this.icon.element); } else { this.icon = BI.createWidget({ type: "bi.icon_label", From e487760d6c8eb131aea96518869568f3c09c6914 Mon Sep 17 00:00:00 2001 From: treecat Date: Wed, 17 Aug 2022 11:01:00 +0800 Subject: [PATCH 3/3] =?UTF-8?q?KERNEL-9408=20fix:=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87=E7=9A=84=E6=9C=80?= =?UTF-8?q?=E7=BB=88=E5=AE=9E=E7=8E=B0=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 6 ---- src/base/single/button/buttons/button.js | 39 +++++++++--------------- 2 files changed, 15 insertions(+), 30 deletions(-) diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 39b27b716..420a47d77 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -376,12 +376,6 @@ Demo.Button = BI.inherit(BI.Widget, { this.loaded(); }, 5 * 1000); }, - }, { - type: "bi.button", - text: "图标的实现交给其他框架", - icon(element) { - element.append("🧙"); - }, }]; return { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index f9aa8586e..7a8ba672d 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -91,29 +91,20 @@ } var iconInvisible = !o.loading && !o.iconCls; - if (BI.isPlainObject(o.icon)) { + if (BI.isPlainObject(o.icon) && !o.loading) { this.icon = BI.createWidget(o.icon); - o.loading ? (this.icon.loading && this.icon.loading()) - : (this.icon.loaded && this.icon.loaded()); } else { - if (!o.loading && BI.isFunction(o.icon)) { - this.icon = BI.createWidget({ - type: "bi.layout", - }); - o.icon(this.icon.element); - } else { - this.icon = BI.createWidget({ - type: "bi.icon_label", - cls: o.loading ? loadingCls : (o.iconCls || o.icon), - width: this._const.iconWidth, - height: lineHeight, - lineHeight: lineHeight, - // 不设置，自定义按钮无法居中 - iconWidth: o.iconWidth, - iconHeight: o.iconHeight, - invisible: iconInvisible, - }); - } + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.loading ? loadingCls : (o.iconCls || o.icon), + width: this._const.iconWidth, + height: lineHeight, + lineHeight: lineHeight, + // 不设置，自定义按钮无法居中 + iconWidth: o.iconWidth, + iconHeight: o.iconHeight, + invisible: iconInvisible, + }); } // 用于 whiteSpace @@ -140,12 +131,12 @@ tgap: o.iconPosition === "top" ? o.iconGap : 0, bgap: o.iconPosition === "bottom" ? o.iconGap : 0, }; - var items = [this.icon, BI.extend({ el: this.text }, gapContainer)]; + var items = [this.icon, BI.extend({el: this.text}, gapContainer)]; if (isVertical(o.iconPosition)) { layoutType = "bi.vertical"; } if (o.iconPosition === "right" || o.iconPosition === "bottom") { - items = [BI.extend({ el: this.text }, gapContainer), this.icon]; + items = [BI.extend({el: this.text}, gapContainer), this.icon]; } // bi.center_adapt 作用：让 hgap 不影响 iconGap。 BI.createWidget({ @@ -170,7 +161,7 @@ }); if (o.minWidth > 0) { - this.element.css({ "min-width": o.minWidth / BI.pixRatio + BI.pixUnit }); + this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); } },