refactor: use a feature registry to enable form support (#528)

vladitasev · web-flow · commit c266590a6a5c · 2019-06-10T13:16:01.000+03:00
diff --git a/packages/base/src/FeaturesRegistry.js b/packages/base/src/FeaturesRegistry.js
@@ -0,0 +1,11 @@
+const features = new Map();
+
+const registerFeature = (name, feature) => {
+	features.set(name, feature);
+};
+
+const getFeature = name => {
+	return features.get(name);
+};
+
+export { registerFeature, getFeature };
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -3,6 +3,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import ButtonType from "./types/ButtonType.js";
 import ButtonRenderer from "./build/compiled/ButtonRenderer.lit.js";
 import Icon from "./Icon.js";
@@ -193,7 +194,8 @@ class Button extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this.submits && !Button.FormSupport) {
+		const FormSupport = getFeature("FormSupport");
+		if (this.submits && !FormSupport) {
 			console.warn(`In order for the "submits" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}
 	}
@@ -210,8 +212,9 @@ class Button extends UI5Element {
 		event.isMarked = "button";
 		if (!this.disabled) {
 			this.fireEvent("press", {});
-			if (Button.FormSupport) {
-				Button.FormSupport.triggerFormSubmit(this);
+			const FormSupport = getFeature("FormSupport");
+			if (FormSupport) {
+				FormSupport.triggerFormSubmit(this);
 			}
 		}
 	}
diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
@@ -3,6 +3,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
 import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js";
@@ -204,8 +205,9 @@ class CheckBox extends UI5Element {
 	}
 
 	_enableFormSupport() {
-		if (CheckBox.FormSupport) {
-			CheckBox.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
 				nativeInput.disabled = element.disabled || !element.checked;
 				nativeInput.value = element.checked ? "on" : "";
 			});
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -6,6 +6,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
 import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
 import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js";
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
@@ -308,8 +309,9 @@ class DatePicker extends UI5Element {
 			this._calendar.selectedDates = [];
 		}
 
-		if (DatePicker.FormSupport) {
-			DatePicker.FormSupport.syncNativeHiddenInput(this);
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.syncNativeHiddenInput(this);
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -3,6 +3,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
 import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import {
 	isUp,
 	isDown,
@@ -329,8 +330,9 @@ class Input extends UI5Element {
 			this.enableSuggestions();
 		}
 
-		if (Input.FormSupport) {
-			Input.FormSupport.syncNativeHiddenInput(this);
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.syncNativeHiddenInput(this);
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}
diff --git a/packages/main/src/InputElementsFormSupport.js b/packages/main/src/InputElementsFormSupport.js
@@ -1,17 +1,7 @@
-import Input from "./Input.js";
-import TextArea from "./TextArea.js";
-import DatePicker from "./DatePicker.js";
-import CheckBox from "./CheckBox.js";
-import RadioButton from "./RadioButton.js";
-import Button from "./Button.js";
-
+import { registerFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import FormSupport from "./util/FormSupport.js";
 
-Input.FormSupport = FormSupport;
-TextArea.FormSupport = FormSupport;
-DatePicker.FormSupport = FormSupport;
-CheckBox.FormSupport = FormSupport;
-RadioButton.FormSupport = FormSupport;
-Button.FormSupport = FormSupport;
+// Add form support to the global features registry so that Web Components can find and use it
+registerFeature("FormSupport", FormSupport);
 
 export default {};
diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
@@ -1,6 +1,7 @@
 import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
@@ -253,8 +254,9 @@ class RadioButton extends UI5Element {
 	}
 
 	_enableFormSupport() {
-		if (RadioButton.FormSupport) {
-			RadioButton.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
 				nativeInput.disabled = element.disabled || !element.selected;
 				nativeInput.value = element.selected ? element.value : "";
 			});
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -3,6 +3,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import CSSSize from "@ui5/webcomponents-base/src/types/CSSSize.js";
 import Integer from "@ui5/webcomponents-base/src/types/Integer.js";
 import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/src/ResourceBundle.js";
+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import TextAreaRenderer from "./build/compiled/TextAreaRenderer.lit.js";
 
 import { TEXTAREA_CHARACTERS_LEFT, TEXTAREA_CHARACTERS_EXCEEDED } from "./i18n/defaults.js";
@@ -249,8 +250,9 @@ class TextArea extends UI5Element {
 			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
 		}
 
-		if (TextArea.FormSupport) {
-			TextArea.FormSupport.syncNativeHiddenInput(this);
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.syncNativeHiddenInput(this);
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";`
`3`	`3`	`import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";`
`4`	`4`	`import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";`
`5`	`5`	`import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";`
	`6`	`+import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";`
`6`	`7`	`import ButtonType from "./types/ButtonType.js";`
`7`	`8`	`import ButtonRenderer from "./build/compiled/ButtonRenderer.lit.js";`
`8`	`9`	`import Icon from "./Icon.js";`
`@@ -193,7 +194,8 @@ class Button extends UI5Element {`
`193`	`194`	`}`
`194`	`195`
`195`	`196`	`onBeforeRendering() {`
`196`		`- if (this.submits && !Button.FormSupport) {`
	`197`	`+ const FormSupport = getFeature("FormSupport");`
	`198`	`+ if (this.submits && !FormSupport) {`
`197`	`199`	console.warn(`In order for the "submits" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
`198`	`200`	`}`
`199`	`201`	`}`
`@@ -210,8 +212,9 @@ class Button extends UI5Element {`
`210`	`212`	`event.isMarked = "button";`
`211`	`213`	`if (!this.disabled) {`
`212`	`214`	`this.fireEvent("press", {});`
`213`		`- if (Button.FormSupport) {`
`214`		`- Button.FormSupport.triggerFormSubmit(this);`
	`215`	`+ const FormSupport = getFeature("FormSupport");`
	`216`	`+ if (FormSupport) {`
	`217`	`+ FormSupport.triggerFormSubmit(this);`
`215`	`218`	`}`
`216`	`219`	`}`
`217`	`220`	`}`