@gf-ui/components
Version:
516 lines (515 loc) • 13.7 kB
JavaScript
import { Component, Host, h, Prop, State, Event, Watch } from '@stencil/core';
import { calcTextareaHeight } from "./utils.js";
import { injectComponents } from "../../utils";
import { GfIconclear } from "../gf-icon/gf-icon-clear";
import { GfIconinfo } from "../gf-icon/gf-icon-info";
import { GfIconsuccessFill } from "../gf-icon/gf-icon-successFill";
injectComponents({
GfIconclear, GfIconinfo, GfIconsuccessFill
});
const STATUS = {
"success": {
color: "#67C23A"
},
"info": {
color: "#346FC2"
},
"warning": {
color: "#ffc82c"
},
"error": {
color: "#ff4949"
}
};
export class GfInput {
constructor() {
this.disabled = false; //禁用
this.clearable = false; //清除
this.value = '';
this.type = 'text'; // 原生类型
this.status = ''; // 输入框状态
this.iconFontSize = 20;
this.iconColor = '#ccc';
this.autofocus = false; // 自动获取焦点
this.resize = 'vertical'; // 是否缩放 none|both|horizontal|vertical;
this.rows = 2;
this.autosize = false;
this.curentValue = '';
this.calculateStyle = {
resize: this.resize
};
this.isComposing = false;
this.handleFocus = (e) => {
this.eventFocus.emit(e);
};
this.handleBlur = (e) => {
this.eventBlur.emit(e);
};
this.handleInput = (e) => {
if (this.isComposing)
return;
const value = e.target.value;
this.eventInput.emit(value);
this.setCurrentValue(value);
this.resizeTextarea();
};
this.handleChange = (e) => {
this.eventChange.emit(e.target.value);
};
this.handClearClick = () => {
this.setCurrentValue('');
this.eventClear.emit('');
this.eventInput.emit('');
this.eventChange.emit('');
};
this.setCurrentValue = (value) => {
this.curentValue = value;
};
this.handleCompositionStart = () => {
this.isComposing = true;
};
this.handleCompositionEnd = (e) => {
if (this.isComposing) {
this.isComposing = false;
this.handleInput(e);
}
};
this.onKeydown = (ev) => {
if (ev.key === 'Enter') {
console.log('enter');
}
};
// 获取个个元素节点
this.getClearInstance = () => {
return h("div", { class: "gf-input__clear" },
h("gf-icon-clear", { size: this.iconFontSize, color: this.iconColor, onClick: this.handClearClick.bind(this) }));
};
this.getStatusInstance = () => {
return h("div", { class: "gf-input__status_icon" },
this.status === 'success' && h("gf-icon-success-fill", { size: this.iconFontSize, color: STATUS[this.status].color }),
['info', 'warning'].includes(this.status) && h("gf-icon-info", { size: this.iconFontSize, color: STATUS[this.status].color }),
this.status === 'error' && h("gf-icon-clear", { size: this.iconFontSize, color: STATUS[this.status].color }));
};
this.getMaxLengthInstance = () => {
return h("div", { class: "gf-input__maxlength" },
h("span", null, this.curentValue.length),
"/",
this.maxlength);
};
this.getInputInstance = () => {
return this.type !== 'textarea' ?
h("input", { type: this.type, disabled: this.disabled, class: "gf-input__inner", value: this.curentValue, minLength: this.maxlength, maxLength: this.maxlength, placeholder: this.placeholder, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput, onChange: this.handleChange, ref: input => this.nativeInput = input, onKeyDown: this.onKeydown })
: h("textarea", { class: "gf-textarea__inner", style: this.calculateStyle, disabled: this.disabled, value: this.curentValue, autofocus: this.autofocus, minLength: this.maxlength, maxLength: this.maxlength, placeholder: this.placeholder, rows: +this.rows, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput, onChange: this.handleChange, ref: input => this.nativeInput = input });
};
}
watchPropHandler(newValue) {
if (newValue !== this.curentValue) {
this.setCurrentValue(newValue);
}
}
// 数据初始化
componentWillLoad() {
this.setCurrentValue(this.value);
Promise.resolve().then(() => { this.resizeTextarea(); });
}
// dom渲染完成
componentDidLoad() {
const nativeInput = this.nativeInput;
if (nativeInput) {
nativeInput.addEventListener('compositionstart', this.handleCompositionStart);
nativeInput.addEventListener('compositionend', this.handleCompositionEnd);
}
}
// 销毁
disconnectedCallback() {
const nativeInput = this.nativeInput;
if (nativeInput) {
nativeInput.removeEventListener('compositionstart', this.handleCompositionStart);
nativeInput.removeEventListener('compositionEnd', this.handleCompositionEnd);
}
}
resizeTextarea() {
if (!this.autosize && !this.minRows && !this.maxRows)
return;
this.calculateStyle = Object.assign(Object.assign({}, calcTextareaHeight(this.nativeInput, this.minRows, this.maxRows)), { resize: this.resize });
}
render() {
return (h(Host, null,
h("div", { class: `
${this.type !== 'textarea' ? 'gf-input' : 'gf-textarea'}
${this.disabled ? 'is-disabled' : ''}
${this.status ? 'is-input-' + this.status : ''}` },
h("slot", { name: 'before' }),
this.getInputInstance(),
this.clearable && this.curentValue ? this.getClearInstance() : '',
Number(this.maxlength) > 0 ? this.getMaxLengthInstance() : '',
this.status ? this.getStatusInstance() : '',
h("slot", { name: 'after' }))));
}
static get is() { return "gf-input"; }
static get properties() { return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"clearable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "clearable",
"reflect": false,
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "'text'"
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "maxlength",
"reflect": false
},
"status": {
"type": "string",
"mutable": false,
"complexType": {
"original": "status",
"resolved": "\"\" | \"error\" | \"info\" | \"success\" | \"warning\"",
"references": {
"status": {
"location": "import",
"path": "../../types/var"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "status",
"reflect": false,
"defaultValue": "''"
},
"iconFontSize": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon-font-size",
"reflect": false,
"defaultValue": "20"
},
"iconColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon-color",
"reflect": false,
"defaultValue": "'#ccc'"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": false
},
"autofocus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "autofocus",
"reflect": false,
"defaultValue": "false"
},
"resize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "resize",
"reflect": false,
"defaultValue": "'vertical'"
},
"minRows": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min-rows",
"reflect": false
},
"maxRows": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max-rows",
"reflect": false
},
"rows": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "rows",
"reflect": false,
"defaultValue": "2"
},
"autosize": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "autosize",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"curentValue": {},
"calculateStyle": {}
}; }
static get events() { return [{
"method": "eventFocus",
"name": "eventFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global"
}
}
}
}, {
"method": "eventBlur",
"name": "eventBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "HTMLAreaElement",
"resolved": "HTMLAreaElement",
"references": {
"HTMLAreaElement": {
"location": "global"
}
}
}
}, {
"method": "eventInput",
"name": "eventInput",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "eventChange",
"name": "eventChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "eventClear",
"name": "eventClear",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}]; }
static get watchers() { return [{
"propName": "value",
"methodName": "watchPropHandler"
}]; }
}