Issue #420 - Splitting onOpen and onClose to before and after actions

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.0.6
+- [DEPRECATION] Deprecate onOpen and onClose hooks. Suggest to use onBeforeOpen and onBeforeClose
+- [ENHANCEMENT] Add onAfterOpen and onAfterClose hooks that are called after changes in the dropdown state
+
 # 2.0.5
 - [CHORE] Update npm packages to tests pass in beta and canary
 - [BUGFIX] Ensure Ember doesn't complain about not using `set` to update values.

addon/components/basic-dropdown.js

@@ -10,6 +10,7 @@ import templateLayout from '../templates/components/basic-dropdown';
 import calculatePosition from '../utils/calculate-position';
 import { assign } from '@ember/polyfills';
 import requirejs from 'require';
+import { deprecate } from '@ember/application/deprecations';
 
 const ignoredStyleAttrs = [
   'top',
@@ -89,10 +90,23 @@ export default @layout(templateLayout) @tagName('') class BasicDropdown extends
     if (this.publicAPI.disabled || this.publicAPI.isOpen) {
       return;
     }
-    if (this.onOpen && this.onOpen(this.publicAPI, e) === false) {
+    if (this.onOpen) {
+      deprecate("onOpen is deprecated and will be removed in the future. Please use onBeforeOpen instead", false, {
+        id: 'ember-basic-dropdown.onOpen',
+        until: '3.0.0',
+        url: 'https://ember-basic-dropdown.com/docs/dropdown-events',
+      });
+      if (this.onOpen(this.publicAPI, e) === false) {
+        return;
+      }
+    }
+    if (this.onBeforeOpen && this.onBeforeOpen(this.publicAPI, e) === false) {
       return;
     }
     this.updateState({ isOpen: true });
+    if (this.onAfterOpen) {
+      this.onAfterOpen(this.publicAPI, e);
+    }
   }
 
   close(e, skipFocus) {
@@ -102,7 +116,17 @@ export default @layout(templateLayout) @tagName('') class BasicDropdown extends
     if (this.publicAPI.disabled || !this.publicAPI.isOpen) {
       return;
     }
-    if (this.onClose && this.onClose(this.publicAPI, e) === false) {
+    if (this.onClose) {
+      deprecate("onClose is deprecated and will be removed in the future. Please use onBeforeClose instead", false, {
+        id: 'ember-basic-dropdown.onClose',
+        until: '3.0.0',
+        url: 'https://ember-basic-dropdown.com/docs/dropdown-events',
+      });
+      if (this.onClose(this.publicAPI, e) === false) {
+        return;
+      }
+    }
+    if (this.onBeforeClose && this.onBeforeClose(this.publicAPI, e) === false) {
       return;
     }
     if (this.isDestroyed) {
@@ -111,6 +135,10 @@ export default @layout(templateLayout) @tagName('') class BasicDropdown extends
     this.setProperties({ hPosition: null, vPosition: null, top: null, left: null, right: null, width: null, height: null });
     this.previousVerticalPosition = this.previousHorizontalPosition = null;
     this.updateState({ isOpen: false });
+    // NOTE: onAfterClose isn't going to be called if the dropdown was destroyed
+    if (this.onAfterClose) {
+      this.onAfterClose(this.publicAPI, e);
+    }
     if (skipFocus) {
       return;
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ember-basic-dropdown",
-  "version": "2.0.5",
-  "description": "The default blueprint for ember-cli addons.",
+  "version": "2.0.6",
+  "description": "The basic dropdown that your ember needs",
   "homepage": "http://ember-basic-dropdown.com",
   "scripts": {
     "build": "ember build",

tests/dummy/app/templates/public-pages/docs/api-reference.hbs

@@ -89,14 +89,34 @@
       <td>An action that will be invoked with the new public API of the component every time there is a change in the state of the component.</td>
     </tr>
     <tr>
-      <td>onOpen</td>
+      <td>onBeforeOpen</td>
       <td><code>Function</code></td>
       <td>Action that will be called when the component is about to open. Returning <code>false</code> from this function will prevent the component from being opened.</td>
     </tr>
     <tr>
-      <td>onClose    </td>
+      <td>onAfterOpen</td>
+      <td><code>Function</code></td>
+      <td>Action that will be called when the component has finished opening</td>
+    </tr>
+    <tr>
+      <td>onBeforeClose</td>
+      <td><code>Function</code></td>
+      <td>Action that will be called when the component is about to close. Returning <code>false</code> from this function will prevent the component from being opened.</td>
+    </tr>
+    <tr>
+      <td>onAfterClose</td>
+      <td><code>Function</code></td>
+      <td>Action that will be called when the component has finished closing <b>only if</b> the dropdown hasn't been destroyed.</td>
+    </tr>
+    <tr>
+      <td>onOpen</td>
+      <td><code>Function</code></td>
+      <td><strong>[DEPRECATED]</strong> Action that will be called when the component is about to open. Returning <code>false</code> from this function will prevent the component from being opened.</td>
+    </tr>
+    <tr>
+      <td>onClose</td>
       <td><code>Function</code></td>
-      <td>Action that will be called when the component is about to close. Returning <code>false</code> from this function will prevent the component from being closed.</td>
+      <td><strong>[DEPRECATED]</strong> Action that will be called when the component is about to close. Returning <code>false</code> from this function will prevent the component from being closed.</td>
     </tr>
   </tbody>
 </table>
@@ -219,4 +239,4 @@
 
 <div class="doc-page-nav">
   <a href={{href-to "public-pages.docs.test-helpers"}} class="doc-page-nav-link-prev">&lt; Test helpers</a>
-</div>
+</div>

tests/dummy/app/templates/public-pages/docs/dropdown-events.hbs

@@ -9,7 +9,7 @@
   This has no mystery.
 </p>
 
-<h3><code>onOpen(dropdown, event?)</code></h3>
+<h3><code>onBeforeOpen(dropdown, event?)</code></h3>
 
 <p>
   Pretty self-explanatory. The <code>dropdown</code> argument in the signature
@@ -46,7 +46,7 @@
 
 <p><em><small>For the record, I don't think this is good UX</small></em></p>
 
-<h3><code>onClose(dropdown, event?)</code></h3>
+<h3><code>onBeforeClose(dropdown, event?)</code></h3>
 
 <p>
   Symmetrically, you can perform on action when the dropdown is closed. For example, save
@@ -65,6 +65,19 @@
 
 <p>Cruel, isn't it?</p>
 
+<h3><code>onAfterOpen(dropdown, event?)</code></h3>
+
+<p>
+  In addition to the <i>before</i> hooks mentioned above, there are accompanying hooks that get called immediately after state has been changed in the dropdown. The <code>dropdown</code> argument is the updated public API of the component that reflects these changes in state.
+</p>
+
+<h3><code>onAfterClose(dropdown, event?)</code></h3>
+
+<p>
+  There is something you should know about this hook: If the dropdown has been destroyed,
+  this will not get called.
+</p>
+
 <p>
   Those were the events fired by the top-level component, now let's go deep on the
   events that are fired by the trigger.

tests/dummy/app/templates/snippets/custom-position-2.hbs

@@ -1,9 +1,9 @@
-<BasicDropdown @calculatePosition={{calculatePosition}} @onOpen={{perform addNames}} as |dd|>
+<BasicDropdown @calculatePosition={{calculatePosition}} @onBeforeOpen={{perform addNames}} as |dd|>
   <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
 
   <dd.Content class="content-bootstrap-feel arrow-left-content">
     {{#each names as |name|}}
       {{name}} <br>
     {{/each}}
   </dd.Content>
-</BasicDropdown>
+</BasicDropdown>

tests/dummy/app/templates/snippets/dropdown-events-1.hbs

@@ -1,4 +1,4 @@
-<BasicDropdown @onOpen={{perform this.loadUsers}} as |dd|>
+<BasicDropdown @onBeforeOpen={{perform this.loadUsers}} as |dd|>
   <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
 
   <dd.Content class="content-bootstrap-feel width-300">
@@ -10,4 +10,4 @@
       {{/each}}
     {{/if}}
   </dd.Content>
-</BasicDropdown>
+</BasicDropdown>

tests/dummy/app/templates/snippets/dropdown-events-2.hbs

@@ -1,4 +1,4 @@
-<BasicDropdown @onOpen={{this.waitForUsers}} as |dd|>
+<BasicDropdown @onBeforeOpen={{this.waitForUsers}} as |dd|>
   <dd.Trigger class="trigger-bootstrap-feel">
     {{#if this.loadUsersAndOpen.isRunning}}
       Loading...
@@ -12,4 +12,4 @@
       <p>{{user.name}} - {{user.assignment}}</p>
     {{/each}}
   </dd.Content>
-</BasicDropdown>
+</BasicDropdown>

tests/dummy/app/templates/snippets/dropdown-events-3.hbs

@@ -1,4 +1,4 @@
-<BasicDropdown @onClose={{this.preventUntilSelected}} as |dd|>
+<BasicDropdown @onBeforeClose={{this.preventUntilSelected}} as |dd|>
   <dd.Trigger class="trigger-bootstrap-feel">Click me</dd.Trigger>
 
   <dd.Content class="content-bootstrap-feel width-300">
@@ -14,4 +14,4 @@
       <label for="question-2">Mom</label>
     </p>
   </dd.Content>
-</BasicDropdown>
+</BasicDropdown>