From 33da8bf9485f98e29687e4d9fdb77d3bb55706cc Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 8 Jan 2025 09:34:37 +0200 Subject: [PATCH] Refactor collectionsStateMap propagation --- .../CollectionComponent.ts | 1 + .../src/dom_components/model/Component.ts | 15 +++++------ .../model/ComponentDynamicValueWatcher.ts | 4 +-- .../src/dom_components/model/Components.ts | 26 ++++++++++++++++--- .../core/src/dom_components/model/types.ts | 3 ++- .../__snapshots__/CollectionComponent.ts.snap | 1 + 6 files changed, 36 insertions(+), 14 deletions(-) diff --git a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts index ae925e416..5001d3270 100644 --- a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts +++ b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts @@ -147,6 +147,7 @@ function getCollectionItems( { ...block, [keyCollectionsStateMap]: collectionsStateMap, + isCollectionItem: true, }, opt, ); diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index 52854383f..bfc882e36 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -72,6 +72,7 @@ export const keySymbolOvrd = '__symbol_ovrd'; export const keyUpdate = ComponentsEvents.update; export const keyUpdateInside = ComponentsEvents.updateInside; export const keyCollectionsStateMap = '__collections_state_map'; +export const keyIsCollectionItem = '__is_collection_item'; /** * The Component object represents a single node of our template structure, so when you update its properties the changes are @@ -262,13 +263,6 @@ export default class Component extends StyleableModel { componentDVListener: ComponentDynamicValueWatcher; constructor(props: ComponentProperties = {}, opt: ComponentOptions) { - if (props[keyCollectionsStateMap]) { - // @ts-ignore - props.components = props.components?.forEach((component) => ({ - ...component, - [keyCollectionsStateMap]: props[keyCollectionsStateMap], - })); - } const componentDVListener = new ComponentDynamicValueWatcher(undefined, { em: opt.em, collectionsStateMap: props[keyCollectionsStateMap], @@ -304,7 +298,12 @@ export default class Component extends StyleableModel { } opt.em = em; - this.opt = opt; + this.opt = { + ...opt, + // @ts-ignore + [keyCollectionsStateMap]: props[keyCollectionsStateMap], + isCollectionItem: !!props['isCollectionItem'], + }; this.em = em!; this.config = opt.config || {}; this.setAttributes({ diff --git a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts index 7a93fb3b6..b0331c500 100644 --- a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts +++ b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts @@ -2,7 +2,7 @@ import { ObjectAny } from '../../common'; import { CollectionVariableType } from '../../data_sources/model/collection_component/constants'; import { CollectionsStateMap } from '../../data_sources/model/collection_component/types'; import EditorModel from '../../editor/model/Editor'; -import Component from './Component'; +import Component, { keyCollectionsStateMap } from './Component'; import { DynamicWatchersOptions } from './DynamicValueWatcher'; import { DynamicValueWatcher } from './DynamicValueWatcher'; @@ -70,7 +70,7 @@ export class ComponentDynamicValueWatcher { } updateSymbolOverride() { - if (!this.component) return; + if (!this.component || !this.component.get('isCollectionItem')) return; const keys = this.propertyWatcher.getDynamicValuesOfType(CollectionVariableType); const attributesKeys = this.attributeWatcher.getDynamicValuesOfType(CollectionVariableType); diff --git a/packages/core/src/dom_components/model/Components.ts b/packages/core/src/dom_components/model/Components.ts index 8613ddf26..df2e1f51e 100644 --- a/packages/core/src/dom_components/model/Components.ts +++ b/packages/core/src/dom_components/model/Components.ts @@ -1,5 +1,5 @@ import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore'; -import Component from './Component'; +import Component, { keyCollectionsStateMap } from './Component'; import { AddOptions, Collection } from '../../common'; import { DomComponentsConfig } from '../config/config'; import EditorModel from '../../editor/model/Editor'; @@ -17,6 +17,7 @@ import ComponentText from './ComponentText'; import ComponentWrapper from './ComponentWrapper'; import { ComponentsEvents, ParseStringOptions } from '../types'; import { isSymbolInstance, isSymbolRoot, updateSymbolComps } from './SymbolUtils'; +import { CollectionsStateMap } from '../../data_sources/model/collection_component/types'; export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => { if (!cmp) return []; @@ -87,6 +88,8 @@ export interface ComponentsOptions { em: EditorModel; config?: DomComponentsConfig; domc?: ComponentManager; + collectionsStateMap?: CollectionsStateMap; + isCollectionItem?: boolean; } interface AddComponentOptions extends AddOptions { @@ -324,13 +327,30 @@ Component> { */ processDef(mdl: Component | ComponentDefinition | ComponentDefinitionDefined) { // Avoid processing Models - if (mdl.cid && mdl.ccid) return mdl; + if (mdl.cid && mdl.ccid) { + const componentCollectionsStateMap = mdl.get(keyCollectionsStateMap); + const parentCollectionsStateMap = this.opt.collectionsStateMap; + mdl.set(keyCollectionsStateMap, { + ...componentCollectionsStateMap, + ...parentCollectionsStateMap, + }); + + mdl.set('isCollectionItem', this.opt.isCollectionItem); + + return mdl; + } const { em, config = {} } = this; const { processor } = config; let model = mdl; if (processor) { - model = { ...model }; // Avoid 'Cannot delete property ...' + model = { + [keyCollectionsStateMap]: { + ...this.opt.collectionsStateMap, + }, + isCollectionItem: this.opt.isCollectionItem, + ...model, + }; // Avoid 'Cannot delete property ...' const modelPr = processor(model); if (modelPr) { //@ts-ignore diff --git a/packages/core/src/dom_components/model/types.ts b/packages/core/src/dom_components/model/types.ts index 79b452b6b..0bda043b6 100644 --- a/packages/core/src/dom_components/model/types.ts +++ b/packages/core/src/dom_components/model/types.ts @@ -11,7 +11,7 @@ import Component from './Component'; import Components from './Components'; import { ToolbarButtonProps } from './ToolbarButton'; import { ParseNodeOptions } from '../../parser/config/config'; -import { DynamicValueDefinition } from '../../data_sources/types'; +import { CollectionsStateMap } from '../../data_sources/model/collection_component/types'; export type DragMode = 'translate' | 'absolute' | ''; @@ -321,4 +321,5 @@ export interface ComponentOptions { frame?: Frame; temporary?: boolean; avoidChildren?: boolean; + collectionsStateMap?: CollectionsStateMap; } diff --git a/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap b/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap index 26834581f..df0160aa1 100644 --- a/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap +++ b/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap @@ -22,6 +22,7 @@ exports[`Collection component Stringfication Collection with dynamic datasource "type": "parent-collection-variable", "variable_type": "current_item", }, + "isCollectionItem": false, "property_trait": { "path": "user", "type": "parent-collection-variable",