@tarojs/components 3.3.11 → 3.3.15

package/dist/collection/components/textarea/textarea.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Prop, Event, Element } from '@stencil/core';
+import { Component, h, Prop, State, Event, Element } from '@stencil/core';
 function fixControlledValue(value) {
   return value !== null && value !== void 0 ? value : '';
 }
@@ -8,9 +8,12 @@ export class Textarea {
     this.disabled = false;
     this.maxlength = 140;
     this.autoFocus = false;
+    this.autoHeight = false;
     this.nativeProps = {};
+    this.line = 1;
     this.hanldeInput = (e) => {
       e.stopPropagation();
+      this.handleLineChange();
       this.onInput.emit({
         value: e.target.value,
         cursor: e.target.value.length
@@ -32,6 +35,58 @@ export class Textarea {
         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;
+      /// only bother if the ta is bigger than content
+      if (height >= scrollHeight) {
+        /// 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;
+          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', {
@@ -42,12 +97,16 @@ export class Textarea {
     this.autoFocus && this.textareaRef.focus();
   }
   render() {
-    const { value, placeholder, disabled, maxlength, autoFocus, name, nativeProps, hanldeInput, handleFocus, handleBlur, handleChange } = this;
+    const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, hanldeInput, 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', value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: hanldeInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps)));
+      }, class: `taro-textarea ${autoHeight ? 'auto-height' : ''}`, value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: hanldeInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps, otherProps)));
   }
   static get is() { return "taro-textarea-core"; }
   static get originalStyleUrls() { return {
@@ -145,6 +204,24 @@ export class Textarea {
       "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,
@@ -179,6 +256,9 @@ export class Textarea {
       "defaultValue": "{}"
     }
   }; }
+  static get states() { return {
+    "line": {}
+  }; }
   static get events() { return [{
       "method": "onInput",
       "name": "input",
@@ -239,6 +319,21 @@ export class Textarea {
         "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"; }
 }

package/dist/collection/components/view/view.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Prop, h, Host, Listen, State, Event } from '@stencil/core';
+import { Component, Prop, h, Host, Listen, State, Event, Element } from '@stencil/core';
 import classNames from 'classnames';
 export class View {
   constructor() {
@@ -40,6 +40,13 @@ export class View {
       }, this.hoverStayTime);
     }
   }
+  componentDidRender() {
+    const el = this.el;
+    el.childNodes.forEach(item => {
+      if (item.nodeType === document.COMMENT_NODE)
+        el.removeChild(item);
+    });
+  }
   render() {
     const cls = classNames({
       [`${this.hoverClass}`]: this.hover
@@ -151,6 +158,7 @@ export class View {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
   static get listeners() { return [{
       "name": "touchstart",
       "method": "onTouchStart",