525 lines
14 KiB
TypeScript
525 lines
14 KiB
TypeScript
import difference from 'lodash/difference';
|
||
import omit from 'lodash/omit';
|
||
import React from 'react';
|
||
import LazyComponent from './components/LazyComponent';
|
||
import {
|
||
filterSchema,
|
||
loadRenderer,
|
||
RendererConfig,
|
||
RendererEnv,
|
||
RendererProps,
|
||
resolveRenderer
|
||
} from './factory';
|
||
import {asFormItem} from './renderers/Item';
|
||
import {IScopedContext, ScopedContext} from './Scoped';
|
||
import {Schema, SchemaNode} from './types';
|
||
import {DebugWrapper} from './utils/debug';
|
||
import getExprProperties from './utils/filter-schema';
|
||
import {anyChanged, chainEvents, autobind} from './utils/helper';
|
||
import {SimpleMap} from './utils/SimpleMap';
|
||
import {bindEvent, dispatchEvent, RendererEvent} from './utils/renderer-event';
|
||
import {isAlive} from 'mobx-state-tree';
|
||
import {reaction} from 'mobx';
|
||
import {resolveVariableAndFilter} from './utils/tpl-builtin';
|
||
import {buildStyle} from './utils/style';
|
||
import {StatusScopedProps} from './StatusScoped';
|
||
import {evalExpression, filter} from './utils/tpl';
|
||
|
||
interface SchemaRendererProps
|
||
extends Partial<Omit<RendererProps, 'statusStore'>>,
|
||
StatusScopedProps {
|
||
schema: Schema;
|
||
$path: string;
|
||
env: RendererEnv;
|
||
}
|
||
|
||
export const RENDERER_TRANSMISSION_OMIT_PROPS = [
|
||
'type',
|
||
'name',
|
||
'$ref',
|
||
'className',
|
||
'style',
|
||
'data',
|
||
'children',
|
||
'ref',
|
||
'visible',
|
||
'visibleOn',
|
||
'hidden',
|
||
'hiddenOn',
|
||
'disabled',
|
||
'disabledOn',
|
||
'static',
|
||
'staticOn',
|
||
'component',
|
||
'detectField',
|
||
'defaultValue',
|
||
'defaultData',
|
||
'required',
|
||
'requiredOn',
|
||
'syncSuperStore',
|
||
'mode',
|
||
'body',
|
||
'id',
|
||
'inputOnly',
|
||
'label',
|
||
'renderLabel',
|
||
'trackExpression',
|
||
'editorSetting',
|
||
'updatePristineAfterStoreDataReInit'
|
||
];
|
||
|
||
const componentCache: SimpleMap = new SimpleMap();
|
||
|
||
export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
|
||
static displayName: string = 'Renderer';
|
||
static contextType = ScopedContext;
|
||
|
||
rendererKey = '';
|
||
renderer: RendererConfig | null;
|
||
ref: any;
|
||
cRef: any;
|
||
|
||
schema: any;
|
||
path: string;
|
||
|
||
reaction: any;
|
||
unbindEvent: (() => void) | undefined = undefined;
|
||
isStatic: any = undefined;
|
||
|
||
constructor(props: SchemaRendererProps) {
|
||
super(props);
|
||
this.refFn = this.refFn.bind(this);
|
||
this.renderChild = this.renderChild.bind(this);
|
||
this.reRender = this.reRender.bind(this);
|
||
this.resolveRenderer(this.props);
|
||
this.dispatchEvent = this.dispatchEvent.bind(this);
|
||
|
||
// 监听statusStore更新
|
||
this.reaction = reaction(
|
||
() => {
|
||
const id = filter(props.schema.id, props.data);
|
||
const name = filter(props.schema.name, props.data);
|
||
return `${
|
||
props.statusStore.visibleState[id] ??
|
||
props.statusStore.visibleState[name]
|
||
}${
|
||
props.statusStore.disableState[id] ??
|
||
props.statusStore.disableState[name]
|
||
}${
|
||
props.statusStore.staticState[id] ??
|
||
props.statusStore.staticState[name]
|
||
}`;
|
||
},
|
||
() => this.forceUpdate()
|
||
);
|
||
}
|
||
|
||
componentDidMount() {
|
||
// 这里无法区分监听的是不是广播，所以又bind一下，主要是为了绑广播
|
||
this.unbindEvent = bindEvent(this.cRef);
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.reaction?.();
|
||
this.unbindEvent?.();
|
||
}
|
||
|
||
// 限制：只有 schema 除外的 props 变化，或者 schema 里面的某个成员值发生变化才更新。
|
||
shouldComponentUpdate(nextProps: SchemaRendererProps) {
|
||
const props = this.props;
|
||
const list: Array<string> = difference(Object.keys(nextProps), [
|
||
'schema',
|
||
'scope'
|
||
]);
|
||
|
||
if (
|
||
difference(Object.keys(props), ['schema', 'scope']).length !==
|
||
list.length ||
|
||
anyChanged(list, this.props, nextProps)
|
||
) {
|
||
return true;
|
||
} else {
|
||
const list: Array<string> = Object.keys(nextProps.schema);
|
||
|
||
if (
|
||
Object.keys(props.schema).length !== list.length ||
|
||
anyChanged(list, props.schema, nextProps.schema)
|
||
) {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
resolveRenderer(props: SchemaRendererProps, force = false): any {
|
||
let schema = props.schema;
|
||
let path = props.$path;
|
||
|
||
if (schema && schema.$ref) {
|
||
schema = {
|
||
...props.resolveDefinitions(schema.$ref),
|
||
...schema
|
||
};
|
||
|
||
path = path.replace(/(?!.*\/).*/, schema.type);
|
||
}
|
||
|
||
if (
|
||
schema?.type &&
|
||
(force ||
|
||
!this.renderer ||
|
||
this.rendererKey !== `${schema.type}-${schema.$$id}`)
|
||
) {
|
||
const rendererResolver = props.env.rendererResolver || resolveRenderer;
|
||
this.renderer = rendererResolver(path, schema, props);
|
||
this.rendererKey = `${schema.type}-${schema.$$id}`;
|
||
} else {
|
||
// 自定义组件如果在节点设置了 label name 什么的，就用 formItem 包一层
|
||
// 至少自动支持了 valdiations, label, description 等逻辑。
|
||
if (schema.children && !schema.component && schema.asFormItem) {
|
||
schema.component = PlaceholderComponent;
|
||
schema.renderChildren = schema.children;
|
||
delete schema.children;
|
||
}
|
||
|
||
if (
|
||
schema.component &&
|
||
!schema.component.wrapedAsFormItem &&
|
||
schema.asFormItem
|
||
) {
|
||
const cache = componentCache.get(schema.component);
|
||
|
||
if (cache) {
|
||
schema.component = cache;
|
||
} else {
|
||
const cache = asFormItem({
|
||
strictMode: false,
|
||
...schema.asFormItem
|
||
})(schema.component);
|
||
componentCache.set(schema.component, cache);
|
||
cache.wrapedAsFormItem = true;
|
||
schema.component = cache;
|
||
}
|
||
}
|
||
}
|
||
|
||
return {path, schema};
|
||
}
|
||
|
||
getWrappedInstance() {
|
||
return this.cRef;
|
||
}
|
||
|
||
refFn(ref: any) {
|
||
this.ref = ref;
|
||
}
|
||
|
||
@autobind
|
||
childRef(ref: any) {
|
||
while (ref && ref.getWrappedInstance) {
|
||
ref = ref.getWrappedInstance();
|
||
}
|
||
|
||
this.cRef = ref;
|
||
}
|
||
|
||
async dispatchEvent(
|
||
e: React.MouseEvent<any>,
|
||
data: any,
|
||
renderer?: React.Component<RendererProps> // for didmount
|
||
): Promise<RendererEvent<any> | void> {
|
||
return await dispatchEvent(
|
||
e,
|
||
this.cRef || renderer,
|
||
this.context as IScopedContext,
|
||
data
|
||
);
|
||
}
|
||
|
||
renderChild(
|
||
region: string,
|
||
node?: SchemaNode,
|
||
subProps: {
|
||
data?: object;
|
||
[propName: string]: any;
|
||
} = {}
|
||
) {
|
||
let {schema: _, $path: __, env, render, ...rest} = this.props;
|
||
let {path: $path} = this.resolveRenderer(this.props);
|
||
|
||
const omitList = RENDERER_TRANSMISSION_OMIT_PROPS.concat();
|
||
if (this.renderer) {
|
||
const Component = this.renderer.component;
|
||
Component.propsList &&
|
||
omitList.push.apply(omitList, Component.propsList as Array<string>);
|
||
}
|
||
|
||
return render!(`${$path}${region ? `/${region}` : ''}`, node || '', {
|
||
...omit(rest, omitList),
|
||
defaultStatic:
|
||
(this.renderer?.type &&
|
||
['drawer', 'dialog'].includes(this.renderer.type)
|
||
? false
|
||
: undefined) ??
|
||
this.isStatic ??
|
||
(_.staticOn
|
||
? evalExpression(_.staticOn, rest.data)
|
||
: _.static ?? rest.defaultStatic),
|
||
...subProps,
|
||
data: subProps.data || rest.data,
|
||
env: env
|
||
});
|
||
}
|
||
|
||
reRender() {
|
||
this.resolveRenderer(this.props, true);
|
||
this.forceUpdate();
|
||
}
|
||
|
||
render(): JSX.Element | null {
|
||
let {
|
||
$path: _,
|
||
schema: __,
|
||
rootStore,
|
||
statusStore,
|
||
render,
|
||
...rest
|
||
} = this.props;
|
||
|
||
if (__ == null) {
|
||
return null;
|
||
}
|
||
|
||
let {path: $path, schema} = this.resolveRenderer(this.props);
|
||
const theme = this.props.env.theme;
|
||
|
||
if (Array.isArray(schema)) {
|
||
return render!($path, schema as any, rest) as JSX.Element;
|
||
}
|
||
|
||
const detectData =
|
||
schema &&
|
||
(schema.detectField === '&' ? rest : rest[schema.detectField || 'data']);
|
||
let exprProps: any = detectData
|
||
? getExprProperties(schema, detectData, undefined, rest)
|
||
: {};
|
||
|
||
// 控制显隐
|
||
const id = filter(schema.id, rest.data);
|
||
const name = filter(schema.name, rest.data);
|
||
const visible = isAlive(statusStore)
|
||
? statusStore.visibleState[id] ?? statusStore.visibleState[name]
|
||
: undefined;
|
||
const disable = isAlive(statusStore)
|
||
? statusStore.disableState[id] ?? statusStore.disableState[name]
|
||
: undefined;
|
||
const isStatic = isAlive(statusStore)
|
||
? statusStore.staticState[id] ?? statusStore.staticState[name]
|
||
: undefined;
|
||
this.isStatic = isStatic;
|
||
|
||
if (
|
||
visible === false ||
|
||
(visible !== true &&
|
||
exprProps &&
|
||
(exprProps.hidden ||
|
||
exprProps.visible === false ||
|
||
schema.hidden ||
|
||
schema.visible === false ||
|
||
rest.hidden ||
|
||
rest.visible === false))
|
||
) {
|
||
(rest as any).invisible = true;
|
||
}
|
||
|
||
if (schema.children) {
|
||
return rest.invisible
|
||
? null
|
||
: React.isValidElement(schema.children)
|
||
? schema.children
|
||
: (schema.children as Function)({
|
||
...rest,
|
||
...exprProps,
|
||
$path: $path,
|
||
$schema: schema,
|
||
render: this.renderChild,
|
||
forwardedRef: this.refFn,
|
||
rootStore,
|
||
statusStore,
|
||
dispatchEvent: this.dispatchEvent
|
||
});
|
||
} else if (typeof schema.component === 'function') {
|
||
const isSFC = !(schema.component.prototype instanceof React.Component);
|
||
const {
|
||
data: defaultData,
|
||
value: defaultValue, // render时的value改放defaultValue中
|
||
activeKey: defaultActiveKey,
|
||
key: propKey,
|
||
...restSchema
|
||
} = schema;
|
||
return rest.invisible
|
||
? null
|
||
: React.createElement(schema.component as any, {
|
||
...rest,
|
||
...restSchema,
|
||
...exprProps,
|
||
// value: defaultValue, // 备注: 此处并没有将value传递给渲染器
|
||
defaultData,
|
||
defaultValue,
|
||
defaultActiveKey,
|
||
propKey,
|
||
$path: $path,
|
||
$schema: schema,
|
||
ref: isSFC ? undefined : this.refFn,
|
||
forwardedRef: isSFC ? this.refFn : undefined,
|
||
render: this.renderChild,
|
||
rootStore,
|
||
statusStore,
|
||
dispatchEvent: this.dispatchEvent
|
||
});
|
||
} else if (Object.keys(schema).length === 0) {
|
||
return null;
|
||
} else if (!this.renderer) {
|
||
return rest.invisible ? null : (
|
||
<LazyComponent
|
||
{...rest}
|
||
{...exprProps}
|
||
getComponent={async () => {
|
||
const result = await rest.env.loadRenderer(
|
||
schema,
|
||
$path,
|
||
this.reRender
|
||
);
|
||
if (result && typeof result === 'function') {
|
||
return result;
|
||
} else if (result && React.isValidElement(result)) {
|
||
return () => result;
|
||
}
|
||
|
||
this.reRender();
|
||
return () => loadRenderer(schema, $path);
|
||
}}
|
||
$path={$path}
|
||
$schema={schema}
|
||
retry={this.reRender}
|
||
rootStore={rootStore}
|
||
statusStore={statusStore}
|
||
dispatchEvent={this.dispatchEvent}
|
||
/>
|
||
);
|
||
}
|
||
|
||
const renderer = this.renderer as RendererConfig;
|
||
schema = filterSchema(schema, renderer, rest);
|
||
const {
|
||
data: defaultData,
|
||
value: defaultValue,
|
||
key: propKey,
|
||
activeKey: defaultActiveKey,
|
||
...restSchema
|
||
} = schema;
|
||
const Component = renderer.component;
|
||
|
||
// 原来表单项的 visible: false 和 hidden: true 表单项的值和验证是有效的
|
||
// 而 visibleOn 和 hiddenOn 是无效的，
|
||
// 这个本来就是个bug，但是已经被广泛使用了
|
||
// 我只能继续实现这个bug了
|
||
if (
|
||
rest.invisible &&
|
||
(exprProps.hidden ||
|
||
exprProps.visible === false ||
|
||
!renderer.isFormItem ||
|
||
(schema.visible !== false && !schema.hidden))
|
||
) {
|
||
return null;
|
||
}
|
||
|
||
// withStore 里面会处理，而且会实时处理
|
||
// 这里处理反而导致了问题
|
||
if (renderer.storeType) {
|
||
exprProps = {};
|
||
}
|
||
|
||
const isClassComponent = Component.prototype?.isReactComponent;
|
||
let props = {
|
||
...theme.getRendererConfig(renderer.name),
|
||
...restSchema,
|
||
...chainEvents(rest, restSchema),
|
||
...exprProps,
|
||
// value: defaultValue, // 备注: 此处并没有将value传递给渲染器
|
||
defaultData: restSchema.defaultData ?? defaultData,
|
||
defaultValue: restSchema.defaultValue ?? defaultValue,
|
||
defaultActiveKey: defaultActiveKey,
|
||
propKey: propKey,
|
||
$path: $path,
|
||
$schema: schema,
|
||
ref: this.refFn,
|
||
render: this.renderChild,
|
||
rootStore,
|
||
statusStore,
|
||
dispatchEvent: this.dispatchEvent,
|
||
mobileUI: schema.useMobileUI === false ? false : rest.mobileUI
|
||
};
|
||
|
||
// style 支持公式
|
||
if (schema.style) {
|
||
(props as any).style = buildStyle(schema.style, detectData);
|
||
}
|
||
|
||
if (disable !== undefined) {
|
||
(props as any).disabled = disable;
|
||
}
|
||
|
||
if (isStatic !== undefined) {
|
||
(props as any).static = isStatic;
|
||
}
|
||
|
||
// 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层
|
||
if (renderer.autoVar) {
|
||
for (const key of Object.keys(schema)) {
|
||
if (typeof props[key] === 'string') {
|
||
props[key] = resolveVariableAndFilter(
|
||
props[key],
|
||
props.data,
|
||
'| raw'
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
const component = isClassComponent ? (
|
||
<Component {...props} ref={this.childRef} />
|
||
) : (
|
||
<Component {...props} />
|
||
);
|
||
|
||
return this.props.env.enableAMISDebug ? (
|
||
<DebugWrapper renderer={renderer}>{component}</DebugWrapper>
|
||
) : (
|
||
component
|
||
);
|
||
}
|
||
}
|
||
|
||
class PlaceholderComponent extends React.Component {
|
||
childRef = React.createRef<any>();
|
||
|
||
getWrappedInstance() {
|
||
return this.childRef.current;
|
||
}
|
||
|
||
render() {
|
||
const {renderChildren, ...rest} = this.props as any;
|
||
|
||
if (typeof renderChildren === 'function') {
|
||
return renderChildren({
|
||
...rest,
|
||
ref: this.childRef
|
||
});
|
||
}
|
||
|
||
return null;
|
||
}
|
||
}
|