From a06642411c109e6f8e18ffccc2cf03f8884abdd4 Mon Sep 17 00:00:00 2001 From: yaswanth-pula-skyflow Date: Wed, 26 Jul 2023 12:14:37 +0530 Subject: [PATCH] SK-903 update code to consider element mounted only after element input is created. --- src/core/constants.ts | 1 + .../external/collect/collect-container.ts | 3 ++ src/core/external/collect/collect-element.ts | 16 +++++++- .../collect/compose-collect-container.ts | 37 +++++++++++++------ src/core/internal/index.ts | 9 ++--- 5 files changed, 48 insertions(+), 18 deletions(-) diff --git a/src/core/constants.ts b/src/core/constants.ts index 010dc80c..9c47e18a 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -43,6 +43,7 @@ export const ELEMENT_EVENTS_TO_CLIENT = { SUCCESS: 'SUCCESS', SUBMIT: 'SUBMIT', CREATED: 'CREATED', + MOUNTED: 'MOUNTED', }; export const ELEMENT_EVENTS_TO_IFRAME = { diff --git a/src/core/external/collect/collect-container.ts b/src/core/external/collect/collect-container.ts index 5236225c..9f7a2f09 100644 --- a/src/core/external/collect/collect-container.ts +++ b/src/core/external/collect/collect-container.ts @@ -162,6 +162,8 @@ class CollectContainer extends Container { // options.elementName, // )}` : `${options.elementType}:${btoa(uuid())}`; + options.isMounted = false; + if ( options.elementType === ELEMENTS.radio.name || options.elementType === ELEMENTS.checkbox.name @@ -205,6 +207,7 @@ class CollectContainer extends Container { { containerId: this.#containerId, isMounted: this.#isMounted, + type: this.type, }, isSingleElementAPI, this.#destroyCallback, diff --git a/src/core/external/collect/collect-element.ts b/src/core/external/collect/collect-element.ts index 885d1eb0..865deafb 100644 --- a/src/core/external/collect/collect-element.ts +++ b/src/core/external/collect/collect-element.ts @@ -135,6 +135,20 @@ class CollectElement extends SkyflowElement { this.#groupEmitter?.on(ELEMENT_EVENTS_TO_CONTAINER.COLLECT_CONTAINER_MOUNTED, (data) => { if (data?.containerId === this.containerId) { this.#readyToMount = true; } }); + + this.#bus.on(ELEMENT_EVENTS_TO_CLIENT.MOUNTED, (data) => { + if (container.type === ContainerType.COMPOSABLE) { + this.#elements.forEach((element) => { + if (data.name === element.elementName) { + element.isMounted = true; + this.#mounted = true; + } + }); + } else if (data.name === this.#elements[0].elementName) { + this.#elements[0].isMounted = true; + this.#mounted = true; + } + }); } getID = () => this.#elementId; @@ -168,7 +182,7 @@ class CollectElement extends SkyflowElement { ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + this.containerId, sub, ); - this.#mounted = true; + // this.#mounted = true; printLog(`${parameterizedString(logs.infoLogs.ELEMENT_MOUNTED, CLASS_NAME, getElementName(this.#iframe.name))} `, MessageType.LOG, this.#context.logLevel); this.#updateCallbacks.forEach((func) => func()); diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index c6f6865a..afe3fb6c 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -9,7 +9,9 @@ import { IUpsertOptions } from '../../../core-utils/collect'; import EventEmitter from '../../../event-emitter'; import iframer, { setAttributes, getIframeSrc, setStyles } from '../../../iframe-libs/iframer'; import deepClone from '../../../libs/deep-clone'; -import { formatValidations, formatOptions, validateElementOptions } from '../../../libs/element-options'; +import { + formatValidations, formatOptions, validateElementOptions, getElements, +} from '../../../libs/element-options'; import SkyflowError from '../../../libs/skyflow-error'; import uuid from '../../../libs/uuid'; import properties from '../../../properties'; @@ -80,6 +82,8 @@ class ComposableContainer extends Container { #containerMounted: boolean = false; + #tempElements: any = {}; + constructor(options, metaData, skyflowElements, context) { super(); this.#containerId = uuid(); @@ -161,8 +165,8 @@ class ComposableContainer extends Container { isSingleElementAPI: boolean = false, ) => { const elements: any[] = []; - const tempElements = deepClone(multipleElements); - tempElements.rows.forEach((row) => { + this.#tempElements = deepClone(multipleElements); + this.#tempElements.rows.forEach((row) => { row.elements.forEach((element) => { const options = element; const { elementType } = options; @@ -172,6 +176,8 @@ class ComposableContainer extends Container { options.replacePattern = options.replacePattern || ELEMENTS[elementType].replacePattern; options.mask = options.mask || ELEMENTS[elementType].mask; + options.isMounted = false; + options.label = element.label; options.skyflowID = element.skyflowID; @@ -179,9 +185,9 @@ class ComposableContainer extends Container { }); }); - tempElements.elementName = isSingleElementAPI + this.#tempElements.elementName = isSingleElementAPI ? elements[0].elementName - : `${FRAME_ELEMENT}:group:${btoa(tempElements.name)}`; + : `${FRAME_ELEMENT}:group:${btoa(this.#tempElements.name)}`; if ( isSingleElementAPI @@ -191,22 +197,23 @@ class ComposableContainer extends Container { throw new SkyflowError(SKYFLOW_ERROR_CODE.UNIQUE_ELEMENT_NAME, [`${elements[0].name}`], true); } - let element = this.#elements[tempElements.elementName]; + let element = this.#elements[this.#tempElements.elementName]; if (element) { if (isSingleElementAPI) { element.update(elements[0]); } else { - element.update(tempElements); + element.update(this.#tempElements); } } else { const elementId = uuid(); element = new CollectElement( elementId, - tempElements, + this.#tempElements, this.#metaData, { containerId: this.#containerId, isMounted: this.#containerMounted, + type: this.type, }, true, this.#destroyCallback, @@ -214,7 +221,7 @@ class ComposableContainer extends Container { this.#context, this.#eventEmitter, ); - this.#elements[tempElements.elementName] = element; + this.#elements[this.#tempElements.elementName] = element; this.#skyflowElements[elementId] = element; } return element; @@ -339,13 +346,19 @@ class ComposableContainer extends Container { if (!this.#isMounted) { throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true); } - const collectElements = Object.values(this.#elements); - collectElements.forEach((element) => { - if (!element.isMounted()) { + + const containerElements = getElements(this.#tempElements); + containerElements.forEach((element:any) => { + if (!element?.isMounted) { throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true); } + }); + + const collectElements = Object.values(this.#elements); + collectElements.forEach((element) => { element.isValidElement(); }); + if (options && options.tokens && typeof options.tokens !== 'boolean') { throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_TOKENS_IN_COLLECT, [], true); } diff --git a/src/core/internal/index.ts b/src/core/internal/index.ts index 98b0af61..208dc4ab 100644 --- a/src/core/internal/index.ts +++ b/src/core/internal/index.ts @@ -383,11 +383,10 @@ export class FrameElement { this.updateParentDiv(this.htmlDivElement); - // bus - // .emit(ELEMENT_EVENTS_TO_IFRAME.INPUT_EVENT, { - // name: this.iFrameFormElement.iFrameName, - // event: ELEMENT_EVENTS_TO_CLIENT.CREATED, - // }); + bus + .emit(ELEMENT_EVENTS_TO_CLIENT.MOUNTED, { + name: this.iFrameFormElement.iFrameName, + }); this.updateStyleClasses(this.iFrameFormElement.getStatus()); };