feat(module: inputitem): add fontColor input (#156)

NG-ZORRO · Dec 11, 2018 · 0ef2620 · 0ef2620
1 parent 94cb387
commit 0ef2620
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/components/input-item/custom-input/custom-input.component.html b/components/input-item/custom-input/custom-input.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="value===''" class="fake-input-placeholder">
   {{placeholder}}
 </div>
-<div [ngClass]="fakeInputCls" (click)="onFakeInputClick()">
+<div [ngClass]="fakeInputCls"  [style.color]='fontColor' (click)="onFakeInputClick()" >
   {{value}}
 </div>
diff --git a/components/input-item/custom-input/custom-input.component.ts b/components/input-item/custom-input/custom-input.component.ts
@@ -32,6 +32,7 @@ export class CustomInput implements OnInit, OnDestroy {
   private _setFocus: boolean = false;
   private _preventKeyboard: boolean;
   private _moneyKeyboardAlign: string;
+  private _fontColor:string;
 
   @Input()
   get value(): string {
@@ -71,6 +72,13 @@ export class CustomInput implements OnInit, OnDestroy {
     this._disabled = value;
   }
   @Input()
+  get fontColor() {
+    return this._fontColor;
+  }
+  set fontColor(value: string) {
+    this._fontColor = value;
+  }
+  @Input()
   set moneyKeyboardAlign(value: string) {
     this._moneyKeyboardAlign = value;
     this.setContainerCls();

diff --git a/components/input-item/input-item.component.html b/components/input-item/input-item.component.html
@@ -9,6 +9,7 @@
                  [placeholder]="placeholder"
                  [disabled]="disabled"
                  [editable]="editable"
+                 [fontColor]="fontColor"
                  [moneyKeyboardAlign]="moneyKeyboardAlign"
                  [setFocus]="setFocus"
                  [maxLength]="maxLength"
@@ -28,6 +29,7 @@
              [autofocus]="autoFocus"
              [maxlength]="maxLength"
              [pattern]="pattern"
+             [style.color]='fontColor'
              (ngModelChange)="inputChange($event)"
              (blur)="inputBlur(value , $event)"
              (focus)="inputFocus(value)"

diff --git a/components/input-item/input-item.component.spec.ts b/components/input-item/input-item.component.spec.ts
@@ -137,6 +137,19 @@ describe('InputComponent', () => {
     const fakeInput = inputItem.nativeElement.querySelector('.fake-input-placeholder');
     expect(fakeInput.innerText).toBe('test', 'type is money');
   });
+  it('should fontColor work', () => {
+    component.fontColor = '#2026e2';
+    fixture.detectChanges();
+    inputEle = inputItem.nativeElement.querySelector('input');
+    expect(inputEle.getAttribute('style')).toContain('color: rgb(32, 38, 226)', 'fontColor is text');
+
+    component.type = 'money';
+    fixture.detectChanges();
+    component.fontColor = '#eee';
+    fixture.detectChanges();
+    const fakeInput = inputItem.nativeElement.querySelector('.fake-input');
+    expect(fakeInput.getAttribute('style')).toBe('color: rgb(238, 238, 238);', 'fontColor is money');
+  });
 
   it('should maxLength work', () => {
     component.maxLength = 7;
@@ -357,6 +370,7 @@ describe('InputComponent', () => {
                [updatePlaceholder]="updatePlaceholder"
                [prefixListCls]="prefixListCls"
                [name]="name"
+               [fontColor]="fontColor"
                [moneyKeyboardAlign]="moneyKeyboardAlign"
                [locale]="locale"
                [focus]="focus"
@@ -380,6 +394,7 @@ export class TestInputComponent {
   disabled: boolean = false;
   clear: boolean = false;
   maxLength: number;
+  fontColor:string;
   error: boolean = false;
   extra: string = '';
   labelNumber: number = 5;

diff --git a/components/input-item/input-item.component.ts b/components/input-item/input-item.component.ts
@@ -22,7 +22,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       useExisting: forwardRef(() => InputItem),
       multi: true
     }
-  ],
+  ]
 })
 export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   prefixCls: string = 'am-input';
@@ -53,6 +53,7 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   private _locale;
   private _focus: boolean = false;
   private _isClear: boolean = false;
+  private _fontColor: string;
 
   @ViewChild('lableContent')
   lableRef;
@@ -188,6 +189,13 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
     this._locale = value;
   }
   @Input()
+  get fontColor() {
+    return this._fontColor;
+  }
+  set fontColor(value: string) {
+    this._fontColor = value;
+  }
+  @Input()
   set focus(value) {
     if (value && value.focus) {
       this.autoFocus = value.focus;