add indeterminate mode

miguelcobain · Feb 22, 2017 · f407257 · f407257
1 parent 948db82
commit f407257
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js
@@ -8,7 +8,7 @@ import RippleMixin from 'ember-paper/mixins/ripple-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 
-const { Component, inject, assert } = Ember;
+const { Component, inject, assert, computed } = Ember;
 
 /**
  * @class PaperCheckbox
@@ -22,7 +22,7 @@ export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, Proxiab
   layout,
   tagName: 'md-checkbox',
   classNames: ['md-checkbox', 'md-default-theme'],
-  classNameBindings: ['value:md-checked'],
+  classNameBindings: ['isChecked:md-checked', 'indeterminate:md-indeterminate'],
 
   /* RippleMixin Overrides */
   rippleContainerSelector: '.md-container',
@@ -37,6 +37,9 @@ export default Component.extend(FocusableMixin, RippleMixin, ColorMixin, Proxiab
 
   value: false,
 
+  notIndeterminate: computed.not('indeterminate'),
+  isChecked: computed.and('notIndeterminate', 'value'),
+
   init() {
     this._super(...arguments);
     assert('{{paper-checkbox}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined);

diff --git a/tests/dummy/app/controllers/demo/checkbox.js b/tests/dummy/app/controllers/demo/checkbox.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-const { Controller } = Ember;
+const { Controller, computed } = Ember;
 
 export default Controller.extend({
   value1: true,
@@ -10,6 +10,10 @@ export default Controller.extend({
   value5: false,
   value6: false,
 
+  isIndeterminate: computed('value7', function() {
+    return this.get('value7') === undefined;
+  }),
+
   actions: {
     toggleValue6() {
       this.toggleProperty('value6');

diff --git a/tests/dummy/app/templates/demo/checkbox.hbs b/tests/dummy/app/templates/demo/checkbox.hbs
@@ -15,7 +15,7 @@
       Checkbox (disabled)
     {{/paper-checkbox}}
 
-    {{#paper-checkbox value=true   onChange=(action (mut value4)) disabled=true}}
+    {{#paper-checkbox value=true onChange=(action (mut value4)) disabled=true}}
       Checkbox (disabled and value)
     {{/paper-checkbox}}
 
@@ -24,6 +24,14 @@
     {{/paper-checkbox}}
 
     {{paper-checkbox label="Blockless version" value=value6 onChange=(action "toggleValue6")}}
+
+    {{#paper-checkbox indeterminate=isIndeterminate value=value7 onChange=(action (mut value7))}}
+      Indeterminate checkbox
+    {{/paper-checkbox}}
+
+    {{#paper-checkbox disabled=true indeterminate=isIndeterminate value=value7 onChange=null}}
+      Indeterminate checkbox (disabled)
+    {{/paper-checkbox}}
   </div>
   {{! END-SNIPPET }}
 

diff --git a/tests/integration/components/paper-checkbox-test.js b/tests/integration/components/paper-checkbox-test.js
@@ -114,3 +114,18 @@ test('the `onChange` action is mandatory', function(assert) {
     this.render(hbs`{{paper-checkbox value=true}}`);
   }, /requires an `onChange` action/);
 });
+
+test('if `indeterminate` is true, set md-indeterminate class', function(assert) {
+  assert.expect(3);
+
+  this.set('value', true);
+  this.render(hbs`
+    {{paper-checkbox value=value indeterminate=indeterminate
+      label="Blue" onChange=(action (mut value))}}
+  `);
+  assert.ok(this.$('md-checkbox').hasClass('md-checked'));
+
+  this.set('indeterminate', true);
+  assert.ok(!this.$('md-checkbox').hasClass('md-checked'));
+  assert.ok(this.$('md-checkbox').hasClass('md-indeterminate'));
+});