From f525f4731505424cab1482e86040d940e5ab99df Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Fri, 17 Nov 2017 11:36:28 -0800 Subject: [PATCH] feat(checkbox): Support checkbox click action config --- src/lib/checkbox/checkbox-config.ts | 24 +++++++++ src/lib/checkbox/checkbox.md | 18 +++++++ src/lib/checkbox/checkbox.spec.ts | 83 +++++++++++++++++++++++++++++ src/lib/checkbox/checkbox.ts | 18 +++++-- src/lib/checkbox/public-api.ts | 1 + 5 files changed, 140 insertions(+), 4 deletions(-) create mode 100644 src/lib/checkbox/checkbox-config.ts diff --git a/src/lib/checkbox/checkbox-config.ts b/src/lib/checkbox/checkbox-config.ts new file mode 100644 index 000000000000..a783634b31c8 --- /dev/null +++ b/src/lib/checkbox/checkbox-config.ts @@ -0,0 +1,24 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import {InjectionToken} from '@angular/core'; + + +/** + * Checkbox click action when user click on input element. + * noop: Do not toggle checked or indeterminate. + * check: Only toggle checked status, ignore indeterminate. + * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior. + * undefined: Same as `check-indeterminate`. + */ +export type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined; + +/** + * Injection token that can be used to specify the checkbox click behavior. + */ +export const MAT_CHECKBOX_CLICK_ACTION = + new InjectionToken('mat-checkbox-click-action'); diff --git a/src/lib/checkbox/checkbox.md b/src/lib/checkbox/checkbox.md index 0ae96cf7939e..07b6c09ad416 100644 --- a/src/lib/checkbox/checkbox.md +++ b/src/lib/checkbox/checkbox.md @@ -23,6 +23,24 @@ While the `indeterminate` property of the checkbox is true, it will render as in regardless of the `checked` value. Any interaction with the checkbox by a user (i.e., clicking) will remove the indeterminate state. +### Click action config +When user clicks on the `mat-checkbox`, the default behavior is toggle `checked` value and set +`indeterminate` to `false`. Developers now are able to change the behavior by providing a new value +of `MatCheckboxClickAction` to the checkbox. The possible values are: + +#### `noop` +Do not change the `checked` value or `indeterminate` value. Developers have the power to +implement customized click actions. + +#### `check` +Toggle `checked` value of the checkbox, ignore `indeterminate` value. If the +checkbox is in `indeterminate` state, the checkbox will display as an `indeterminate` checkbox +regardless the `checked` value. + +####`check-indeterminate` +Default behavior of `mat-checkbox`. Always set `indeterminate` to `false` +when user click on the `mat-checkbox`. + ### Theming The color of a `` can be changed by using the `color` property. By default, checkboxes use the theme's accent color. This can be changed to `'primary'` or `'warn'`. diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 7be933c085cb..8e538af950ff 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -13,6 +13,7 @@ import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing'; import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index'; import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core'; +import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config'; describe('MatCheckbox', () => { @@ -542,6 +543,88 @@ describe('MatCheckbox', () => { expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g); }); }); + + describe('click action checked only setting', () => { + beforeEach(() => { + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], + declarations: [ + SingleCheckbox, + ], + providers: [ + {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}, + {provide: ViewportRuler, useClass: FakeViewportRuler} + ] + }); + + fixture = TestBed.createComponent(SingleCheckbox); + fixture.detectChanges(); + + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); + checkboxNativeElement = checkboxDebugElement.nativeElement; + checkboxInstance = checkboxDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; + + inputElement = checkboxNativeElement.querySelector('input'); + labelElement = checkboxNativeElement.querySelector('label'); + }); + + it('should not set indeterminate to false on click if noop is set', fakeAsync(() => { + + testComponent.isIndeterminate = true; + inputElement.click(); + + fixture.detectChanges(); + flushMicrotasks(); + fixture.detectChanges(); + expect(inputElement.checked).toBe(true); + expect(checkboxNativeElement.classList).toContain('mat-checkbox-checked'); + expect(inputElement.indeterminate).toBe(true); + expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate'); + })); + }); + + describe('click action noop setting', () => { + beforeEach(() => { + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], + declarations: [ + SingleCheckbox, + ], + providers: [ + {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}, + {provide: ViewportRuler, useClass: FakeViewportRuler} + ] + }); + + fixture = TestBed.createComponent(SingleCheckbox); + fixture.detectChanges(); + + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); + checkboxNativeElement = checkboxDebugElement.nativeElement; + checkboxInstance = checkboxDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; + + inputElement = checkboxNativeElement.querySelector('input'); + labelElement = checkboxNativeElement.querySelector('label'); + }); + + it('should not set indeterminate to false on click if noop is set', fakeAsync(() => { + testComponent.isIndeterminate = true; + inputElement.click(); + + fixture.detectChanges(); + flushMicrotasks(); + fixture.detectChanges(); + + expect(inputElement.checked).toBe(false); + expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked'); + expect(inputElement.indeterminate).toBe(true); + expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate'); + })); + }); }); describe('with change event and no initial value', () => { diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 2d4b7db7c66b..410e53082b36 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -17,8 +17,11 @@ import { ElementRef, EventEmitter, forwardRef, + Inject, + InjectionToken, Input, OnDestroy, + Optional, Output, Renderer2, ViewChild, @@ -37,6 +40,7 @@ import { mixinTabIndex, RippleRef, } from '@angular/material/core'; +import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config'; // Increasing integer for generating unique ids for checkbox components. @@ -201,7 +205,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, private _focusMonitor: FocusMonitor, - @Attribute('tabindex') tabIndex: string) { + @Attribute('tabindex') tabIndex: string, + @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) + private _clickAction: MatCheckboxClickAction) { super(renderer, elementRef); this.tabIndex = parseInt(tabIndex) || 0; @@ -367,9 +373,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc this._removeFocusRipple(); - if (!this.disabled) { + // If resetIndeterminate is false, and the current state is indeterminate, do nothing on click + if (!this.disabled && this._clickAction !== 'noop') { // When user manually click on the checkbox, `indeterminate` is set to false. - if (this._indeterminate) { + if (this.indeterminate && this._clickAction !== 'check') { Promise.resolve().then(() => { this._indeterminate = false; this.indeterminateChange.emit(this._indeterminate); @@ -378,12 +385,15 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc this.toggle(); this._transitionCheckState( - this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); + this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked); // Emit our custom change event if the native input emitted one. // It is important to only emit it, if the native input triggered one, because // we don't want to trigger a change event, when the `checked` variable changes for example. this._emitChangeEvent(); + } else if (!this.disabled && this._clickAction === 'noop') { + // Reset native input when clicked with noop. + this._inputElement.nativeElement.checked = this.checked; } } diff --git a/src/lib/checkbox/public-api.ts b/src/lib/checkbox/public-api.ts index e93c91626f04..ec37deb2d32c 100644 --- a/src/lib/checkbox/public-api.ts +++ b/src/lib/checkbox/public-api.ts @@ -7,6 +7,7 @@ */ export * from './checkbox'; +export * from './checkbox-config'; export * from './checkbox-module'; export * from './checkbox-required-validator';