Browse Source

DESIGN-4103 feat: 下拉框组件支持clear,下拉树支持缺失标红

es6
zsmj 3 years ago
parent
commit
59b332512a
  1. 9
      src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
  2. 10
      src/case/combo/textvaluecombo/combo.textvalue.js
  3. 60
      src/case/trigger/trigger.text.js
  4. 6
      src/case/trigger/trigger.text.select.js
  5. 17
      src/less/base/combo/combo.less
  6. 14
      src/less/base/combo/combo.textvalue.less
  7. 11
      src/less/base/trigger/trigger.text.less
  8. 1
      src/less/lib/theme.less
  9. 40
      src/widget/selecttree/selecttree.combo.js
  10. 40
      src/widget/singletree/singletree.combo.js
  11. 22
      src/widget/singletree/singletree.trigger.js

9
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: {

10
src/case/combo/textvaluecombo/combo.textvalue.js

@ -78,14 +78,14 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
},
_clear: function () {
this.trigger.attr("text", "");
this.setValue();
},
_checkError: function (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) {
@ -93,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");
}
}
},

60
src/case/trigger/trigger.text.js

@ -53,52 +53,39 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
return ({
type: "bi.horizontal_fill",
columnSize: ["fill", o.triggerWidth || o.height],
items: [
{
el: text,
width: "fill"
}, {
type: "bi.vertical_adapt",
horizontalAlign: "left",
width: o.triggerWidth || o.height,
scrollable: false,
items: [
{
el: {
type: "bi.icon_button",
ref: function (_ref) {
self.clearBtn = _ref;
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);
},
},
cls: "close-h-font",
stopPropagation: true,
handler: function () {
self.fireEvent(BI.TextTrigger.EVENT_CLEAR);
self.clearBtn.setVisible(false);
},
invisible: true,
},
width: o.triggerWidth || o.height
}, {
el: triggerButton,
width: o.triggerWidth || o.height
}
]
}, {
el: triggerButton,
}
]
} : triggerButton,
}
]
});
},
mounted: function () {
var self = this;
if (this.options.allowClear) {
this.element.hover(function () {
BI.isKey(self.text.getText()) && self.clearBtn.setVisible(true);
}, function () {
self.clearBtn.setVisible(false);
});
}
},
getTextor: function () {
return this.text;
},
@ -112,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) {

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

@ -39,6 +39,7 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
{
eventName: BI.TextTrigger.EVENT_CLEAR,
action: function () {
self.setText("");
self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR);
}
}
@ -70,6 +71,11 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
}
},
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);

17
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 {

14
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;
}
}
}

11
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;
}
}

1
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;

40
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 () {

40
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 () {

22
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);

Loading…
Cancel
Save