diff --git a/addon/components/paper-radio-base.js b/addon/components/paper-radio-base.js new file mode 100644 index 000000000..c95b63c1e --- /dev/null +++ b/addon/components/paper-radio-base.js @@ -0,0 +1,59 @@ +/** + * @module ember-paper + */ +import Ember from 'ember'; +import layout from '../templates/components/paper-radio-base'; +import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; +import RippleMixin from 'ember-paper/mixins/ripple-mixin'; +import ColorMixin from 'ember-paper/mixins/color-mixin'; + +const { Component, computed, assert } = Ember; + +/** + * @class PaperRadio + * @extends Ember.Component + * @uses FocusableMixin + * @uses ColorMixin + * @uses RippleMixin + */ +export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, { + layout, + tagName: 'md-radio-button', + classNames: ['md-default-theme'], + classNameBindings: ['checked:md-checked'], + + tabindex: null, + + toggle: false, + + /* Ripple Overrides */ + rippleContainerSelector: '.md-container', + center: true, + dimBackground: false, + fitRipple: true, + + /* FocusableMixin Overrides */ + focusOnlyOnKey: true, + + // Lifecycle hooks + init() { + assert('{{paper-radio}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined); + this._super(...arguments); + }, + + checked: computed('groupValue', 'value', function() { + return this.get('groupValue') === this.get('value'); + }), + + click() { + if (!this.get('disabled')) { + if (this.get('toggle')) { + this.sendAction('onChange', this.get('checked') ? null : this.get('value')); + } else { + this.sendAction('onChange', this.get('value')); + } + } + // Prevent bubbling, if specified. If undefined, the event will bubble. + return this.get('bubbles'); + } +}); diff --git a/addon/components/paper-radio-proxiable.js b/addon/components/paper-radio-proxiable.js new file mode 100644 index 000000000..deb869aa0 --- /dev/null +++ b/addon/components/paper-radio-proxiable.js @@ -0,0 +1,16 @@ +/** + * @module ember-paper + */ +import PaperRadioBaseComponent from './paper-radio-base'; +import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; + +/** + * @class PaperRadio + * @extends PaperRadioBaseComponent + * @uses ProxiableMixin + */ +export default PaperRadioBaseComponent.extend(ProxiableMixin, { + processProxy() { + this.click(); + } +}); diff --git a/addon/components/paper-radio.js b/addon/components/paper-radio.js index 5f6c753e2..589b28c7e 100644 --- a/addon/components/paper-radio.js +++ b/addon/components/paper-radio.js @@ -1,64 +1,14 @@ /** * @module ember-paper */ -import Ember from 'ember'; -import layout from '../templates/components/paper-radio'; -import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; -import RippleMixin from 'ember-paper/mixins/ripple-mixin'; -import ColorMixin from 'ember-paper/mixins/color-mixin'; +import PaperRadioBaseComponent from './paper-radio-base'; import { ChildMixin } from 'ember-composability-tools'; -const { Component, computed, assert } = Ember; - /** * @class PaperRadio - * @extends Ember.Component - * @uses FocusableMixin - * @uses ColorMixin - * @uses RippleMixin + * @extends PaperRadioBaseComponent * @uses ChildMixin */ -export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, ChildMixin, { - layout, - tagName: 'md-radio-button', - classNames: ['md-default-theme'], - classNameBindings: ['checked:md-checked'], - - tabindex: null, - - toggle: false, - - /* Ripple Overrides */ - rippleContainerSelector: '.md-container', - center: true, - dimBackground: false, - fitRipple: true, - - /* FocusableMixin Overrides */ - focusOnlyOnKey: true, - - /* ChildMixin Overrides */ - shouldRegister: false, - - // Lifecycle hooks - init() { - assert('{{paper-radio}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined); - this._super(...arguments); - }, - - checked: computed('groupValue', 'value', function() { - return this.get('groupValue') === this.get('value'); - }), - - click() { - if (!this.get('disabled')) { - if (this.get('toggle')) { - this.sendAction('onChange', this.get('checked') ? null : this.get('value')); - } else { - this.sendAction('onChange', this.get('value')); - } - } - // Prevent bubbling, if specified. If undefined, the event will bubble. - return this.get('bubbles'); - } +export default PaperRadioBaseComponent.extend(ChildMixin, { + shouldRegister: false }); diff --git a/addon/templates/components/paper-item.hbs b/addon/templates/components/paper-item.hbs index 3543db020..36b5d7f92 100644 --- a/addon/templates/components/paper-item.hbs +++ b/addon/templates/components/paper-item.hbs @@ -2,6 +2,7 @@ checkbox=(component "paper-checkbox" parentComponent=this bubbles=false shouldRegister=true) button=(component "paper-button" parentComponent=this bubbles=false shouldRegister=true skipProxy=true) switch=(component "paper-switch" parentComponent=this bubbles=false shouldRegister=true) + radio=(component "paper-radio-proxiable" parentComponent=this bubbles=false shouldRegister=true) ) as |controls|}} {{#if hasPrimaryAction}} diff --git a/addon/templates/components/paper-radio.hbs b/addon/templates/components/paper-radio-base.hbs similarity index 100% rename from addon/templates/components/paper-radio.hbs rename to addon/templates/components/paper-radio-base.hbs diff --git a/app/components/paper-radio-group.js b/app/components/paper-radio-group.js index 8eeac2756..3a547f89c 100644 --- a/app/components/paper-radio-group.js +++ b/app/components/paper-radio-group.js @@ -1,3 +1 @@ -import PaperRadioGroup from 'ember-paper/components/paper-radio-group'; - -export default PaperRadioGroup; +export { default } from 'ember-paper/components/paper-radio-group'; \ No newline at end of file diff --git a/app/components/paper-radio-proxiable.js b/app/components/paper-radio-proxiable.js new file mode 100644 index 000000000..537cebfc2 --- /dev/null +++ b/app/components/paper-radio-proxiable.js @@ -0,0 +1 @@ +export { default } from 'ember-paper/components/paper-radio-proxiable'; \ No newline at end of file diff --git a/app/components/paper-radio.js b/app/components/paper-radio.js index df716a3d5..ad64a59f3 100644 --- a/app/components/paper-radio.js +++ b/app/components/paper-radio.js @@ -1,3 +1 @@ -import PaperRadio from 'ember-paper/components/paper-radio'; - -export default PaperRadio; +export { default } from 'ember-paper/components/paper-radio'; \ No newline at end of file diff --git a/tests/dummy/app/templates/demo/list.hbs b/tests/dummy/app/templates/demo/list.hbs index 423f66d86..88b320b19 100644 --- a/tests/dummy/app/templates/demo/list.hbs +++ b/tests/dummy/app/templates/demo/list.hbs @@ -173,6 +173,18 @@ {{/paper-item}} {{/each}} + {{#paper-subheader}}Single Action Radios{{/paper-subheader}} + {{#each toppings as |topping|}} + {{#paper-item as |controls|}} +

{{topping.name}}

+ {{controls.radio + groupValue=radioSelectedTopping + value=topping + secondary=true + onChange=(action (mut radioSelectedTopping))}} + {{/paper-item}} + {{/each}} + {{/paper-list}} {{! END-SNIPPET }} {{/paper-content}} diff --git a/tests/integration/components/paper-item-test.js b/tests/integration/components/paper-item-test.js index 3197a6aa0..cdae4e2a1 100644 --- a/tests/integration/components/paper-item-test.js +++ b/tests/integration/components/paper-item-test.js @@ -60,6 +60,38 @@ test('single action checkboxes should react to item clicks', function(assert) { }); }); +test('single action radios should react to item clicks', function(assert) { + assert.expect(2); + + this.set('selectedValue', null); + this.render(hbs` + {{#paper-list}} + {{#paper-item as |controls|}} +

Checkbox 1

+ {{controls.radio + groupValue=selectedValue + value="some value 1" + onChange=(action (mut selectedValue))}} + {{/paper-item}} + {{#paper-item as |controls|}} +

Checkbox 2

+ {{controls.radio + groupValue=selectedValue + value="some value 2" + onChange=(action (mut selectedValue))}} + {{/paper-item}} + {{/paper-list}} + `); + return wait().then(() => { + let firstItem = this.$('.md-list-item-inner').eq(0); + firstItem.click(); + assert.equal(this.get('selectedValue'), 'some value 1'); + let secondItem = this.$('.md-list-item-inner').eq(1); + secondItem.click(); + assert.equal(this.get('selectedValue'), 'some value 2'); + }); +}); + test('Clickable Items with Secondary Controls must not bubble main item action', function(assert) { // the switch test is tricky as it involves passing hammer // tap event.