diff options
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts')
-rw-r--r-- | deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts | 765 |
1 files changed, 0 insertions, 765 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts deleted file mode 100644 index 9b5a01e9..00000000 --- a/deprecated-workflow-designer/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()] - } -} |