DESIGN-4103 feat: 重写一下下拉树的布局

3 years ago · 2b81ffd403
5 changed files with 76 additions and 132 deletions
--- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
@ -16,59 +16,21 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
            allowEdit: false,
            allowSearchValue: false,
            allowInsertValue: false,
-            isNeedAdjustWidth: true
+            isNeedAdjustWidth: true,
        });
    },

    _init: function () {
        var o = this.options;
-        if (this._shouldWrapper()) {
-            o.height -= 2;
        BI.isNumeric(o.width) && (o.width -= 2);
-        }
+        BI.isNumeric(o.height) && (o.height -= 2);
        BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
    },

    render: function () {
        var self = this, o = this.options;

-        var combo = (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
-
-        return this._shouldWrapper() ? combo : {
-            type: "bi.absolute",
-            items: [{
-                el: combo,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }, {
-                el: {
-                    type: "bi.trigger_icon_button",
-                    cls: "trigger-icon-button",
-                    ref: function (_ref) {
-                        self.triggerBtn = _ref;
-                    },
-                    width: o.height,
-                    height: o.height,
-                    handler: function () {
-                        if (self.combo.isViewVisible()) {
-                            self.combo.hideView();
-                        } else {
-                            self.combo.showView();
-                        }
-                    }
-                },
-                right: 0,
-                bottom: 0,
-                top: 0
-            }]
-        };
-    },
-
-    _shouldWrapper: function () {
-        var o = this.options;
-        return !o.allowEdit && o.itemsCreator === BI.emptyFn;
+        return (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
    },

    _getBaseConfig: function () {
@ -139,7 +101,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
                watermark: o.watermark,
-                height: o.height - (o.simple ? 1 : 2),
+                // height: o.height - (o.simple ? 1 : 2),
+                height: o.height,
                text: o.text,
                value: o.value,
                tipType: o.tipType,
@ -184,7 +147,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
                // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
                // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
-                return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn.element.find(e.target).length === 0;
+                return !(o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0);

            },
            listeners: [{
@ -198,7 +161,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                    self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW);
                }
            }]
-        }
+        };
    },

    _getSyncConfig: function () {
@ -213,7 +176,9 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                text: o.text,
                height: o.height,
                items: o.items,
-                value: o.value
+                value: o.value,
+                tipType: o.tipType,
+                warningTitle: o.warningTitle,
            }
        });
    },
@ -236,6 +201,10 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
        return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor();
    },

+    clear: function () {
+        //  do some work
+    },
+
    populate: function (items) {
        this.combo.populate(items);
    },
--- a/src/widget/multilayerselecttree/multilayerselecttree.trigger.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.trigger.js
@ -19,8 +19,9 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
        if (o.itemsCreator === BI.emptyFn) {
            this._initData();
        }
-        var content = {
-            type: "bi.htape",
+        
+        return {
+            type: "bi.horizontal_fill",
            items: [
                {
                    el: {
@ -99,35 +100,21 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
                                self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE);
                            }
                        }]
-                    }
+                    },
+                    width: "fill",
                }, {
                    el: {
-                        type: "bi.layout",
-                        width: 24
+                        type: "bi.trigger_icon_button",
+                        cls: "trigger-icon-button",
+                        ref: function (_ref) {
+                            self.triggerBtn = _ref;
+                        },
+                        width: 24,
                    },
-                    width: 24
+                    width: 24,
                }
            ]
        };
-
-        return o.allowEdit ? content : {
-            type: "bi.absolute",
-            items: [{
-                el: content,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }, {
-                el: {
-                    type: "bi.layout"
-                },
-                left: 0,
-                right: 24,
-                top: 0,
-                bottom: 0
-            }]
-        };
    },

    _initData: function () {
@ -159,7 +146,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
            value: node.value,
            isParent: BI.isNotEmptyArray(node.children),
            open: open
-        }
+        };
    },

    _getChildren: function (node) {
--- a/src/widget/multilayersingletree/multilayersingletree.combo.js
+++ b/src/widget/multilayersingletree/multilayersingletree.combo.js
@ -25,17 +25,15 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var o = this.options;
-        if (this._shouldWrapper()) {
-            o.height -= 2;
        BI.isNumeric(o.width) && (o.width -= 2);
-        }
+        BI.isNumeric(o.height) && (o.height -= 2);
        BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
    },

    render: function () {
        var self = this, o = this.options;

-        var combo = (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
+        return (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();

        return this._shouldWrapper() ? combo : {
            type: "bi.absolute",
@ -142,7 +140,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                items: o.items,
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
-                height: o.height - (o.simple ? 1 : 2),
+                height: o.height,
                text: o.text,
                value: o.value,
                tipType: o.tipType,
@ -186,7 +184,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
                // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
                // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
-                return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn.element.find(e.target).length === 0
+                return !(o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0);
            },
            listeners: [{
                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
@ -199,7 +197,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                    self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
                }
            }]
-        }
+        };
    },

    _getSyncConfig: function () {
@ -214,7 +212,9 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                text: o.text,
                height: o.height,
                items: o.items,
-                value: o.value
+                value: o.value,
+                tipType: o.tipType,
+                warningTitle: o.warningTitle,
            }
        });
    },
--- a/src/widget/multilayersingletree/multilayersingletree.trigger.js
+++ b/src/widget/multilayersingletree/multilayersingletree.trigger.js
@ -19,8 +19,9 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
        if (o.itemsCreator === BI.emptyFn) {
            this._initData();
        }
-        var content = {
-            type: "bi.htape",
+
+        return {
+            type: "bi.horizontal_fill",
            items: [
                {
                    el: {
@ -99,35 +100,21 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
                                self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE);
                            }
                        }]
-                    }
+                    },
+                    width: "fill",
                }, {
                    el: {
-                        type: "bi.layout",
-                        width: 24
+                        type: "bi.trigger_icon_button",
+                        cls: "trigger-icon-button",
+                        ref: function (_ref) {
+                            self.triggerBtn = _ref;
+                        },
+                        width: 24,
                    },
                    width: 24
                }
            ]
        };
-
-        return o.allowEdit ? content : {
-            type: "bi.absolute",
-            items: [{
-                el: content,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }, {
-                el: {
-                    type: "bi.layout"
-                },
-                left: 0,
-                right: 24,
-                top: 0,
-                bottom: 0
-            }]
-        };
    },

    _initData: function () {
@ -159,7 +146,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
            value: node.value,
            isParent: BI.isNotEmptyArray(node.children),
            open: open
-        }
+        };
    },

    _getChildren: function (node) {
--- a/src/widget/singletree/singletree.trigger.js
+++ b/src/widget/singletree/singletree.trigger.js
@ -28,6 +28,7 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
            items: o.items,
            height: o.height,
            warningTitle: o.warningTitle,
+            tipType: o.tipType,
            value: o.value,
            allowClear: o.allowClear,
            listeners: [