aboutsummaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts')
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts765
1 files changed, 0 insertions, 765 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts
deleted file mode 100644
index 9b5a01e9..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts
+++ /dev/null
@@ -1,765 +0,0 @@
-import {AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, OnInit, Output, Renderer2, ViewChild} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Observable} from 'rxjs/Observable';
-
-import {BooleanFieldValue} from '../core/boolean-field-value';
-import {NumberWrapperParseFloat} from '../core/number-wrapper-parse';
-import {UUID} from '../core/uuid';
-
-const noop = () => {};
-
-export const PX_TEXT_INPUT_CONTROL_VALUE_ACCESSOR: any = {
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => PlxTextInputComponent),
- multi: true
-};
-
-@Component({
- selector: 'plx-text-input',
- templateUrl: 'text-input.html',
- styleUrls: ['text-input.less'],
- host: {'style': 'display: inline-block;'},
- providers: [PX_TEXT_INPUT_CONTROL_VALUE_ACCESSOR]
-})
-
-export class PlxTextInputComponent implements ControlValueAccessor, OnInit,
- AfterContentInit {
- private _focused: boolean = false;
- private _value: any = '';
- /** Callback registered via registerOnTouched (ControlValueAccessor) */
- private _onTouchedCallback: () => void = noop;
- /** Callback registered via registerOnChange (ControlValueAccessor) */
- private _onChangeCallback: (_: any) => void = noop;
-
- /** Readonly properties. */
- get empty() {
- return this._value === null || this._value === '';
- }
- get inputId(): string {
- return `${this.id}`;
- }
- get isShowHintLabel() {
- return this._focused && this.hintLabel !== null;
- }
- get inputType() {
- return this.type === 'number' ? 'text' : this.type;
- }
-
- @Input() id: string = `plx-input-${UUID.UUID()}`;
- @Input() name: string = null;
- @Input() hintLabel: string = null;
- @Input() lang: string = 'zh';
- @Input() @BooleanFieldValue() disabled: boolean = false;
-
- @Input() numberShowSpinner = true;
- @Input() max: string|number = null;
- @Input() maxLength: number = 64;
- @Input() min: string|number = null;
- @Input() minLength: number = null;
- @Input() placeholder: string = '';
- @Input() @BooleanFieldValue() readOnly: boolean = false;
- @Input() @BooleanFieldValue() required: boolean = false;
- @Input() @BooleanFieldValue() notShowOption: boolean = true;
- @Input() type: string = 'text';
- @Input() tabIndex: number = null;
- @Input() pattern: string = null;
-
- @Input() @BooleanFieldValue() shortInput: boolean = false;
- @Input() unit: string = null;
- @Input() unitOptions: string[] = null;
- @Input() prefix: string = null;
- @Input() suffixList: string[] = null;
-
- // @Input() precision: number = 0;
- @Input() step: number = 1;
- @Input() width: string = '400px';
- @Input() unitWidth: string = '45px';
- @Input() unitOptionWidth: string = '84px';
- @Input() prefixWidth: string = '70px';
- @Input() historyList: string[];
-
- @Input() prefixOptions: string[] = [];
- @Input() prefixOptionWidth: string = '84px';
-
- @Input() @BooleanFieldValue() passwordSwitch: boolean = false;
-
- @ViewChild('input') inputViewChild: ElementRef;
- @ViewChild('inputOutter') pxTextInputElement: ElementRef;
-
- @HostBinding('class.input-invalid') selectClass: boolean = true;
-
- isDisabledUp: boolean = false;
- isDisabledDown: boolean = false;
- displayDataList: string[];
- currentPrecision: number = 0;
- keyPattern: RegExp = /[0-9\-]/;
- langPattern: RegExp =
- /[a-zA-Z]|[\u4e00-\u9fa5]|[\uff08\uff09\u300a\u300b\u2014\u2014\uff1a\uff1b\uff0c\u201c\u201d\u2018\u2019\+\=\{\}\u3001\u3002\u3010\u3011\<\>\uff01\uff1f\/\|]/g;
- timer: any;
- optionalLabel: string = null;
- hasSelection = false;
- _precision: number = 0;
- displayValue: any;
-
- isOpenDataList: boolean = false;
- dataListClicked: boolean = false;
- isOpenSuffixList: boolean = false;
- suffixListClicked: boolean = false;
-
- showUnit: string;
- isShowUnitOption: boolean = false;
- unitOptionClicked: boolean = false;
-
- prefixOptionClicked: boolean = false;
- isShowPrefixOption = false;
- showPrefix: string;
- showPassword: boolean = false;
- tooltipText: string;
- tooltipTexts = {
- 'zh': {
- 'true': '隐藏',
- 'false': '显示',
- },
- 'en': {
- 'true': 'hidden',
- 'false': 'show',
- }
- };
- isPwdSwithHover: boolean = false;
- isPwdSwithClick: boolean = false;
-
- _autoFocus: boolean = false;
- @Input()
- set autoFocus(value: boolean) {
- this._autoFocus = value;
-
- const that = this;
- if (this._autoFocus) {
- setTimeout(() => {
- that.inputViewChild.nativeElement.focus();
- }, 0);
- }
- }
- get autoFocus() {
- return this._autoFocus;
- }
-
- @Input()
- set precision(value: string) {
- this._precision = parseInt(value);
- }
- get precision() {
- return this._value;
- }
-
- get inputWidth() {
- if (this.prefixOptions && this.prefixOptions.length > 0) {
- if (this.unitOptions && this.unitOptions.length > 0) {
- return `calc(${this.width} - ${this.prefixOptionWidth} - ${this.unitOptionWidth})`;
- } else if (this.unit !== null) {
- return `calc(${this.width} - ${this.prefixOptionWidth} - ${this.unitWidth})`;
- } else {
- return `calc(${this.width} - ${this.prefixOptionWidth})`;
- }
- }
-
- if (this.unit !== null && this.prefix !== null) {
- return `calc(${this.width} - ${this.unitWidth} - ${this.prefixWidth})`;
- }
-
- if (this.unit !== null) {
- return `calc(${this.width} - ${this.unitWidth})`;
- }
-
- if (!!this.unitOptions && this.unitOptions.length !== 0 &&
- this.prefix !== null) {
- return `calc(${this.width} - ${this.unitOptionWidth} - ${
- this.prefixWidth
- })`;
- }
-
- if (!!this.unitOptions && this.unitOptions.length !== 0) {
- return `calc(${this.width} - ${this.unitOptionWidth})`;
- }
- if (this.prefix !== null) {
- return `calc(${this.width} - ${this.prefixWidth})`;
- }
- return this.width;
- }
-
-
- get hasUnit() {
- return this.unit !== null;
- }
- get hasUnitOption() {
- return this.showUnit !== undefined;
- }
- get hasPrefix() {
- return this.prefix !== null;
- }
- get hasPrefixOption() {
- return this.prefixOptions && this.prefixOptions.length > 0;
- }
- get isFocus() {
- return this._focused;
- }
-
- private _blurEmitter: EventEmitter<FocusEvent> =
- new EventEmitter<FocusEvent>();
- private _focusEmitter: EventEmitter<FocusEvent> =
- new EventEmitter<FocusEvent>();
- private click = new EventEmitter<any>();
- private unitChange = new EventEmitter<any>();
- @Output() public prefixChange = new EventEmitter<any>();
-
- @Output('blur')
- get onBlur(): Observable<FocusEvent> {
- return this._blurEmitter.asObservable();
- }
-
- @Output('focus')
- get onFocus(): Observable<FocusEvent> {
- return this._focusEmitter.asObservable();
- }
-
- @HostListener('focus')
- onHostFocus() {
- this.renderer.addClass(this.el.nativeElement, 'input-focus');
- this.renderer.removeClass(this.el.nativeElement, 'input-blur');
- }
-
- @HostListener('blur')
- onHostBlur() {
- this.renderer.addClass(this.el.nativeElement, 'input-blur');
- this.renderer.removeClass(this.el.nativeElement, 'input-focus');
- }
-
- @Input()
- set value(v: any) {
- v = this.filterZhChar(v);
- v = this._convertValueForInputType(v);
- if (v !== this._value) {
- this._value = v;
- if (this.type === 'number') {
- if (this._value === '') {
- this._onChangeCallback(null);
- } else if (isNaN(this._value)) {
- this._onChangeCallback(this._value);
- } else {
- this._onChangeCallback(NumberWrapperParseFloat(this._value));
- }
- } else {
- this._onChangeCallback(this._value);
- }
- }
- }
- get value(): any {
- return this._value;
- }
-
- constructor(
- private el: ElementRef, private renderer: Renderer2) {}
-
- ngOnInit() {
- if (this.shortInput) {
- this.width = '120px';
- this.unitWidth = '40px';
- this.prefixWidth = '40px';
- }
- this.translateLabel();
-
- if (!!this.unitOptions && this.unitOptions.length !== 0) {
- this.showUnit = this.unitOptions[0];
- }
-
- if (!!this.prefixOptions && this.prefixOptions.length !== 0) {
- this.showPrefix = this.prefixOptions[0];
- }
- }
-
- ngAfterContentInit() {
- if (this.pxTextInputElement) {
- Array.from(this.pxTextInputElement.nativeElement.childNodes)
- .forEach((node: HTMLElement) => {
- if (node.nodeType === 3) {
- this.pxTextInputElement.nativeElement.removeChild(node);
- }
- });
- }
- }
- private translateLabel() {
- if (this.lang === 'zh') {
- this.optionalLabel = '（可选）';
- } else {
- this.optionalLabel = '(Optional)';
- }
- }
-
- _handleFocus(event: FocusEvent) {
- this._focused = true;
- this._focusEmitter.emit(event);
- }
-
- _handleBlur(event: FocusEvent) {
- this._focused = false;
- this._onTouchedCallback();
- this._blurEmitter.emit(event);
- }
-
- _checkValueLimit(value: any) {
- if (this.type === 'number') {
- if ((value === '' || value === undefined || value === null) &&
- !this.required) {
- return '';
- } else if (
- this.min !== null &&
- NumberWrapperParseFloat(value) < NumberWrapperParseFloat(this.min)) {
- return this.min;
- } else if (
- this.max !== null &&
- NumberWrapperParseFloat(value) > NumberWrapperParseFloat(this.max)) {
- return this.max;
- } else {
- return value;
- }
- }
- return value;
- }
-
- _checkValue() {
- this.value = this._checkValueLimit(this.value);
- this.displayValue = this.value;
- }
-
- _handleChange(event: Event) {
- this.value = (<HTMLInputElement>event.target).value;
- this._onTouchedCallback();
- }
-
- openDataList() {
- this.dataListClicked = true;
- if (this.historyList) {
- if (this.value) {
- this.filterOption(this.value);
- } else {
- this.displayDataList = this.historyList;
- if (!this.isOpenDataList) {
- this.isOpenDataList = true;
- }
- }
- }
- }
-
- _handleClick(event: Event) {
- if (this.isShowUnitOption) {
- this.isShowUnitOption = false;
- }
- this.click.emit(event);
-
- if (this.historyList) {
- this.openDataList();
- }
- }
-
- _handleSelect(event: Event) { // 输入框文本被选中时处理
- if (!this.hasSelection) {
- this.hasSelection = true;
- }
- }
- deleteSelection() { // 删除选中文本，
- document.getSelection().deleteFromDocument();
- this.hasSelection = false;
- }
-
- _onWindowClick(event: Event) {
- if (this.historyList) {
- if (!this.dataListClicked) {
- this.isOpenDataList = false;
- }
- this.dataListClicked = false;
- }
-
- if (this.suffixList) {
- if (!this.suffixListClicked) {
- this.isOpenSuffixList = false;
- }
- this.suffixListClicked = false;
- }
-
- if (this.unitOptions) {
- if (!this.unitOptionClicked) {
- this.isShowUnitOption = false;
- }
- this.unitOptionClicked = false;
- }
-
- if (this.prefixOptions) {
- if (!this.prefixOptionClicked) {
- this.isShowPrefixOption = false;
- }
- this.prefixOptionClicked = false;
- }
- }
-
- _showPrefixOption(event: Event) {
- this.isShowPrefixOption = !this.isShowPrefixOption;
- this.prefixOptionClicked = true;
- }
-
- _showUnitOption(event: Event) {
- this.isShowUnitOption = !this.isShowUnitOption;
- this.unitOptionClicked = true;
- }
-
- _setUnit(unitValue: string) {
- this.unitOptionClicked = true;
- this.showUnit = unitValue;
- this.unitChange.emit(unitValue);
- this.isShowUnitOption = false;
- }
-
- _setPrefix(value: string) {
- if (value !== this.showPrefix) {
- this.showPrefix = value;
- this.prefixChange.emit(value);
- }
- this.prefixOptionClicked = true;
- this.isShowPrefixOption = false;
- }
-
- filterOption(value: any) {
- this.displayDataList = [];
- this.displayDataList = this.historyList.filter((data: string) => {
- return data.toLowerCase().indexOf(value.toLowerCase()) > -1;
- });
-
- this.isOpenDataList = this.displayDataList.length !== 0;
- }
-
- concatValueAndSuffix(value: string) {
- const that = this;
- that.displayDataList = [];
- let mark = '@';
- if (value === '') {
- that.displayDataList = [];
- } else if (value.trim().toLowerCase().indexOf(mark) === -1) {
- that.displayDataList.push(value);
- that.suffixList.map((item: string) => {
- let tempValue = value + mark + item;
- that.displayDataList.push(tempValue);
- });
- } else {
- that.suffixList.map((item: string) => {
- let tempValue = value.split(mark)[0] + mark + item;
- that.displayDataList.push(tempValue);
- });
- that.displayDataList = that.displayDataList.filter((item: string) => {
- return item.trim().toLowerCase().indexOf(value) > -1;
- });
- }
-
- that.isOpenSuffixList = that.displayDataList.length !== 0;
- }
-
- _handleInput(event: any) {
- let inputValue = event.target.value.trim().toLowerCase();
-
- if (this.historyList) {
- this.filterOption(inputValue);
- }
-
- if (this.suffixList) {
- this.concatValueAndSuffix(inputValue);
- }
- }
-
- chooseInputData(data: any) {
- this.displayValue = data;
- this.value = data;
-
- this.isOpenDataList = false;
- this.dataListClicked = true;
- this.isOpenSuffixList = false;
- this.suffixListClicked = true;
- }
-
- writeValue(value: any) {
- this.displayValue = this._checkValueLimit(value);
- this._value = this.displayValue;
- }
-
- registerOnChange(fn: any) {
- this._onChangeCallback = fn;
- }
-
- registerOnTouched(fn: any) {
- this._onTouchedCallback = fn;
- }
-
- private getConvertValue(v: any) {
- this.currentPrecision = v.toString().split('.')[1].length;
- if (this.currentPrecision === 0) { // 输入小数点，但小数位数为0时
- return v;
- }
- if (this.currentPrecision <
- this._precision) { // 输入小数点，且小数位数不为0
- return this.toFixed(v, this.currentPrecision);
- } else {
- return this.toFixed(v, this._precision);
- }
- }
-
- private filterZhChar(v: any) {
- if (this.type === 'number') {
- let reg = /[^0-9.-]/;
- while (reg.test(v)) {
- v = v.replace(reg, '');
- }
- }
- return v;
- }
-
- private _convertValueForInputType(v: any): any {
- switch (this.type) {
- case 'number': {
- if (v === '' || v === '-') {
- return v;
- }
-
- if (v.toString().indexOf('.') === -1) { // 整数
- return this.toFixed(v, 0);
- } else {
- return this.getConvertValue(v);
- }
- }
- default:
- return v;
- }
- }
-
- private toFixed(value: number, precision: number) {
- return Number(value).toFixed(precision);
- }
-
- repeat(interval: number, dir: number) {
- let i = interval || 500;
-
- this.clearTimer();
- this.timer = setTimeout(() => {
- this.repeat(40, dir);
- }, i);
-
- this.spin(dir);
- }
-
- clearTimer() {
- if (this.timer) {
- clearInterval(this.timer);
- }
- }
-
- spin(dir: number) {
- let step = this.step * dir;
- let currentValue = this._convertValueForInputType(this.value) || 0;
-
- this.value = Number(currentValue) + step;
-
- if (this.maxLength !== null &&
- this.value.toString().length > this.maxLength) {
- this.value = currentValue;
- }
-
- if (this.min !== null && this.value <= NumberWrapperParseFloat(this.min)) {
- this.value = this.min;
- this.isDisabledDown = true;
- }
-
- if (this.max !== null && this.value >= NumberWrapperParseFloat(this.max)) {
- this.value = this.max;
- this.isDisabledUp = true;
- }
- this.displayValue = this.value;
- this._onChangeCallback(NumberWrapperParseFloat(this.value));
- }
-
- onUpButtonMousedown(event: Event, input: HTMLInputElement) {
- if (!this.disabled && this.type === 'number') {
- input.focus();
- this.repeat(null, 1);
- event.preventDefault();
- }
- }
-
- onUpButtonMouseup(event: Event) {
- if (!this.disabled) {
- this.clearTimer();
- }
- }
-
- onUpButtonMouseleave(event: Event) {
- if (!this.disabled) {
- this.clearTimer();
- }
- }
-
- onDownButtonMousedown(event: Event, input: HTMLInputElement) {
- if (!this.disabled && this.type === 'number') {
- input.focus();
- this.repeat(null, -1);
- event.preventDefault();
- }
- }
-
- onDownButtonMouseup(event: Event) {
- if (!this.disabled) {
- this.clearTimer();
- }
- }
-
- onDownButtonMouseleave(event: Event) {
- if (!this.disabled) {
- this.clearTimer();
- }
- }
-
- onInputKeydown(event: KeyboardEvent) {
- if (this.type === 'number') {
- if (event.which === 229) {
- event.preventDefault();
- return;
- } else if (event.which === 38) {
- this.spin(1);
- event.preventDefault();
- } else if (event.which === 40) {
- this.spin(-1);
- event.preventDefault();
- }
- }
- }
- onInputKeyPress(event: KeyboardEvent) {
- let inputChar = String.fromCharCode(event.charCode);
- if (this.type === 'number') {
- if (event.which === 8) {
- return;
- }
-
- // if (!this.isValueLimit()) {
- // this.handleSelection(event);
- // }
-
- if (inputChar === '-' && this.min !== null &&
- NumberWrapperParseFloat(this.min) >= 0) {
- event.preventDefault();
- return;
- }
- if (this.isIllegalNumberInputChar(event) ||
- this.isIllegalIntergerInput(inputChar)) {
- event.preventDefault();
- return;
- }
- if (this.isIllegalFloatInput(
- inputChar)) { // 当该函数返回true时，执行两种情景
- this.handleSelection(event);
- }
- if (this.hasSelection) { // 文本被选中，执行文本替换
- this.deleteSelection();
- }
- }
- }
-
- private handleSelection(event: any) {
- if (this.hasSelection) { // 文本被选中，执行文本替换
- this.deleteSelection();
- } else { // 无选中文本，阻止非法输入
- event.preventDefault();
- }
- }
- // private isValueLimit() {
- // if (this.min !== null && NumberWrapperParseFloat(this.value) !== 0 &&
- // this.value <= NumberWrapperParseFloat(this.min)) {
- // return false;
- // }
- // if (this.max !== null && NumberWrapperParseFloat(this.value) !== 0 &&
- // this.value >= NumberWrapperParseFloat(this.max)) {
- // return false;
- // }
- // return true;
- // }
-
- private isIllegalNumberInputChar(event: KeyboardEvent) {
- /* 8:backspace, 46:. */
- return !this.keyPattern.test(String.fromCharCode(event.charCode)) &&
- event.which !== 46 && event.which !== 0;
- }
-
- private isIllegalIntergerInput(inputChar: string) {
- return this._precision === 0 &&
- (inputChar === '.' ||
- (this._value && this._value && this._value.toString().length > 0 &&
- inputChar === '-'));
- }
-
- private isIllegalFloatInput(inputChar: string) {
- return this._precision > 0 && this._value &&
- ((this._value.toString().length > 0 && inputChar === '-') ||
- ((this._value.toString() === '' ||
- this._value.toString().indexOf('.') > 0) &&
- inputChar === '.') ||
- (this._value.toString().indexOf('.') > 0 &&
- this._value.toString().split('.')[1].length === this._precision));
- }
-
- onInput(event: Event, inputValue: string) {
- this.value = inputValue;
- }
-
- //处理鼠标经过上下箭头时，样式设置
- isEmptyValue() {
- if (this.value === undefined || this.value === null || this.value === '') {
- return true;
- }
- return false;
- }
-
- isDisabledUpCaret() {
- if (this.isEmptyValue()) {
- return true;
- } else if (
- this.max !== null &&
- (NumberWrapperParseFloat(this.value) >=
- NumberWrapperParseFloat(this.max))) {
- return true;
- }
- return false;
- }
-
- isDisabledDownCaret() {
- if (this.isEmptyValue()) {
- return true;
- } else if (
- this.min !== null &&
- (NumberWrapperParseFloat(this.value) <=
- NumberWrapperParseFloat(this.min))) {
- return true;
- }
- return false;
- }
-
- _handleMouseEnterUp() {
- this.isDisabledUp = this.isDisabledUpCaret();
- }
-
- _handleMouseEnterDown() {
- this.isDisabledDown = this.isDisabledDownCaret();
- }
-
- public switch(): void {
- this.showPassword = !this.showPassword;
- this.showPassword?this.inputViewChild.nativeElement.type =
- 'text':this.inputViewChild.nativeElement.type = 'password';
- }
-
- private setPasswordTooltip(): void {
- this.tooltipTexts[this.lang][this.showPassword.toString()]
- }
-}