Add collection components (#6359)

Author: mohamedsalem401

README.md

@@ -1 +1 @@
-./packages/core/README.md
+./packages/core/README.md

packages/core/src/css_composer/model/CssRule.ts

@@ -7,7 +7,6 @@ import { isEmptyObj, hasWin } from '../../utils/mixins';
 import Selector, { SelectorProps } from '../../selector_manager/model/Selector';
 import EditorModel from '../../editor/model/Editor';
 import CssRuleView from '../view/CssRuleView';
-import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 
 /** @private */
 export interface CssRuleProperties {
@@ -95,7 +94,6 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
   em?: EditorModel;
   opt: any;
   views: CssRuleView[] = [];
-  dynamicVariableListeners: Record<string, DynamicVariableListenerManager> = {};
 
   defaults() {
     return {

packages/core/src/data_sources/model/ComponentDataVariable.ts

@@ -1,8 +1,11 @@
 import Component from '../../dom_components/model/Component';
+import { ComponentOptions } from '../../dom_components/model/types';
 import { toLowerCase } from '../../utils/mixins';
-import { DataVariableType } from './DataVariable';
+import DataVariable, { DataVariableProps, DataVariableType } from './DataVariable';
 
 export default class ComponentDataVariable extends Component {
+  dataResolver: DataVariable;
+
   get defaults() {
     return {
       // @ts-ignore
@@ -13,9 +16,14 @@ export default class ComponentDataVariable extends Component {
     };
   }
 
+  constructor(props: DataVariableProps, opt: ComponentOptions) {
+    super(props, opt);
+    const { type, path, defaultValue } = props;
+    this.dataResolver = new DataVariable({ type, path, defaultValue }, opt);
+  }
+
   getDataValue() {
-    const { path, defaultValue } = this.attributes;
-    return this.em.DataSources.getValue(path, defaultValue);
+    return this.dataResolver.getDataValue();
   }
 
   getInnerHTML() {

packages/core/src/data_sources/model/DataResolverListener.ts

@@ -0,0 +1,96 @@
+import { DataSourcesEvents, DataSourceListener } from '../types';
+import { stringToPath } from '../../utils/mixins';
+import { Model } from '../../common';
+import EditorModel from '../../editor/model/Editor';
+import DataVariable, { DataVariableType } from './DataVariable';
+import { DataResolver } from '../types';
+import { DataCondition, DataConditionType } from './conditional_variables/DataCondition';
+import { DataCollectionVariableType } from './data_collection/constants';
+import DataCollectionVariable from './data_collection/DataCollectionVariable';
+
+export interface DataResolverListenerProps {
+  em: EditorModel;
+  resolver: DataResolver;
+  onUpdate: (value: any) => void;
+}
+
+export default class DataResolverListener {
+  private listeners: DataSourceListener[] = [];
+  private em: EditorModel;
+  private onUpdate: (value: any) => void;
+  private model = new Model();
+  resolver: DataResolver;
+
+  constructor(props: DataResolverListenerProps) {
+    this.em = props.em;
+    this.resolver = props.resolver;
+    this.onUpdate = props.onUpdate;
+    this.listenToResolver();
+  }
+
+  private onChange = () => {
+    const value = this.resolver.getDataValue();
+    this.onUpdate(value);
+  };
+
+  listenToResolver() {
+    const { resolver, model } = this;
+    this.removeListeners();
+    let listeners: DataSourceListener[] = [];
+    const type = resolver.attributes.type;
+
+    switch (type) {
+      case DataCollectionVariableType:
+        listeners = this.listenToDataCollectionVariable(resolver as DataCollectionVariable);
+        break;
+      case DataVariableType:
+        listeners = this.listenToDataVariable(resolver as DataVariable);
+        break;
+      case DataConditionType:
+        listeners = this.listenToConditionalVariable(resolver as DataCondition);
+        break;
+    }
+
+    listeners.forEach((ls) => model.listenTo(ls.obj, ls.event, this.onChange));
+    this.listeners = listeners;
+  }
+
+  private listenToConditionalVariable(dataVariable: DataCondition) {
+    const { em } = this;
+    const dataListeners = dataVariable.getDependentDataVariables().flatMap((dataVariable) => {
+      return this.listenToDataVariable(new DataVariable(dataVariable, { em }));
+    });
+
+    return dataListeners;
+  }
+
+  private listenToDataVariable(dataVariable: DataVariable) {
+    const { em } = this;
+    const dataListeners: DataSourceListener[] = [];
+    const { path } = dataVariable.attributes;
+    const normPath = stringToPath(path || '').join('.');
+    const [ds, dr] = em.DataSources.fromPath(path!);
+    ds && dataListeners.push({ obj: ds.records, event: 'add remove reset' });
+    dr && dataListeners.push({ obj: dr, event: 'change' });
+    dataListeners.push(
+      { obj: dataVariable, event: 'change:path change:defaultValue' },
+      { obj: em.DataSources.all, event: 'add remove reset' },
+      { obj: em, event: `${DataSourcesEvents.path}:${normPath}` },
+    );
+
+    return dataListeners;
+  }
+
+  private listenToDataCollectionVariable(dataVariable: DataCollectionVariable) {
+    return [{ obj: dataVariable, event: 'change:value' }];
+  }
+
+  private removeListeners() {
+    this.listeners.forEach((ls) => this.model.stopListening(ls.obj, ls.event, this.onChange));
+    this.listeners = [];
+  }
+
+  destroy() {
+    this.removeListeners();
+  }
+}

packages/core/src/data_sources/model/DataSource.ts

@@ -31,7 +31,7 @@
 
 import { AddOptions, collectionEvents, CombinedModelConstructorOptions, Model, RemoveOptions } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { DataSourceTransformers, DataSourceType, DataSourceProps, RecordPropsType, DataRecordProps } from '../types';
+import { DataSourceTransformers, DataSourceType, DataSourceProps, DataRecordProps } from '../types';
 import DataRecord from './DataRecord';
 import DataRecords from './DataRecords';
 import DataSources from './DataSources';

packages/core/src/data_sources/model/DataVariable.ts

@@ -1,15 +1,15 @@
 import { Model } from '../../common';
 import EditorModel from '../../editor/model/Editor';
-import { stringToPath } from '../../utils/mixins';
 
-export const DataVariableType = 'data-variable';
-export type DataVariableDefinition = {
+export const DataVariableType = 'data-variable' as const;
+
+export interface DataVariableProps {
   type: typeof DataVariableType;
   path: string;
   defaultValue?: string;
-};
+}
 
-export default class DataVariable extends Model {
+export default class DataVariable extends Model<DataVariableProps> {
   em?: EditorModel;
 
   defaults() {
@@ -20,33 +20,13 @@ export default class DataVariable extends Model {
     };
   }
 
-  constructor(attrs: DataVariableDefinition, options: any) {
-    super(attrs, options);
+  constructor(props: DataVariableProps, options: { em?: EditorModel }) {
+    super(props, options);
     this.em = options.em;
-    this.listenToDataSource();
-  }
-
-  listenToDataSource() {
-    const { path } = this.attributes;
-    const resolvedPath = stringToPath(path).join('.');
-
-    if (this.em) {
-      this.listenTo(this.em.DataSources, `change:${resolvedPath}`, this.onDataSourceChange);
-    }
-  }
-
-  onDataSourceChange() {
-    const newValue = this.getDataValue();
-    this.set({ value: newValue });
   }
 
   getDataValue() {
     const { path, defaultValue } = this.attributes;
-    if (!this.em) {
-      throw new Error('EditorModel instance is not provided for a data variable.');
-    }
-    const val = this.em?.DataSources.getValue(path, defaultValue);
-
-    return val;
+    return this.em?.DataSources.getValue(path!, defaultValue);
   }
 }

packages/core/src/data_sources/model/DataVariableListenerManager.ts

@@ -1,14 +1,14 @@
-import DataVariable, { DataVariableDefinition } from './DataVariable';
+import DataVariable, { DataVariableProps } from './DataVariable';
 import Trait from '../../trait_manager/model/Trait';
 import { TraitProperties } from '../../trait_manager/types';
 
-export type TraitDataVariableDefinition = TraitProperties & DataVariableDefinition;
+export interface TraitDataVariableProps extends Omit<TraitProperties, 'type'>, DataVariableProps {}
 
 export default class TraitDataVariable extends DataVariable {
   trait?: Trait;
 
-  constructor(attrs: TraitDataVariableDefinition, options: any) {
-    super(attrs, options);
+  constructor(props: TraitDataVariableProps, options: any) {
+    super(props, options);
     this.trait = options.trait;
   }
 

packages/core/src/data_sources/model/StyleDataVariable.ts

@@ -0,0 +1,36 @@
+import Component from '../../../dom_components/model/Component';
+import { ComponentDefinition, ComponentOptions } from '../../../dom_components/model/types';
+import { toLowerCase } from '../../../utils/mixins';
+import { DataCondition, DataConditionProps, DataConditionType } from './DataCondition';
+
+export default class ComponentDataCondition extends Component {
+  dataResolver: DataCondition;
+
+  constructor(props: DataConditionProps, opt: ComponentOptions) {
+    const { condition, ifTrue, ifFalse } = props;
+    const dataConditionInstance = new DataCondition(condition, ifTrue, ifFalse, { em: opt.em });
+    super(
+      {
+        ...props,
+        type: DataConditionType,
+        components: dataConditionInstance.getDataValue(),
+      },
+      opt,
+    );
+    this.dataResolver = dataConditionInstance;
+    this.dataResolver.onValueChange = this.handleConditionChange.bind(this);
+  }
+
+  private handleConditionChange() {
+    this.dataResolver.reevaluate();
+    this.components(this.dataResolver.getDataValue());
+  }
+
+  static isComponent(el: HTMLElement) {
+    return toLowerCase(el.tagName) === DataConditionType;
+  }
+
+  toJSON(): ComponentDefinition {
+    return this.dataResolver.toJSON();
+  }
+}