feat(select): Simplify notifyChange adapter API

material-components · Oct 24, 2018 · e28eb07 · e28eb07
1 parent 5fb5d42
commit e28eb07
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -452,7 +452,7 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `setSelectedIndex(index: number) => void` | Selects the option or list item at the specified index. |
 | `setDisabled(isDisabled: boolean) => void` | Enables or disables the native or enhanced select. |
 | `setRippleCenter(normalizedX: number) => void` | Sets the line ripple center to the provided normalizedX value. |
-| `notifyChange({value: string}: Object) => void` | Emits the `MDCSelect:change` event when an element is selected. |
+| `notifyChange(value: string) => void` | Emits the `MDCSelect:change` event when an element is selected. |
 | `checkValidity() => boolean` | Returns whether the component is currently valid, using the native select's `checkValidity` or equivalent logic for the enhanced select. |
 | `setValid(isValid: boolean) => void` | Adds or removes invalid styles. |
 

diff --git a/packages/mdc-select/adapter.js b/packages/mdc-select/adapter.js
@@ -167,11 +167,9 @@ class MDCSelectAdapter {
 
   /**
    * Emits a change event when an element is selected.
-   * @param {!{
- *    value: string
- *   }} evtData
+   * @param {string} value
    */
-  notifyChange(evtData) {}
+  notifyChange(value) {}
 
   /**
    * Checks if the select is currently valid.

diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
@@ -138,7 +138,7 @@ class MDCSelectFoundation extends MDCFoundation {
   /**
    * Handles value changes, via change event or programmatic updates.
    */
-  handleChange(didChange) {
+  handleChange(didChange = true) {
     const value = this.getValue();
     const optionHasValue = value.length > 0;
     const isRequired = this.adapter_.hasClass(cssClasses.REQUIRED);
@@ -150,7 +150,7 @@ class MDCSelectFoundation extends MDCFoundation {
     }
 
     if (didChange) {
-      this.adapter_.notifyChange({value});
+      this.adapter_.notifyChange(value);
 
       if (isRequired) {
         this.setValid(this.isValid());

diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
@@ -545,7 +545,7 @@ class MDCSelect extends MDCComponent {
    *   setRippleCenter: function(number): void,
    *   activateBottomLine: function(): void,
    *   deactivateBottomLine: function(): void,
-   *   notifyChange: function(!{value: string}): void
+   *   notifyChange: function(string): void
    * }}
    * @private
    */
@@ -558,9 +558,9 @@ class MDCSelect extends MDCComponent {
       setRippleCenter: (normalizedX) => this.lineRipple_ && this.lineRipple_.setRippleCenter(normalizedX),
       activateBottomLine: () => this.lineRipple_ && this.lineRipple_.activate(),
       deactivateBottomLine: () => this.lineRipple_ && this.lineRipple_.deactivate(),
-      notifyChange: (evtData) => {
-        evtData.index = this.selectedIndex;
-        this.emit(strings.CHANGE_EVENT, evtData, true /* shouldBubble  */);
+      notifyChange: (value) => {
+        const index = this.selectedIndex;
+        this.emit(strings.CHANGE_EVENT, {value, index}, true /* shouldBubble  */);
       },
     };
   }

diff --git a/test/unit/mdc-select/mdc-select.test.js b/test/unit/mdc-select/mdc-select.test.js
@@ -388,6 +388,23 @@ test('adapter#setSelectedIndex sets the select selected index to the index speci
   assert.equal(nativeControl.selectedIndex, 2);
 });
 
+test('adapter#notifyChange emits event with index and value', () => {
+  const {component, nativeControl} = setupTest();
+  nativeControl.options[0].selected = false;
+  nativeControl.options[1].selected = true;
+
+  let detail;
+  component.listen(strings.CHANGE_EVENT, (event) => {
+    detail = event.detail;
+  });
+
+  const value = nativeControl.options[1].value;
+  component.getDefaultFoundation().adapter_.notifyChange(value);
+  assert.isDefined(detail);
+  assert.equal(detail.index, 1);
+  assert.equal(detail.value, value);
+});
+
 test('instantiates ripple', function() {
   if (!supportsCssVariables(window, true)) {
     this.skip(); // eslint-disable-line no-invalid-this