fix: radio button can't inject radio group

.github/workflows/deploy.yml

@@ -5,7 +5,8 @@ on:
     branches: [master]
 
 jobs:
-  build:
+  deploy_stories:
+    name: Deploy stories
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.github/workflows/publish.yml

@@ -5,7 +5,8 @@ on:
     types: [published]
 
 jobs:
-  build:
+  publish_package:
+    name: Publish package
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

.github/workflows/test.yml

@@ -3,7 +3,8 @@ name: Run unit test
 on: push
 
 jobs:
-  build:
+  run_unit_test:
+    name: Run unit test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

src/radio/base-radio.ts

@@ -0,0 +1,86 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { BehaviorSubject, Subject, combineLatest } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+
+import { RadioGroupComponent } from './radio-group/radio-group.component';
+
+let uniqueId = 0;
+
+export class BaseRadio implements OnInit, AfterViewInit, OnDestroy {
+  id = `aui-radio-${uniqueId++}`;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  get value() {
+    return this._value;
+  }
+
+  set value(val) {
+    this._value = val;
+    this.value$$.next(val);
+  }
+
+  @ViewChild('elRef', { static: true })
+  elRef: ElementRef;
+
+  checked = false;
+  name = '';
+
+  protected _value: any;
+  protected readonly value$$ = new BehaviorSubject<any>(this.value);
+  protected destroy$$ = new Subject<void>();
+
+  constructor(
+    protected radioGroup: RadioGroupComponent,
+    protected focusMonitor: FocusMonitor,
+    protected cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit() {
+    this.radioGroup.name$.pipe(takeUntil(this.destroy$$)).subscribe(name => {
+      this.name = name;
+      this.cdr.markForCheck();
+    });
+
+    combineLatest([this.radioGroup.value$, this.value$$])
+      .pipe(
+        takeUntil(this.destroy$$),
+        map(([groupValue, selfValue]) => groupValue === selfValue),
+      )
+      .subscribe(checked => {
+        this.checked = checked;
+        this.cdr.markForCheck();
+      });
+  }
+
+  ngAfterViewInit() {
+    this.focusMonitor.monitor(this.elRef.nativeElement, true);
+  }
+
+  ngOnDestroy() {
+    this.destroy$$.next();
+    this.focusMonitor.stopMonitoring(this.elRef.nativeElement);
+  }
+
+  onClick() {
+    if (this.checked || this.disabled) {
+      return;
+    }
+    this.radioGroup.onRadioChange(this.value);
+  }
+
+  onBlur() {
+    this.radioGroup.onRadioBlur();
+  }
+}

src/radio/radio-button/radio-button.component.ts

@@ -1,13 +1,16 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   OnInit,
   ViewEncapsulation,
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 
 import { Bem, buildBem } from '../../utils/bem';
-import { RadioComponent } from '../radio.component';
+import { BaseRadio } from '../base-radio';
+import { RadioGroupComponent } from '../radio-group/radio-group.component';
 import { RadioSize } from '../radio.types';
 
 @Component({
@@ -18,7 +21,7 @@ import { RadioSize } from '../radio.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
 })
-export class RadioButtonComponent extends RadioComponent implements OnInit {
+export class RadioButtonComponent extends BaseRadio implements OnInit {
   bem: Bem = buildBem('aui-radio-button');
 
   size = RadioSize.Medium;
@@ -30,6 +33,15 @@ export class RadioButtonComponent extends RadioComponent implements OnInit {
     } ${this.isPlain ? 'isPlain' : ''}`;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor(
+    radioGroup: RadioGroupComponent,
+    focusMonitor: FocusMonitor,
+    cdr: ChangeDetectorRef,
+  ) {
+    super(radioGroup, focusMonitor, cdr);
+  }
+
   ngOnInit() {
     super.ngOnInit();
     this.radioGroup.size$.pipe(takeUntil(this.destroy$$)).subscribe(size => {

src/radio/radio.component.ts

@@ -1,25 +1,16 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import { BehaviorSubject, Subject, combineLatest } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
 
 import { Bem, buildBem } from '../utils/bem';
 
+import { BaseRadio } from './base-radio';
 import { RadioGroupComponent } from './radio-group/radio-group.component';
 
-let uniqueId = 0;
-
 @Component({
   selector: 'aui-radio',
   templateUrl: './radio.component.html',
@@ -28,79 +19,21 @@ let uniqueId = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
 })
-export class RadioComponent implements OnInit, AfterViewInit, OnDestroy {
-  id = `aui-radio-${uniqueId++}`;
+export class RadioComponent extends BaseRadio {
   bem: Bem = buildBem('aui-radio');
 
-  @Input()
-  disabled = false;
-
-  @Input()
-  get value() {
-    return this._value;
-  }
-
-  set value(val) {
-    this._value = val;
-    this.value$$.next(val);
-  }
-
-  @ViewChild('elRef', { static: true })
-  elRef: ElementRef;
-
-  checked = false;
-  name = '';
-
-  private _value: any;
-  private readonly value$$ = new BehaviorSubject<any>(this.value);
-  protected destroy$$ = new Subject<void>();
-
   get rootClass() {
     return `${this.bem.block()} ${this.disabled ? 'isDisabled' : ''} ${
       this.checked ? 'isChecked' : ''
     }`;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor(
-    protected cdr: ChangeDetectorRef,
-    protected radioGroup: RadioGroupComponent,
-    protected focusMonitor: FocusMonitor,
-  ) {}
-
-  ngOnInit() {
-    this.radioGroup.name$.pipe(takeUntil(this.destroy$$)).subscribe(name => {
-      this.name = name;
-      this.cdr.markForCheck();
-    });
-
-    combineLatest([this.radioGroup.value$, this.value$$])
-      .pipe(
-        takeUntil(this.destroy$$),
-        map(([groupValue, selfValue]) => groupValue === selfValue),
-      )
-      .subscribe(checked => {
-        this.checked = checked;
-        this.cdr.markForCheck();
-      });
-  }
-
-  ngAfterViewInit() {
-    this.focusMonitor.monitor(this.elRef.nativeElement, true);
-  }
-
-  ngOnDestroy() {
-    this.destroy$$.next();
-    this.focusMonitor.stopMonitoring(this.elRef.nativeElement);
-  }
-
-  onClick() {
-    if (this.checked || this.disabled) {
-      return;
-    }
-    this.radioGroup.onRadioChange(this.value);
-  }
-
-  onBlur() {
-    this.radioGroup.onRadioBlur();
+    radioGroup: RadioGroupComponent,
+    focusMonitor: FocusMonitor,
+    cdr: ChangeDetectorRef,
+  ) {
+    super(radioGroup, focusMonitor, cdr);
   }
 }

tsconfig.json

@@ -5,5 +5,9 @@
     "paths": {
       "@alauda/ui": ["src/public-api"]
     }
+  },
+  "exclude": ["./release"],
+  "angularCompilerOptions": {
+    "enableIvy": false
   }
 }