fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

es6
Zhenfei.Li 2 years ago
parent
0ac1e8483c
commit
b5bdace1fb
8 changed files with 101 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      demo/js/case/demo.segment.js
  2. 10
      src/case/segment/segment.js
  3. 21
      src/core/wrapper/layout.js
  4. 44
      src/core/wrapper/layout/layout.division.js
  5. 31
      src/core/wrapper/layout/layout.grid.js
  6. 62
      src/core/wrapper/layout/layout.table.js
  7. 39
      src/core/wrapper/layout/layout.window.js
  8. 8
      src/less/base/segment/segment.less

14
demo/js/case/demo.segment.js
Unescape View File

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

10
src/case/segment/segment.js
Unescape View File

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

21
src/core/wrapper/layout.js
Unescape View File

@ -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)) {

44
src/core/wrapper/layout/layout.division.js
Unescape View File

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

31
src/core/wrapper/layout/layout.grid.js
Unescape View File

@ -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 + "%",

62
src/core/wrapper/layout/layout.table.js
Unescape View File

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

39
src/core/wrapper/layout/layout.window.js
Unescape View File

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

8
src/less/base/segment/segment.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save