From a5782a5c99a124672ff3dd49bca02855d4f0ae46 Mon Sep 17 00:00:00 2001 From: tzfeng Date: Fri, 24 Apr 2020 14:12:08 +0800 Subject: [PATCH] feat: common form control set snapshot by default --- .github/workflows/test.yml | 2 +- package.json | 2 +- .../checkbox-group.component.ts | 2 +- src/checkbox/checkbox.component.ts | 16 ++++---------- src/form/common-form.ts | 21 ++++++++++++++----- .../number-input/number-input.component.ts | 14 +++---------- src/input/tags-input/tags-input.component.ts | 20 ++++++++---------- src/switch/switch.component.ts | 12 +---------- 8 files changed, 36 insertions(+), 53 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index df03cf73d..c2c75dce1 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,6 +1,6 @@ name: Run unit test -on: [push, pull_request] +on: pull_request jobs: run_unit_test: diff --git a/package.json b/package.json index b5e639faf..ca4eb3e32 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "lint:ts": "tslint -p . -t stylish", "lint:tsc": "tsc --incremental false --noEmit", "postinstall": "yarn-deduplicate || exit 0", - "release": "standard-version --no-verify", + "release": "standard-version --no-verify --release-as", "start": "yarn storybook", "storybook": "start-storybook -c .storybook -p 9001", "storybook:build": "build-storybook -c .storybook -o dist", diff --git a/src/checkbox/checkbox-group/checkbox-group.component.ts b/src/checkbox/checkbox-group/checkbox-group.component.ts index bb670f4ce..15a83a69e 100644 --- a/src/checkbox/checkbox-group/checkbox-group.component.ts +++ b/src/checkbox/checkbox-group/checkbox-group.component.ts @@ -57,7 +57,7 @@ export class CheckboxGroupComponent extends CommonFormControl { } const values = this.checkboxes .filter(item => - item === checkbox ? !item.snapshot.checked : item.snapshot.checked, + item === checkbox ? !item.snapshot.value : item.snapshot.value, ) .map(item => item.label); this.emitValueChange(values); diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts index ab469e293..db022b200 100644 --- a/src/checkbox/checkbox.component.ts +++ b/src/checkbox/checkbox.component.ts @@ -14,8 +14,8 @@ import { forwardRef, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { BehaviorSubject, Observable, Subject, combineLatest } from 'rxjs'; -import { map, takeUntil, tap } from 'rxjs/operators'; +import { BehaviorSubject, Subject, combineLatest } from 'rxjs'; +import { map, takeUntil } from 'rxjs/operators'; import { CommonFormControl } from '../form/public-api'; @@ -60,14 +60,6 @@ export class CheckboxComponent extends CommonFormControl @ViewChild('elRef', { static: true }) elRef: ElementRef; - value$: Observable = this.value$$.asObservable().pipe( - tap(value => { - this.snapshot.checked = value; - }), - ); - - snapshot: { checked: boolean } = { checked: false }; - private readonly checkboxGroup: CheckboxGroupComponent; private _label: any; private readonly label$$ = new BehaviorSubject(this.label); @@ -77,7 +69,7 @@ export class CheckboxComponent extends CommonFormControl cdr: ChangeDetectorRef, @Optional() @Inject(forwardRef(() => CheckboxGroupComponent)) - checkboxGroup: any, // FIXME: workaround temporarily + checkboxGroup: CheckboxGroupComponent, private readonly focusMonitor: FocusMonitor, ) { super(cdr); @@ -122,7 +114,7 @@ export class CheckboxComponent extends CommonFormControl if (this.disabled) { return; } - this.emitValueChange(!this.snapshot.checked); + this.emitValueChange(!this.snapshot.value); if (this.checkboxGroup) { this.checkboxGroup.onCheckboxChange(this); } diff --git a/src/form/common-form.ts b/src/form/common-form.ts index 6a3c08ae3..983c0a2f0 100644 --- a/src/form/common-form.ts +++ b/src/form/common-form.ts @@ -7,6 +7,7 @@ import { } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { Observable, ReplaySubject } from 'rxjs'; +import { publishReplay, refCount, tap } from 'rxjs/operators'; import { coerceAttrBoolean } from '../utils/coercion'; @@ -16,7 +17,7 @@ import { coerceAttrBoolean } from '../utils/coercion'; */ @Directive() // tslint:disable-next-line:directive-class-suffix -export abstract class CommonFormControl implements ControlValueAccessor { +export class CommonFormControl implements ControlValueAccessor { @Input() get disabled() { return this._disabled; @@ -48,7 +49,15 @@ export abstract class CommonFormControl implements ControlValueAccessor { private _value: T; private _disabled = false; - value$: Observable = this.value$$.asObservable(); + snapshot: { value: T } = { value: null }; + + value$: Observable = this.value$$.asObservable().pipe( + tap(value => { + this.snapshot.value = value; + }), + publishReplay(1), + refCount(), + ); constructor(protected cdr: ChangeDetectorRef) {} @@ -60,11 +69,11 @@ export abstract class CommonFormControl implements ControlValueAccessor { this.valueChange.emit(value); } - registerOnChange(fn: (_: T) => void): void { + registerOnChange(fn: (_: T) => void) { this.onChange = fn; } - registerOnTouched(fn: () => void): void { + registerOnTouched(fn: () => void) { this.onTouched = fn; } @@ -73,7 +82,9 @@ export abstract class CommonFormControl implements ControlValueAccessor { this.cdr.markForCheck(); } - abstract writeValue(value: T): void; + writeValue(value: T) { + this.value$$.next(value); + } } /** diff --git a/src/input/number-input/number-input.component.ts b/src/input/number-input/number-input.component.ts index b8f50c3e1..01e2c950c 100644 --- a/src/input/number-input/number-input.component.ts +++ b/src/input/number-input/number-input.component.ts @@ -7,8 +7,6 @@ import { forwardRef, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Observable } from 'rxjs'; -import { tap } from 'rxjs/operators'; import { CommonFormControl } from '../../form/public-api'; import { ComponentSize } from '../../types'; @@ -61,12 +59,6 @@ export class NumberInputComponent extends CommonFormControl { minDisabled = false; maxDisabled = false; - inputValue: number; - value$: Observable = this.value$$.asObservable().pipe( - tap(value => { - this.inputValue = value; - }), - ); constructor(protected cdr: ChangeDetectorRef) { super(cdr); @@ -75,9 +67,9 @@ export class NumberInputComponent extends CommonFormControl { changeHandle(event: KeyboardEvent) { const inputEl = event.target as HTMLInputElement; const value = inputEl.value; - inputEl.value = this.inputValue.toString(); + inputEl.value = this.snapshot.value.toString(); if (Number.isNaN(+value)) { - this.emitValueChange(this.inputValue); + this.emitValueChange(this.snapshot.value); return; } this.checkButtonAndSetValue(Number(value)); @@ -88,7 +80,7 @@ export class NumberInputComponent extends CommonFormControl { return; } const step: number = isPositive ? this.step : -this.step; - const val: number = step + this.inputValue; + const val: number = step + this.snapshot.value; if (Number.isNaN(val)) { return; } diff --git a/src/input/tags-input/tags-input.component.ts b/src/input/tags-input/tags-input.component.ts index a43788342..b4fee662b 100644 --- a/src/input/tags-input/tags-input.component.ts +++ b/src/input/tags-input/tags-input.component.ts @@ -11,7 +11,7 @@ import { } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable } from 'rxjs'; -import { tap } from 'rxjs/operators'; +import { publishReplay, refCount, tap } from 'rxjs/operators'; import { CommonFormControl } from '../../form/public-api'; import { ComponentSize } from '../../types'; @@ -63,15 +63,13 @@ export class TagsInputComponent extends CommonFormControl { value$: Observable = this.value$$.asObservable().pipe( tap(value => { - this.snapshot.tags = value; + this.snapshot.value = value; this.clearInput(); }), + publishReplay(1), + refCount(), ); - snapshot: { tags: string[] } = { - tags: [], - }; - focused = false; inputValue = ''; @@ -100,7 +98,7 @@ export class TagsInputComponent extends CommonFormControl { } get displayPlaceholder() { - return !this.snapshot.tags.length && !this.focused; + return !this.snapshot.value.length && !this.focused; } constructor(cdr: ChangeDetectorRef, private readonly renderer: Renderer2) { @@ -112,7 +110,7 @@ export class TagsInputComponent extends CommonFormControl { } onRemove(index: number) { - this.emitValueChange(this.snapshot.tags.filter((_, i) => i !== index)); + this.emitValueChange(this.snapshot.value.filter((_, i) => i !== index)); } onInput() { @@ -130,7 +128,7 @@ export class TagsInputComponent extends CommonFormControl { onKeyDown(event: KeyboardEvent) { const inputEl = event.target as HTMLInputElement; if (event.key === 'Backspace' && inputEl.value === '') { - this.onRemove(this.snapshot.tags.length - 1); + this.onRemove(this.snapshot.value.length - 1); event.stopPropagation(); event.preventDefault(); } else if (event.key === 'Enter') { @@ -160,10 +158,10 @@ export class TagsInputComponent extends CommonFormControl { if (!this.allowEmpty && !value) { return; } - if (!this.allowRepeat && this.snapshot.tags.includes(value)) { + if (!this.allowRepeat && this.snapshot.value.includes(value)) { return; } - this.emitValueChange(this.snapshot.tags.concat(value)); + this.emitValueChange(this.snapshot.value.concat(value)); } private clearInput() { diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts index 5f3aa8e73..4626365f1 100644 --- a/src/switch/switch.component.ts +++ b/src/switch/switch.component.ts @@ -6,8 +6,6 @@ import { forwardRef, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Observable } from 'rxjs'; -import { tap } from 'rxjs/operators'; import { CommonFormControl } from '../form/public-api'; import { Bem, buildBem } from '../utils/bem'; @@ -35,14 +33,6 @@ export class SwitchComponent extends CommonFormControl { @Input() loading = false; - checked = false; - - value$: Observable = this.value$$.asObservable().pipe( - tap(value => { - this.checked = value; - }), - ); - writeValue(value: boolean) { this.value$$.next(value); } @@ -51,7 +41,7 @@ export class SwitchComponent extends CommonFormControl { if (this.disabled) { return; } - this.emitValueChange(!this.checked); + this.emitValueChange(!this.snapshot.value); } onBlur() {