feat: unify basic change handlers

Author: pozil

src/main/default/lwc/getListInfoByName/getListInfoByName.html

@@ -1,15 +1,17 @@
 <template>
     <div class="slds-form">
         <lightning-input
+            name="objectApiName"
             value={objectApiName}
-            onchange={handleObjectApiNameChange}
+            onchange={handleChange}
             type="text"
             label="Object API Name"
             required
         ></lightning-input>
         <lightning-input
+            name="listViewApiName"
             value={listViewApiName}
-            onchange={handleListViewApiNameChange}
+            onchange={handleChange}
             type="text"
             label="List View API Name"
             required

src/main/default/lwc/getListInfoByName/getListInfoByName.js

@@ -20,12 +20,15 @@ export default class GetListInfoByName extends LightningElement {
         );
     }
 
-    handleObjectApiNameChange(event) {
-        this.objectApiName = event.target.value;
-    }
-
-    handleListViewApiNameChange(event) {
-        this.listViewApiName = event.target.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleSendRequest() {

src/main/default/lwc/getListUi/getListUi.html

@@ -1,15 +1,17 @@
 <template>
     <div class="slds-form">
         <lightning-input
+            name="objectApiName"
             value={objectApiName}
-            onchange={handleObjectApiNameChange}
+            onchange={handleChange}
             type="text"
             label="Object API Name"
             required
         ></lightning-input>
         <lightning-input
+            name="listViewApiName"
             value={listViewApiName}
-            onchange={handleListViewApiNameChange}
+            onchange={handleChange}
             type="text"
             label="List View API Name"
             field-level-help="Leave this field empty to retrieve all list views"

src/main/default/lwc/getListUi/getListUi.js

@@ -20,12 +20,15 @@ export default class GetListUi extends LightningElement {
         );
     }
 
-    handleObjectApiNameChange(event) {
-        this.objectApiName = event.target.value;
-    }
-
-    handleListViewApiNameChange(event) {
-        this.listViewApiName = event.target.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleSendRequest() {

src/main/default/lwc/getPicklistValues/getPicklistValues.html

@@ -1,17 +1,19 @@
 <template>
     <div class="slds-form">
         <lightning-input
+            name="recordTypeId"
             value={recordTypeId}
-            onchange={handleRecordTypeIdChange}
+            onchange={handleChange}
             type="text"
             label="Record Type Id"
             min-length="15"
             field-level-help="Use the Object Info 'defaultRecordTypeId' property, which is returned from 'getObjectInfo' or 'getRecordUi'."
             required
         ></lightning-input>
         <lightning-input
+            name="fieldApiName"
             value={fieldApiName}
-            onchange={handleFieldApiNameChange}
+            onchange={handleChange}
             type="text"
             label="Field API Name"
             field-level-help="Field API name prefixed with the object API name like 'Account.Rating'."

src/main/default/lwc/getPicklistValues/getPicklistValues.js

@@ -20,12 +20,15 @@ export default class GetPicklistValues extends LightningElement {
         );
     }
 
-    handleRecordTypeIdChange(event) {
-        this.recordTypeId = event.target.value;
-    }
-
-    handleFieldApiNameChange(event) {
-        this.fieldApiName = event.target.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleSendRequest() {

src/main/default/lwc/getPicklistValuesByRecordType/getPicklistValuesByRecordType.html

@@ -1,16 +1,18 @@
 <template>
     <div class="slds-form">
         <lightning-input
+            name="objectApiName"
             value={objectApiName}
-            onchange={handleObjectApiNameChange}
+            onchange={handleChange}
             type="text"
             label="Object API Name"
             min-length="15"
             required
         ></lightning-input>
         <lightning-input
+            name="recordTypeId"
             value={recordTypeId}
-            onchange={handleRecordTypeIdChange}
+            onchange={handleChange}
             type="text"
             label="Record Type Id"
             field-level-help="Use the Object Info 'defaultRecordTypeId' property, which is returned from 'getObjectInfo' or 'getRecordUi'."

src/main/default/lwc/getPicklistValuesByRecordType/getPicklistValuesByRecordType.js

@@ -20,12 +20,15 @@ export default class GetPicklistValuesByRecordType extends LightningElement {
         );
     }
 
-    handleObjectApiNameChange(event) {
-        this.objectApiName = event.target.value;
-    }
-
-    handleRecordTypeIdChange(event) {
-        this.recordTypeId = event.target.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleSendRequest() {

src/main/default/lwc/getRecord/getRecord.html

@@ -19,8 +19,9 @@
         </div>
 
         <lightning-input
+            name="recordId"
             value={recordId}
-            onchange={handleRecordIdChange}
+            onchange={handleChange}
             type="text"
             label="Record Id"
             min-length="15"
@@ -40,8 +41,9 @@
         <div class="slds-grid slds-gutters">
             <div class="slds-col slds-size_1-of-2">
                 <lightning-input
+                    name="fields"
                     value={fields}
-                    onchange={handleFieldsChange}
+                    onchange={handleChange}
                     type="text"
                     label="Fields"
                     required={isFieldVariant}
@@ -51,27 +53,30 @@
             </div>
             <div class="slds-col slds-size_1-of-2">
                 <lightning-combobox
+                    name="layoutTypes"
                     label="Layout type"
                     value={layoutTypes}
                     options={layoutTypeOptions}
-                    onchange={handleLayoutTypeChange}
+                    onchange={handleChange}
                     required={isModeAndLayoutVariant}
                     disabled={isFieldVariant}
                 ></lightning-combobox>
                 <lightning-combobox
+                    name="modes"
                     label="Mode"
                     value={modes}
                     options={modeOptions}
-                    onchange={handleModeChange}
+                    onchange={handleChange}
                     required={isModeAndLayoutVariant}
                     disabled={isFieldVariant}
                 ></lightning-combobox>
             </div>
         </div>
 
         <lightning-input
+            name="optionalFields"
             value={optionalFields}
-            onchange={handleOptionalFieldChange}
+            onchange={handleChange}
             type="text"
             label="Optional field"
             field-level-help="Field API name prefixed with the object API name like 'Account.Rating'."

src/main/default/lwc/getRecord/getRecord.js

@@ -47,8 +47,15 @@ export default class GetRecordUi extends LightningElement {
         );
     }
 
-    handleRecordIdChange(event) {
-        this.recordId = event.target.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleApiVariantChange(event) {
@@ -61,22 +68,6 @@ export default class GetRecordUi extends LightningElement {
         }
     }
 
-    handleFieldsChange(event) {
-        this.fields = event.target.value;
-    }
-
-    handleLayoutTypeChange(event) {
-        this.layoutTypes = event.detail.value;
-    }
-
-    handleModeChange(event) {
-        this.modes = event.detail.value;
-    }
-
-    handleOptionalFieldChange(event) {
-        this.optionalFields = event.detail.value;
-    }
-
     handleSendRequest() {
         this.recordIdFinal = this.recordId;
         if (this.apiVariant === API_VARIANT_FIELDS) {

src/main/default/lwc/getRecordUi/getRecordUi.html

@@ -19,30 +19,34 @@
         </div>
 
         <lightning-input
+            name="recordIds"
             value={recordIds}
-            onchange={handleRecordIdsChange}
+            onchange={handleChange}
             type="text"
             label="Record Id"
             min-length="15"
             required
         ></lightning-input>
         <lightning-combobox
+            name="layoutTypes"
             label="Layout type"
             value={layoutTypes}
             options={layoutTypeOptions}
-            onchange={handleLayoutTypeChange}
+            onchange={handleChange}
             required
         ></lightning-combobox>
         <lightning-combobox
+            name="modes"
             label="Mode"
             value={modes}
             options={modeOptions}
-            onchange={handleModeChange}
+            onchange={handleChange}
             required
         ></lightning-combobox>
         <lightning-input
+            name="optionalFields"
             value={optionalFields}
-            onchange={handleOptionalFieldChange}
+            onchange={handleChange}
             type="text"
             label="Optional field"
             field-level-help="Field API name prefixed with the object API name like 'Account.Rating'."

src/main/default/lwc/getRecordUi/getRecordUi.js

@@ -27,20 +27,15 @@ export default class GetRecordUi extends LightningElement {
         );
     }
 
-    handleRecordIdsChange(event) {
-        this.recordIds = event.detail.value;
-    }
-
-    handleLayoutTypeChange(event) {
-        this.layoutTypes = event.detail.value;
-    }
-
-    handleModeChange(event) {
-        this.modes = event.detail.value;
-    }
-
-    handleOptionalFieldChange(event) {
-        this.optionalFields = event.detail.value;
+    handleChange(event) {
+        const element = event.target;
+        if (event.detail) {
+            // Dropdown
+            this[element.name] = event.detail.value;
+        } else {
+            // Other inputs
+            this[element.name] = element.value;
+        }
     }
 
     handleSendRequest() {

src/main/default/lwc/getRecords/getRecords.html

@@ -19,8 +19,9 @@
         </div>
 
         <lightning-input
+            name="recordIds"
             value={recordIds}
-            onchange={handleRecordIdsChange}
+            onchange={handleChange}
             type="text"
             label="Record Ids"
             min-length="15"
@@ -41,8 +42,9 @@
         <div class="slds-grid slds-gutters">
             <div class="slds-col slds-size_1-of-2">
                 <lightning-input
+                    name="fields"
                     value={fields}
-                    onchange={handleFieldsChange}
+                    onchange={handleChange}
                     type="text"
                     label="Fields"
                     required={isFieldVariant}
@@ -52,27 +54,30 @@
             </div>
             <div class="slds-col slds-size_1-of-2">
                 <lightning-combobox
+                    name="layoutTypes"
                     label="Layout type"
                     value={layoutTypes}
                     options={layoutTypeOptions}
-                    onchange={handleLayoutTypeChange}
+                    onchange={handleChange}
                     required={isModeAndLayoutVariant}
                     disabled={isFieldVariant}
                 ></lightning-combobox>
                 <lightning-combobox
+                    name="modes"
                     label="Mode"
                     value={modes}
                     options={modeOptions}
-                    onchange={handleModeChange}
+                    onchange={handleChange}
                     required={isModeAndLayoutVariant}
                     disabled={isFieldVariant}
                 ></lightning-combobox>
             </div>
         </div>
 
         <lightning-input
+            name="optionalFields"
             value={optionalFields}
-            onchange={handleOptionalFieldChange}
+            onchange={handleChange}
             type="text"
             label="Optional field"
             field-level-help="Field API name prefixed with the object API name like 'Account.Rating'."