DESIGN-4103 feat: 多层级下拉树提供一套由开发者手动控制的标红方式

由于多层级下拉树有同步和异步方式,无法想单选下拉框一样根据items自动判断缺失,所以交给外部手动控制了

src/case/trigger/trigger.text.select.js

@@ -83,6 +83,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
     },
 
     setTipType: function (v) {
+        this.options.tipType = v;
         this.trigger.setTipType(v);
     },
 

src/less/base/combo/combo.less

@@ -46,6 +46,28 @@
       }
     }
   }
+
+
+  //  将来统一变成combo的特性
+  //&.status-error {
+  //  &.bi-border, &.bi-border-bottom {
+  //    border-color: @border-color-negative;
+  //  }
+  //
+  //  .bi-trigger .select-text-label {
+  //    color: @color-bi-text-error-text-trigger;
+  //  }
+  //}
+  //
+  //&.status-warning {
+  //  &.bi-border, &.bi-border-bottom {
+  //    border-color: @border-color-warning;
+  //  }
+  //
+  //  .bi-trigger .select-text-label {
+  //    color: @font-color-warning;
+  //  }
+  //}
 }
 
 .bi-theme-dark {

src/less/widget/multilayerselecttree/multilayerselecttree.combo.less

@@ -1,20 +1,24 @@
 @import "../../index.less";
-@val: transform .3s ease;
+
 .bi-multilayer-select-tree-combo {
-  & .trigger-icon-button{
+
-    font-size: @font-size-16;
+  &.status-error {
+    &.bi-border, &.bi-border-bottom {
+      border-color: @border-color-negative;
     }
-  // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
+
-  & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
+    .bi-trigger .select-text-label {
-    & .x-icon {
+      color: @color-bi-text-error-text-trigger;
-      .rotate(180deg);
-      .transition(@val);
     }
   }
-  & .bi-combo + .bi-trigger-icon-button {
+
-    & .x-icon {
+  &.status-warning {
-      .rotate(0deg);
+    &.bi-border, &.bi-border-bottom {
-      .transition(@val);
+      border-color: @border-color-warning;
+    }
+
+    .bi-trigger .select-text-label {
+      color: @font-color-warning;
     }
   }
 }

src/less/widget/multilayersingletree/multilayersingletree.combo.less

@@ -1,20 +1,23 @@
 @import "../../index.less";
-@val: transform .3s ease;
+
 .bi-multilayer-single-tree-combo {
-  & .trigger-icon-button{
+  &.status-error {
-    font-size: @font-size-16;
+    &.bi-border, &.bi-border-bottom {
+      border-color: @border-color-negative;
     }
-  // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
+
-  & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
+    .bi-trigger .select-text-label {
-    & .x-icon {
+      color: @color-bi-text-error-text-trigger;
-      .rotate(180deg);
-      .transition(@val);
     }
   }
-  & .bi-combo + .bi-trigger-icon-button {
+
-    & .x-icon {
+  &.status-warning {
-      .rotate(0deg);
+    &.bi-border, &.bi-border-bottom {
-      .transition(@val);
+      border-color: @border-color-warning;
+    }
+
+    .bi-trigger .select-text-label {
+      color: @font-color-warning;
     }
   }
 }

src/widget/multilayerselecttree/multilayerselecttree.combo.js

@@ -17,6 +17,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
             allowSearchValue: false,
             allowInsertValue: false,
             isNeedAdjustWidth: true,
+            status: "", // "error","warning"
         });
     },
 
@@ -37,7 +38,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         return {
             type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius " + (BI.isKey(o.status) ? ("status-" + o.status) : ""),
             container: o.container,
             destroyWhenHide: o.destroyWhenHide,
             adjustLength: 2,
@@ -205,6 +206,18 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
         //  do some work
     },
 
+    setStatus: function (status) {
+        if (BI.isKey(this.options.status)) {
+            this.element.removeClass("status-" + this.options.status);
+        }
+        this.element.addClass("status-" + status);
+        this.options.status = status;
+    },
+
+    setTipType: function (v) {
+        this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v);
+    },
+
     populate: function (items) {
         this.combo.populate(items);
     },

src/widget/multilayersingletree/multilayersingletree.combo.js

@@ -77,7 +77,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
         var self = this, o = this.options;
         return {
             type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius",
+            cls: (o.simple ? "bi-border-bottom" : "bi-border") + " bi-border-radius " + (BI.isKey(o.status) ? ("status-" + o.status) : ""),
             container: o.container,
             destroyWhenHide: o.destroyWhenHide,
             adjustLength: 2,
@@ -237,6 +237,18 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
         return this.combo.getValue();
     },
 
+    setStatus: function (status) {
+        if (BI.isKey(this.options.status)) {
+            this.element.removeClass("status-" + this.options.status);
+        }
+        this.element.addClass("status-" + status);
+        this.options.status = status;
+    },
+
+    setTipType: function (v) {
+        this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v);
+    },
+
     populate: function (items) {
         this.combo.populate(items);
     },

src/widget/singletree/singletree.trigger.js

@@ -60,6 +60,7 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
     },
 
     setTipType: function (v) {
+        this.options.tipType = v;
         this.trigger.setTipType(v);
     },
 

typescript/widget/multilayerselecttree/multilayerselecttree.combo.ts

@@ -21,4 +21,6 @@ export declare class MultiLayerSelectTreeCombo extends Widget {
     blur(): void;
 
     showView(): void;
+
+    setStatus(status: "error" | "warning"): void;
 }

typescript/widget/multilayersingletree/multilayersingletree.combo.ts

@@ -21,4 +21,6 @@ export declare class MultiLayerSingleTreeCombo extends Widget {
     blur(): void;
 
     showView(): void;
+
+    setStatus(status: "error" | "warning"): void;
 }