select-kit refactoring

* improve events naming/handling
* do not explicitly check for true/Fasle
* make sure header is re-computed on toggle

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -85,7 +85,6 @@ export default SelectKitComponent.extend({
     Ember.run.next(() => {
       this.mutateContent(this.get("computedContent"));
       this.mutateValues(this.get("computedValues"));
-      applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValues"), this);
       this._setHeaderComputedContent();
     });
   },
@@ -107,7 +106,7 @@ export default SelectKitComponent.extend({
       return !computedValues.includes(get(c, "value"));
     });
 
-    if (this.get("shouldFilter") === true) {
+    if (this.get("shouldFilter")) {
       computedContent = this.filterComputedContent(computedContent, computedValues, filter);
     }
 
@@ -162,7 +161,7 @@ export default SelectKitComponent.extend({
         const computedContent = this._findComputedContentItemByGuid($(el).attr("data-guid"));
         if (!Ember.isNone(computedContent)) { highlightedComputedContents.push(computedContent); }
       });
-      this.send("onDeselect", highlightedComputedContents);
+      this.send("deselect", highlightedComputedContents);
       return;
     }
 
@@ -208,18 +207,18 @@ export default SelectKitComponent.extend({
 
   autoHighlight() {
     Ember.run.schedule("afterRender", () => {
-      if (this.get("isExpanded") === false) { return; }
-      if (this.get("renderedBodyOnce") === false) { return; }
-      if (!isNone(this.get("highlightedValue"))) { return; }
+      if (!this.get("isExpanded")) return;
+      if (!this.get("renderedBodyOnce")) return;
+      if (!isNone(this.get("highlightedValue"))) return;
 
       if (isEmpty(this.get("filteredComputedContent"))) {
         if (this.get("createRowComputedContent")) {
-          this.send("onHighlight", this.get("createRowComputedContent"));
-        } else if (this.get("noneRowComputedContent") && this.get("hasSelection") === true) {
-          this.send("onHighlight", this.get("noneRowComputedContent"));
+          this.send("highlight", this.get("createRowComputedContent"));
+        } else if (this.get("noneRowComputedContent") && this.get("hasSelection")) {
+          this.send("highlight", this.get("noneRowComputedContent"));
         }
       } else {
-        this.send("onHighlight", this.get("filteredComputedContent.firstObject"));
+        this.send("highlight", this.get("filteredComputedContent.firstObject"));
       }
     });
   },
@@ -227,6 +226,19 @@ export default SelectKitComponent.extend({
   didSelect() {
     this.focusFilterOrHeader();
     this.autoHighlight();
+
+    applyOnSelectPluginApiCallbacks(
+      this.get("pluginApiIdentifiers"),
+      this.get("computedValue"),
+      this
+    );
+
+    this._boundaryActionHandler("onSelect", this.get("computedValue"));
+  },
+
+  willDeselect() {
+    this.clearFilter();
+    this.set("highlightedValue", null);
   },
 
   didDeselect() {
@@ -239,27 +251,29 @@ export default SelectKitComponent.extend({
   },
 
   actions: {
-    onClear() {
-      this.get("selectedComputedContents").forEach(selectedComputedContent => {
-        this.send("onDeselect", selectedComputedContent);
-      });
+    clearSelection() {
+      this.send("deselect", this.get("selectedComputedContents"));
+      this._boundaryActionHandler("onClearSelection");
     },
 
-    onCreate(computedContentItem) {
+    create(computedContentItem) {
       if (this.validateComputedContentItem(computedContentItem)) {
         this.get("computedContent").pushObject(computedContentItem);
-        this.send("onSelect", computedContentItem);
+        this._boundaryActionHandler("onCreate");
+        this.send("select", computedContentItem);
+      } else {
+        this._boundaryActionHandler("onCreateFailure");
       }
     },
 
-    onSelect(computedContentItem) {
+    select(computedContentItem) {
       this.willSelect(computedContentItem);
       this.get("computedValues").pushObject(computedContentItem.value);
       Ember.run.next(() => this.mutateAttributes());
       Ember.run.schedule("afterRender", () => this.didSelect(computedContentItem));
     },
 
-    onDeselect(rowComputedContentItems) {
+    deselect(rowComputedContentItems) {
       rowComputedContentItems = Ember.makeArray(rowComputedContentItems);
       const generatedComputedContents = this._filterRemovableComputedContents(makeArray(rowComputedContentItems));
       this.willDeselect(rowComputedContentItems);

app/assets/javascripts/select-kit/components/none-category-row.js.es6

@@ -5,6 +5,6 @@ export default CategoryRowComponent.extend({
   classNames: "none category-row",
 
   click() {
-    this.sendAction("onClear");
+    this.sendAction("clearSelection");
   }
 });

app/assets/javascripts/select-kit/components/pinned-options.js.es6

@@ -44,13 +44,15 @@ export default DropdownSelectBoxComponent.extend({
     ]);
   },
 
-  mutateValue(value) {
-    const topic = this.get("topic");
+  actions: {
+    onSelect() {
+      const topic = this.get("topic");
 
-    if (value === "unpinned") {
-      topic.clearPin();
-    } else {
-      topic.rePin();
+      if (this.get("computedValue") === "unpinned") {
+        topic.clearPin();
+      } else {
+        topic.rePin();
+      }
     }
   }
 });

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -6,7 +6,8 @@ import EventsMixin from "select-kit/mixins/events";
 import PluginApiMixin from "select-kit/mixins/plugin-api";
 import {
   applyContentPluginApiCallbacks,
-  applyHeaderContentPluginApiCallbacks
+  applyHeaderContentPluginApiCallbacks,
+  applyOnSelectPluginApiCallbacks
 } from "select-kit/mixins/plugin-api";
 
 export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, {
@@ -138,8 +139,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
 
   @computed("shouldFilter", "allowAny", "filter")
   shouldDisplayFilter(shouldFilter, allowAny, filter) {
-    if (shouldFilter === true) return true;
-    if (allowAny === true && filter.length > 0) return true;
+    if (shouldFilter) return true;
+    if (allowAny && filter.length > 0) return true;
     return false;
   },
 
@@ -150,22 +151,22 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
 
   @computed("filter", "filterable", "autoFilterable", "renderedFilterOnce")
   shouldFilter(filter, filterable, autoFilterable, renderedFilterOnce) {
-    if (renderedFilterOnce === true && filterable === true) return true;
-    if (filterable === true) return true;
-    if (autoFilterable === true && filter.length > 0) return true;
+    if (renderedFilterOnce && filterable) return true;
+    if (filterable) return true;
+    if (autoFilterable && filter.length > 0) return true;
     return false;
   },
 
   @computed("filter", "computedContent")
   shouldDisplayCreateRow(filter, computedContent) {
     if (computedContent.map(c => c.value).includes(filter)) return false;
-    if (this.get("allowAny") === true && filter.length > 0) return true;
+    if (this.get("allowAny") && filter.length > 0) return true;
     return false;
   },
 
   @computed("filter", "shouldDisplayCreateRow")
   createRowComputedContent(filter, shouldDisplayCreateRow) {
-    if (shouldDisplayCreateRow === true) {
+    if (shouldDisplayCreateRow) {
       let content = this.createContentFromInput(filter);
       return this.computeContentItem(content, { created: true });
     }
@@ -209,15 +210,24 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   didSelect() {
     this.collapse();
     this.focus();
+
+    applyOnSelectPluginApiCallbacks(
+      this.get("pluginApiIdentifiers"),
+      this.get("computedValue"),
+      this
+    );
+
+    this._boundaryActionHandler("onSelect", this.get("computedValue"));
   },
 
   willDeselect() {
     this.clearFilter();
     this.set("highlightedValue", null);
   },
-  didDeselect() {
+  didDeselect(rowComputedContentItem) {
     this.collapse();
     this.focus();
+    this._boundaryActionHandler("onDeselect", rowComputedContentItem);
   },
 
   clearFilter() {
@@ -234,28 +244,40 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     this.set("headerComputedContent", headerComputedContent);
   },
 
+  _boundaryActionHandler(actionName, ...params) {
+    if (Ember.get(this.actions, actionName)) {
+      this.send(actionName, ...params);
+    } else if (this.get(actionName)) {
+      this.get(actionName)();
+    }
+  },
+
   actions: {
-    onToggle() {
-      if (this.get("onToggle")) this.sendAction("onToggle");
-      if (this.get("onCollapse") && this.get("isExpanded") === true) this.sendAction("onCollapse");
-      if (this.get("onExpand") && this.get("isExpanded") === false) this.sendAction("onExpand");
+    toggle() {
+      this._boundaryActionHandler("onToggle", this);
 
-      this.get("isExpanded") === true ? this.collapse() : this.expand();
-
-      this._setHeaderComputedContent();
+      if (this.get("isExpanded")) {
+        this._boundaryActionHandler("onCollapse", this);
+        this.collapse();
+      } else {
+        this._boundaryActionHandler("onExpand", this);
+        this.expand();
+      }
     },
 
-    onHighlight(rowComputedContent) {
+    highlight(rowComputedContent) {
       this.set("highlightedValue", rowComputedContent.value);
+      this._boundaryActionHandler("onHighlight", rowComputedContent);
     },
 
-    onFilter(filter) {
+    filterComputedContent(filter) {
       this.setProperties({
         highlightedValue: null,
         renderedFilterOnce: true,
         filter
       });
       this.autoHighlight();
+      this._boundaryActionHandler("onFilter", filter);
     }
   }
 });

app/assets/javascripts/select-kit/components/select-kit/select-kit-create-row.js.es6

@@ -2,9 +2,5 @@ import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-r
 
 export default SelectKitRowComponent.extend({
   layoutName: "select-kit/templates/components/select-kit/select-kit-row",
-  classNames: "create",
-
-  click() {
-    this.sendAction("onCreate", this.get("computedContent"));
-  },
+  classNames: "create"
 });

app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6

@@ -37,6 +37,6 @@ export default Ember.Component.extend({
   },
 
   click() {
-    this.sendAction("onToggle");
+    this.sendAction("toggle");
   }
 });

app/assets/javascripts/select-kit/components/select-kit/select-kit-none-row.js.es6

@@ -5,6 +5,6 @@ export default SelectKitRowComponent.extend({
   classNames: "none",
 
   click() {
-    this.sendAction("onClear");
+    this.sendAction("clearSelection");
   }
 });

app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6

@@ -57,14 +57,14 @@ export default Ember.Component.extend(UtilsMixin, {
   },
 
   mouseEnter() {
-    this.set("hoverDebounce", run.debounce(this, this._sendOnHighlightAction, 32));
+    this.set("hoverDebounce", run.debounce(this, this._sendHighlightAction, 32));
   },
 
   click() {
-    this.sendAction("onSelect", this.get("computedContent"));
+    this.sendAction("select", this.get("computedContent"));
   },
 
-  _sendOnHighlightAction() {
-    this.sendAction("onHighlight", this.get("computedContent"));
+  _sendHighlightAction() {
+    this.sendAction("highlight", this.get("computedContent"));
   }
 });

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -2,9 +2,6 @@ import SelectKitComponent from "select-kit/components/select-kit";
 import { on } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
 const { get, isNone, isEmpty, isPresent, run } = Ember;
-import {
-  applyOnSelectPluginApiCallbacks
-} from "select-kit/mixins/plugin-api";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["single-select"],
@@ -26,10 +23,11 @@ export default SelectKitComponent.extend({
       value = this._beforeDidComputeValue(value);
       this.didComputeContent(content);
       this.didComputeValue(value);
-      this._setHeaderComputedContent();
       this.didComputeAttributes();
 
       if (this.get("allowInitialValueMutation")) this.mutateAttributes();
+
+      this._setHeaderComputedContent();
     });
   },
 
@@ -39,7 +37,6 @@ export default SelectKitComponent.extend({
     run.next(() => {
       this.mutateContent(this.get("computedContent"));
       this.mutateValue(this.get("computedValue"));
-      applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValue"), this);
       this._setHeaderComputedContent();
     });
   },
@@ -119,23 +116,23 @@ export default SelectKitComponent.extend({
       const none = this.get("noneRowComputedContent");
 
       if (this.get("hasSelection") && isEmpty(this.get("filter"))) {
-        this.send("onHighlight", this.get("selectedComputedContent"));
+        this.send("highlight", this.get("selectedComputedContent"));
         return;
       }
 
       if (isNone(this.get("highlightedValue")) && !isEmpty(filteredComputedContent)) {
-        this.send("onHighlight", get(filteredComputedContent, "firstObject"));
+        this.send("highlight", get(filteredComputedContent, "firstObject"));
         return;
       }
 
       if (displayCreateRow === true && isEmpty(filteredComputedContent)) {
-        this.send("onHighlight", this.get("createRowComputedContent"));
+        this.send("highlight", this.get("createRowComputedContent"));
       }
       else if (!isEmpty(filteredComputedContent)) {
-        this.send("onHighlight", get(filteredComputedContent, "firstObject"));
+        this.send("highlight", get(filteredComputedContent, "firstObject"));
       }
       else if (isEmpty(filteredComputedContent) && isPresent(none) && displayCreateRow === false) {
-        this.send("onHighlight", none);
+        this.send("highlight", none);
       }
     });
   },
@@ -145,25 +142,29 @@ export default SelectKitComponent.extend({
   },
 
   actions: {
-    onClear() {
-      this.send("onDeselect", this.get("selectedComputedContent"));
+    clearSelection() {
+      this.send("deselect", this.get("selectedComputedContent"));
+      this._boundaryActionHandler("onClearSelection");
     },
 
-    onCreate(computedContentItem) {
+    create(computedContentItem) {
       if (this.validateComputedContentItem(computedContentItem)) {
         this.get("computedContent").pushObject(computedContentItem);
-        this.send("onSelect", computedContentItem);
+        this._boundaryActionHandler("onCreate");
+        this.send("select", computedContentItem);
+      } else {
+        this._boundaryActionHandler("onCreateFailure");
       }
     },
 
-    onSelect(rowComputedContentItem) {
+    select(rowComputedContentItem) {
       this.willSelect(rowComputedContentItem);
       this.set("computedValue", rowComputedContentItem.value);
       this.mutateAttributes();
       run.schedule("afterRender", () => this.didSelect(rowComputedContentItem));
     },
 
-    onDeselect(rowComputedContentItem) {
+    deselect(rowComputedContentItem) {
       this.willDeselect(rowComputedContentItem);
       this.set("computedValue", null);
       this.mutateAttributes();

app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6

@@ -45,7 +45,7 @@ export default ComboBoxComponent.extend({
       return;
     }
 
-    const refresh = () => this.send("onDeselect", value);
+    const refresh = () => this.send("deselect", value);
 
     switch(value) {
       case "invite":