Merge pull request #30937 in DEC/fineui from master to feature/x

* commit '914de1da0b303f5467e6588d4429c1a2509f29ea': DESIGN-4103 feat: 下拉框组件支持clear,下拉树支持缺失标红 update changelog 无JIRA feat:单选下拉框支持清除 Revert "无JIRA bi.search_editor 在有初始值的时候显示clear按钮" 无JIRA bi.search_editor 在有初始值的时候显示clear按钮
2 years ago · cf6f5d8014
13 changed files with 246 additions and 52 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,4 +1,19 @@
 # 更新日志
+
+3.0(2022-05)
+- 下拉选择框支持清空
+
+3.0(2022-03)
+- 支持响应式
+- 全面支持Typescript
+- 增加JSX支持
+- 布局组件支持更多动态特性
+- 底层API支持动画
+- 增加WebWorker支持
+- 支持路由
+- 插件支持版本控制
+- Fix数据流支持proxy版本
+
 2.0(2022-01)
 - 提供自定义表单

--- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
+++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
@ -11,6 +11,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
        items: [],
        tipType: "",
        warningTitle: "",
+        allowClear: false,
    },

    render: function () {
@ -48,6 +49,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                        tipType: o.tipType,
                        warningTitle: o.warningTitle,
                        title: o.title,
+                        allowClear: o.allowClear,
                        listeners: [{
                            eventName: BI.SearchTextValueTrigger.EVENT_CHANGE,
                            action: function () {
@ -55,6 +57,13 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                                self.combo.hideView();
                                self.fireEvent(BI.SearchTextValueCombo.EVENT_CHANGE);
                            }
+                        }, {
+                            eventName: BI.SearchTextValueTrigger.EVENT_CLEAR,
+                            action: function () {
+                                self.setValue();
+                                self.combo.hideView();
+                                self.fireEvent(BI.SearchTextValueCombo.EVENT_CHANGE);
+                            }
                        }]
                    },
                    popup: {
--- a/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js
+++ b/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js
@ -111,4 +111,5 @@ BI.SearchTextValueTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
 BI.SearchTextValueTrigger.EVENT_STOP = "EVENT_STOP";
 BI.SearchTextValueTrigger.EVENT_START = "EVENT_START";
 BI.SearchTextValueTrigger.EVENT_CHANGE = "EVENT_CHANGE";
+BI.SearchTextValueTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.search_text_value_trigger", BI.SearchTextValueTrigger);
--- a/src/case/combo/textvaluecombo/combo.textvalue.js
+++ b/src/case/combo/textvaluecombo/combo.textvalue.js
@ -12,6 +12,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
            chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
            text: "",
            value: "",
+            allowClear: false,
        });
    },

@ -33,7 +34,16 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
            height: o.height,
            text: o.text,
            value: o.value,
-            warningTitle: o.warningTitle
+            warningTitle: o.warningTitle,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self._clear();
+                    }
+                }
+            ],
        });
        this.popup = BI.createWidget({
            type: "bi.text_value_combo_popup",
@ -62,15 +72,20 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
                minHeight: 25
            }
        });
-        if(BI.isKey(o.value)) {
+        if (BI.isKey(o.value)) {
            this._checkError(o.value);
        }
    },

+    _clear: function () {
+        this.setValue();
+    },
+
    _checkError: function (v) {
-        if(BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
            this.trigger.options.tipType = "success";
-            this.element.removeClass("combo-error");
+            this.element.removeClass("error");
+            this.trigger.element.removeClass("error");
        } else {
            v = BI.isArray(v) ? v : [v];
            var result = BI.find(this.options.items, function (idx, item) {
@ -78,10 +93,12 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
            });
            if (BI.isNull(result)) {
                this.trigger.setTipType("warning");
-                this.element.removeClass("combo-error").addClass("combo-error");
+                this.element.addClass("error");
+                this.trigger.element.addClass("error");
            } else {
                this.trigger.setTipType("success");
-                this.element.removeClass("combo-error");
+                this.element.removeClass("error");
+                this.trigger.element.removeClass("error");
            }
        }
    },
--- a/src/case/trigger/trigger.text.js
+++ b/src/case/trigger/trigger.text.js
@ -7,25 +7,27 @@
 */
 BI.TextTrigger = BI.inherit(BI.Trigger, {

-    _defaultConfig: function () {
+    props: function () {
        var self = this;
-        var conf = BI.TextTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-text-trigger",
+        return {
+            baseCls: "bi-text-trigger",
            height: 24,
            textHgap: 6,
            textCls: "",
+            allowClear: false,
            title: function () {
                return self.text.getText();
            }
-        });
+        };
    },

-    _init: function () {
-        BI.TextTrigger.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options, c = this._const;
-        this.text = BI.createWidget({
+        var text = {
            type: "bi.label",
+            ref: function (_ref) {
+                self.text = _ref;
+            },
            cls: "select-text-label" + (BI.isKey(o.textCls) ? (" " + o.textCls) : ""),
            textAlign: "left",
            height: o.height,
@ -39,32 +41,56 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
            tgap: o.textTgap,
            bgap: o.textBgap,
            readonly: o.readonly
-        });
-        this.trigerButton = BI.createWidget({
+        };
+
+        var triggerButton = {
            type: "bi.trigger_icon_button",
+            ref: function (_ref) {
+                self.triggerButton = _ref;
+            },
            width: o.triggerWidth || o.height
-        });
+        };

-        BI.createWidget({
-            element: this,
+        return ({
            type: "bi.horizontal_fill",
+            columnSize: ["fill", o.triggerWidth || o.height],
            items: [
                {
-                    el: this.text,
+                    el: text,
                    width: "fill"
                }, {
-                    el: this.trigerButton,
-                    width: o.triggerWidth || o.height
+                    el: o.allowClear ? {
+                        type: "bi.vertical_adapt",
+                        horizontalAlign: "left",
+                        scrollable: false,
+                        items: [
+                            {
+                                el: {
+                                    type: "bi.icon_button",
+                                    ref: function (_ref) {
+                                        self.clearBtn = _ref;
+                                    },
+                                    cls: "close-h-font " + (o.allowClear ? "clear-button" : ""),
+                                    stopPropagation: true,
+                                    handler: function () {
+                                        self.fireEvent(BI.TextTrigger.EVENT_CLEAR);
+                                    },
+                                },
+                            }, {
+                                el: triggerButton,
+                            }
+                        ]
+                    } : triggerButton,
                }
            ]
        });
    },

-    getTextor: function() {
+    getTextor: function () {
        return this.text;
    },

-    setTextCls: function(cls) {
+    setTextCls: function (cls) {
        var o = this.options;
        var oldCls = o.textCls;
        o.textCls = cls;
@ -73,6 +99,9 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {

    setText: function (text) {
        this.text.setText(text);
+        if (this.options.allowClear) {
+            this.clearBtn.setVisible(BI.isNotEmptyString(text));
+        }
    },

    setTipType: function (v) {
@ -80,4 +109,6 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
        this.options.tipType = v;
    }
 });
+
+BI.TextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.text_trigger", BI.TextTrigger);
--- a/src/case/trigger/trigger.text.select.js
+++ b/src/case/trigger/trigger.text.select.js
@ -11,6 +11,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
        return BI.extend(BI.SelectTextTrigger.superclass._defaultConfig.apply(this, arguments), {
            baseCls: "bi-select-text-trigger",
            height: 24,
+            allowClear: false,
        });
    },

@ -32,11 +33,21 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
            textTgap: o.textTgap,
            textBgap: o.textBgap,
            tipType: o.tipType,
-            warningTitle: o.warningTitle
+            warningTitle: o.warningTitle,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.TextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self.setText("");
+                        self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR);
+                    }
+                }
+            ]
        });
    },

-    _digest: function(vals, items){
+    _digest: function (vals, items) {
        var o = this.options;
        vals = BI.isArray(vals) ? vals : [vals];
        var result = [];
@ -51,15 +62,20 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
            return {
                textCls: "",
                text: result.join(",")
-            }
+            };
        } else {
            return {
                textCls: "bi-water-mark",
                text: BI.isFunction(o.text) ? o.text() : o.text
-            }
+            };
        }
    },

+    setText: function (text) {
+        this.options.text = text;
+        this.trigger.setText(text);
+    },
+
    setValue: function (vals) {
        var formatValue = this._digest(vals, this.options.items);
        this.trigger.setTextCls(formatValue.textCls);
@ -70,7 +86,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
        this.trigger.setTipType(v);
    },

-    getTextor: function() {
+    getTextor: function () {
        return this.trigger.getTextor();
    },

@ -78,4 +94,6 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
        this.options.items = items;
    }
 });
+
+BI.SelectTextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.select_text_trigger", BI.SelectTextTrigger);
--- a/src/less/base/combo/combo.less
+++ b/src/less/base/combo/combo.less
@ -1,19 +1,22 @@
@import "../../index.less";
+
@val: transform .3s ease;
 .bi-combo {
  & > .bi-trigger {
-    & .bi-trigger-icon-button{
+    & .bi-trigger-icon-button {
      & .x-icon {
        .rotate(0deg);
        .transition(@val);
      }
    }
  }
+
  &.bi-combo-popup {
    display: block !important;
    visibility: visible !important;
+
    & > .bi-trigger {
-      & .bi-trigger-icon-button{
+      & .bi-trigger-icon-button {
        & .x-icon {
          .rotate(180deg);
          .transition(@val);
@ -21,11 +24,13 @@
      }
    }
  }
+
  &.bi-combo-popup, &.bi-combo-hover, &:hover {
    &.bi-border, &.bi-border-bottom {
      border-color: @color-bi-border-hover-combo;
    }
  }
+
  &.disabled {
    &.bi-combo-hover, &:hover {
      &.bi-border, &.bi-border-bottom {
@ -33,6 +38,14 @@
      }
    }
  }
+
+  &.error {
+    &.bi-combo-hover, &:hover {
+      &.bi-border, &.bi-border-bottom {
+        border-color: @border-color-negative;
+      }
+    }
+  }
 }

 .bi-theme-dark {
--- a/src/less/base/combo/combo.textvalue.less
+++ b/src/less/base/combo/combo.textvalue.less
@ -1,14 +0,0 @@
-@import "../../index.less";
-
-.bi-text-value-combo {
-  &.combo-error {
-    & .bi-select-text-trigger {
-      & .select-text-label {
-        color: @color-bi-text-error-hover-text-value-combo;
-      }
-    }
-    &.bi-border, &.bi-border-bottom {
-      border-color: @border-color-negative;
-    }
-  }
-}
--- a/src/less/base/trigger/trigger.text.less
+++ b/src/less/base/trigger/trigger.text.less
@ -0,0 +1,11 @@
+@import "../../index.less";
+
+.bi-text-trigger {
+  &.error .select-text-label {
+    color: @color-bi-text-error-text-trigger;
+  }
+  
+  &:where(:not(&:hover)) .clear-button {
+    display: none;
+  }
+}
--- a/src/less/lib/theme.less
+++ b/src/less/lib/theme.less
@ -179,6 +179,7 @@
@color-bi-border-hover-text-value-down-list-combo: @color-bi-border-highlight;
@color-bi-border-hover-text-value-check-combo: @color-bi-border-highlight;
@color-bi-text-error-hover-text-value-combo: @color-bi-text-failure;
+@color-bi-text-error-text-trigger: @color-bi-text-failure;
@color-bi-text-error-hover-text-value-icon-combo: @color-bi-text-failure;
@color-bi-text-error-hover-search-text-value-combo: @color-bi-text-failure;
@color-bi-background-bubble-combo-triangle: @color-bi-background-default;
--- a/src/widget/selecttree/selecttree.combo.js
+++ b/src/widget/selecttree/selecttree.combo.js
@ -11,6 +11,7 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
            text: "",
            items: [],
            value: "",
+            allowClear: false,
        });
    },

@ -25,7 +26,13 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
            text: o.text,
            height: o.height,
            items: o.items,
-            value: o.value
+            value: o.value,
+            allowClear: o.allowClear,
+            warningTitle: o.warningTitle,
+        });
+
+        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
+            self._clear();
        });

        this.popup = BI.createWidget({
@ -53,12 +60,43 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
            self.setValue(self.popup.getValue());
            self.combo.hideView();
        });
+
+        if (BI.isKey(o.value)) {
+            this._checkError(o.value);
+        }
+    },
+
+    _checkError: function (v) {
+        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+            this.trigger.options.tipType = "success";
+            this.trigger.element.removeClass("error");
+            this.element.removeClass("error");
+        } else {
+            v = BI.isArray(v) ? v : [v];
+            var result = BI.find(this.options.items, function (idx, item) {
+                return BI.contains(v, item.value);
+            });
+            if (BI.isNull(result)) {
+                this.trigger.setTipType("warning");
+                this.element.removeClass("error").addClass("error");
+                this.trigger.element.removeClass("error").addClass("error");
+            } else {
+                this.trigger.setTipType("success");
+                this.trigger.element.removeClass("error");
+                this.element.removeClass("error");
+            }
+        }
+    },
+
+    _clear: function () {
+        this.setValue([]);
    },

    setValue: function (v) {
        v = BI.isArray(v) ? v : [v];
        this.trigger.setValue(v);
        this.popup.setValue(v);
+        this._checkError(v);
    },

    getValue: function () {
@ -71,4 +109,4 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
 });


-BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo);
+BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo);
--- a/src/widget/singletree/singletree.combo.js
+++ b/src/widget/singletree/singletree.combo.js
@ -12,6 +12,7 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
            text: "",
            items: [],
            value: "",
+            allowClear: false,
        });
    },

@ -26,9 +27,15 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
            text: o.text,
            height: o.height,
            items: o.items,
-            value: o.value
+            value: o.value,
+            allowClear: o.allowClear,
+            warningTitle: o.warningTitle,
        }, o.trigger));

+        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
+            self._clear();
+        });
+
        this.popup = BI.createWidget({
            type: "bi.single_level_tree",
            items: o.items,
@ -58,6 +65,36 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
            self.combo.hideView();
            self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE);
        });
+
+        if (BI.isKey(o.value)) {
+            this._checkError(o.value);
+        }
+    },
+
+    _checkError: function (v) {
+        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+            this.trigger.options.tipType = "success";
+            this.trigger.element.removeClass("error");
+            this.element.removeClass("error");
+        } else {
+            v = BI.isArray(v) ? v : [v];
+            var result = BI.find(this.options.items, function (idx, item) {
+                return BI.contains(v, item.value);
+            });
+            if (BI.isNull(result)) {
+                this.trigger.setTipType("warning");
+                this.element.removeClass("error").addClass("error");
+                this.trigger.element.removeClass("error").addClass("error");
+            } else {
+                this.trigger.setTipType("success");
+                this.trigger.element.removeClass("error");
+                this.element.removeClass("error");
+            }
+        }
+    },
+
+    _clear: function () {
+        this.setValue([]);
    },

    populate: function (items) {
@ -68,6 +105,7 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
        v = BI.isArray(v) ? v : [v];
        this.trigger.setValue(v);
        this.popup.setValue(v);
+        this._checkError(v);
    },

    getValue: function () {
@ -77,4 +115,4 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {

 BI.SingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE";
 BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo);
+BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo);
--- a/src/widget/singletree/singletree.trigger.js
+++ b/src/widget/singletree/singletree.trigger.js
@ -11,7 +11,8 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
            height: 24,
            text: "",
            items: [],
-            value: ""
+            value: "",
+            allowClear: false,
        });
    },

@ -26,7 +27,17 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
            text: o.text,
            items: o.items,
            height: o.height,
-            value: o.value
+            warningTitle: o.warningTitle,
+            value: o.value,
+            allowClear: o.allowClear,
+            listeners: [
+                {
+                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
+                    action: function () {
+                        self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR);
+                    }
+                }
+            ]
        });
    },

@ -47,11 +58,15 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
        this._checkTitle();
    },

+    setTipType: function (v) {
+        this.trigger.setTipType(v);
+    },
+
    getValue: function () {
        return this.options.value || [];
    },

-    getTextor: function() {
+    getTextor: function () {
        return this.trigger.getTextor();
    },

@ -61,4 +76,5 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {

 });

+BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR";
 BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);