@tarojs/components
Version:
Taro 组件库。
342 lines (341 loc) • 9.11 kB
JavaScript
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Prop, State, Event, Element } from '@stencil/core';
function fixControlledValue(value) {
return value !== null && value !== void 0 ? value : '';
}
export class Textarea {
constructor() {
this.disabled = false;
this.maxlength = 140;
this.autoFocus = false;
this.autoHeight = false;
this.nativeProps = {};
this.line = 1;
this.handleInput = (e) => {
e.stopPropagation();
this.handleLineChange();
this.onInput.emit({
value: e.target.value,
cursor: e.target.value.length
});
};
this.handleFocus = (e) => {
this.onFocus.emit({
value: e.target.value
});
};
this.handleBlur = (e) => {
this.onBlur.emit({
value: e.target.value
});
};
this.handleChange = (e) => {
e.stopPropagation();
this.onChange.emit({
value: e.target.value
});
};
this.handleLineChange = () => {
const line = this.getNumberOfLines();
if (line !== this.line) {
this.line = line;
this.onLineChange.emit({
height: this.textareaRef.clientHeight,
lineCount: this.line
});
}
};
this.calculateContentHeight = (ta, scanAmount) => {
let origHeight = ta.style.height, height = ta.offsetHeight, scrollHeight = ta.scrollHeight, overflow = ta.style.overflow, originMinHeight = ta.style.minHeight || null;
/// only bother if the ta is bigger than content
if (height >= scrollHeight) {
ta.style.minHeight = 0;
/// check that our browser supports changing dimension
/// calculations mid-way through a function call...
ta.style.height = height + scanAmount + 'px';
/// because the scrollbar can cause calculation problems
ta.style.overflow = 'hidden';
/// by checking that scrollHeight has updated
if (scrollHeight < ta.scrollHeight) {
/// now try and scan the ta's height downwards
/// until scrollHeight becomes larger than height
while (ta.offsetHeight >= ta.scrollHeight) {
ta.style.height = (height -= scanAmount) + 'px';
}
/// be more specific to get the exact height
while (ta.offsetHeight < ta.scrollHeight) {
ta.style.height = height++ + 'px';
}
/// reset the ta back to it's original height
ta.style.height = origHeight;
/// put the overflow back
ta.style.overflow = overflow;
ta.style.minHeight = originMinHeight;
return height;
}
}
else {
return scrollHeight;
}
};
this.getNumberOfLines = () => {
const ta = this.textareaRef, style = window.getComputedStyle ? window.getComputedStyle(ta) : ta.style,
// This will get the line-height only if it is set in the css,
// otherwise it's "normal"
taLineHeight = parseInt(style.lineHeight, 10),
// Get the scroll height of the textarea
taHeight = this.calculateContentHeight(ta, taLineHeight),
// calculate the number of lines
numberOfLines = Math.floor(taHeight / taLineHeight);
return numberOfLines;
};
}
componentDidLoad() {
Object.defineProperty(this.el, 'value', {
get: () => this.textareaRef.value,
set: value => (this.value = value),
configurable: true
});
this.autoFocus && this.textareaRef.focus();
}
render() {
const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, handleInput, handleFocus, handleBlur, handleChange } = this;
const otherProps = {};
if (autoHeight) {
otherProps.rows = this.line;
}
return (h("textarea", Object.assign({ ref: input => {
if (input) {
this.textareaRef = input;
}
}, class: `taro-textarea ${autoHeight ? 'auto-height' : ''}`, value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps, otherProps)));
}
static get is() { return "taro-textarea-core"; }
static get originalStyleUrls() { return {
"$": ["./style/index.scss"]
}; }
static get styleUrls() { return {
"$": ["./style/index.css"]
}; }
static get properties() { return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "maxlength",
"reflect": false,
"defaultValue": "140"
},
"autoFocus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "auto-focus",
"reflect": false,
"defaultValue": "false"
},
"autoHeight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "auto-height",
"reflect": false,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false
},
"nativeProps": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{}",
"resolved": "{}",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{}"
}
}; }
static get states() { return {
"line": {}
}; }
static get events() { return [{
"method": "onInput",
"name": "input",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onFocus",
"name": "focus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onBlur",
"name": "blur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onChange",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onLineChange",
"name": "linechange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
}