Permalink
Browse files

fix(checkbox) disabled checkbox behavior (#80)

* fix(checkbox) disabled checkbox behavior

* fix(checkbox) added optimization when binding on isDisabled

* moved computedFrom to be imported from aurelia-binding
  • Loading branch information...
chrsmrtn- authored and ZHollingshead committed Jul 24, 2017
1 parent ee64238 commit 32eb94c058b566ac9c588bd5e99346b2d411fcf1
Showing with 41 additions and 10 deletions.
  1. +8 −8 src/checkbox/ux-checkbox-theme.css
  2. +33 −2 src/checkbox/ux-checkbox.ts
@@ -56,26 +56,22 @@ styles.checkbox.checked>.checkbox>.background-box {
border-radius: 0;
}
styles.checkbox[disabled=""],
styles.checkbox[disabled="true"] {
styles.checkbox.disabled {
pointer-events: none;
cursor: default;
}
styles.checkbox[disabled=""]>.checkbox:hover,
styles.checkbox[disabled="true"]>.checkbox:hover {
styles.checkbox.disabled>.checkbox:hover {
border: ${disabledBorder || $swatches.grey.p400} solid 2px;
border-radius: 3px;
}
styles.checkbox.checked[disabled=""]>.checkbox,
styles.checkbox.checked[disabled="true"]>.checkbox {
styles.checkbox.checked.disabled>.checkbox {
background-color: ${disabledBackground || $swatches.grey.p500};
border: ${disabledBackground || $swatches.grey.p500} solid 2px;
}
styles.checkbox[disabled=""]>.checkbox>.background-box::after,
styles.checkbox[disabled="true"]>.checkbox>.background-box::after {
styles.checkbox.disabled>.checkbox>.background-box::after {
border-color: ${disabledForeground || $swatches.white};
}
@@ -110,4 +106,8 @@ styles.checkbox .ripplecontainer>.paper-ripple {
styles.checkbox:focus>.ripplecontainer>.ripple{
transform:scale3d(1, 1, 1);
}
styles.checkbox.disabled:focus>.ripplecontainer>.ripple{
transform:scale3d(0, 0, 0);
}
@@ -1,5 +1,5 @@
import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
import { bindingMode } from 'aurelia-binding';
import { computedFrom, bindingMode } from 'aurelia-binding';
import { inject } from 'aurelia-dependency-injection';
import { StyleEngine } from '../styles/style-engine';
import { Themable } from '../styles/themable';
@@ -31,8 +31,15 @@ export class UxCheckbox implements Themable {
private checkbox: Element;
private ripple: PaperRipple | null = null;
@computedFrom('disabled')
public get isDisabled() {
return this.disabled === true || this.disabled === '' || this.disabled === 'disabled';
let ret: boolean = this.disabled;
if (typeof this.disabled === 'string' &&
(this.disabled === '' || this.disabled.toString().toLocaleLowerCase() === 'disabled')) {
ret = true;
}
return ret;
}
constructor(public element: HTMLElement, public resources: ViewResources, private styleEngine: StyleEngine) { }
@@ -49,12 +56,36 @@ export class UxCheckbox implements Themable {
if (this.checked) {
this.checkedChanged();
}
// ensure we cast empty string as true
if (typeof this.disabled === 'string' && this.disabled === '') {
this.disabled = true;
}
if (this.disabled && !this.element.classList.contains('disabled')) {
this.element.classList.add('disabled');
} else if (this.element.classList.contains('disabled')) {
this.element.classList.remove('disabled');
}
}
public themeChanged(newValue: any) {
this.styleEngine.applyTheme(this, newValue);
}
public disabledChanged(newValue: boolean | string) {
// ensure we cast empty string as true
if (typeof newValue === 'string' && newValue === '') {
newValue = true;
}
if (newValue && !this.element.classList.contains('disabled')) {
this.element.classList.add('disabled');
} else if (this.element.classList.contains('disabled')) {
this.element.classList.remove('disabled');
}
}
public checkedChanged() {
const elementValue = this.model ? this.model : this.value;

0 comments on commit 32eb94c

Please sign in to comment.