ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
434 lines (428 loc) • 14.8 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { FocusMonitor } from '@angular/cdk/a11y';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
import { EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Optional, Output, ViewChild, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isNotNil, InputBoolean } from 'ng-zorro-antd/core/util';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
class NzInputNumberComponent {
constructor(elementRef, cdr, focusMonitor, directionality) {
this.elementRef = elementRef;
this.cdr = cdr;
this.focusMonitor = focusMonitor;
this.directionality = directionality;
this.destroy$ = new Subject();
this.isFocused = false;
this.disabledUp = false;
this.disabledDown = false;
this.dir = 'ltr';
this.onChange = () => { };
this.onTouched = () => { };
this.nzBlur = new EventEmitter();
this.nzFocus = new EventEmitter();
this.nzSize = 'default';
this.nzMin = -Infinity;
this.nzMax = Infinity;
this.nzParser = (value) => value
.trim()
.replace(/。/g, '.')
.replace(/[^\w\.-]+/g, '');
this.nzPrecisionMode = 'toFixed';
this.nzPlaceHolder = '';
this.nzStep = 1;
this.nzInputMode = 'decimal';
this.nzId = null;
this.nzDisabled = false;
this.nzAutoFocus = false;
this.nzFormatter = value => value;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-input-number');
}
onModelChange(value) {
this.parsedValue = this.nzParser(value);
this.inputElement.nativeElement.value = `${this.parsedValue}`;
const validValue = this.getCurrentValidValue(this.parsedValue);
this.setValue(validValue);
}
getCurrentValidValue(value) {
let val = value;
if (val === '') {
val = '';
}
else if (!this.isNotCompleteNumber(val)) {
val = `${this.getValidValue(val)}`;
}
else {
val = this.value;
}
return this.toNumber(val);
}
// '1.' '1x' 'xx' '' => are not complete numbers
isNotCompleteNumber(num) {
return isNaN(num) || num === '' || num === null || !!(num && num.toString().indexOf('.') === num.toString().length - 1);
}
getValidValue(value) {
let val = parseFloat(value);
// https://github.com/ant-design/ant-design/issues/7358
if (isNaN(val)) {
return value;
}
if (val < this.nzMin) {
val = this.nzMin;
}
if (val > this.nzMax) {
val = this.nzMax;
}
return val;
}
toNumber(num) {
if (this.isNotCompleteNumber(num)) {
return num;
}
const numStr = String(num);
if (numStr.indexOf('.') >= 0 && isNotNil(this.nzPrecision)) {
if (typeof this.nzPrecisionMode === 'function') {
return this.nzPrecisionMode(num, this.nzPrecision);
}
else if (this.nzPrecisionMode === 'cut') {
const numSplit = numStr.split('.');
numSplit[1] = numSplit[1].slice(0, this.nzPrecision);
return Number(numSplit.join('.'));
}
return Number(Number(num).toFixed(this.nzPrecision));
}
return Number(num);
}
getRatio(e) {
let ratio = 1;
if (e.metaKey || e.ctrlKey) {
ratio = 0.1;
}
else if (e.shiftKey) {
ratio = 10;
}
return ratio;
}
down(e, ratio) {
if (!this.isFocused) {
this.focus();
}
this.step('down', e, ratio);
}
up(e, ratio) {
if (!this.isFocused) {
this.focus();
}
this.step('up', e, ratio);
}
getPrecision(value) {
const valueString = value.toString();
if (valueString.indexOf('e-') >= 0) {
return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10);
}
let precision = 0;
if (valueString.indexOf('.') >= 0) {
precision = valueString.length - valueString.indexOf('.') - 1;
}
return precision;
}
// step={1.0} value={1.51}
// press +
// then value should be 2.51, rather than 2.5
// if this.props.precision is undefined
// https://github.com/react-component/input-number/issues/39
getMaxPrecision(currentValue, ratio) {
if (isNotNil(this.nzPrecision)) {
return this.nzPrecision;
}
const ratioPrecision = this.getPrecision(ratio);
const stepPrecision = this.getPrecision(this.nzStep);
const currentValuePrecision = this.getPrecision(currentValue);
if (!currentValue) {
return ratioPrecision + stepPrecision;
}
return Math.max(currentValuePrecision, ratioPrecision + stepPrecision);
}
getPrecisionFactor(currentValue, ratio) {
const precision = this.getMaxPrecision(currentValue, ratio);
return Math.pow(10, precision);
}
upStep(val, rat) {
const precisionFactor = this.getPrecisionFactor(val, rat);
const precision = Math.abs(this.getMaxPrecision(val, rat));
let result;
if (typeof val === 'number') {
result = ((precisionFactor * val + precisionFactor * this.nzStep * rat) / precisionFactor).toFixed(precision);
}
else {
result = this.nzMin === -Infinity ? this.nzStep : this.nzMin;
}
return this.toNumber(result);
}
downStep(val, rat) {
const precisionFactor = this.getPrecisionFactor(val, rat);
const precision = Math.abs(this.getMaxPrecision(val, rat));
let result;
if (typeof val === 'number') {
result = ((precisionFactor * val - precisionFactor * this.nzStep * rat) / precisionFactor).toFixed(precision);
}
else {
result = this.nzMin === -Infinity ? -this.nzStep : this.nzMin;
}
return this.toNumber(result);
}
step(type, e, ratio = 1) {
this.stop();
e.preventDefault();
if (this.nzDisabled) {
return;
}
const value = this.getCurrentValidValue(this.parsedValue) || 0;
let val = 0;
if (type === 'up') {
val = this.upStep(value, ratio);
}
else if (type === 'down') {
val = this.downStep(value, ratio);
}
const outOfRange = val > this.nzMax || val < this.nzMin;
if (val > this.nzMax) {
val = this.nzMax;
}
else if (val < this.nzMin) {
val = this.nzMin;
}
this.setValue(val);
this.updateDisplayValue(val);
this.isFocused = true;
if (outOfRange) {
return;
}
this.autoStepTimer = setTimeout(() => {
this[type](e, ratio);
}, 300);
}
stop() {
if (this.autoStepTimer) {
clearTimeout(this.autoStepTimer);
}
}
setValue(value) {
if (`${this.value}` !== `${value}`) {
this.onChange(value);
}
this.value = value;
this.parsedValue = value;
this.disabledUp = this.disabledDown = false;
if (value || value === 0) {
const val = Number(value);
if (val >= this.nzMax) {
this.disabledUp = true;
}
if (val <= this.nzMin) {
this.disabledDown = true;
}
}
}
updateDisplayValue(value) {
const displayValue = isNotNil(this.nzFormatter(value)) ? this.nzFormatter(value) : '';
this.displayValue = displayValue;
this.inputElement.nativeElement.value = `${displayValue}`;
}
onKeyDown(e) {
if (e.keyCode === UP_ARROW) {
const ratio = this.getRatio(e);
this.up(e, ratio);
this.stop();
}
else if (e.keyCode === DOWN_ARROW) {
const ratio = this.getRatio(e);
this.down(e, ratio);
this.stop();
}
else if (e.keyCode === ENTER) {
this.updateDisplayValue(this.value);
}
}
writeValue(value) {
this.value = value;
this.setValue(value);
this.updateDisplayValue(value);
this.cdr.markForCheck();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(disabled) {
this.nzDisabled = disabled;
this.cdr.markForCheck();
}
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
blur() {
this.inputElement.nativeElement.blur();
}
ngOnInit() {
var _a;
this.focusMonitor.monitor(this.elementRef, true).subscribe(focusOrigin => {
if (!focusOrigin) {
this.isFocused = false;
this.updateDisplayValue(this.value);
this.nzBlur.emit();
Promise.resolve().then(() => this.onTouched());
}
else {
this.isFocused = true;
this.nzFocus.emit();
}
});
this.dir = this.directionality.value;
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
});
}
ngOnChanges(changes) {
if (changes.nzFormatter && !changes.nzFormatter.isFirstChange()) {
const validValue = this.getCurrentValidValue(this.parsedValue);
this.setValue(validValue);
this.updateDisplayValue(validValue);
}
}
ngAfterViewInit() {
if (this.nzAutoFocus) {
this.focus();
}
}
ngOnDestroy() {
this.focusMonitor.stopMonitoring(this.elementRef);
this.destroy$.next();
this.destroy$.complete();
}
}
NzInputNumberComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-input-number',
exportAs: 'nzInputNumber',
template: `
<div class="ant-input-number-handler-wrap">
<span
unselectable="unselectable"
class="ant-input-number-handler ant-input-number-handler-up"
(mousedown)="up($event)"
(mouseup)="stop()"
(mouseleave)="stop()"
[class.ant-input-number-handler-up-disabled]="disabledUp"
>
<i nz-icon nzType="up" class="ant-input-number-handler-up-inner"></i>
</span>
<span
unselectable="unselectable"
class="ant-input-number-handler ant-input-number-handler-down"
(mousedown)="down($event)"
(mouseup)="stop()"
(mouseleave)="stop()"
[class.ant-input-number-handler-down-disabled]="disabledDown"
>
<i nz-icon nzType="down" class="ant-input-number-handler-down-inner"></i>
</span>
</div>
<div class="ant-input-number-input-wrap">
<input
#inputElement
autocomplete="off"
class="ant-input-number-input"
[attr.id]="nzId"
[attr.autofocus]="nzAutoFocus ? 'autofocus' : null"
[disabled]="nzDisabled"
[attr.min]="nzMin"
[attr.max]="nzMax"
[placeholder]="nzPlaceHolder"
[attr.step]="nzStep"
[attr.inputmode]="nzInputMode"
(keydown)="onKeyDown($event)"
(keyup)="stop()"
[ngModel]="displayValue"
(ngModelChange)="onModelChange($event)"
/>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NzInputNumberComponent),
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class.ant-input-number-focused]': 'isFocused',
'[class.ant-input-number-lg]': `nzSize === 'large'`,
'[class.ant-input-number-sm]': `nzSize === 'small'`,
'[class.ant-input-number-disabled]': 'nzDisabled',
'[class.ant-input-number-rtl]': `dir === 'rtl'`
}
},] }
];
NzInputNumberComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: FocusMonitor },
{ type: Directionality, decorators: [{ type: Optional }] }
];
NzInputNumberComponent.propDecorators = {
nzBlur: [{ type: Output }],
nzFocus: [{ type: Output }],
inputElement: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
nzSize: [{ type: Input }],
nzMin: [{ type: Input }],
nzMax: [{ type: Input }],
nzParser: [{ type: Input }],
nzPrecision: [{ type: Input }],
nzPrecisionMode: [{ type: Input }],
nzPlaceHolder: [{ type: Input }],
nzStep: [{ type: Input }],
nzInputMode: [{ type: Input }],
nzId: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzAutoFocus: [{ type: Input }],
nzFormatter: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzInputNumberComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzInputNumberComponent.prototype, "nzAutoFocus", void 0);
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzInputNumberModule {
}
NzInputNumberModule.decorators = [
{ type: NgModule, args: [{
imports: [BidiModule, CommonModule, FormsModule, NzIconModule],
declarations: [NzInputNumberComponent],
exports: [NzInputNumberComponent]
},] }
];
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
/**
* Generated bundle index. Do not edit.
*/
export { NzInputNumberComponent, NzInputNumberModule };
//# sourceMappingURL=ng-zorro-antd-input-number.js.map