From 316f0fbde18658d1093f9c553a52e60d0fd8859b Mon Sep 17 00:00:00 2001 From: robdel12 Date: Thu, 6 Oct 2016 20:51:44 -0500 Subject: [PATCH 1/4] Update actions to kebob case & arguments. Now we send the same arguments for all of the actions. The value of the select & the event. --- README.md | 22 ++--- addon/components/x-select.js | 10 +-- tests/dummy/app/controllers/events/blur.js | 2 +- tests/dummy/app/controllers/events/click.js | 2 +- .../dummy/app/controllers/events/focus-out.js | 2 +- tests/dummy/app/templates/events/blur.hbs | 2 +- tests/dummy/app/templates/events/click.hbs | 2 +- .../dummy/app/templates/events/focus-out.hbs | 2 +- .../components/default-value-test.js | 45 ++++++++++ .../components/two-way-data-binding-test.js | 89 ------------------- 10 files changed, 67 insertions(+), 111 deletions(-) create mode 100644 tests/integration/components/default-value-test.js delete mode 100644 tests/integration/components/two-way-data-binding-test.js diff --git a/README.md b/README.md index 8056ba5..20d5aaa 100644 --- a/README.md +++ b/README.md @@ -127,22 +127,22 @@ export default Ember.Route.extend({ x-select also provides other actions that fire on different event types. These actions follow the HTML input event naming convention. -**onblur** +**on-blur** -`onblur` fires anytime the `blur` event is triggered on the x-select -component. When the action fires it sends three arguments: the -component, the value, and the jQuery event. +`on-blur` fires anytime the `blur` event is triggered on the x-select +component. When the action fires it sends two arguments: the value, +and the jQuery event. -**onfocusout** +**on-focus-out** -`onfocusout` fires anytime the `focusOut` event is triggered on the x-select -component. When the action fires it sends three arguments: the -component, the value, and the jQuery event. +`on-focus-out` fires anytime the `focusOut` event is triggered on the x-select +component. When the action fires it sends two arguments: the value, +and the jQuery event. -**onclick** +**on-click** -`onclick` fires when x-select is clicked. When the action fires it -sends three arguments: the component, the value, and the jQuery event. +`on-click` fires when x-select is clicked. When the action fires it +sends two arguments: the value, and the jQuery event. **on-disable** (x-option) diff --git a/addon/components/x-select.js b/addon/components/x-select.js index 42cb443..80a1942 100644 --- a/addon/components/x-select.js +++ b/addon/components/x-select.js @@ -78,8 +78,8 @@ export default Ember.Component.extend({ change(event) { let nextValue = this._getValue(); - this.sendAction('action', nextValue, this); - this.sendAction('onchange', this, nextValue, event); + this.sendAction('action', nextValue, event); + this.sendAction('on-change', nextValue, event); }, /** @@ -87,7 +87,7 @@ export default Ember.Component.extend({ * component's action with the component, x-select value, and the jQuery event. */ click(event) { - this.sendAction('onclick', this, this._getValue(), event); + this.sendAction('on-click', this._getValue(), event); }, /** @@ -95,7 +95,7 @@ export default Ember.Component.extend({ * component's action with the component, x-select value, and the jQuery event. */ blur(event) { - this.sendAction('onblur', this, this._getValue(), event); + this.sendAction('on-blur', this._getValue(), event); }, /** @@ -103,7 +103,7 @@ export default Ember.Component.extend({ * component's action with the component, x-select value, and the jQuery event. */ focusOut(event) { - this.sendAction('onfocusout', this, this._getValue(), event); + this.sendAction('on-focus-out', this._getValue(), event); }, /** diff --git a/tests/dummy/app/controllers/events/blur.js b/tests/dummy/app/controllers/events/blur.js index 15a5065..e941b29 100644 --- a/tests/dummy/app/controllers/events/blur.js +++ b/tests/dummy/app/controllers/events/blur.js @@ -2,7 +2,7 @@ import Ember from 'ember'; export default Ember.Controller.extend({ actions: { - onBlur(component, value, event) { + onBlur(value, event) { this.set('eventType', event.type); } } diff --git a/tests/dummy/app/controllers/events/click.js b/tests/dummy/app/controllers/events/click.js index 99b6ee9..d53ca33 100644 --- a/tests/dummy/app/controllers/events/click.js +++ b/tests/dummy/app/controllers/events/click.js @@ -2,7 +2,7 @@ import Ember from 'ember'; export default Ember.Controller.extend({ actions: { - onClick(component, value, event) { + onClick(value, event) { this.set('eventType', event.type); } } diff --git a/tests/dummy/app/controllers/events/focus-out.js b/tests/dummy/app/controllers/events/focus-out.js index f6735c7..f1f39a8 100644 --- a/tests/dummy/app/controllers/events/focus-out.js +++ b/tests/dummy/app/controllers/events/focus-out.js @@ -2,7 +2,7 @@ import Ember from 'ember'; export default Ember.Controller.extend({ actions: { - focusOut(component, value, event) { + focusOut(value, event) { this.set('eventType', event.type); } } diff --git a/tests/dummy/app/templates/events/blur.hbs b/tests/dummy/app/templates/events/blur.hbs index ea9583b..711006e 100644 --- a/tests/dummy/app/templates/events/blur.hbs +++ b/tests/dummy/app/templates/events/blur.hbs @@ -1,6 +1,6 @@

Blur

-{{#x-select value=it onblur="onBlur" as |xs|}} +{{#x-select value=it on-blur="onBlur" as |xs|}} {{#xs.option value=charles}}Charles{{/xs.option}} {{#xs.option value=bastion}}Bastion{{/xs.option}} {{#xs.option value=stanley}}Stanley{{/xs.option}} diff --git a/tests/dummy/app/templates/events/click.hbs b/tests/dummy/app/templates/events/click.hbs index 72f1345..eb75995 100644 --- a/tests/dummy/app/templates/events/click.hbs +++ b/tests/dummy/app/templates/events/click.hbs @@ -1,6 +1,6 @@

Click

-{{#x-select value=it onclick="onClick" as |xs|}} +{{#x-select value=it on-click="onClick" as |xs|}} {{#xs.option value=charles}}Charles{{/xs.option}} {{#xs.option value=bastion}}Bastion{{/xs.option}} {{#xs.option value=stanley}}Stanley{{/xs.option}} diff --git a/tests/dummy/app/templates/events/focus-out.hbs b/tests/dummy/app/templates/events/focus-out.hbs index 1df8e37..a6b9909 100644 --- a/tests/dummy/app/templates/events/focus-out.hbs +++ b/tests/dummy/app/templates/events/focus-out.hbs @@ -1,6 +1,6 @@

Focus Out

-{{#x-select value=it onfocusout="focusOut" as |xs|}} +{{#x-select value=it on-focus-out="focusOut" as |xs|}} {{#xs.option value=charles}}Charles{{/xs.option}} {{#xs.option value=bastion}}Bastion{{/xs.option}} {{#xs.option value=stanley}}Stanley{{/xs.option}} diff --git a/tests/integration/components/default-value-test.js b/tests/integration/components/default-value-test.js new file mode 100644 index 0000000..9a917c1 --- /dev/null +++ b/tests/integration/components/default-value-test.js @@ -0,0 +1,45 @@ +/* jshint expr:true */ +import { expect } from 'chai'; +import { describeComponent, it } from 'ember-mocha'; +import { describe, beforeEach } from 'mocha'; +import hbs from 'htmlbars-inline-precompile'; + +describeComponent( + 'default-value', + 'Integration: DefaultValue', + { + integration: true + }, + function() { + describe("default value of null", function() { + beforeEach(function() { + this.set('make', null); + this.set('selectAction', (value) => { + this.set("make", value); + this.set("wasCalled", true); + }); + + this.render(hbs` + {{#x-select value=make action=selectAction as |xs|}} + {{#xs.option value="fordValue" class="spec-ford-option"}}Ford{{/xs.option}} + {{#xs.option value="chevyValue"}}Chevy{{/xs.option}} + {{#xs.option value="dodgeValue" class="spec-dodge-option"}}Dodge{{/xs.option}} + {{/x-select}} + `); + }); + + it("displays the first item in the list", function() { + expect(this.$('select option:selected').text()).to.equal("Ford"); + }); + + it("sets the default value to the first element", function() { + expect(this.get('make')).to.equal("fordValue"); + }); + + it("invokes the select action on init", function() { + expect(this.get("wasCalled")).to.equal(true); + }); + + }); + } +); diff --git a/tests/integration/components/two-way-data-binding-test.js b/tests/integration/components/two-way-data-binding-test.js deleted file mode 100644 index 196f3b9..0000000 --- a/tests/integration/components/two-way-data-binding-test.js +++ /dev/null @@ -1,89 +0,0 @@ -/* jshint expr:true */ -import { expect } from 'chai'; -import { describeComponent, it } from 'ember-mocha'; -import { describe, beforeEach } from 'mocha'; -import hbs from 'htmlbars-inline-precompile'; -import { select } from 'dummy/tests/helpers/x-select'; - -describeComponent( - 'two-way-data-binding', - 'Integration: XSelectTwoWayDataBinding', - { - integration: true - }, - function() { - describe("changing the selection with two way data binding disabled", function() { - beforeEach(function() { - this.set('make', 'ford'); - this.set('capture', (value)=> this.value = value); - this.set('onClick', (x, value)=> this.click = value); - this.set('onFocusOut', (x, value)=> this.focusOut = value); - this.set('onBlur', (x, value)=> this.blur = value); - - this.render(hbs` - {{#x-select value=make one-way=true action=capture onclick=onClick onfocusout=onFocusOut onblur=onBlur as |xs|}} - {{#xs.option value="ford"}}Ford{{/xs.option}} - {{#xs.option value="chevy"}}Chevy{{/xs.option}} - {{#xs.option value="dodge" class="spec-dodge-option"}}Dodge{{/xs.option}} - {{/x-select}} - `); - }); - - beforeEach(function() { - select(this.$(), 'Dodge'); - }); - - it("doesn't mutate the value", function() { - expect(this.get('make')).to.equal("ford"); - }); - it("passes the new value to the action closure ", function() { - expect(this.value).to.equal('dodge'); - }); - - describe("upon subsequent triggering of a DOM event", function() { - beforeEach(function() { - this.$('.x-select') - .trigger('click') - .trigger('focusout') - .trigger('blur'); - }); - it("fires bound handlers with the new value", function() { - expect(this.click).to.equal('dodge'); - expect(this.focusOut).to.equal('dodge'); - expect(this.blur).to.equal('dodge'); - }); - }); - }); - - describe("default value of null with two way data binding disabled", function() { - beforeEach(function() { - this.set('make', null); - this.set('selectAction', (value) => { - this.set("make", value); - this.set("wasCalled", true); - }); - - this.render(hbs` - {{#x-select value=make one-way=true action=selectAction as |xs|}} - {{#xs.option value="fordValue" class="spec-ford-option"}}Ford{{/xs.option}} - {{#xs.option value="chevyValue"}}Chevy{{/xs.option}} - {{#xs.option value="dodgeValue" class="spec-dodge-option"}}Dodge{{/xs.option}} - {{/x-select}} - `); - }); - - it("displays the first item in the list", function() { - expect(this.$('select option:selected').text()).to.equal("Ford"); - }); - - it("sets the default value to the first element", function() { - expect(this.get('make')).to.equal("fordValue"); - }); - - it("invokes the select action on init", function() { - expect(this.get("wasCalled")).to.equal(true); - }); - - }); - } -); From a575e123f92f69be2bc772b8acb7b1ea7828aa1e Mon Sep 17 00:00:00 2001 From: robdel12 Date: Fri, 7 Oct 2016 22:41:14 -0500 Subject: [PATCH 2/4] Update to closure actions only --- README.md | 46 +++++------ addon/components/x-select.js | 79 ++++++++++++++++--- tests/dummy/app/controllers/single.js | 4 +- tests/dummy/app/templates/events/blur.hbs | 2 +- tests/dummy/app/templates/events/click.hbs | 2 +- .../dummy/app/templates/events/focus-out.hbs | 2 +- 6 files changed, 98 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 20d5aaa..adcdd77 100644 --- a/README.md +++ b/README.md @@ -61,9 +61,6 @@ through data rather than through the DOM. {{/x-select}} ``` -If you're using a lower version of Ember, `emberx-select` will continue -to work without block params for the forseeable future. - ### Multiselect As of version 1.1.0, `emberx-select` supports the `multiple` @@ -80,28 +77,32 @@ its selections directly on that array. The selections array will be initialized to an empty array if not present. -## Action and Action Arguments +## Actions and Action Arguments -The action that is dispatched by x-select whenever the selected value or values -change (change event) has a function signature of: +All of x-selects actions are closure actions. This means you must use +the `action` helper (i.e. `on-click=(action "onClick")`). The function +that is dispatched by x-select whenever the event fires has a function +signature of: ```js /** -* @param value {Object} the value selected by the user. -* @param component {Ember.Component} the x-select component itself +* @param {Object} value - the value selected by the user. +* @param {Object} event - the jQuery event of the action +* @param {Object} componentState - object that contains `isDisabled`, + `isMultiple`, `isRequired` & `isAutoFocus` */ -function (value, component) { +function (value, event, componentState) { // action body... } ``` Most of the time all you need is the value that has been selected, but sometimes your action requires more context than just that. In those -cases, you can associate arbitrary attributes with the component -itself and use them later inside your action handler. For example: +cases, you can use the `componentState` argument. It contains a couple +more things that relate to the components current state. For example: ```handlebars -{{#x-select action="didMakeSelection" default=anything as |xs|}} +{{#x-select action="didMakeSelection" required=true as |xs|}} {{#xs.option value=something}}Something{{/xs.option}} {{/x-select}} @@ -111,38 +112,37 @@ then, inside your action handler: ```js export default Ember.Route.extend({ actions: { - didMakeSelection: function(selection, component) { - if (selection) { - this.set('selection', selection) + didMakeSelection(value, event, componentState) { + if (!value & componentState.isRequired) { + this.set('error', 'You must fill out this field'); } else { - this.set('selection', component.get('default')) + this.set('selection', value); } } } }); ``` -#### Other Actions - x-select also provides other actions that fire on different event types. These actions follow the HTML input event naming convention. **on-blur** `on-blur` fires anytime the `blur` event is triggered on the x-select -component. When the action fires it sends two arguments: the value, -and the jQuery event. +component. When the action fires it sends three arguments: the value, +the jQuery event, and the components state. **on-focus-out** `on-focus-out` fires anytime the `focusOut` event is triggered on the x-select -component. When the action fires it sends two arguments: the value, -and the jQuery event. +component. When the action fires it sends three arguments: the value, +the jQuery event, and the components state. **on-click** `on-click` fires when x-select is clicked. When the action fires it -sends two arguments: the value, and the jQuery event. +sends three arguments: the value, the jQuery event, and the components +state. **on-disable** (x-option) diff --git a/addon/components/x-select.js b/addon/components/x-select.js index 80a1942..011dd44 100644 --- a/addon/components/x-select.js +++ b/addon/components/x-select.js @@ -36,18 +36,18 @@ export default Ember.Component.extend({ * * @property disabled * @type Boolean - * @default null + * @default false */ - disabled: null, + disabled: false, /** * Bound to the `multiple` attribute on the native