feat: common form control set snapshot by default

.github/workflows/test.yml

@@ -1,6 +1,6 @@
 name: Run unit test
 
-on: [push, pull_request]
+on: pull_request
 
 jobs:
   run_unit_test:

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",

src/checkbox/checkbox-group/checkbox-group.component.ts

@@ -57,7 +57,7 @@ export class CheckboxGroupComponent extends CommonFormControl<any[]> {
     }
     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);

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<boolean>
   @ViewChild('elRef', { static: true })
   elRef: ElementRef;
 
-  value$: Observable<boolean> = 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<any>(this.label);
@@ -77,7 +69,7 @@ export class CheckboxComponent extends CommonFormControl<boolean>
     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<boolean>
     if (this.disabled) {
       return;
     }
-    this.emitValueChange(!this.snapshot.checked);
+    this.emitValueChange(!this.snapshot.value);
     if (this.checkboxGroup) {
       this.checkboxGroup.onCheckboxChange(this);
     }

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<T> implements ControlValueAccessor {
+export class CommonFormControl<T> implements ControlValueAccessor {
   @Input()
   get disabled() {
     return this._disabled;
@@ -48,7 +49,15 @@ export abstract class CommonFormControl<T> implements ControlValueAccessor {
   private _value: T;
   private _disabled = false;
 
-  value$: Observable<T> = this.value$$.asObservable();
+  snapshot: { value: T } = { value: null };
+
+  value$: Observable<T> = 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<T> 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<T> implements ControlValueAccessor {
     this.cdr.markForCheck();
   }
 
-  abstract writeValue(value: T): void;
+  writeValue(value: T) {
+    this.value$$.next(value);
+  }
 }
 
 /**

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<number> {
 
   minDisabled = false;
   maxDisabled = false;
-  inputValue: number;
-  value$: Observable<number> = this.value$$.asObservable().pipe(
-    tap(value => {
-      this.inputValue = value;
-    }),
-  );
 
   constructor(protected cdr: ChangeDetectorRef) {
     super(cdr);
@@ -75,9 +67,9 @@ export class NumberInputComponent extends CommonFormControl<number> {
   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<number> {
       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;
     }

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<string[]> {
 
   value$: Observable<string[]> = 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<string[]> {
   }
 
   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<string[]> {
   }
 
   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<string[]> {
   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<string[]> {
     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() {

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<boolean> {
   @Input()
   loading = false;
 
-  checked = false;
-
-  value$: Observable<boolean> = 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<boolean> {
     if (this.disabled) {
       return;
     }
-    this.emitValueChange(!this.checked);
+    this.emitValueChange(!this.snapshot.value);
   }
 
   onBlur() {