Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add dynamicStyle addon #3083

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: add dynamicStyle addon #3083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions packages/editor-skeleton/src/transducers/addon-combine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,18 @@ export default function (
eventsDefinition.push({
type: 'lifeCycleEvent',
title: '生命周期',
list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
list: supportedLifecycles.map((event: any) =>
typeof event === 'string' ? { name: event } : event,
),
});
}
if (supports.events) {
eventsDefinition.push({
type: 'events',
title: '事件',
list: (supports.events || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
list: (supports.events || []).map((event: any) =>
typeof event === 'string' ? { name: event } : event,
),
});
}
// 通用设置
Expand Down Expand Up @@ -192,6 +196,16 @@ export default function (
},
});
}
if (supports.dynamicStyle) {
stylesGroup.push({
name: 'dynamicStyle',
title: { type: 'i18n', 'zh-CN': '动态样式', 'en-US': 'dynamicStyle' },
setter: 'JsonSetter',
extraProps: {
display: 'block',
},
});
}
if (stylesGroup.length > 0) {
combined.push({
name: '#styles',
Expand Down Expand Up @@ -334,8 +348,10 @@ export default function (
},
tip: {
type: 'i18n',
'zh-CN': '搭配「条件渲染」或「循环渲染」时使用，和 react 组件中的 key 原理相同，点击查看帮助',
'en-US': 'Used with 「Conditional Rendering」or「Cycle Rendering」, the same principle as the key in the react component, click to view the help',
'zh-CN':
'搭配「条件渲染」或「循环渲染」时使用，和 react 组件中的 key 原理相同，点击查看帮助',
'en-US':
'Used with 「Conditional Rendering」or「Cycle Rendering」, the same principle as the key in the react component, click to view the help',
},
docUrl: 'https://www.yuque.com/lce/doc/qm75w3',
},
Expand Down
166 changes: 99 additions & 67 deletions packages/renderer-core/src/hoc/leaf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { INode, IPublicTypePropChangeOptions } from '@alilc/lowcode-designer';
import { GlobalEvent, IPublicEnumTransformStage, IPublicTypeNodeSchema, IPublicTypeEngineOptions } from '@alilc/lowcode-types';
import {
GlobalEvent,
IPublicEnumTransformStage,
IPublicTypeNodeSchema,
IPublicTypeEngineOptions,
} from '@alilc/lowcode-types';
import { isReactComponent, cloneEnumerableProperty } from '@alilc/lowcode-utils';
import { debounce } from '../utils/common';
import adapter from '../adapter';
Expand Down Expand Up @@ -40,7 +45,10 @@ export interface IComponentHoc {
hoc: IComponentConstruct;
}

export type IComponentConstruct = (Comp: types.IBaseRenderComponent, info: IComponentHocInfo) => types.IGeneralConstructor;
export type IComponentConstruct = (
Comp: types.IBaseRenderComponent,
info: IComponentHocInfo,
) => types.IGeneralConstructor;

interface IProps {
_leaf: INode | undefined;
Expand All @@ -66,7 +74,6 @@ enum RerenderType {

// 缓存 Leaf 层组件，防止重新渲染问题
class LeafCache {

/** 组件缓存 */
component = new Map();

Expand All @@ -82,24 +89,15 @@ class LeafCache {

ref = new Map();

constructor(public documentId: string, public device: string) {
}
constructor(public documentId: string, public device: string) {}
}

let cache: LeafCache;

/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
function initRerenderEvent({
schema,
__debug,
container,
getNode,
}: any) {
function initRerenderEvent({ schema, __debug, container, getNode }: any) {
const leaf = getNode?.(schema.id);
if (!leaf
|| cache.event.get(schema.id)?.clear
|| leaf === cache.event.get(schema.id)
) {
if (!leaf || cache.event.get(schema.id)?.clear || leaf === cache.event.get(schema.id)) {
return;
}
cache.event.get(schema.id)?.dispose.forEach((disposeFn: any) => disposeFn && disposeFn());
Expand All @@ -114,21 +112,27 @@ function initRerenderEvent({
if (!container.autoRepaintNode) {
return;
}
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
__debug(
`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`,
);
debounceRerender();
}),
leaf?.onChildrenChange?.(() => {
if (!container.autoRepaintNode) {
return;
}
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
__debug(
`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`,
);
debounceRerender();
}) as Function,
leaf?.onVisibleChange?.(() => {
if (!container.autoRepaintNode) {
return;
}
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
__debug(
`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`,
);
debounceRerender();
}),
],
Expand All @@ -148,12 +152,10 @@ function clearRerenderEvent(id: string): void {
}

// 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
export function leafWrapper(Comp: types.IBaseRenderComponent, {
schema,
baseRenderer,
componentInfo,
scope,
}: IComponentHocInfo) {
export function leafWrapper(
Comp: types.IBaseRenderComponent,
{ schema, baseRenderer, componentInfo, scope }: IComponentHocInfo,
) {
const {
__debug,
__getComponentProps: getProps,
Expand All @@ -171,13 +173,18 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
const runtime = adapter.getRuntime();
const { forwardRef, createElement } = runtime;
const Component = runtime.Component as types.IGeneralConstructor<
IComponentHocProps, IComponentHocState
IComponentHocProps,
IComponentHocState
>;

const componentCacheId = schema.id;

if (!cache || (curDocumentId && curDocumentId !== cache.documentId) || (curDevice && curDevice !== cache.device)) {
cache?.event.forEach(event => {
if (
!cache ||
(curDocumentId && curDocumentId !== cache.documentId) ||
(curDevice && curDevice !== cache.device)
) {
cache?.event.forEach((event) => {
event.dispose?.forEach((disposeFn: any) => disposeFn && disposeFn());
});
cache = new LeafCache(curDocumentId, curDevice);
Expand All @@ -194,7 +201,11 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
getNode,
});

if (curDocumentId && cache.component.has(componentCacheId) && (cache.component.get(componentCacheId).Comp === Comp)) {
if (
curDocumentId &&
cache.component.has(componentCacheId) &&
cache.component.get(componentCacheId).Comp === Comp
) {
return cache.component.get(componentCacheId).LeafWrapper;
}

Expand All @@ -209,7 +220,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {

static displayName = schema.componentName;

disposeFunctions: Array<((() => void) | Function)> = [];
disposeFunctions: Array<(() => void) | Function> = [];

__component_tag = 'leafWrapper';

Expand Down Expand Up @@ -244,7 +255,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
constructor(props: IProps, context: any) {
super(props, context);
// 监听以下事件，当变化时更新自己
__debug(`${schema.componentName}[${this.props.componentId}] leaf render in SimulatorRendererView`);
__debug(
`${schema.componentName}[${this.props.componentId}] leaf render in SimulatorRendererView`,
);
clearRerenderEvent(componentCacheId);
this.curEventLeaf = this.leaf;

Expand All @@ -266,7 +279,8 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
}
const endTime = Date.now();
const nodeCount = host?.designer?.currentDocument?.getNodeCount?.();
const componentName = this.recordInfo.node?.componentName || this.leaf?.componentName || 'UnknownComponent';
const componentName =
this.recordInfo.node?.componentName || this.leaf?.componentName || 'UnknownComponent';
editor?.eventBus.emit(GlobalEvent.Node.Rerender, {
componentName,
time: endTime - this.recordInfo.startTime,
Expand Down Expand Up @@ -297,10 +311,8 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
}

getDefaultState(nextProps: any) {
const {
hidden = false,
condition = true,
} = nextProps.__inner__ || this.leaf?.export?.(IPublicEnumTransformStage.Render) || {};
const { hidden = false, condition = true } =
nextProps.__inner__ || this.leaf?.export?.(IPublicEnumTransformStage.Render) || {};
return {
nodeChildren: null,
childrenInState: false,
Expand All @@ -317,6 +329,12 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
...state,
__tag: this.props.__tag,
});
let style = state.nodeProps.style ?? {};
const { dynamicStyle } = state.nodeProps;
if (typeof dynamicStyle === 'object') {
style = { ...style, ...dynamicStyle };
}
if (style && Object.keys(style).length) state.nodeProps.style = style;
super.setState(state);
}

Expand Down Expand Up @@ -348,7 +366,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
container?.rerender();
return;
}
__debug(`${this.leaf?.componentName}(${this.props.componentId}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`);
__debug(
`${this.leaf?.componentName}(${this.props.componentId}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`,
);
ref.makeUnitRender();
}

Expand Down Expand Up @@ -400,20 +420,14 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
this.curEventLeaf = _leaf;
}

const {
visible,
...resetState
} = this.getDefaultState(nextProps);
const { visible, ...resetState } = this.getDefaultState(nextProps);
this.setState(resetState);
}

/** 监听参数变化 */
initOnPropsChangeEvent(leaf = this.leaf): void {
const handlePropsChange = debounce((propChangeInfo: IPublicTypePropChangeOptions) => {
const {
key,
newValue = null,
} = propChangeInfo;
const { key, newValue = null } = propChangeInfo;
const node = leaf;

if (key === '___condition___') {
Expand All @@ -439,21 +453,36 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
this.beforeRender(RerenderType.PropsChanged);
const { state } = this;
const { nodeCacheProps } = state;
const nodeProps = getProps(node?.export?.(IPublicEnumTransformStage.Render) as IPublicTypeNodeSchema, scope, Comp, componentInfo);
if (key && !(key in nodeProps) && (key in this.props)) {
const nodeProps = getProps(
node?.export?.(IPublicEnumTransformStage.Render) as IPublicTypeNodeSchema,
scope,
Comp,
componentInfo,
);
if (key && !(key in nodeProps) && key in this.props) {
// 当 key 在 this.props 中时，且不存在在计算值中，需要用 newValue 覆盖掉 this.props 的取值
nodeCacheProps[key] = newValue;
}
__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange!`, nodeProps, nodeCacheProps, key, newValue);
this.setState('children' in nodeProps ? {
nodeChildren: nodeProps.children,
nodeProps,
childrenInState: true,
nodeCacheProps,
} : {
__debug(
`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange!`,
nodeProps,
nodeCacheProps,
});
key,
newValue,
);
this.setState(
'children' in nodeProps
? {
nodeChildren: nodeProps.children,
nodeProps,
childrenInState: true,
nodeCacheProps,
}
: {
nodeProps,
nodeCacheProps,
},
);

this.judgeMiniUnitRender();
});
Expand All @@ -479,7 +508,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
return;
}

__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange(${flag}) event`);
__debug(
`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange(${flag}) event`,
);
this.beforeRender(RerenderType.VisibleChanged);
this.setState({
visible: flag,
Expand All @@ -498,16 +529,20 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
if (!this.autoRepaintNode) {
return;
}
const {
type,
node,
} = param || {};
const { type, node } = param || {};
this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node);
// TODO: 缓存同级其他元素的 children。
// 缓存二级 children Next 查询筛选组件有问题
// 缓存一级 children Next Tab 组件有问题
const nextChild = getChildren(leaf?.export?.(IPublicEnumTransformStage.Render) as types.ISchema, scope, Comp);
__debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`, nextChild);
const nextChild = getChildren(
leaf?.export?.(IPublicEnumTransformStage.Render) as types.ISchema,
scope,
Comp,
);
__debug(
`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`,
nextChild,
);
this.setState({
nodeChildren: nextChild,
childrenInState: true,
Expand All @@ -518,7 +553,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
}

componentWillUnmount() {
this.disposeFunctions.forEach(fn => fn());
this.disposeFunctions.forEach((fn) => fn());
}

get hasChildren(): boolean {
Expand Down Expand Up @@ -556,10 +591,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
return null;
}

const {
forwardedRef,
...rest
} = this.props;
const { forwardedRef, ...rest } = this.props;

const compProps = {
...rest,
Expand Down Expand Up @@ -597,4 +629,4 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
});

return LeafWrapper;
}
}
Loading
Loading