update paper-checkbox component

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 1.0.0
 - [1a9b641](https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649) paper-progress-circular now uses `diameter` instead of `md-diameter`
 - [cf2a8da](https://github.com/miguelcobain/ember-paper/commit/cf2a8da350ea805e11eef36914ae76213b4c9f24) paper-progress-linear now uses `bufferValue` instead of `buffer-value`
+- [#285](https://github.com/miguelcobain/ember-paper/pull/285) paper-checkbox now uses *actions up, data down*. `onchange` action is mandatory.
 
 ### 0.2.11
 

addon/components/base-focusable.js

@@ -1,25 +1,25 @@
 import Ember from 'ember';
 import EventsMixin from '../mixins/events-mixin';
 import HasBlockMixin from '../mixins/hasblock-mixin';
+const { Component, computed } = Ember;
+
+export default Component.extend(EventsMixin, HasBlockMixin, {
 
-export default Ember.Component.extend(EventsMixin, HasBlockMixin, {
   disabled: false,
   pressed: false,
   active: false,
-  focus: false,
+  focused: false,
   hover: false,
+
+  classNameBindings: ['focused:md-focused'],
   attributeBindings: ['tabindex', 'disabledAttr:disabled'],
 
-  /*
-   * Not binding boolean values in Ember 1.8.1?
-   * https://github.com/emberjs/ember.js/issues/9595
-   */
-  disabledAttr: Ember.computed('disabled', function() {
+  disabledAttr: computed('disabled', function() {
     return this.get('disabled') ? 'disabled' : null;
   }),
 
   //Alow element to be focusable by supplying a tabindex 0
-  tabindex: Ember.computed('disabled', function() {
+  tabindex: computed('disabled', function() {
     return this.get('disabled') ? '-1' : '0';
   }),
 
@@ -33,15 +33,18 @@ export default Ember.Component.extend(EventsMixin, HasBlockMixin, {
     if (!this.get('pressed')) {
       // Only render the "focused" state if the element gains focus due to
       // keyboard navigation.
-      this.set('focus', true);
+      this.set('focused', true);
     }
   },
+
   focusOut() {
-    this.set('focus', false);
+    this.set('focused', false);
   },
+
   mouseEnter() {
     this.set('hover', true);
   },
+
   mouseLeave(e) {
     this.set('hover', false);
     this._super(e);
@@ -55,6 +58,7 @@ export default Ember.Component.extend(EventsMixin, HasBlockMixin, {
       this.set('active', true);
     }
   },
+
   up() {
     this.set('pressed', false);
 

addon/components/paper-checkbox.js

@@ -3,6 +3,7 @@ import BaseFocusable from './base-focusable';
 import RippleMixin from '../mixins/ripple-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
+const { inject, assert } = Ember;
 
 export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   tagName: 'md-checkbox',
@@ -15,19 +16,19 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   dimBackground: false,
   fitRipple: true,
 
-  constants: Ember.inject.service(),
+  constants: inject.service(),
 
   checked: false,
-  toggle: true,
 
+  didInitAttrs() {
+    this._super(...arguments);
+    assert('{{paper-checkbox}} requires an `onchange` function', this.get('onchange') && typeof this.get('onchange') === 'function');
+  },
 
-  //bubble actions by default
-  bubbles: true,
   click() {
     if (!this.get('disabled')) {
-      this.toggleProperty('checked');
+      this.get('onchange')(!this.get('checked'));
     }
-    return this.get('bubbles');
   },
 
   keyPress(ev) {
@@ -37,6 +38,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   },
 
   processProxy() {
-    this.toggleProperty('checked');
+    this.get('onchange')(!this.get('checked'));
   }
 });

tests/dummy/app/controllers/checkbox.js

@@ -2,5 +2,11 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   value1: true,
-  value2: false
+  value2: false,
+
+  actions: {
+    foo() {
+
+    }
+  }
 });

tests/dummy/app/templates/checkbox.hbs

@@ -8,22 +8,23 @@
 {{/paper-toolbar}}
 {{#paper-content class="md-padding"}}
 <div class="doc-content">
-  {{#paper-checkbox checked=value1}}A checkbox: {{value1}}{{/paper-checkbox}}
-  {{#paper-checkbox checked=value2}}A checkbox: {{#if value2}}yep{{else}}nope{{/if}}{{/paper-checkbox}}
-  {{#paper-checkbox disabled=true}}Checkbox (disabled){{/paper-checkbox}}
-  {{#paper-checkbox disabled=true checked=true}}Checkbox (disabled and checked){{/paper-checkbox}}
-  {{#paper-checkbox noink=true}}Checkbox (no ink){{/paper-checkbox}}
+  {{#paper-checkbox checked=value1 onchange=(action (mut value1))}}A checkbox: {{value1}}{{/paper-checkbox}}
+  {{#paper-checkbox checked=value2 onchange=(action (mut value2))}}A checkbox: {{if value2 "yep" "nope"}}{{/paper-checkbox}}
+  {{#paper-checkbox disabled=true onchange=(action "foo")}}Checkbox (disabled){{/paper-checkbox}}
+  {{#paper-checkbox disabled=true checked=true onchange=(action "foo")}}Checkbox (disabled and checked){{/paper-checkbox}}
+  {{#paper-checkbox noink=true onchange=(action "foo")}}Checkbox (no ink){{/paper-checkbox}}
 
-  {{paper-checkbox label="Blockless version"}}
+  {{paper-checkbox label="Blockless version" onchange=(action "foo")}}
 
   <h3>Template</h3>
-{{#code-block language='handlebars'}}
-\{{#paper-checkbox checked=value1}}A checkbox: \{{value1}}\{{/paper-checkbox}}
-\{{#paper-checkbox checked=value2}}A checkbox: \{{#if value2}}yep\{{else}}nope\{{/if}}\{{/paper-checkbox}}
-\{{#paper-checkbox disabled=true}}Checkbox (disabled)\{{/paper-checkbox}}
-\{{#paper-checkbox disabled=true checked=true}}Checkbox (disabled and checked)\{{/paper-checkbox}}
-\{{#paper-checkbox noink=true}}Checkbox (no ink)\{{/paper-checkbox}}
+{{~#code-block language='handlebars'}}
+\{{#paper-checkbox checked=value1 onchange=(action (mut value1))}}A checkbox: \{{value1}}\{{/paper-checkbox}}
+\{{#paper-checkbox checked=value2 onchange=(action (mut value2))}}A checkbox: \{{if value2 "yep" "nope"}}\{{/paper-checkbox}}
+\{{#paper-checkbox disabled=true onchange=(action "foo")}}Checkbox (disabled)\{{/paper-checkbox}}
+\{{#paper-checkbox disabled=true checked=true onchange=(action "foo")}}Checkbox (disabled and checked)\{{/paper-checkbox}}
+\{{#paper-checkbox noink=true onchange=(action "foo")}}Checkbox (no ink)\{{/paper-checkbox}}
 
-\{{paper-checkbox label="Blockless version"}}{{/code-block}}
+\{{paper-checkbox label="Blockless version" onchange=(action "foo")}}
+{{~/code-block}}
 </div>
 {{/paper-content}}

tests/integration/components/base-focusable.js

@@ -0,0 +1,16 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('base-focusable', 'Integration | Component | base focusable', {
+  integration: true
+});
+
+test('should set and remove disabled attribute', function(assert) {
+
+  this.set('value', true);
+  this.render(hbs`{{base-focusable id="base-focusable" disabled=value}}`);
+  assert.equal(this.$('#base-focusable').attr('disabled').trim(), 'disabled');
+
+  this.set('value', false);
+  assert.ok(!this.$('md-checkbox').attr('disabled'));
+});

tests/integration/components/paper-checkbox-test.js

@@ -0,0 +1,113 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-checkbox', 'Integration | Component | paper checkbox', {
+  integration: true
+});
+
+test('should set and remove checked css class', function(assert) {
+  assert.expect(2);
+
+  this.set('value', true);
+  this.render(hbs`{{paper-checkbox checked=value label="Blue" onchange=(action (mut value))}}`);
+  assert.ok(this.$('md-checkbox').hasClass('md-checked'));
+
+  this.set('value', false);
+  assert.ok(!this.$('md-checkbox').hasClass('md-checked'));
+});
+
+test('should trigger an action when unchecking', function(assert) {
+  assert.expect(1);
+
+  this.set('value', true);
+  this.handleChange = checked => {
+    assert.equal(checked, false);
+  };
+
+  this.render(hbs`{{paper-checkbox checked=value onchange=handleChange}}`);
+
+  this.$('md-checkbox').click();
+});
+
+test('should trigger an action when checking', function(assert) {
+  assert.expect(1);
+
+  this.set('value', false);
+  this.handleChange = checked => {
+    assert.equal(checked, true);
+  };
+
+  this.render(hbs`{{paper-checkbox checked=value onchange=handleChange}}`);
+
+  this.$('md-checkbox').click();
+});
+
+test('shouldn\'t trigger an action when disabled', function(assert) {
+  assert.expect(0);
+
+  this.set('value', false);
+  this.handleChange = checked => {
+    assert.equal(checked, true);
+  };
+
+  this.render(hbs`{{paper-checkbox disabled=true checked=value onchange=handleChange}}`);
+
+  this.$('md-checkbox').click();
+});
+
+test('should be possible to check with spacebar', function(assert) {
+  assert.expect(2);
+
+  this.set('value', false);
+  this.render(hbs`{{paper-checkbox checked=value onchange=(action (mut value))}}`);
+  assert.equal(this.get('value'), false);
+
+  let e = Ember.$.Event('keypress');
+  e.which = 32; // # Some key code value
+  this.$('md-checkbox').trigger(e);
+
+  assert.equal(this.get('value'), true);
+});
+
+test('should be possible to uncheck with spacebar', function(assert) {
+  assert.expect(2);
+
+  this.set('value', true);
+  this.render(hbs`{{paper-checkbox checked=value onchange=(action (mut value))}}`);
+  assert.equal(this.get('value'), true);
+
+  let e = Ember.$.Event('keypress');
+  e.which = 32; // # Some key code value
+  this.$('md-checkbox').trigger(e);
+
+  assert.equal(this.get('value'), false);
+});
+
+test('blockless version should set label inside', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`{{paper-checkbox checked=value onchange=(action (mut value)) label="çup?"}}`);
+
+  assert.equal(this.$('.md-label > span').text().trim(), 'çup?');
+});
+
+test('block version should set label inside', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{#paper-checkbox checked=value onchange=(action (mut value))}}
+      çup?
+    {{/paper-checkbox}}
+  `);
+
+  assert.equal(this.$('.md-label > span').text().trim(), 'çup?');
+});
+
+test('the `onchange` function is mandatory', function(assert) {
+  assert.expect(1);
+
+  assert.throws(() => {
+    this.render(hbs`{{paper-checkbox checked=true}}`);
+  }, /requires an `onchange` function/);
+});