LPS-139246 - Use generic autocomplete from frontend-js-components-web

bryceosterhaus · Sep 20, 2021 · 6644513 · 6644513
1 parent 813d338
commit 6644513
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 23 deletions.
diff --git a/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-field-type/package.json b/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-field-type/package.json
@@ -7,10 +7,12 @@
 		"@clayui/modal": "3.35.3",
 		"@clayui/popover": "3.35.3",
 		"@clayui/table": "3.32.0",
+		"@liferay/frontend-js-react-web": "*",
 		"axios": "0.21.1",
 		"classnames": "2.3.1",
 		"clay-icon": "2.22.4",
 		"frontend-editor-ckeditor-web": "*",
+		"frontend-js-components-web": "*",
 		"frontend-js-web": "*",
 		"leaflet": "1.7.1",
 		"map-google-maps": "*",

diff --git a/...field-type/src/main/resources/META-INF/resources/ObjectRelationship/ObjectRelationship.js b/...field-type/src/main/resources/META-INF/resources/ObjectRelationship/ObjectRelationship.js
@@ -12,33 +12,101 @@
  * details.
  */
 
-import Autocomplete from 'commerce-frontend-js/components/autocomplete/Autocomplete';
+import {useIsMounted} from '@liferay/frontend-js-react-web';
 import {FieldBase} from 'dynamic-data-mapping-form-field-type/FieldBase/ReactFieldBase.es';
-import React from 'react';
+import {Autocomplete as BaseAutocomplete} from 'frontend-js-components-web';
+import {debounce, fetch} from 'frontend-js-web';
+import React, {useState} from 'react';
 
-const ObjectRelationship = ({
+function getData(apiUrl, query, page, pageSize) {
+	const url = new URL(apiUrl, themeDisplay.getPortalURL());
+
+	if (query) {
+		url.searchParams.set('search', query);
+	}
+
+	if (page) {
+		url.searchParams.set('page', page);
+	}
+
+	if (pageSize) {
+		url.searchParams.set('pageSize', pageSize);
+	}
+
+	return fetch(url, {
+		headers: new Headers({
+			Accept: 'application/json',
+			'Accept-Language': themeDisplay.getBCP47LanguageId(),
+			'Content-Type': 'application/json',
+		}),
+	}).then((data) => data.json());
+}
+
+export function ObjectRelationship({
 	apiURL,
 	initialLabel,
 	initialValue,
 	inputName,
-	itemsKey,
-	itemsLabel,
+	labelKey,
 	name,
 	value,
+	valueKey,
 	...otherProps
-}) => (
-	<FieldBase name={name} {...otherProps}>
-		<Autocomplete
-			apiUrl={apiURL}
-			initialLabel={initialLabel}
-			initialValue={initialValue}
-			inputName={inputName}
-			itemsKey={itemsKey}
-			itemsLabel={itemsLabel}
-			name={name}
-			value={value}
-		/>
-	</FieldBase>
-);
+}) {
+	const [query, setQuery] = useState(initialLabel || '');
+	const [selectedItem, setSelectedItem] = useState(initialValue || value);
+	const [items, setItems] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const isMounted = useIsMounted();
+
+	const fetchData = debounce(() => {
+		if (isMounted()) {
+			setLoading(true);
+
+			getData(apiURL, query, 1, 10)
+				.then((jsonResponse) => {
+					setItems(jsonResponse.items);
+
+					setLoading(false);
+
+					if (!query) {
+						return;
+					}
+
+					const found = jsonResponse.items.find(
+						(item) => item[labelKey] === query
+					);
+
+					if (found) {
+						setSelectedItem(found);
+					}
+				})
+				.catch(() => {
+					setLoading(false);
+				});
+		}
+	}, 500);
+
+	return (
+		<FieldBase name={name} {...otherProps}>
+			<BaseAutocomplete
+				inputName={inputName}
+				inputValue={query}
+				items={items}
+				labelKey={labelKey}
+				loading={loading}
+				name={name}
+				onInputChange={(val) => {
+					setQuery(val);
+					setSelectedItem(null);
+					fetchData();
+				}}
+				onSelectedItemChange={setSelectedItem}
+				selectedItem={selectedItem}
+				valueKey={valueKey}
+			/>
+		</FieldBase>
+	);
+}
 
 export default ObjectRelationship;
diff --git a/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-field-type/tsconfig.json b/modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-field-type/tsconfig.json
@@ -1,5 +1,5 @@
 {
-	"@generated": "bcba4b119d3cf7bdcb52b5d3d5a71d24f5290ca2",
+	"@generated": "c950209e6d87c9a20f17d56d67f7efa046552fe6",
 	"@overrides": {
 	},
 	"@readonly": "** AUTO-GENERATED: DO NOT EDIT OUTSIDE @overrides **",
@@ -13,6 +13,9 @@
 		"moduleResolution": "node",
 		"outDir": "./types",
 		"paths": {
+			"@liferay/frontend-js-react-web": [
+				"../../frontend-js/frontend-js-react-web/src/main/resources/META-INF/resources/js/index.ts"
+			]
 		},
 		"sourceMap": false,
 		"strict": true,
@@ -28,5 +31,8 @@
 		"test/**/*"
 	],
 	"references": [
+		{
+			"path": "../../frontend-js/frontend-js-react-web"
+		}
 	]
 }
diff --git a/...ng/internal/form/field/type/ObjectRelationshipDDMFormFieldTemplateContextContributor.java b/...ng/internal/form/field/type/ObjectRelationshipDDMFormFieldTemplateContextContributor.java
@@ -68,11 +68,11 @@ public Map<String, Object> getParameters(
 			).put(
 				"inputName", ddmFormField.getName()
 			).put(
-				"itemsKey", "id"
-			).put(
-				"itemsLabel", "id"
+				"labelKey", "id"
 			).put(
 				"value", ddmFormFieldRenderingContext.getValue()
+			).put(
+				"valueKey", "id"
 			).build();
 		}
 		catch (PortalException portalException) {