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.
335 lines
11 KiB
335 lines
11 KiB
2 years ago
|
import { extend, map, each, isNull } from "../../2.base";
|
||
|
import { Providers } from "../../5.inject";
|
||
2 years ago
|
import { Plugin } from "../../6.plugin";
|
||
2 years ago
|
import { isSupportCss3, isIE, getIEVersion } from "../../platform/web";
|
||
|
import { HorizontalAlign, VerticalAlign } from "../../constant";
|
||
2 years ago
|
import { FlexCenterLayout, FlexHorizontalLayout, VerticalLayout,
|
||
2 years ago
|
FlexVerticalLayout, TdLayout, InlineLayout,
|
||
2 years ago
|
FloatHorizontalFillLayout, ResponsiveInlineLayout,
|
||
|
InlineCenterAdaptLayout, FlexVerticalCenterAdapt,
|
||
|
InlineVerticalAdaptLayout, HorizontalAutoLayout,
|
||
|
TableAdaptLayout, FlexHorizontalCenter,
|
||
|
InlineHorizontalAdaptLayout, TableLayout,
|
||
|
AutoVerticalTapeLayout, VTapeLayout,
|
||
|
HorizontalFillLayout, VerticalFillLayout,
|
||
|
FlexLeftRightVerticalAdaptLayout, ResponsiveFlexWrapperHorizontalLayout,
|
||
|
FlexWrapperHorizontalLayout, ResponsiveFlexHorizontalLayout,
|
||
|
FlexWrapperVerticalLayout
|
||
2 years ago
|
} from "@/core/wrapper";
|
||
2 years ago
|
import { SystemProvider } from "@/core/system";
|
||
|
|
||
2 years ago
|
|
||
7 years ago
|
// 工程配置
|
||
2 years ago
|
// 注册布局
|
||
|
// adapt类布局优先级规则
|
||
|
// 1、支持flex的浏览器下使用flex布局
|
||
|
// 2、不支持flex的浏览器下使用inline布局
|
||
|
// 3、当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了。当横向出滚动条时使用table布局,不出滚动条时使用float布局
|
||
|
let _isSupportFlex, _isSupportGrid;
|
||
3 years ago
|
|
||
2 years ago
|
function isSupportFlex() {
|
||
|
if (!_isSupportFlex) {
|
||
2 years ago
|
_isSupportFlex = !!(isSupportCss3 && isSupportCss3("flex"));
|
||
2 years ago
|
}
|
||
|
|
||
|
return _isSupportFlex;
|
||
|
}
|
||
|
|
||
|
function isSupportGrid() {
|
||
|
if (!_isSupportGrid) {
|
||
2 years ago
|
_isSupportGrid = !!(isSupportCss3 && isSupportCss3("grid"));
|
||
2 years ago
|
}
|
||
|
|
||
|
return _isSupportGrid;
|
||
|
}
|
||
4 years ago
|
|
||
2 years ago
|
// 判断浏览器是否支持sticky 属性
|
||
|
const isSupportSticky = (function () {
|
||
|
const vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"],
|
||
|
vendorListLength = vendorList.length,
|
||
|
stickyElement = document.createElement("div");
|
||
|
for (let i = 0; i < vendorListLength; i++) {
|
||
|
stickyElement.style.position = `${vendorList[i]}sticky`;
|
||
|
if (stickyElement.style.position !== "") {
|
||
|
return true;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
}());
|
||
|
|
||
|
|
||
|
const configWidget = Plugin.configWidget;
|
||
|
|
||
|
configWidget("bi.horizontal", ob => {
|
||
|
const supportFlex = isSupportFlex();
|
||
|
// // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
|
||
|
// // 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
|
||
2 years ago
|
// if (ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch) {
|
||
|
// return extend({}, ob, {type: "bi.table_adapt"});
|
||
2 years ago
|
// }
|
||
|
if (supportFlex) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexHorizontalLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({
|
||
2 years ago
|
scrollx: true,
|
||
2 years ago
|
}, ob, { type: InlineLayout.xtype });
|
||
2 years ago
|
});
|
||
|
configWidget("bi.vertical", ob => {
|
||
2 years ago
|
if (ob.horizontalAlign === HorizontalAlign.Left || ob.horizontalAlign === HorizontalAlign.Right) {
|
||
3 years ago
|
if (isSupportFlex()) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexVerticalLayout.xtype });
|
||
3 years ago
|
}
|
||
2 years ago
|
|
||
2 years ago
|
return extend({}, ob, {
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
2 years ago
|
type: VerticalLayout.xtype,
|
||
2 years ago
|
items: map(ob.items, (i, item) => {
|
||
2 years ago
|
return {
|
||
2 years ago
|
type: InlineLayout.xtype,
|
||
2 years ago
|
horizontalAlign: ob.horizontalAlign,
|
||
|
items: [item],
|
||
|
};
|
||
|
}),
|
||
|
});
|
||
|
}
|
||
2 years ago
|
if (ob.verticalAlign === VerticalAlign.Stretch) {
|
||
3 years ago
|
if (isSupportFlex()) {
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
2 years ago
|
}, ob, { type: FlexVerticalLayout.xtype });
|
||
3 years ago
|
}
|
||
2 years ago
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
configWidget("bi.inline", ob => {
|
||
|
// 当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了,降级table处理吧
|
||
|
let hasAutoAndFillColumnSize = false;
|
||
|
if (ob.columnSize && ob.columnSize.length > 0) {
|
||
|
if ((ob.columnSize.indexOf("") >= 0 || ob.columnSize.indexOf("auto") >= 0) && ob.columnSize.indexOf("fill") >= 0) {
|
||
|
hasAutoAndFillColumnSize = true;
|
||
|
}
|
||
|
} else {
|
||
|
let hasAuto = false, hasFill = false;
|
||
2 years ago
|
each(ob.items, (i, item) => {
|
||
2 years ago
|
if (item.width === "fill") {
|
||
|
hasFill = true;
|
||
2 years ago
|
} else if (isNull(item.width) || item.width === "" || item.width === "auto") {
|
||
3 years ago
|
hasAuto = true;
|
||
|
}
|
||
2 years ago
|
});
|
||
|
hasAutoAndFillColumnSize = hasAuto && hasFill;
|
||
|
}
|
||
3 years ago
|
|
||
2 years ago
|
if (hasAutoAndFillColumnSize) {
|
||
|
// 宽度是不是受限
|
||
2 years ago
|
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) {
|
||
|
return extend({
|
||
|
verticalAlign: VerticalAlign.Top,
|
||
2 years ago
|
}, ob, { type: FloatHorizontalFillLayout.xtype });
|
||
4 years ago
|
}
|
||
2 years ago
|
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
2 years ago
|
}, ob, { type: TableAdaptLayout.xtype });
|
||
2 years ago
|
}
|
||
2 years ago
|
if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
|
||
|
return extend({}, ob, { type: ResponsiveInlineLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
configWidget("bi.center_adapt", ob => {
|
||
|
const supportFlex = isSupportFlex();
|
||
2 years ago
|
// var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
|
||
2 years ago
|
// if (!isAdapt || justOneItem) {
|
||
|
if (supportFlex) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexCenterLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({}, ob, { type: InlineCenterAdaptLayout.xtype });
|
||
2 years ago
|
// }
|
||
|
// return ob;
|
||
|
});
|
||
|
configWidget("bi.vertical_adapt", ob => {
|
||
|
const supportFlex = isSupportFlex();
|
||
2 years ago
|
// var isAdapt = ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
|
||
2 years ago
|
// if (!isAdapt || justOneItem) {
|
||
|
if (supportFlex) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexVerticalCenterAdapt.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({}, ob, { type: InlineVerticalAdaptLayout.xtype });
|
||
2 years ago
|
// }
|
||
|
// return ob;
|
||
|
});
|
||
|
|
||
|
configWidget("bi.horizontal_adapt", ob => {
|
||
|
const justOneItem = (ob.items && ob.items.length <= 1);
|
||
2 years ago
|
const isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
|
||
|
const verticalAlignTop = !ob.verticalAlign || ob.verticalAlign === VerticalAlign.TOP;
|
||
2 years ago
|
if (verticalAlignTop && justOneItem) {
|
||
2 years ago
|
return extend({}, ob, { type: HorizontalAutoLayout.xtype });
|
||
2 years ago
|
}
|
||
|
const supportFlex = isSupportFlex();
|
||
|
// 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
|
||
|
// 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
|
||
|
if (isAdapt) {
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Center,
|
||
2 years ago
|
}, ob, { type: TableAdaptLayout.xtype });
|
||
2 years ago
|
}
|
||
|
if (supportFlex) {
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Center,
|
||
2 years ago
|
scrollx: false,
|
||
2 years ago
|
}, ob, { type: FlexHorizontalLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Center,
|
||
2 years ago
|
}, ob, { type: TableAdaptLayout.xtype });
|
||
2 years ago
|
});
|
||
|
|
||
|
configWidget("bi.horizontal_float", ob => {
|
||
|
if (isSupportFlex()) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexHorizontalCenter.xtype });
|
||
2 years ago
|
}
|
||
|
if (ob.items && ob.items.length <= 1) {
|
||
2 years ago
|
return extend({}, ob, { type: InlineHorizontalAdaptLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
|
||
|
configWidget("bi.horizontal_fill", ob => {
|
||
|
if (isSupportFlex()) {
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
|
verticalAlign: VerticalAlign.Stretch,
|
||
2 years ago
|
scrollx: false,
|
||
2 years ago
|
}, ob, { type: FlexHorizontalLayout.xtype });
|
||
2 years ago
|
}
|
||
2 years ago
|
if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
|
||
2 years ago
|
// 宽度不受限,要用table布局
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
|
verticalAlign: VerticalAlign.Stretch,
|
||
2 years ago
|
}, ob, { type: TableLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({}, ob, { type: FloatHorizontalFillLayout.xtype });
|
||
2 years ago
|
});
|
||
|
configWidget("bi.vertical_fill", ob => {
|
||
|
if (isSupportFlex()) {
|
||
2 years ago
|
return extend({
|
||
|
horizontalAlign: HorizontalAlign.Stretch,
|
||
|
verticalAlign: VerticalAlign.Stretch,
|
||
2 years ago
|
scrolly: false,
|
||
2 years ago
|
}, ob, { type: FlexVerticalLayout });
|
||
2 years ago
|
}
|
||
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
|
||
|
// 有滚动条,降级到table布局处理
|
||
2 years ago
|
return extend({}, ob, {
|
||
2 years ago
|
type: TdLayout.xtype,
|
||
2 years ago
|
items: map(ob.items, (i, item) => [item]),
|
||
2 years ago
|
});
|
||
|
}
|
||
|
let hasAuto = false;
|
||
|
if (ob.rowSize && ob.rowSize.length > 0) {
|
||
|
if (ob.rowSize.indexOf("") >= 0 || ob.rowSize.indexOf("auto") >= 0) {
|
||
|
hasAuto = true;
|
||
|
}
|
||
|
} else {
|
||
2 years ago
|
each(ob.items, (i, item) => {
|
||
|
if (isNull(item.height) || item.height === "") {
|
||
2 years ago
|
hasAuto = true;
|
||
4 years ago
|
}
|
||
2 years ago
|
});
|
||
|
}
|
||
|
if (hasAuto) {
|
||
|
// 有自动高的时候
|
||
2 years ago
|
return extend({}, ob, { type: AutoVerticalTapeLayout.xtype });
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({}, ob, { type: VTapeLayout.xtype });
|
||
2 years ago
|
});
|
||
|
configWidget("bi.horizontal_sticky", ob => {
|
||
|
if (!isSupportSticky) {
|
||
2 years ago
|
return extend({ scrollx: true }, ob, { type: HorizontalFillLayout.xtype });
|
||
2 years ago
|
}
|
||
|
});
|
||
|
configWidget("bi.vertical_sticky", ob => {
|
||
|
if (!isSupportSticky) {
|
||
2 years ago
|
return extend({ scrolly: true }, ob, { type: VerticalFillLayout.xtype });
|
||
2 years ago
|
}
|
||
|
});
|
||
|
|
||
|
configWidget("bi.left_right_vertical_adapt", ob => {
|
||
|
if (isSupportFlex()) {
|
||
|
// IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况
|
||
2 years ago
|
// if (!isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexLeftRightVerticalAdaptLayout.xtype });
|
||
2 years ago
|
// }
|
||
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
configWidget("bi.flex_horizontal", ob => {
|
||
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
|
||
|
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
|
||
2 years ago
|
if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
|
||
|
return extend({}, ob, { type: ResponsiveFlexWrapperHorizontalLayout.xtype });
|
||
4 years ago
|
}
|
||
6 years ago
|
|
||
2 years ago
|
return extend({}, ob, { type: FlexWrapperHorizontalLayout.xtype });
|
||
2 years ago
|
}
|
||
|
}
|
||
2 years ago
|
if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
|
||
|
return extend({}, ob, { type: ResponsiveFlexHorizontalLayout.xtype });
|
||
2 years ago
|
}
|
||
|
});
|
||
|
configWidget("bi.flex_vertical", ob => {
|
||
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
|
||
|
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
|
||
2 years ago
|
return extend({}, ob, { type: FlexWrapperVerticalLayout.xtype });
|
||
2 years ago
|
}
|
||
|
}
|
||
|
});
|
||
3 years ago
|
|
||
2 years ago
|
configWidget("bi.table", ob => {
|
||
|
if (!isSupportGrid()) {
|
||
2 years ago
|
return extend({}, ob, { type: TdLayout.xtype });
|
||
2 years ago
|
}
|
||
6 years ago
|
|
||
2 years ago
|
return ob;
|
||
|
});
|
||
|
|
||
|
configWidget("bi.radio", ob => {
|
||
2 years ago
|
if (isIE() && getIEVersion() <= 9) {
|
||
|
return extend({}, ob, { type: "bi.image_radio" });
|
||
2 years ago
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
|
||
|
configWidget("bi.checkbox", ob => {
|
||
2 years ago
|
if (isIE() && getIEVersion() <= 9) {
|
||
|
return extend({}, ob, { type: "bi.image_checkbox" });
|
||
2 years ago
|
}
|
||
|
|
||
|
return ob;
|
||
|
});
|
||
|
|
||
|
configWidget("bi.half_icon_button", ob => {
|
||
2 years ago
|
if (isIE() && getIEVersion() < 9) {
|
||
6 years ago
|
return ob;
|
||
2 years ago
|
}
|
||
|
|
||
2 years ago
|
return extend({}, ob, { type: "bi.half_button" });
|
||
2 years ago
|
});
|
||
|
|
||
6 years ago
|
|