KERNEL-13521 refactor: segment调整&行列布局的类名方法抽到layout上

2 years ago · b5bdace1fb
8 changed files with 101 additions and 132 deletions
--- a/demo/js/case/demo.segment.js
+++ b/demo/js/case/demo.segment.js
@ -1,6 +1,6 @@
 Demo.Func = BI.inherit(BI.Widget, {
    props: {
-        baseCls: "demo-func"
+        baseCls: "demo-func",
    },

    render: function () {
@ -13,16 +13,16 @@ Demo.Func = BI.inherit(BI.Widget, {
                type: "bi.segment",
                items: [{
                    text: "较长的选项1",
-                    value: 1
+                    value: 1,
                }, {
                    text: "选项2",
-                    value: 2
+                    value: 2,
                }, {
                    text: "选项3",
-                    value: 3
-                }]
-            }]
+                    value: 3,
+                }],
+            }],
        });
-    }
+    },
 });
-BI.shortcut("demo.segment", Demo.Func);
+BI.shortcut("demo.segment", Demo.Func);
--- a/src/case/segment/segment.js
+++ b/src/case/segment/segment.js
@ -10,7 +10,7 @@ BI.Segment = BI.inherit(BI.Widget, {
        return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
            baseCls: "bi-segment",
            items: [],
-            height: 24
+            height: 24,
        });
    },
    _init: function () {
@ -20,12 +20,12 @@ BI.Segment = BI.inherit(BI.Widget, {
            element: this,
            type: "bi.button_group",
            value: o.value,
-            items: BI.createItems(o.items, {
+            items: [BI.createItems(o.items, {
                type: "bi.segment_button",
                height: BI.toPix(o.height, 2),
                whiteSpace: o.whiteSpace,
-            }),
-            layouts: o.layouts || [{
+            })],
+            layouts: [{
                type: "bi.table",
                columnSize: BI.makeArrayByArray(o.items, "fill"),
            }],
@ -57,7 +57,7 @@ BI.Segment = BI.inherit(BI.Widget, {

    getValue: function () {
        return this.buttonGroup.getValue();
-    }
+    },
 });
 BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.segment", BI.Segment);
+BI.shortcut("bi.segment", BI.Segment);
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -16,7 +16,7 @@ BI.Layout = BI.inherit(BI.Widget, {
            scrolly: false, // true, false
            items: [],
            innerHgap: 0,
-            innerVgap: 0
+            innerVgap: 0,
        };
    },

@ -727,6 +727,25 @@ BI.Layout = BI.inherit(BI.Widget, {
        });
    },

+    getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) {
+        var cls = "";
+        if (rowIndex === 0) {
+            cls += " first-row";
+        } else if (rowIndex === lastRowIndex) {
+            cls += " last-row";
+        }
+        if (colIndex === 0) {
+            cls += " first-col";
+        } else if (colIndex === lastColIndex) {
+            cls += " last-col";
+        }
+        BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row");
+        BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col");
+        cls += " center-element";
+
+        return cls;
+    },
+
    removeWidget: function (nameOrWidget) {
        var removeIndex, self = this;
        if (BI.isWidget(nameOrWidget)) {
--- a/src/core/wrapper/layout/layout.division.js
+++ b/src/core/wrapper/layout/layout.division.js
@ -28,44 +28,31 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
    },

    stroke: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
        var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
        var map = BI.makeArray(rows), widths = {}, heights = {};

-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
+        function firstElement (item, cls) {
+            item.addClass(cls);
+
+            return item;
        }

-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
        }

-        function first (item, row, col) {
+        function first (item, cls) {
            if (item instanceof BI.Widget) {
-                firstElement(item.element, row, col);
+                firstElement(item.element, cls);
            } else if (item.el instanceof BI.Widget) {
-                firstElement(item.el.element, row, col);
+                firstElement(item.el.element, cls);
            } else if (item.el) {
-                firstObject(item.el, row, col);
+                firstObject(item.el, cls);
            } else {
-                firstObject(item, row, col);
+                firstObject(item, cls);
            }
        }

@ -79,6 +66,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
                    heights[j] = (heights[j] || 0) + item.height;
                    map[i][j] = el;
                });
+
                return;
            }
            widths[item.row] = (widths[item.row] || 0) + item.width;
@ -106,7 +94,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
                if (j == o.columns - 1) {
                    w.element.css({right: "0%"});
                }
-                first(w, i, j);
+                first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
                totalW += map[i][j].width;
            }
        }
--- a/src/core/wrapper/layout/layout.grid.js
+++ b/src/core/wrapper/layout/layout.grid.js
@ -36,29 +36,16 @@ BI.GridLayout = BI.inherit(BI.Layout, {
            els[i] = [];
        }

-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
+        function firstElement (item, cls) {
+            item.addClass(cls);
+
+            return item;
        }

-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
        }

        function first (item, row, col) {
@ -89,7 +76,7 @@ BI.GridLayout = BI.inherit(BI.Layout, {
                        type: "bi.layout"
                    });
                }
-                first(els[i][j], i, j);
+                first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
                els[i][j].element.css({
                    position: "absolute",
                    top: height * i + "%",
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@ -16,7 +16,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
            // rowSize: 30,  // or [30,30,30]
            hgap: 0,
            vgap: 0,
-            items: []
+            items: [],
        });
    },
    render: function () {
@ -45,57 +45,43 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                    return self._optimiseGap(size);
                }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
                "grid-row-gap": this._optimiseGap(o.vgap),
-                "grid-column-gap": this._optimiseGap(o.hgap)
+                "grid-column-gap": this._optimiseGap(o.hgap),
            });
        }
+        
        return {
            type: "bi.default",
            ref: function (_ref) {
                self.layout = _ref;
            },
-            items: this._formatItems(items)
+            items: this._formatItems(items),
        };
    },

    _formatItems: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
+
+        function firstElement (item, cls) {
+            item.addClass(cls);

-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
            return item;
        }

-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
            return item;
        }

-        function first (item, row, col) {
+        function first (item, cls) {
            if (item instanceof BI.Widget) {
-                return firstElement(item.element, row, col);
+                return firstElement(item.element, cls);
            } else if (item.el instanceof BI.Widget) {
-                return firstElement(item.el.element, row, col);
+                return firstElement(item.el.element, cls);
            } else if (item.el) {
-                return firstObject(item.el, row, col);
+                return firstObject(item.el, cls);
            } else {
-                return firstObject(item, row, col);
+                return firstObject(item, cls);
            }
        }

@ -105,18 +91,20 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                columnSize: ["fill"],
                horizontalAlign: o.horizontalAlign,
                verticalAlign: o.verticalAlign,
-                items: [BI.formatEL(item)]
+                items: [BI.formatEL(item)],
            };
        }

-        return BI.reduce(items, function (row, result, i) {
-            return result.concat(BI.map(row, function (j, item) {
+        return BI.reduce(items, function (rowItems, result, rowIndex) {
+            return result.concat(BI.map(rowItems, function (colIndex, item) {
+                var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
                if (BI.isEmpty(item)) {
                    return first(wrapLayout({
-                        type: "bi.layout"
-                    }), i, j);
+                        type: "bi.layout",
+                    }), cls);
                }
-                return first(wrapLayout(item), i, j);
+                
+                return first(wrapLayout(item), cls);
            }));
        }, []);
    },
@ -127,6 +115,6 @@ BI.TableLayout = BI.inherit(BI.Layout, {

    populate: function (items) {
        this.layout.populate(this._formatItems(items));
-    }
+    },
 });
 BI.shortcut("bi.table", BI.TableLayout);
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@ -35,7 +35,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
    },

    stroke: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
        if (BI.isNumber(o.rowSize)) {
            o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
        }
@ -43,29 +43,16 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
            o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
        }

-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
+        function firstElement (item, cls) {
+            item.addClass(cls);
+
+            return item;
        }

-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
        }

        function first (item, row, col) {
@ -109,7 +96,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                    h = this._optimiseGap(o.rowSize[i]);
                }
                wi.element.css({top: t, height: h});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
            }
            if (!BI.isNumber(o.rowSize[i])) {
                break;
@ -127,7 +114,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                    h = this._optimiseGap(o.rowSize[i]);
                }
                wi.element.css({bottom: b, height: h});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
            }
            if (!BI.isNumber(o.rowSize[i])) {
                break;
@ -145,7 +132,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                    w = this._optimiseGap(o.columnSize[j]);
                }
                wi.element.css({left: l, width: w});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
            }
            if (!BI.isNumber(o.columnSize[j])) {
                break;
@ -163,7 +150,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                    w = this._optimiseGap(o.columnSize[j]);
                }
                wi.element.css({right: r, width: w});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
            }
            if (!BI.isNumber(o.columnSize[j])) {
                break;
--- a/src/less/base/segment/segment.less
+++ b/src/less/base/segment/segment.less
@ -7,14 +7,14 @@
    border-top: 1px solid @color-bi-split-segment;
    border-bottom: 1px solid @color-bi-split-segment;
  }
-  & > .first-element, & > .first-row{
+  & > .first-col{
    border-left: 1px solid @color-bi-split-segment;
    .border-corner-radius(2px,0px,0px,2px)
  }
-  & > .last-element{
+  & > .last-col{
    .border-corner-radius(0px,2px,2px,0px)
  }
-  &.disabled > .center-element, &.disabled > .first-element{
+  &.disabled > .center-element, &.disabled > .first-col{
    border-color: @color-bi-split-disabled-segment;
  }
 }
@ -34,7 +34,7 @@
      border-top: 1px solid @color-bi-split-segment-theme-dark;
      border-bottom: 1px solid @color-bi-split-segment-theme-dark;
    }
-    & > .first-element{
+    & > .first-col{
      border-left: 1px solid @color-bi-split-segment-theme-dark;
    }
  }