@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
297 lines (240 loc) • 9.12 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.getGridBackgroundStyle = exports.templateReId = exports.findComPageByType = exports.validateToPromis = exports.dispatchResizeEvent = exports.fitHeight = exports.getBaseAttributes = exports.getComRequire = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _utils = require("@riil-frontend/utils");
var _lodash = _interopRequireDefault(require("lodash"));
var _constant = require("./constant");
var _index = _interopRequireDefault(require("./uicbb-container/index"));
var NoComPage = function NoComPage() {
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'none'
}
}, "\u65E0\u6B64\u7EC4\u4EF6");
};
var getComRequire = function getComRequire(comName, importFrom, customGetComRequire) {
if (importFrom === void 0) {
importFrom = 'npm';
}
if (customGetComRequire === void 0) {
customGetComRequire = undefined;
}
if (comName === 'uicbb-container') {
return _index["default"];
}
if (customGetComRequire) {
return customGetComRequire(comName, importFrom);
}
if (importFrom === 'npm') {
try {
var sytle = require("@riil-uicbb/" + comName + "/lib/style");
return require("@riil-uicbb/" + comName + "/lib/index")["default"];
} catch (error) {
console.error("\u4E1A\u52A1\u7EC4\u4EF6npm\u5305\u96C6\u5408\u4E2D\u4E0D\u5B58\u5728" + comName + "\u7EC4\u4EF6\uFF0C\u8BF7\u786E\u4FDDnpm\u5305\u4EE5@riil-uicbb/\u5F00\u5934\uFF0C\u5E76\u5DF2\u5B89\u88C5\u5230\u5DE5\u7A0B\u4E2D");
return NoComPage;
}
} else if (importFrom === 'local') {
try {
return require("@/uicbb/" + comName + "/index")["default"];
} catch (error) {
console.error("\u4E1A\u52A1\u7EC4\u4EF6\u672C\u5730\u76EE\u5F55\u4E2D\u4E0D\u5B58\u5728" + comName + "\u7EC4\u4EF6\uFF0C\u8BF7\u786E\u4FDD\u7EC4\u4EF6\u5728\u672C\u5730\u76EE\u5F55src/uicbb\u4E0B\uFF0C\u5E76\u7B26\u5408uicbb/" + comName + "/index.js\u76EE\u5F55\u7ED3\u6784");
return NoComPage;
}
} else {
try {
var _sytle = require("@riil-uicbb/" + comName + "/lib/style");
return require("@riil-uicbb/" + comName + "/lib/index")["default"];
} catch (error) {
console.error("\u4E1A\u52A1\u7EC4\u4EF6npm\u5305\u96C6\u5408\u4E2D\u4E0D\u5B58\u5728" + comName + "\u7EC4\u4EF6\uFF0C\u8BF7\u786E\u4FDDnpm\u5305\u4EE5@riil-uicbb/\u5F00\u5934\uFF0C\u5E76\u5DF2\u5B89\u88C5\u5230\u5DE5\u7A0B\u4E2D");
return NoComPage;
}
}
};
exports.getComRequire = getComRequire;
var getBaseAttributes = function getBaseAttributes() {
return _lodash["default"].cloneDeep({
paddingLeft: 8,
paddingTop: 8,
paddingRight: 8,
paddingBottom: 8
});
};
/**
* 撑满外层容器高度功能
* 根据pageConfig.layoutConfig.isFitHeight 和 parentDOM 和是否是编辑模式 判定是否执行适配高度操作
* 此操作会改写pageConfig.widgets中每个组件配置数据layouts.h layouts.y
* @param {*} pageConfig
* @param {*} parentDOM
* @param {*} isEdit
* @returns -pageConfig
*/
exports.getBaseAttributes = getBaseAttributes;
var fitHeight = function fitHeight(pageConfig, parentDOM, isEdit) {
var widgets = pageConfig.widgets;
var isFitHeight = pageConfig.layoutConfig && pageConfig.layoutConfig.isFitHeight;
if (!parentDOM || !isFitHeight || isEdit) {
return pageConfig;
}
var rowH = pageConfig.layoutConfig.rowHeight;
var domH = parentDOM.offsetHeight;
var bottoms = [];
widgets.forEach(function (item) {
var _item$layouts = item.layouts,
y = _item$layouts.y,
h = _item$layouts.h;
bottoms.push(y + h);
});
var maxHeight = Math.max.apply(Math, bottoms);
var scale = domH / (maxHeight * rowH);
var _widgets = widgets.map(function (item) {
var _item$layouts2 = item.layouts,
y = _item$layouts2.y,
h = _item$layouts2.h;
var _y = Math.floor(y * scale * rowH) / rowH;
var _h = Math.floor(h * scale * rowH) / rowH;
return (0, _extends2["default"])({}, item, {
layouts: (0, _extends2["default"])({}, item.layouts, {
y: _y,
h: _h
})
});
});
return (0, _extends2["default"])({}, pageConfig, {
widgets: _widgets
});
};
exports.fitHeight = fitHeight;
var dispatchResizeEvent = function dispatchResizeEvent(time) {
if (time === void 0) {
time = 1000;
}
if (!window.uicbbResizeEvent) {
window.uicbbResizeEvent = document.createEvent('HTMLEvents');
window.uicbbResizeEvent.initEvent('resize', true, true);
}
setTimeout(function () {
window.uicbbResizeEvent && window.dispatchEvent(window.uicbbResizeEvent);
}, time);
};
exports.dispatchResizeEvent = dispatchResizeEvent;
var validateToPromis = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(valid) {
var promise, pageResult;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!valid) {
_context.next = 8;
break;
}
promise = function promise() {
return new Promise(function (resolve, reject) {
valid(null, function (errors) {
resolve(errors);
});
});
};
_context.next = 4;
return promise();
case 4:
pageResult = _context.sent;
return _context.abrupt("return", pageResult);
case 8:
return _context.abrupt("return", null);
case 9:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function validateToPromis(_x) {
return _ref.apply(this, arguments);
};
}();
/**
* 查找包含指定组件的pageId
* @param {object} pageconfig
* @returns
*/
exports.validateToPromis = validateToPromis;
var findComPageByType = function findComPageByType(pageconfig, comType) {
var targetIndex = -1;
var target = pageconfig.configs.find(function (item, index) {
var targetCom = item.widgets.find(function (ele) {
return ele.type === comType;
});
if (!!targetCom) {
targetIndex = index;
}
return !!targetCom;
});
if (target) {
return {
fixId: target.pageId,
fixIndex: targetIndex
};
} else {
return {
fixId: null,
fixIndex: targetIndex
};
}
};
/**
* 重新给模板赋值id
* @param {object} template
*/
exports.findComPageByType = findComPageByType;
var templateReId = function templateReId(template, pageId) {
var newTemplate = _lodash["default"].cloneDeep(template);
newTemplate.pageId = pageId;
newTemplate.widgets.forEach(function (item) {
var newId = (0, _utils.getUUID)();
item.id = newId;
item.layouts.i = newId;
});
return newTemplate;
};
/**
* 绘制格子背景
* @param {*} param0 -格子线样式入参配置
* @param {*} isAbs -是否绝对布局
* @returns
*/
exports.templateReId = templateReId;
var getGridBackgroundStyle = function getGridBackgroundStyle(_ref2, isAbs) {
var line1Color = _ref2.line1Color,
line1Size = _ref2.line1Size,
line2Color = _ref2.line2Color,
line2Size = _ref2.line2Size,
line1W = _ref2.line1W,
line1H = _ref2.line1H,
line2W = _ref2.line2W,
line2H = _ref2.line2H;
if (isAbs === void 0) {
isAbs = true;
}
return isAbs ? {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
borderBottom: line1Size + " inset " + line1Color,
borderRight: line1Size + " inset " + line1Color,
backgroundImage: "linear-gradient(180deg," + line1Color + " " + line1Size + ", transparent 0),linear-gradient(90deg," + line1Color + " " + line1Size + ", transparent 0),linear-gradient(0deg," + line2Color + " " + line2Size + ", transparent 0), linear-gradient(90deg," + line2Color + " " + line2Size + ", transparent 0)",
backgroundSize: line1W + " " + line1H + "," + line1W + " " + line1H + "," + line2W + " " + line2H + "," + line2W + " " + line2H
} : {
borderBottom: line1Size + " inset " + line1Color,
borderRight: line1Size + " inset " + line1Color,
backgroundImage: "linear-gradient(180deg," + line1Color + " " + line1Size + ", transparent 0),linear-gradient(90deg," + line1Color + " " + line1Size + ", transparent 0),linear-gradient(0deg," + line2Color + " " + line2Size + ", transparent 0), linear-gradient(90deg," + line2Color + " " + line2Size + ", transparent 0)",
backgroundSize: line1W + " " + line1H + "," + line1W + " " + line1H + "," + line2W + " " + line2H + "," + line2W + " " + line2H
};
};
exports.getGridBackgroundStyle = getGridBackgroundStyle;