Last active
February 22, 2019 13:50
-
-
Save moussa-b/c8cbec4e0464d2a4db33ab1ad1ef99c4 to your computer and use it in GitHub Desktop.
Extends primeng spinner waiting that developers fix issue 6798
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild} from '@angular/core'; | |
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms'; | |
import {Spinner} from 'primeng/primeng'; | |
// TODO : delete this component after fix https://github.com/primefaces/primeng/issues/6798 has been merged | |
@Component({ | |
selector: 'mb-spinner', | |
template: ` | |
<p-spinner [formControl]="mbSpinner" | |
[step]="step" | |
[min]="min" | |
[max]="max" | |
[placeholder]="placeholder" | |
[disabled]="disabled" | |
[readonly]="readonly" | |
[maxlength]="maxlength" | |
[size]="size" | |
[tabindex]="tabindex" | |
[inputId]="tabindex" | |
[type]="type" | |
[required]="required" | |
[name]="name" | |
[inputStyle]="inputStyle" | |
[inputStyleClass]="inputStyleClass" | |
(onChange)="onSpinnerChange($event)" | |
(onFocus)="onSpinnerFocus($event)" | |
(onBlur)="onSpinnerBlur($event)"></p-spinner> | |
`, | |
providers: [{ | |
provide: NG_VALUE_ACCESSOR, | |
useExisting: forwardRef(() => MbSpinnerComponent), | |
multi: true | |
}] | |
}) | |
export class MbSpinnerComponent implements ControlValueAccessor, OnInit { | |
@ViewChild(Spinner) private _spinner: Spinner; | |
mbSpinner: FormControl; | |
// Required to implement interface ControlValueAccessor | |
private _onChange : Function = () => {}; | |
private _onTouched : Function = () => {}; | |
// Those inputs are given directly to primeng's spinner component | |
@Input() step: number = 1; | |
@Input() min: number; | |
@Input() max: number; | |
@Input() placeholder: string; | |
@Input() disabled: boolean; | |
@Input() readonly: boolean; | |
@Input() maxlength: number; | |
@Input() size: number; | |
@Input() tabindex: number; | |
@Input() inputId: string; | |
@Input() type: string = 'text'; | |
@Input() required: boolean; | |
@Input() name: string; | |
@Input() inputStyle: any; | |
@Input() inputStyleClass: string; | |
@Output() onChange: EventEmitter<any> = new EventEmitter(); | |
@Output() onFocus: EventEmitter<any> = new EventEmitter(); | |
@Output() onBlur: EventEmitter<any> = new EventEmitter(); | |
constructor() { | |
} | |
ngOnInit() { | |
this.mbSpinner = new FormControl(); | |
if (this._spinner) { | |
this.mbSpinner.valueChanges.subscribe(result => this._onChange(result)); | |
const origParseValue = this._spinner.parseValue; | |
this._spinner.parseValue = (val: string): number => { | |
let value: number; | |
if (val.trim() === '') { | |
value = null; | |
} | |
else { | |
value = origParseValue.call(this._spinner, val); | |
} | |
return value; | |
} | |
} | |
} | |
registerOnChange(fn: any): void { | |
this._onChange = fn; | |
} | |
registerOnTouched(fn: any): void { | |
this._onTouched = fn; | |
} | |
writeValue(value: any): void { | |
if (value) { | |
this.mbSpinner.setValue(value); | |
} | |
} | |
onSpinnerBlur(event) { | |
this.onBlur.emit(event); | |
} | |
onSpinnerFocus(event) { | |
this.onFocus.emit(event); | |
} | |
onSpinnerChange(event: Event) { | |
this.onChange.emit(event); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment