You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
4.1 KiB
123 lines
4.1 KiB
import { shortcut } from "../../../decorator"; |
|
import { Layout } from "../../layout"; |
|
import { extend, isFunction, some, isNull } from "../../../2.base"; |
|
import { Widget } from "../../../4.widget"; |
|
import { _lazyCreateWidget } from "../../../5.inject"; |
|
import { HorizontalAlign, VerticalAlign } from "../../../constant"; |
|
|
|
/** |
|
* 使用display:table和display:table-cell实现的horizontal布局 |
|
* @class TableAdaptLayout |
|
* @extends Layout |
|
*/ |
|
@shortcut() |
|
export class TableAdaptLayout extends Layout { |
|
static xtype = "bi.table_adapt"; |
|
|
|
props() { |
|
return extend(super.props(...arguments), { |
|
baseCls: "bi-t-a", |
|
columnSize: [], |
|
verticalAlign: VerticalAlign.Top, |
|
horizontalAlign: HorizontalAlign.Left, |
|
hgap: 0, |
|
vgap: 0, |
|
lgap: 0, |
|
rgap: 0, |
|
tgap: 0, |
|
bgap: 0, |
|
}); |
|
} |
|
|
|
render() { |
|
super.render(...arguments); |
|
const o = this.options; |
|
this.$table = Widget._renderEngine.createElement("<div>").css({ |
|
position: "relative", |
|
display: "table", |
|
width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto", |
|
height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto", |
|
"white-space": "nowrap", |
|
}); |
|
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { |
|
this.populate(newValue); |
|
}) : o.items; |
|
this.populate(items); |
|
} |
|
|
|
_hasFill() { |
|
const o = this.options; |
|
if (o.columnSize.length > 0) { |
|
return o.columnSize.indexOf("fill") >= 0; |
|
} |
|
|
|
return some(o.items, (i, item) => { |
|
if (item.width === "fill") { |
|
return true; |
|
} |
|
}); |
|
} |
|
|
|
_addElement(i, item) { |
|
const o = this.options; |
|
let td, width = ""; |
|
let w; |
|
const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; |
|
if (columnSize > 0) { |
|
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap); |
|
} |
|
if ((isNull(columnSize) || columnSize === "") && this._hasFill()) { |
|
width = 2; |
|
} |
|
if (!this.hasWidget(this._getChildName(i))) { |
|
w = _lazyCreateWidget(item); |
|
w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" }); |
|
td = _lazyCreateWidget({ |
|
type: "bi.default", |
|
width, |
|
items: [w], |
|
}); |
|
this.addWidget(this._getChildName(i), td); |
|
} else { |
|
td = this.getWidgetByName(this._getChildName(i)); |
|
td.element.width(width); |
|
} |
|
if (o.verticalAlign === VerticalAlign.Stretch) { |
|
const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item), |
|
bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); |
|
w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`); |
|
} |
|
// 对于表现为td的元素设置最大宽度,有几点需要注意 |
|
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 |
|
// 2、不能给多个td设置最大宽度,这样只会平分宽度 |
|
// 3、多百分比宽度就算了 |
|
if (columnSize > 0) { |
|
td.element.css({ |
|
"max-width": width, |
|
"min-width": width, |
|
}); |
|
} |
|
if (i === 0) { |
|
td.element.addClass("first-element"); |
|
} |
|
td.element.css({ |
|
position: "relative", |
|
display: "table-cell", |
|
"vertical-align": o.verticalAlign, |
|
height: "100%", |
|
}); |
|
this._handleGap(w, item, i); |
|
|
|
return td; |
|
} |
|
|
|
appendFragment(frag) { |
|
this.$table.append(frag); |
|
this.element.append(this.$table); |
|
} |
|
|
|
populate(...args) { |
|
super.populate(...args); |
|
this._mount(); |
|
} |
|
}
|
|
|