LPS-103180 Migrate TranslationManager taglib from soy to React

liferay · Nov 13, 2019 · a4336c0 · a4336c0
1 parent d8cc2b2
commit a4336c0
Show file tree

Hide file tree

Showing 11 changed files with 483 additions and 494 deletions.
diff --git a/modules/apps/data-engine/data-engine-taglib/build.gradle b/modules/apps/data-engine/data-engine-taglib/build.gradle
@@ -24,6 +24,7 @@ dependencies {
 	compileOnly project(":apps:frontend-js:frontend-js-loader-modules-extender-api")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-clay")
+	compileOnly project(":apps:frontend-taglib:frontend-taglib-react")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-soy")
 	compileOnly project(":apps:portal-template:portal-template-soy-renderer-api")
 	compileOnly project(":core:petra:petra-function")

diff --git a/...glib/src/main/resources/META-INF/resources/data_layout_builder/js/DataLayoutBuilder.es.js b/...glib/src/main/resources/META-INF/resources/data_layout_builder/js/DataLayoutBuilder.es.js
@@ -25,30 +25,24 @@ import Component, {Config} from 'metal-jsx';
  */
 class DataLayoutBuilder extends Component {
 	attached() {
-		const {layoutProvider} = this.refs;
 		const {localizable} = this.props;
 
 		if (localizable) {
-			const dependencies = [this._getTranslationManager()];
-
-			Promise.all(dependencies).then(results => {
-				const translationManager = results[0];
+			const translationManagerPromise = this._getTranslationManager();
 
-				if (translationManager) {
-					translationManager.on('availableLocalesChange', event => {
-						this.props.availableLanguageIds = event.newVal.map(
-							({id}) => id
-						);
-					});
+			translationManagerPromise.then(translationManager => {
+				translationManager.on('availableLocales', ({newValue}) => {
+					this.props.availableLanguageIds = [...newValue.keys()];
+				});
 
-					translationManager.on('editingLocaleChange', event => {
-						this.props.editingLanguageId = event.newVal;
-					});
+				translationManager.on('editingLocale', ({newValue}) => {
+					this.props.editingLanguageId = newValue;
+				});
 
-					translationManager.on('deleteAvailableLocale', event => {
-						layoutProvider.emit('languageIdDeleted', event);
-					});
-				}
+				translationManager.on(
+					'availableLocales',
+					this.onAvailableLocalesRemoved.bind(this)
+				);
 			});
 		}
 	}
@@ -57,6 +51,17 @@ class DataLayoutBuilder extends Component {
 		this.refs.layoutProvider.dispatch(event, payload);
 	}
 
+	disposed() {
+		if (this._translationManager) {
+			this._translationManager.detach(
+				'availableLocales',
+				this.onAvailableLocalesRemoved.bind(this)
+			);
+
+			this._translationManager = null;
+		}
+	}
+
 	getDefinitionField({settingsContext}) {
 		const fieldConfig = {
 			customProperties: {}
@@ -195,6 +200,25 @@ class DataLayoutBuilder extends Component {
 		};
 	}
 
+	onAvailableLocalesRemoved({newValue, previousValue}) {
+		const {layoutProvider} = this.refs;
+
+		const removedItems = new Map();
+
+		previousValue.forEach((value, key) => {
+			if (!newValue.has(key)) {
+				removedItems.set(key, value);
+			}
+		});
+
+		if (removedItems.size > 0) {
+			layoutProvider.emit(
+				'languageIdDeleted',
+				removedItems.values().next().value
+			);
+		}
+	}
+
 	render() {
 		const {
 			context,
@@ -246,17 +270,7 @@ class DataLayoutBuilder extends Component {
 	}
 
 	_getTranslationManager() {
-		let promise;
-
-		const translationManager = Liferay.component('translationManager');
-
-		if (translationManager) {
-			promise = Promise.resolve(translationManager);
-		} else {
-			promise = Liferay.componentReady('translationManager');
-		}
-
-		return promise;
+		return Liferay.componentReady('translationManager');
 	}
 
 	_handlePagesChanged({newVal}) {

diff --git a/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-web/build.gradle b/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-web/build.gradle
@@ -25,6 +25,7 @@ dependencies {
 	compileOnly project(":apps:frontend-js:frontend-js-loader-modules-extender-api")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-clay")
+	compileOnly project(":apps:frontend-taglib:frontend-taglib-react")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-soy")
 	compileOnly project(":apps:portal:portal-instance-lifecycle-api")
 	compileOnly project(":apps:portal:portal-upgrade-api")

diff --git a/...g/dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/main.es.js b/...g/dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/main.es.js
@@ -84,41 +84,42 @@ class Form extends Component {
 
 				return editor;
 			}),
-			this._createEditor('descriptionEditor')
+			this._createEditor('descriptionEditor'),
+			this._getTranslationManager()
 		];
 
-		dependencies.push(this._getTranslationManager());
-
 		if (this.isFormBuilderView()) {
 			dependencies.push(this._getSettingsDDMForm());
 		}
 
 		Promise.all(dependencies).then(results => {
-			const translationManager = results[2];
+			this._translationManager = results[2];
 
-			if (translationManager) {
+			const translationManager = this._translationManager;
+
+			if (this._translationManager) {
 				this.props.defaultLanguageId = translationManager.get(
 					'defaultLocale'
 				);
+
 				this.props.editingLanguageId = translationManager.get(
 					'editingLocale'
 				);
 
-				translationManager.on('editingLocaleChange', event => {
-					this.props.editingLanguageId = event.newVal;
+				this._translationManager.on('editingLocale', ({newValue}) => {
+					this.props.editingLanguageId = newValue;
 
-					if (
-						translationManager.get('defaultLocale') === event.newVal
-					) {
+					if (translationManager.get('defaultLocale') === newValue) {
 						this.showAddButton();
 					} else {
 						this.hideAddButton();
 					}
 				});
 
-				translationManager.on('deleteAvailableLocale', event => {
-					store.emit('languageIdDeleted', event);
-				});
+				this._translationManager.on(
+					'availableLocales',
+					this.onAvailableLocalesRemoved.bind(this)
+				);
 			}
 
 			this._stateSyncronizer = new StateSyncronizer(
@@ -262,6 +263,11 @@ class Form extends Component {
 		Notifications.closeAlert();
 
 		this._eventHandler.removeAllListeners();
+
+		this._translationManager.detach(
+			'availableLocales',
+			this.onAvailableLocalesRemoved.bind(this)
+		);
 	}
 
 	hideAddButton() {
@@ -297,6 +303,24 @@ class Form extends Component {
 		return ruleBuilderVisible && this.isFormBuilderView();
 	}
 
+	onAvailableLocalesRemoved({previousValue, newValue}) {
+		const {store} = this.refs;
+
+		const removedItems = new Map();
+
+		previousValue.forEach((value, key) => {
+			if (!newValue.has(key)) {
+				removedItems.set(key, value);
+			}
+		});
+
+		if (removedItems.size > 0) {
+			store.emit('languageIdDeleted', {
+				locale: removedItems.keys().next().value
+			});
+		}
+	}
+
 	openSidebar() {
 		this.refs.sidebar.open();
 	}
@@ -668,17 +692,7 @@ class Form extends Component {
 	}
 
 	_getTranslationManager() {
-		let promise;
-
-		const translationManager = Liferay.component('translationManager');
-
-		if (translationManager) {
-			promise = Promise.resolve(translationManager);
-		} else {
-			promise = Liferay.componentReady('translationManager');
-		}
-
-		return promise;
+		return Liferay.componentReady('translationManager');
 	}
 
 	_handleBackButtonClicked(event) {

diff --git a/...pping-form-web/src/main/resources/META-INF/resources/admin/js/util/StateSyncronizer.es.js b/...pping-form-web/src/main/resources/META-INF/resources/admin/js/util/StateSyncronizer.es.js
@@ -33,14 +33,13 @@ class StateSyncronizer extends Component {
 		);
 
 		if (translationManager) {
-			this._eventHandler.add(
-				translationManager.on('deleteAvailableLocale', ({locale}) => {
-					this.deleteLanguageId(locale);
-				}),
-				translationManager.on('editingLocaleChange', event => {
-					this.syncEditors(event.newVal);
-				})
+			translationManager.on(
+				'availableLocales',
+				this.onRemoveAvailableLocales.bind(this)
 			);
+			translationManager.on('editingLocale', ({newValue}) => {
+				this.syncEditors(newValue);
+			});
 		}
 	}
 
@@ -54,20 +53,27 @@ class StateSyncronizer extends Component {
 	}
 
 	disposeInternal() {
+		const {translationManager} = this.props;
 		super.disposeInternal();
 
 		this._eventHandler.removeAllListeners();
+
+		translationManager.detach(
+			'availableLocales',
+			this.onRemoveAvailableLocales.bind(this)
+		);
 	}
 
 	getAvailableLanguageIds() {
 		const {translationManager} = this.props;
 		let availableLanguageIds = [{id: this.getDefaultLanguageId()}];
 
 		if (translationManager) {
-			availableLanguageIds = translationManager.get('availableLocales');
+			const availableLocalesMap = translationManager.get('availableLocales');
+			availableLanguageIds = [...availableLocalesMap.keys()];
 		}
 
-		return availableLanguageIds.map(({id}) => id);
+		return availableLanguageIds;
 	}
 
 	getDefaultLanguageId() {
@@ -115,6 +121,20 @@ class StateSyncronizer extends Component {
 		return FormSupport.emptyPages(store.state.pages);
 	}
 
+	onRemoveAvailableLocales({newValue, previousValue}) {
+		const removedItems = new Map();
+
+		previousValue.forEach((value, key) => {
+			if (!newValue.has(key)) {
+				removedItems.set(key, value);
+			}
+		});
+
+		if (removedItems.length > 0) {
+			this.deleteLanguageId(removedItems.keys().next().value);
+		}
+	}
+
 	syncEditors(editingLanguageId = this.getDefaultLanguageId()) {
 		const {
 			descriptionEditor,

diff --git a/modules/apps/frontend-taglib/frontend-taglib/build.gradle b/modules/apps/frontend-taglib/frontend-taglib/build.gradle
@@ -10,6 +10,7 @@ dependencies {
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-clay")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-react")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-soy")
+	compileOnly project(":apps:portal-template:portal-template-react-renderer-api")
 	compileOnly project(":apps:portal-template:portal-template-soy-api")
 	compileOnly project(":apps:users-admin:users-admin-api")
 	compileOnly project(":core:osgi-service-tracker-collections")

diff --git a/modules/apps/frontend-taglib/frontend-taglib/package.json b/modules/apps/frontend-taglib/frontend-taglib/package.json
@@ -7,13 +7,17 @@
 		"@clayui/form": "3.2.0",
 		"@clayui/icon": "3.0.1",
 		"@clayui/list": "3.0.3",
+		"@clayui/modal": "3.1.0",
 		"clay-dropdown": "2.18.5",
 		"clay-modal": "2.18.5",
 		"frontend-js-web": "*",
 		"metal": "2.16.8",
 		"metal-component": "2.16.8",
 		"metal-soy": "2.16.8",
-		"metal-state": "2.16.8"
+		"metal-state": "2.16.8",
+		"prop-types": "15.7.2",
+		"react": "16.9.0",
+		"react-dom": "16.9.0"
 	},
 	"name": "frontend-taglib",
 	"scripts": {