Permalink
Browse files

feat(checkbox): add binding support

support binding to all scenarios covered in the checkbox binding section of the official docs
  • Loading branch information...
ZHollingshead committed Apr 13, 2017
1 parent fde48f4 commit 67d73ffb1927bad6e5a3c589c17b23cb1936adfe
Showing with 36 additions and 7 deletions.
  1. +1 −1 src/checkbox/ux-checkbox.html
  2. +35 −6 src/checkbox/ux-checkbox.ts
@@ -1,7 +1,7 @@
<template styles.checkbox>
<require from="./ux-checkbox-theme"></require>
- <div class="box" click.trigger="toggle()">
+ <div class="box" click.trigger="toggleCheckbox()">
<div class="background-box"></div>
</div>
@@ -9,8 +9,10 @@ import { processDesignAttributes } from '../designs/design-attributes';
@customElement('ux-checkbox')
@processAttributes(processDesignAttributes)
export class UxCheckbox implements Themable {
- @bindable public effect = null;
@bindable public disabled = false;
+ @bindable public effect = null;
+ @bindable public matcher = (a: any, b: any) => a === b;
+ @bindable public model: any;
@bindable public theme = null;
@bindable({ defaultBindingMode: bindingMode.twoWay })
@@ -33,23 +35,50 @@ export class UxCheckbox implements Themable {
}
if (this.checked) {
- this.element.classList.add('checked');
+ this.checkedChanged();
}
}
public themeChanged(newValue: any) {
this.styleEngine.applyTheme(this, newValue);
}
- public checkedChanged(newValue: any) {
- if (newValue) {
+ public checkedChanged() {
+ const elementValue = this.model ? this.model : this.value;
+ let isChecked = this.checked;
+
+ if (Array.isArray(this.checked)) {
+ isChecked = this.checked.some(item => this.matcher(item, elementValue));
+ }
+
+ if (isChecked) {
this.element.classList.add('checked');
} else {
this.element.classList.remove('checked');
}
}
- public toggle() {
- this.checked = !this.checked;
+ public toggleCheckbox() {
+ const elementValue = this.model ? this.model : this.value;
+
+ if (Array.isArray(this.checked)) {
+ const index = this.checked.findIndex(item => this.matcher(item, elementValue));
+
+ if (index === -1) {
+ this.checked.push(elementValue);
+ } else if (index !== -1) {
+ this.checked.splice(index, 1);
+ }
+
+ this.checkedChanged();
+ } else if (typeof elementValue !== 'boolean') {
+ if (this.checked) {
+ delete this.checked;
+ } else {
+ this.checked = elementValue;
+ }
+ } else {
+ this.checked = !this.checked;
+ }
}
}

0 comments on commit 67d73ff

Please sign in to comment.