@alilc/lowcode-renderer-core
Version:
renderer core
1,120 lines (1,107 loc) • 48.6 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _createClass from "@babel/runtime/helpers/createClass";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["ref"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
/* eslint-disable no-console */
/* eslint-disable max-len */
/* eslint-disable react/prop-types */
import classnames from 'classnames';
import { create as createDataSourceEngine } from '@alilc/lowcode-datasource-engine/interpret';
import { checkPropTypes, isI18nData, isJSExpression, isJSFunction } from '@alilc/lowcode-utils';
import adapter from '../adapter';
import divFactory from '../components/Div';
import visualDomFactory from '../components/VisualDom';
import contextFactory from '../context';
import { forEach, getValue, parseData, parseExpression, parseThisRequiredExpression, parseI18n, isEmpty, isSchema, isFileSchema, transformArrayToMap, transformStringToFunction, getI18n, getFileCssName, capitalizeFirstLetter, DataHelper, isVariable, isJSSlot } from '../utils';
import { compWrapper } from '../hoc';
import { leafWrapper } from '../hoc/leaf';
import logger from '../utils/logger';
import isUseLoop from '../utils/is-use-loop';
/**
* execute method in schema.lifeCycles with context
* @PRIVATE
*/
export function executeLifeCycleMethod(context, schema, method, args, thisRequiredInJSE) {
if (!context || !isSchema(schema) || !method) {
return;
}
var lifeCycleMethods = getValue(schema, 'lifeCycles', {});
var fn = lifeCycleMethods[method];
if (!fn) {
return;
}
// TODO: cache
if (isJSExpression(fn) || isJSFunction(fn)) {
fn = thisRequiredInJSE ? parseThisRequiredExpression(fn, context) : parseExpression(fn, context);
}
if (typeof fn !== 'function') {
logger.error("\u751F\u547D\u5468\u671F" + method + "\u7C7B\u578B\u4E0D\u7B26", fn);
return;
}
try {
return fn.apply(context, args);
} catch (e) {
logger.error("[" + schema.componentName + "]\u751F\u547D\u5468\u671F" + method + "\u51FA\u9519", e);
}
}
/**
* get children from a node schema
* @PRIVATE
*/
export function getSchemaChildren(schema) {
if (!schema) {
return;
}
if (!schema.props) {
return schema.children;
}
if (!schema.children) {
return schema.props.children;
}
if (!schema.props.children) {
return schema.children;
}
var result = [].concat(schema.children);
if (Array.isArray(schema.props.children)) {
result = result.concat(schema.props.children);
} else {
result.push(schema.props.children);
}
return result;
}
export default function baseRendererFactory() {
var _BaseRenderer;
var _adapter$getRenderers = adapter.getRenderers(),
customBaseRenderer = _adapter$getRenderers.BaseRenderer;
if (customBaseRenderer) {
return customBaseRenderer;
}
var _adapter$getRuntime = adapter.getRuntime(),
Component = _adapter$getRuntime.Component,
createElement = _adapter$getRuntime.createElement;
var Div = divFactory();
var VisualDom = visualDomFactory();
var AppContext = contextFactory();
var DESIGN_MODE = {
EXTEND: 'extend',
BORDER: 'border',
PREVIEW: 'preview'
};
var OVERLAY_LIST = ['Dialog', 'Overlay', 'Animate', 'ConfigProvider'];
var DEFAULT_LOOP_ARG_ITEM = 'item';
var DEFAULT_LOOP_ARG_INDEX = 'index';
var scopeIdx = 0;
return _BaseRenderer = /*#__PURE__*/function (_Component) {
function BaseRenderer(_props2, context) {
var _props2$__schema;
var _this;
_this = _Component.call(this, _props2, context) || this;
_this.i18n = void 0;
_this.getLocale = void 0;
_this.setLocale = void 0;
_this.dataSourceMap = {};
_this.__namespace = 'base';
_this.__compScopes = {};
_this.__instanceMap = {};
_this.__dataHelper = void 0;
/**
* keep track of customMethods added to this context
*
* @type {any}
*/
_this.__customMethodsList = [];
_this.__parseExpression = void 0;
_this.__ref = void 0;
/**
* reference of style element contains schema.css
*
* @type {any}
*/
_this.__styleElement = void 0;
_this.reloadDataSource = function () {
return new Promise(function (resolve, reject) {
_this.__debug('reload data source');
if (!_this.__dataHelper) {
return resolve({});
}
_this.__dataHelper.getInitData().then(function (res) {
if (isEmpty(res)) {
_this.forceUpdate();
return resolve({});
}
_this.setState(res, resolve);
})["catch"](function (err) {
reject(err);
});
});
};
/**
* execute method in schema.lifeCycles
* @PRIVATE
*/
_this.__executeLifeCycleMethod = function (method, args) {
executeLifeCycleMethod(_this, _this.props.__schema, method, args, _this.props.thisRequiredInJSE);
};
/**
* this method is for legacy purpose only, which used _ prefix instead of __ as private for some historical reasons
* @LEGACY
*/
_this._getComponentView = function (componentName) {
var __components = _this.props.__components;
if (!__components) {
return;
}
return __components[componentName];
};
_this.__bindCustomMethods = function (props) {
var __schema = props.__schema;
var customMethodsList = Object.keys(__schema.methods || {}) || [];
(_this.__customMethodsList || []).forEach(function (item) {
if (!customMethodsList.includes(item)) {
delete _this[item];
}
});
_this.__customMethodsList = customMethodsList;
forEach(__schema.methods, function (val, key) {
var value = val;
if (isJSExpression(value) || isJSFunction(value)) {
value = _this.__parseExpression(value, _this);
}
if (typeof value !== 'function') {
logger.error("custom method " + key + " can not be parsed to a valid function", value);
return;
}
_this[key] = value.bind(_this);
});
};
_this.__generateCtx = function (ctx) {
var _this$context = _this.context,
pageContext = _this$context.pageContext,
compContext = _this$context.compContext;
var obj = _extends({
page: pageContext,
component: compContext
}, ctx);
forEach(obj, function (val, key) {
_this[key] = val;
});
};
_this.__parseData = function (data, ctx) {
var _this$props = _this.props,
__ctx = _this$props.__ctx,
thisRequiredInJSE = _this$props.thisRequiredInJSE,
componentName = _this$props.componentName;
return parseData(data, ctx || __ctx || _this, {
thisRequiredInJSE: thisRequiredInJSE,
logScope: componentName
});
};
_this.__initDataSource = function (props) {
var _props$__appHelper;
if (!props) {
return;
}
var schema = props.__schema || {};
var defaultDataSource = {
list: []
};
var dataSource = schema.dataSource || defaultDataSource;
// requestHandlersMap 存在才走数据源引擎方案
// TODO: 下面if else 抽成独立函数
var useDataSourceEngine = !!((_props$__appHelper = props.__appHelper) !== null && _props$__appHelper !== void 0 && _props$__appHelper.requestHandlersMap);
if (useDataSourceEngine) {
_this.__dataHelper = {
updateConfig: function updateConfig(updateDataSource) {
var _createDataSourceEngi = createDataSourceEngine(updateDataSource !== null && updateDataSource !== void 0 ? updateDataSource : {}, _this, props.__appHelper.requestHandlersMap ? {
requestHandlersMap: props.__appHelper.requestHandlersMap
} : undefined),
dataSourceMap = _createDataSourceEngi.dataSourceMap,
reloadDataSource = _createDataSourceEngi.reloadDataSource;
_this.reloadDataSource = function () {
return new Promise(function (resolve) {
_this.__debug('reload data source');
reloadDataSource().then(function () {
resolve({});
});
});
};
return dataSourceMap;
}
};
_this.dataSourceMap = _this.__dataHelper.updateConfig(dataSource);
} else {
var appHelper = props.__appHelper;
_this.__dataHelper = new DataHelper(_this, dataSource, appHelper, function (config) {
return _this.__parseData(config);
});
_this.dataSourceMap = _this.__dataHelper.dataSourceMap;
_this.reloadDataSource = function () {
return new Promise(function (resolve, reject) {
_this.__debug('reload data source');
if (!_this.__dataHelper) {
return resolve({});
}
_this.__dataHelper.getInitData().then(function (res) {
if (isEmpty(res)) {
return resolve({});
}
_this.setState(res, resolve);
})["catch"](function (err) {
reject(err);
});
});
};
}
};
/**
* init i18n apis
* @PRIVATE
*/
_this.__initI18nAPIs = function () {
_this.i18n = function (key, values) {
if (values === void 0) {
values = {};
}
var _this$props2 = _this.props,
locale = _this$props2.locale,
messages = _this$props2.messages;
return getI18n(key, values, locale, messages);
};
_this.getLocale = function () {
return _this.props.locale;
};
_this.setLocale = function (loc) {
var _this$appHelper, _this$appHelper$utils, _this$appHelper$utils2;
var setLocaleFn = (_this$appHelper = _this.appHelper) === null || _this$appHelper === void 0 ? void 0 : (_this$appHelper$utils = _this$appHelper.utils) === null || _this$appHelper$utils === void 0 ? void 0 : (_this$appHelper$utils2 = _this$appHelper$utils.i18n) === null || _this$appHelper$utils2 === void 0 ? void 0 : _this$appHelper$utils2.setLocale;
if (!setLocaleFn || typeof setLocaleFn !== 'function') {
logger.warn('initI18nAPIs Failed, i18n only works when appHelper.utils.i18n.setLocale() exists');
return undefined;
}
return setLocaleFn(loc);
};
};
/**
* write props.__schema.css to document as a style element,
* which will be added once and only once.
* @PRIVATE
*/
_this.__writeCss = function (props) {
var css = getValue(props.__schema, 'css', '');
_this.__debug('create this.styleElement with css', css);
var style = _this.__styleElement;
if (!_this.__styleElement) {
style = document.createElement('style');
style.type = 'text/css';
style.setAttribute('from', 'style-sheet');
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(style);
_this.__styleElement = style;
_this.__debug('this.styleElement is created', _this.__styleElement);
}
if (style.innerHTML === css) {
return;
}
style.innerHTML = css;
};
_this.__render = function () {
var schema = _this.props.__schema;
_this.__executeLifeCycleMethod('render');
_this.__writeCss(_this.props);
var engine = _this.context.engine;
if (engine) {
engine.props.onCompGetCtx(schema, _this);
// 画布场景才需要每次渲染bind自定义方法
if (_this.__designModeIsDesign) {
var _this$__dataHelper;
_this.__bindCustomMethods(_this.props);
_this.dataSourceMap = (_this$__dataHelper = _this.__dataHelper) === null || _this$__dataHelper === void 0 ? void 0 : _this$__dataHelper.updateConfig(schema.dataSource);
}
}
};
_this.__getRef = function (ref) {
var _engine$props;
var engine = _this.context.engine;
var __schema = _this.props.__schema;
ref && (engine === null || engine === void 0 ? void 0 : (_engine$props = engine.props) === null || _engine$props === void 0 ? void 0 : _engine$props.onCompGetRef(__schema, ref));
_this.__ref = ref;
};
_this.__createDom = function () {
var _this$props3 = _this.props,
__schema = _this$props3.__schema,
__ctx = _this$props3.__ctx,
_this$props3$__compon = _this$props3.__components,
__components = _this$props3$__compon === void 0 ? {} : _this$props3$__compon;
// merge defaultProps
var scopeProps = _extends({}, __schema.defaultProps, _this.props);
var scope = {
props: scopeProps
};
scope.__proto__ = __ctx || _this;
var _children = getSchemaChildren(__schema);
var Comp = __components[__schema.componentName];
if (!Comp) {
_this.__debug(__schema.componentName + " is invalid!");
}
var parentNodeInfo = {
schema: __schema,
Comp: _this.__getHOCWrappedComponent(Comp, __schema, scope)
};
return _this.__createVirtualDom(_children, scope, parentNodeInfo);
};
/**
* 将模型结构转换成react Element
* @param originalSchema schema
* @param originalScope scope
* @param parentInfo 父组件的信息，包含schema和Comp
* @param idx 为循环渲染的循环Index
*/
_this.__createVirtualDom = function (originalSchema, originalScope, parentInfo, idx) {
if (idx === void 0) {
idx = '';
}
if (originalSchema === null || originalSchema === undefined) {
return null;
}
var scope = originalScope;
var schema = originalSchema;
var _ref = _this.context || {},
engine = _ref.engine;
if (!engine) {
_this.__debug('this.context.engine is invalid!');
return null;
}
try {
var _schema$props, _this$props$__contain, _this$props$__contain2, _engine$props3, _schema, _schema$__ctx;
var _ref2 = _this.props || {},
appHelper = _ref2.__appHelper,
_ref2$__components = _ref2.__components,
components = _ref2$__components === void 0 ? {} : _ref2$__components;
if (isJSExpression(schema)) {
return _this.__parseExpression(schema, scope);
}
if (isI18nData(schema)) {
return parseI18n(schema, scope);
}
if (isJSSlot(schema)) {
return _this.__createVirtualDom(schema.value, scope, parentInfo);
}
if (typeof schema === 'string') {
return schema;
}
if (typeof schema === 'number' || typeof schema === 'boolean') {
return String(schema);
}
if (Array.isArray(schema)) {
if (schema.length === 1) {
return _this.__createVirtualDom(schema[0], scope, parentInfo);
}
return schema.map(function (item, idy) {
var _ctx;
return _this.__createVirtualDom(item, scope, parentInfo, item !== null && item !== void 0 && (_ctx = item.__ctx) !== null && _ctx !== void 0 && _ctx.lceKey ? '' : String(idy));
});
}
// @ts-expect-error 如果直接转换好了，可以返回
if (schema.$$typeof) {
return schema;
}
var _children = getSchemaChildren(schema);
if (!schema.componentName) {
logger.error('The componentName in the schema is invalid, please check the schema: ', schema);
return;
}
// 解析占位组件
if (schema.componentName === 'Fragment' && _children) {
var tarChildren = isJSExpression(_children) ? _this.__parseExpression(_children, scope) : _children;
return _this.__createVirtualDom(tarChildren, scope, parentInfo);
}
if (schema.componentName === 'Text' && typeof ((_schema$props = schema.props) === null || _schema$props === void 0 ? void 0 : _schema$props.text) === 'string') {
var _schema$props2;
var text = (_schema$props2 = schema.props) === null || _schema$props2 === void 0 ? void 0 : _schema$props2.text;
schema = _extends({}, schema);
schema.children = [text];
}
if (!isSchema(schema)) {
return null;
}
var Comp = components[schema.componentName] || ((_this$props$__contain = _this.props.__container) === null || _this$props$__contain === void 0 ? void 0 : (_this$props$__contain2 = _this$props$__contain.components) === null || _this$props$__contain2 === void 0 ? void 0 : _this$props$__contain2[schema.componentName]);
// 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
var otherProps = isFileSchema(schema) ? {
__schema: schema,
__appHelper: appHelper,
__components: components
} : {};
if (!Comp) {
var _this$props$__contain3;
logger.error(schema.componentName + " component is not found in components list! component list is:", components || ((_this$props$__contain3 = _this.props.__container) === null || _this$props$__contain3 === void 0 ? void 0 : _this$props$__contain3.components));
return engine.createElement(engine.getNotFoundComponent(), {
componentName: schema.componentName,
componentId: schema.id,
enableStrictNotFoundMode: engine.props.enableStrictNotFoundMode,
ref: function ref(_ref3) {
var _engine$props2;
_ref3 && ((_engine$props2 = engine.props) === null || _engine$props2 === void 0 ? void 0 : _engine$props2.onCompGetRef(schema, _ref3));
}
}, _this.__getSchemaChildrenVirtualDom(schema, scope, Comp));
}
if (schema.loop != null) {
var loop = _this.__parseData(schema.loop, scope);
if (Array.isArray(loop) && loop.length === 0) return null;
var useLoop = isUseLoop(loop, _this.__designModeIsDesign);
if (useLoop) {
return _this.__createLoopVirtualDom(_extends({}, schema, {
loop: loop
}), scope, parentInfo, idx);
}
}
var condition = schema.condition == null ? true : _this.__parseData(schema.condition, scope);
// DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册
var displayInHook = _this.__designModeIsDesign;
if (!condition && !displayInHook) {
return null;
}
var scopeKey = '';
// 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
if (Comp.generateScope) {
var _schema$props3;
var _key = _this.__parseExpression((_schema$props3 = schema.props) === null || _schema$props3 === void 0 ? void 0 : _schema$props3.key, scope);
if (_key) {
// 如果组件自己设置key则使用组件自己的key
scopeKey = _key;
} else if (!schema.__ctx) {
// 在生产环境schema没有__ctx上下文，需要手动生成一个lceKey
schema.__ctx = {
lceKey: "lce" + ++scopeIdx
};
scopeKey = schema.__ctx.lceKey;
} else {
// 需要判断循环的情况
scopeKey = schema.__ctx.lceKey + (idx !== undefined ? "_" + idx : '');
}
if (!_this.__compScopes[scopeKey]) {
_this.__compScopes[scopeKey] = Comp.generateScope(_this, schema);
}
}
// 如果组件有设置scope，需要为组件生成一个新的scope上下文
if (scopeKey && _this.__compScopes[scopeKey]) {
var compSelf = _extends({}, _this.__compScopes[scopeKey]);
compSelf.__proto__ = scope;
scope = compSelf;
}
if ((_engine$props3 = engine.props) !== null && _engine$props3 !== void 0 && _engine$props3.designMode) {
otherProps.__designMode = engine.props.designMode;
}
if (_this.__designModeIsDesign) {
otherProps.__tag = Math.random();
}
var componentInfo = {};
var props = _this.__getComponentProps(schema, scope, Comp, _extends({}, componentInfo, {
props: transformArrayToMap(componentInfo.props, 'name')
})) || {};
_this.__componentHOCs.forEach(function (ComponentConstruct) {
Comp = ComponentConstruct(Comp, {
schema: schema,
componentInfo: componentInfo,
baseRenderer: _this,
scope: scope
});
});
otherProps.ref = function (ref) {
var _engine$props4;
_this.$(props.fieldId || props.ref, ref); // 收集ref
var refProps = props.ref;
if (refProps && typeof refProps === 'string') {
_this[refProps] = ref;
}
ref && ((_engine$props4 = engine.props) === null || _engine$props4 === void 0 ? void 0 : _engine$props4.onCompGetRef(schema, ref));
};
// scope需要传入到组件上
if (scopeKey && _this.__compScopes[scopeKey]) {
props.__scope = _this.__compScopes[scopeKey];
}
if ((_schema = schema) !== null && _schema !== void 0 && (_schema$__ctx = _schema.__ctx) !== null && _schema$__ctx !== void 0 && _schema$__ctx.lceKey) {
if (!isFileSchema(schema)) {
var _engine$props5;
(_engine$props5 = engine.props) === null || _engine$props5 === void 0 ? void 0 : _engine$props5.onCompGetCtx(schema, scope);
}
props.key = props.key || schema.__ctx.lceKey + "_" + (schema.__ctx.idx || 0) + "_" + (idx !== undefined ? idx : '');
} else if ((typeof idx === 'number' || typeof idx === 'string') && !props.key) {
// 仅当循环场景走这里
props.key = idx;
}
props.__id = schema.id;
if (!props.key) {
props.key = props.__id;
}
var child = _this.__getSchemaChildrenVirtualDom(schema, scope, Comp, condition);
var renderComp = function renderComp(innerProps) {
return engine.createElement(Comp, innerProps, child);
};
// 设计模式下的特殊处理
if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
// 对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
if (OVERLAY_LIST.includes(schema.componentName)) {
var ref = otherProps.ref,
overlayProps = _objectWithoutPropertiesLoose(otherProps, _excluded);
return createElement(Div, {
ref: ref,
__designMode: engine.props.designMode
}, renderComp(_extends({}, props, overlayProps)));
}
// 虚拟dom显示
if (componentInfo !== null && componentInfo !== void 0 && componentInfo.parentRule) {
var parentList = componentInfo.parentRule.split(',');
var _parentInfo$schema = parentInfo.schema,
parentSchema = _parentInfo$schema === void 0 ? {
componentName: ''
} : _parentInfo$schema,
parentComp = parentInfo.Comp;
if (!parentList.includes(parentSchema.componentName) || parentComp !== components[parentSchema.componentName]) {
props.__componentName = schema.componentName;
Comp = VisualDom;
} else {
// 若虚拟dom在正常的渲染上下文中，就不显示设计模式了
props.__disableDesignMode = true;
}
}
}
return renderComp(_extends({}, props, otherProps, {
__inner__: {
hidden: schema.hidden,
condition: condition
}
}));
} catch (e) {
return engine.createElement(engine.getFaultComponent(), {
error: e,
schema: schema,
self: scope,
parentInfo: parentInfo,
idx: idx
});
}
};
_this.__getSchemaChildrenVirtualDom = function (schema, scope, Comp, condition) {
if (condition === void 0) {
condition = true;
}
var children = condition ? getSchemaChildren(schema) : null;
// @todo 补完这里的 Element 定义 @承虎
var result = [];
if (children) {
if (!Array.isArray(children)) {
children = [children];
}
children.forEach(function (child) {
var childVirtualDom = _this.__createVirtualDom(isJSExpression(child) ? _this.__parseExpression(child, scope) : child, scope, {
schema: schema,
Comp: Comp
});
result.push(childVirtualDom);
});
}
if (result && result.length > 0) {
return result;
}
return null;
};
_this.__getComponentProps = function (schema, scope, Comp, componentInfo) {
if (!schema) {
return {};
}
return _this.__parseProps(schema === null || schema === void 0 ? void 0 : schema.props, scope, '', {
schema: schema,
Comp: Comp,
componentInfo: _extends({}, componentInfo || {}, {
props: transformArrayToMap((componentInfo || {}).props, 'name')
})
}) || {};
};
_this.__createLoopVirtualDom = function (schema, scope, parentInfo, idx) {
if (isFileSchema(schema)) {
logger.warn('file type not support Loop');
return null;
}
if (!Array.isArray(schema.loop)) {
return null;
}
var itemArg = schema.loopArgs && schema.loopArgs[0] || DEFAULT_LOOP_ARG_ITEM;
var indexArg = schema.loopArgs && schema.loopArgs[1] || DEFAULT_LOOP_ARG_INDEX;
var loop = schema.loop;
return loop.map(function (item, i) {
var _loopSelf, _schema$props4, _schema$props5;
var loopSelf = (_loopSelf = {}, _loopSelf[itemArg] = item, _loopSelf[indexArg] = i, _loopSelf);
loopSelf.__proto__ = scope;
return _this.__createVirtualDom(_extends({}, schema, {
loop: undefined,
props: _extends({}, schema.props, {
// 循环下 key 不能为常量，这样会造成 key 值重复，渲染异常
key: isJSExpression((_schema$props4 = schema.props) === null || _schema$props4 === void 0 ? void 0 : _schema$props4.key) ? (_schema$props5 = schema.props) === null || _schema$props5 === void 0 ? void 0 : _schema$props5.key : null
})
}), loopSelf, parentInfo, idx ? idx + "_" + i : i);
});
};
_this.__parseProps = function (originalProps, scope, path, info) {
var _propInfo$extra;
var props = originalProps;
var schema = info.schema,
Comp = info.Comp,
_info$componentInfo = info.componentInfo,
componentInfo = _info$componentInfo === void 0 ? {} : _info$componentInfo;
var propInfo = getValue(componentInfo.props, path);
// FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
var propType = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$extra = propInfo.extra) === null || _propInfo$extra === void 0 ? void 0 : _propInfo$extra.propType;
var checkProps = function checkProps(value) {
if (!propType) {
return value;
}
return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
};
var parseReactNode = function parseReactNode(data, params) {
if (isEmpty(params)) {
var virtualDom = _this.__createVirtualDom(data, scope, {
schema: schema,
Comp: Comp
});
return checkProps(virtualDom);
}
return checkProps(function () {
for (var _len = arguments.length, argValues = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
argValues[_key2] = arguments[_key2];
}
var args = {};
if (Array.isArray(params) && params.length) {
params.forEach(function (item, idx) {
if (typeof item === 'string') {
args[item] = argValues[idx];
} else if (item && typeof item === 'object') {
args[item.name] = argValues[idx];
}
});
}
args.__proto__ = scope;
return scope.__createVirtualDom(data, args, {
schema: schema,
Comp: Comp
});
});
};
if (isJSExpression(props)) {
props = _this.__parseExpression(props, scope);
// 只有当变量解析出来为模型结构的时候才会继续解析
if (!isSchema(props) && !isJSSlot(props)) {
return checkProps(props);
}
}
var handleI18nData = function handleI18nData(innerProps) {
return innerProps[innerProps.use || _this.getLocale && _this.getLocale() || 'zh-CN'];
};
// @LEGACY 兼容老平台设计态 i18n 数据
if (isI18nData(props)) {
var i18nProp = handleI18nData(props);
if (i18nProp) {
props = i18nProp;
} else {
return parseI18n(props, scope);
}
}
// @LEGACY 兼容老平台设计态的变量绑定
if (isVariable(props)) {
props = props.value;
if (isI18nData(props)) {
props = handleI18nData(props);
}
}
if (isJSFunction(props)) {
props = transformStringToFunction(props.value);
}
if (isJSSlot(props)) {
var _props3 = props,
params = _props3.params,
value = _props3.value;
if (!isSchema(value) || isEmpty(value)) {
return undefined;
}
return parseReactNode(value, params);
}
// 兼容通过componentInfo判断的情况
if (isSchema(props)) {
var _propInfo$props, _propInfo$props2, _propInfo$props2$type, _propInfo$props3, _propInfo$props3$reac;
var isReactNodeFunction = !!((propInfo === null || propInfo === void 0 ? void 0 : propInfo.type) === 'ReactNode' && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props = propInfo.props) === null || _propInfo$props === void 0 ? void 0 : _propInfo$props.type) === 'function');
var isMixinReactNodeFunction = !!((propInfo === null || propInfo === void 0 ? void 0 : propInfo.type) === 'Mixin' && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props2 = propInfo.props) === null || _propInfo$props2 === void 0 ? void 0 : (_propInfo$props2$type = _propInfo$props2.types) === null || _propInfo$props2$type === void 0 ? void 0 : _propInfo$props2$type.indexOf('ReactNode')) > -1 && (propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props3 = propInfo.props) === null || _propInfo$props3 === void 0 ? void 0 : (_propInfo$props3$reac = _propInfo$props3.reactNodeProps) === null || _propInfo$props3$reac === void 0 ? void 0 : _propInfo$props3$reac.type) === 'function');
var _params = null;
if (isReactNodeFunction) {
var _propInfo$props4;
_params = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props4 = propInfo.props) === null || _propInfo$props4 === void 0 ? void 0 : _propInfo$props4.params;
} else if (isMixinReactNodeFunction) {
var _propInfo$props5, _propInfo$props5$reac;
_params = propInfo === null || propInfo === void 0 ? void 0 : (_propInfo$props5 = propInfo.props) === null || _propInfo$props5 === void 0 ? void 0 : (_propInfo$props5$reac = _propInfo$props5.reactNodeProps) === null || _propInfo$props5$reac === void 0 ? void 0 : _propInfo$props5$reac.params;
}
return parseReactNode(props, _params);
}
if (Array.isArray(props)) {
return checkProps(props.map(function (item, idx) {
return _this.__parseProps(item, scope, path ? path + "." + idx : "" + idx, info);
}));
}
if (typeof props === 'function') {
return checkProps(props.bind(scope));
}
if (props && typeof props === 'object') {
if (props.$$typeof) {
return checkProps(props);
}
var res = {};
forEach(props, function (val, key) {
if (key.startsWith('__')) {
res[key] = val;
return;
}
res[key] = _this.__parseProps(val, scope, path ? path + "." + key : key, info);
});
return checkProps(res);
}
return checkProps(props);
};
_this.__debug = function () {
logger.debug.apply(logger, arguments);
};
_this.__renderContextProvider = function (customProps, children) {
return createElement(AppContext.Provider, {
value: _extends({}, _this.context, {
blockContext: _this
}, customProps || {}),
children: children || _this.__createDom()
});
};
_this.__renderContextConsumer = function (children) {
return createElement(AppContext.Consumer, {}, children);
};
_this.__checkSchema = function (schema, originalExtraComponents) {
var _schema$componentName;
if (originalExtraComponents === void 0) {
originalExtraComponents = [];
}
var extraComponents = originalExtraComponents;
if (typeof extraComponents === 'string') {
extraComponents = [extraComponents];
}
var builtin = capitalizeFirstLetter(_this.__namespace);
var componentNames = [builtin].concat(extraComponents);
return !isSchema(schema) || !componentNames.includes((_schema$componentName = schema === null || schema === void 0 ? void 0 : schema.componentName) !== null && _schema$componentName !== void 0 ? _schema$componentName : '');
};
_this.context = context;
_this.__parseExpression = function (str, self) {
return parseExpression({
str: str,
self: self,
thisRequired: _props2 === null || _props2 === void 0 ? void 0 : _props2.thisRequiredInJSE,
logScope: _props2.componentName
});
};
_this.__beforeInit(_props2);
_this.__init(_props2);
_this.__afterInit(_props2);
_this.__debug("constructor - " + (_props2 === null || _props2 === void 0 ? void 0 : (_props2$__schema = _props2.__schema) === null || _props2$__schema === void 0 ? void 0 : _props2$__schema.fileName));
return _this;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_inheritsLoose(BaseRenderer, _Component);
var _proto = BaseRenderer.prototype;
_proto.__beforeInit = function __beforeInit(_props) {};
_proto.__init = function __init(props) {
this.__compScopes = {};
this.__instanceMap = {};
this.__bindCustomMethods(props);
this.__initI18nAPIs();
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
;
_proto.__afterInit = function __afterInit(_props) {};
BaseRenderer.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var result = executeLifeCycleMethod(this, props === null || props === void 0 ? void 0 : props.__schema, 'getDerivedStateFromProps', [props, state], props.thisRequiredInJSE);
return result === undefined ? null : result;
};
_proto.getSnapshotBeforeUpdate = /*#__PURE__*/function () {
var _getSnapshotBeforeUpdate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _this$props4, _this$props4$__schema;
var _len2,
args,
_key3,
_args = arguments;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
for (_len2 = _args.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
args[_key3] = _args[_key3];
}
this.__executeLifeCycleMethod('getSnapshotBeforeUpdate', args);
this.__debug("getSnapshotBeforeUpdate - " + ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$__schema = _this$props4.__schema) === null || _this$props4$__schema === void 0 ? void 0 : _this$props4$__schema.fileName));
case 3:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function getSnapshotBeforeUpdate() {
return _getSnapshotBeforeUpdate.apply(this, arguments);
}
return getSnapshotBeforeUpdate;
}();
_proto.componentDidMount = /*#__PURE__*/function () {
var _componentDidMount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _this$props5, _this$props5$__schema;
var _len3,
args,
_key4,
_args2 = arguments;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
this.reloadDataSource();
for (_len3 = _args2.length, args = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
args[_key4] = _args2[_key4];
}
this.__executeLifeCycleMethod('componentDidMount', args);
this.__debug("componentDidMount - " + ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : (_this$props5$__schema = _this$props5.__schema) === null || _this$props5$__schema === void 0 ? void 0 : _this$props5$__schema.fileName));
case 4:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}();
_proto.componentDidUpdate = /*#__PURE__*/function () {
var _componentDidUpdate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _len4,
args,
_key5,
_args3 = arguments;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
for (_len4 = _args3.length, args = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) {
args[_key5] = _args3[_key5];
}
this.__executeLifeCycleMethod('componentDidUpdate', args);
this.__debug("componentDidUpdate - " + this.props.__schema.fileName);
case 3:
case "end":
return _context3.stop();
}
}, _callee3, this);
}));
function componentDidUpdate() {
return _componentDidUpdate.apply(this, arguments);
}
return componentDidUpdate;
}();
_proto.componentWillUnmount = /*#__PURE__*/function () {
var _componentWillUnmount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
var _this$props6, _this$props6$__schema;
var _len5,
args,
_key6,
_args4 = arguments;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
for (_len5 = _args4.length, args = new Array(_len5), _key6 = 0; _key6 < _len5; _key6++) {
args[_key6] = _args4[_key6];
}
this.__executeLifeCycleMethod('componentWillUnmount', args);
this.__debug("componentWillUnmount - " + ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$__schema = _this$props6.__schema) === null || _this$props6$__schema === void 0 ? void 0 : _this$props6$__schema.fileName));
case 3:
case "end":
return _context4.stop();
}
}, _callee4, this);
}));
function componentWillUnmount() {
return _componentWillUnmount.apply(this, arguments);
}
return componentWillUnmount;
}();
_proto.componentDidCatch = /*#__PURE__*/function () {
var _componentDidCatch = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
var _len6,
args,
_key7,
_args5 = arguments;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
for (_len6 = _args5.length, args = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
args[_key7] = _args5[_key7];
}
this.__executeLifeCycleMethod('componentDidCatch', args);
logger.warn(args);
case 3:
case "end":
return _context5.stop();
}
}, _callee5, this);
}));
function componentDidCatch() {
return _componentDidCatch.apply(this, arguments);
}
return componentDidCatch;
}();
_proto.shouldComponentUpdate = function shouldComponentUpdate() {
var _this$props$getSchema, _this$props7, _this$props$__contain4;
if ((_this$props$getSchema = (_this$props7 = this.props).getSchemaChangedSymbol) !== null && _this$props$getSchema !== void 0 && _this$props$getSchema.call(_this$props7) && (_this$props$__contain4 = this.props.__container) !== null && _this$props$__contain4 !== void 0 && _this$props$__contain4.rerender) {
var _this$props$__contain5;
(_this$props$__contain5 = this.props.__container) === null || _this$props$__contain5 === void 0 ? void 0 : _this$props$__contain5.rerender();
return false;
}
return true;
};
_proto.forceUpdate = function forceUpdate() {
if (this.shouldComponentUpdate()) {
_Component.prototype.forceUpdate.call(this);
}
};
_proto.$ = function $(filedId, instance) {
this.__instanceMap = this.__instanceMap || {};
if (!filedId || typeof filedId !== 'string') {
return this.__instanceMap;
}
if (instance) {
this.__instanceMap[filedId] = instance;
}
return this.__instanceMap[filedId];
};
_proto.__getHOCWrappedComponent = function __getHOCWrappedComponent(OriginalComp, schema, scope) {
var _this2 = this;
var Comp = OriginalComp;
this.__componentHOCs.forEach(function (ComponentConstruct) {
Comp = ComponentConstruct(Comp || Div, {
schema: schema,
componentInfo: {},
baseRenderer: _this2,
scope: scope
});
});
return Comp;
};
_proto.__renderComp = function __renderComp(OriginalComp, ctxProps) {
var Comp = OriginalComp;
var _this$props8 = this.props,
__schema = _this$props8.__schema,
__ctx = _this$props8.__ctx;
var scope = {};
scope.__proto__ = __ctx || this;
Comp = this.__getHOCWrappedComponent(Comp, __schema, scope);
var data = this.__parseProps(__schema === null || __schema === void 0 ? void 0 : __schema.props, scope, '', {
schema: __schema,
Comp: Comp,
componentInfo: {}
});
var className = data.className;
var otherProps = {};
var _ref4 = this.context || {},
engine = _ref4.engine;
if (!engine) {
return null;
}
if (this.__designModeIsDesign) {
otherProps.__tag = Math.random();
}
var child = engine.createElement(Comp, _extends({}, data, this.props, {
ref: this.__getRef,
className: classnames(getFileCssName(__schema === null || __schema === void 0 ? void 0 : __schema.fileName), className, this.props.className),
__id: __schema === null || __schema === void 0 ? void 0 : __schema.id
}, otherProps), this.__createDom());
return this.__renderContextProvider(ctxProps, child);
};
_proto.__renderContent = function __renderContent(children) {
var __schema = this.props.__schema;
var parsedProps = this.__parseData(__schema.props);
var className = classnames("lce-" + this.__namespace, getFileCssName(__schema.fileName), parsedProps.className, this.props.className);
var style = _extends({}, parsedProps.style || {}, typeof this.props.style === 'object' ? this.props.style : {});
var id = this.props.id || parsedProps.id;
return createElement('div', {
ref: this.__getRef,
className: className,
id: id,
style: style
}, children);
};
_proto.render = function render() {
return null;
};
return _createClass(BaseRenderer, [{
key: "__componentHOCs",
get:
/**
* get Component HOCs
*
* @readonly
* @type {IComponentConstruct[]}
*/
function get() {
if (this.__designModeIsDesign) {
return [leafWrapper, compWrapper];
}
return [compWrapper];
}
}, {
key: "__designModeIsDesign",
get: function get() {
var _engine$props6;
var _ref5 = this.context || {},
engine = _ref5.engine;
return (engine === null || engine === void 0 ? void 0 : (_engine$props6 = engine.props) === null || _engine$props6 === void 0 ? void 0 : _engine$props6.designMode) === 'design';
}
}, {
key: "appHelper",
get: function get() {
return this.props.__appHelper;
}
}, {
key: "requestHandlersMap",
get: function get() {
var _this$appHelper2;
return (_this$appHelper2 = this.appHelper) === null || _this$appHelper2 === void 0 ? void 0 : _this$appHelper2.requestHandlersMap;
}
}, {
key: "utils",
get: function get() {
var _this$appHelper3;
return (_this$appHelper3 = this.appHelper) === null || _this$appHelper3 === void 0 ? void 0 : _this$appHelper3.utils;
}
}, {
key: "constants",
get: function get() {
var _this$appHelper4;
return (_this$appHelper4 = this.appHelper) === null || _this$appHelper4 === void 0 ? void 0 : _this$appHelper4.constants;
}
}, {
key: "history",
get: function get() {
var _this$appHelper5;
return (_this$appHelper5 = this.appHelper) === null || _this$appHelper5 === void 0 ? void 0 : _this$appHelper5.history;
}
}, {
key: "location",
get: function get() {
var _this$appHelper6;
return (_this$appHelper6 = this.appHelper) === null || _this$appHelper6 === void 0 ? void 0 : _this$appHelper6.location;
}
}, {
key: "match",
get: function get() {
var _this$appHelper7;
return (_this$appHelper7 = this.appHelper) === null || _this$appHelper7 === void 0 ? void 0 : _this$appHelper7.match;
}
}]);
}(Component), _BaseRenderer.displayName = 'BaseRenderer', _BaseRenderer.defaultProps = {
__schema: {}
}, _BaseRenderer.contextType = AppContext, _BaseRenderer;
}