From e886e90db2afee0e6c9382853525c9f19fad6c98 Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Tue, 30 Mar 2021 12:13:36 +0800
Subject: [PATCH] =?UTF-8?q?left=5Fright=5Fvertical=5Fadapt=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=BD=93=E5=8F=B3=E8=BE=B9=E5=85=83=E7=B4=A0=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0invisible=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84=E6=83=85?=
 =?UTF-8?q?=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/widget.js                                 |  3 +++
 .../layout/flex/flex.leftrightvertical.center.js   | 14 +++++++-------
 src/core/wrapper/layout/layout.td.js               | 11 +++++++++--
 .../wrapper/flex.leftrightvertical.center.less     |  4 ++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/core/widget.js b/src/core/widget.js
index b1d1fe258..6dda06edb 100644
--- a/src/core/widget.js
+++ b/src/core/widget.js
@@ -183,6 +183,7 @@
             if (o.invisible) {
                 // 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性
                 this.element.css("display", "none");
+                this.element.addClass("invisible");
             }
         },
 
@@ -354,9 +355,11 @@
             if (visible === true) {
                 // 用this.element.show()会把display属性改成block
                 this.element.css("display", "");
+                this.element.removeClass("invisible");
                 this._mount();
             } else if (visible === false) {
                 this.element.css("display", "none");
+                this.element.addClass("invisible");
             }
             this.fireEvent(BI.Events.VIEW, visible);
         },
diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
index 102ae4646..eaaeeb275 100644
--- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
@@ -55,14 +55,14 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
             return json;
         });
         rightItems = BI.map(rightItems, function (i, item) {
-            if (i === 0) {
-                if (BI.isWidget(item)) {
-                    item.element.addClass("flex-left-auto");
-                } else {
-                    var t = BI.stripEL(item);
-                    t.cls = (t.cls || "") + " flex-left-auto";
-                }
+            // if (i === 0) {
+            if (BI.isWidget(item)) {
+                item.element.addClass("flex-left-auto");
+            } else {
+                var t = BI.stripEL(item);
+                t.cls = (t.cls || "") + " flex-left-auto";
             }
+            // }
             var json = {
                 el: BI.stripEL(item)
             };
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index d2f66dff3..3d4cf3e9e 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -8,6 +8,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
         return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
             baseCls: "bi-td",
             columnSize: [],
+            verticalAlign: BI.VerticalAlign.Middle,
             hgap: 0,
             vgap: 0,
             tgap: 0,
@@ -101,15 +102,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
                 });
             }
             first(w, this.rows++, i);
+            var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]);
             var td = BI._lazyCreateWidget({
                 type: "bi.default",
-                width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]),
+                width: width,
                 tagName: "td",
                 items: [w]
             });
+            // 对于表现为td的元素设置最大宽度，有几点需要注意
+            // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
+            // 2、不能给多个td设置最大宽度，这样只会平分宽度
+            // 3、多百分比宽度就算了
             td.element.css({
+                "max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width,
                 position: "relative",
-                "vertical-align": "middle",
+                "vertical-align": o.verticalAlign,
                 margin: "0",
                 padding: "0",
                 border: "none"
diff --git a/src/less/core/wrapper/flex.leftrightvertical.center.less b/src/less/core/wrapper/flex.leftrightvertical.center.less
index 7eb867365..b193c1366 100644
--- a/src/less/core/wrapper/flex.leftrightvertical.center.less
+++ b/src/less/core/wrapper/flex.leftrightvertical.center.less
@@ -1,5 +1,9 @@
 .bi-f-lr-v-c {
   > .flex-left-auto {
     margin-left: auto;
+
+    &:not(.invisible) + .flex-left-auto {
+      margin-left: initial;
+    }
   }
 }