From 3ec202446699ee6325aa90fb78c71b50a68a07fe Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 11 Jan 2018 09:39:51 +0100 Subject: [PATCH] select-kit refactoring * improve events naming/handling * do not explicitly check for true/Fasle * make sure header is re-computed on toggle --- .../select-kit/components/multi-select.js.es6 | 50 ++++++++++------ .../components/none-category-row.js.es6 | 2 +- .../components/pinned-options.js.es6 | 14 +++-- .../select-kit/components/select-kit.js.es6 | 58 +++++++++++++------ .../select-kit/select-kit-create-row.js.es6 | 6 +- .../select-kit/select-kit-header.js.es6 | 2 +- .../select-kit/select-kit-none-row.js.es6 | 2 +- .../select-kit/select-kit-row.js.es6 | 8 +-- .../components/single-select.js.es6 | 33 ++++++----- .../topic-footer-mobile-dropdown.js.es6 | 2 +- .../select-kit/mixins/dom-helpers.js.es6 | 2 + .../select-kit/mixins/events.js.es6 | 2 +- .../components/combo-box/combo-box-header.hbs | 2 +- .../future-date-input-selector-header.hbs | 2 +- .../multi-select/multi-select-header.hbs | 6 +- .../multi-select/selected-category.hbs | 2 +- .../multi-select/selected-color.hbs | 2 +- .../components/multi-select/selected-name.hbs | 2 +- .../templates/components/select-kit.hbs | 24 ++++---- .../select-kit/select-kit-collection.hbs | 16 ++--- .../select-kit/select-kit-filter.hbs | 2 +- .../components/single-select-test.js.es6 | 52 ----------------- test/javascripts/helpers/select-kit-helper.js | 2 +- 23 files changed, 140 insertions(+), 153 deletions(-) diff --git a/app/assets/javascripts/select-kit/components/multi-select.js.es6 b/app/assets/javascripts/select-kit/components/multi-select.js.es6 index 6e334075164..92f96c26a4e 100644 --- a/app/assets/javascripts/select-kit/components/multi-select.js.es6 +++ b/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); diff --git a/app/assets/javascripts/select-kit/components/none-category-row.js.es6 b/app/assets/javascripts/select-kit/components/none-category-row.js.es6 index 60b932920ee..13636aa770c 100644 --- a/app/assets/javascripts/select-kit/components/none-category-row.js.es6 +++ b/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"); } }); diff --git a/app/assets/javascripts/select-kit/components/pinned-options.js.es6 b/app/assets/javascripts/select-kit/components/pinned-options.js.es6 index ca4c65289c7..860e017601a 100644 --- a/app/assets/javascripts/select-kit/components/pinned-options.js.es6 +++ b/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(); + } } } }); diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6 index 27996abd563..66aa76c8ecf 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/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); } } }); diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-create-row.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-create-row.js.es6 index 390408349b9..4ab476091c0 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-create-row.js.es6 +++ b/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" }); diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 index b7705fa9991..3ae115399ff 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 +++ b/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"); } }); diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-none-row.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-none-row.js.es6 index 542b9472c41..b2d488f4992 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-none-row.js.es6 +++ b/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"); } }); diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6 index d4638a9386d..493b7a32bbb 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6 +++ b/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")); } }); diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6 index dd0602b8699..c0f0c3349ea 100644 --- a/app/assets/javascripts/select-kit/components/single-select.js.es6 +++ b/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(); diff --git a/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6 index ccdf3af4890..8bde260f5b8 100644 --- a/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6 +++ b/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": diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 index 6f9e7f556b8..55707f12c68 100644 --- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 @@ -80,11 +80,13 @@ export default Ember.Mixin.create({ this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true }); this.focusFilterOrHeader(); this.autoHighlight(); + this._setHeaderComputedContent(); }, collapse() { this.set("isExpanded", false); Ember.run.schedule("afterRender", () => this._removeFixedPosition() ); + this._setHeaderComputedContent(); }, // lose focus of the component in two steps diff --git a/app/assets/javascripts/select-kit/mixins/events.js.es6 b/app/assets/javascripts/select-kit/mixins/events.js.es6 index 8490293e4ac..9dd501cafbd 100644 --- a/app/assets/javascripts/select-kit/mixins/events.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/events.js.es6 @@ -95,7 +95,7 @@ export default Ember.Mixin.create({ this.$filterInput() .on("change.select-kit", (event) => { - this.send("onFilter", $(event.target).val()); + this.send("filterComputedContent", $(event.target).val()); }) .on("keypress.select-kit", (event) => { event.stopPropagation(); diff --git a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs index 97a66905a99..622baaaf02f 100644 --- a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs +++ b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs @@ -5,7 +5,7 @@ {{#if shouldDisplayClearableButton}} - {{/if}} diff --git a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs index caa167199ec..c419312c696 100644 --- a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs +++ b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs @@ -15,7 +15,7 @@ {{/if}} {{#if shouldDisplayClearableButton}} - {{/if}} diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs index 5cfd580279b..eb4aba3f06d 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs @@ -1,10 +1,12 @@
{{#each computedContent.selectedComputedContents as |selectedComputedContent|}} - {{component selectedNameComponent onDeselect=onDeselect computedContent=selectedComputedContent}} + {{component selectedNameComponent + deselect=deselect + computedContent=selectedComputedContent}} {{/each}} {{component "select-kit/select-kit-filter" - onFilter=onFilter + filterComputedContent=filterComputedContent shouldDisplayFilter=shouldDisplayFilter isFocused=isFocused filter=filter diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs index d96b31245b9..c437056451c 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs @@ -1,5 +1,5 @@ - + {{d-icon "times"}} diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs index 2d70a3d7df3..93087a800ae 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs @@ -1,7 +1,7 @@
{{#unless isLocked}} - + {{d-icon "times"}} {{/unless}} diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs index a48a160ccc7..4ef569464f4 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs @@ -3,7 +3,7 @@ {{d-icon "lock"}} {{else}} - + {{d-icon "times"}} {{/if}} diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs index 576cab22485..5b3ba8691bc 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs @@ -1,24 +1,24 @@ {{component headerComponent tabindex=tabindex + shouldDisplayFilter=shouldDisplayFilter isFocused=isFocused isExpanded=isExpanded computedContent=headerComputedContent - onDeselect=(action "onDeselect") - onToggle=(action "onToggle") - onFilter=(action "onFilter") - onClear=(action "onClear") + deselect=(action "deselect") + toggle=(action "toggle") + filterComputedContent=(action "filterComputedContent") + clearSelection=(action "clearSelection") options=headerComponentOptions - shouldDisplayFilter=shouldDisplayFilter }}
{{component filterComponent - onFilter=(action "onFilter") + filter=filter icon=filterIcon shouldDisplayFilter=shouldDisplayFilter - isFocused=isFocused placeholder=(i18n filterPlaceholder) - filter=filter + isFocused=isFocused + filterComputedContent=(action "filterComputedContent") }} {{#if renderedBodyOnce}} @@ -34,10 +34,10 @@ templateForRow=templateForRow templateForNoneRow=templateForNoneRow templateForCreateRow=templateForCreateRow - onClear=(action "onClear") - onSelect=(action "onSelect") - onHighlight=(action "onHighlight") - onCreate=(action "onCreate") + clearSelection=(action "clearSelection") + select=(action "select") + highlight=(action "highlight") + create=(action "create") noContentLabel=noContentLabel highlightedValue=highlightedValue computedValue=computedValue diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs index f6cd9cf1a60..98919b89242 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs @@ -10,8 +10,8 @@ computedContent=noneRowComputedContent templateForRow=templateForNoneRow highlightedValue=highlightedValue - onClear=onClear - onHighlight=onHighlight + clearSelection=clearSelection + highlight=highlight computedValue=computedValue options=rowComponentOptions }} @@ -21,11 +21,11 @@ {{#if createRowComputedContent}} {{component createRowComponent computedContent=createRowComputedContent - templateForRow=templateForCreateRow highlightedValue=highlightedValue - onHighlight=onHighlight - onCreate=onCreate computedValue=computedValue + templateForRow=templateForCreateRow + highlight=highlight + select=create options=rowComponentOptions }} {{/if}} @@ -33,11 +33,11 @@ {{#each filteredComputedContent as |computedContent|}} {{component rowComponent computedContent=computedContent - templateForRow=templateForRow highlightedValue=highlightedValue - onSelect=onSelect - onHighlight=onHighlight computedValue=computedValue + templateForRow=templateForRow + select=select + highlight=highlight options=rowComponentOptions }} {{/each}} diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs index dd62fca94ad..6815973db3b 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs @@ -2,7 +2,7 @@ tabindex=-1 class="filter-input" placeholder=placeholder - key-up=onFilter + key-up=filterComputedContent autocomplete="off" autocorrect="off" autocapitalize="off" diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6 index 74ec28f97f9..1f7c41807d8 100644 --- a/test/javascripts/components/single-select-test.js.es6 +++ b/test/javascripts/components/single-select-test.js.es6 @@ -469,58 +469,6 @@ componentTest('with collection header', { } }); -componentTest('with onToggle', { - template: '{{single-select onToggle=onToggle}}', - - beforeEach() { - this.set("onToggle", () => $(".select-kit").append("")); - }, - - test(assert) { - andThen(() => assert.notOk(exists(".onToggleTest"))); - - this.get('subject').expand(); - - andThen(() => assert.ok(exists(".onToggleTest"))); - } -}); - -componentTest('with onExpand', { - template: '{{single-select onExpand=onExpand}}', - - beforeEach() { - this.set("onExpand", () => $(".select-kit").append("")); - }, - - test(assert) { - andThen(() => assert.notOk(exists(".onExpandTest"))); - - this.get('subject').expand(); - - andThen(() => assert.ok(exists(".onExpandTest"))); - } -}); - -componentTest('with onCollapse', { - template: '{{single-select onCollapse=onCollapse}}', - - beforeEach() { - this.set("onCollapse", () => $(".select-kit").append("")); - }, - - test(assert) { - andThen(() => assert.notOk(exists(".onCollapseTest"))); - - this.get('subject').expand(); - - andThen(() => assert.notOk(exists(".onCollapseTest"))); - - this.get('subject').collapse(); - - andThen(() => assert.ok(exists(".onCollapseTest"))); - } -}); - componentTest('with title', { template: '{{single-select title=(i18n "test.title")}}', diff --git a/test/javascripts/helpers/select-kit-helper.js b/test/javascripts/helpers/select-kit-helper.js index be2debd6a83..17f5c578c77 100644 --- a/test/javascripts/helpers/select-kit-helper.js +++ b/test/javascripts/helpers/select-kit-helper.js @@ -87,7 +87,7 @@ function selectKit(selector) { // eslint-disable-line no-unused-vars var type = options.type || 'keydown'; var event = jQuery.Event(type); event.keyCode = keyCode; - if (options && options.metaKey === true) { event.metaKey = true; } + if (options && options.metaKey) { event.metaKey = true; } find(eventSelector).trigger(event); }); }