From 8df3390e4160f5d4d1e67e4aeaf14135252e8619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 18 Jul 2018 12:06:47 +0800
Subject: [PATCH] update calcTextareaHeight

---
 examples/routers/input.vue      | 122 ++++++++--------
 src/utils/calcTextareaHeight.js | 246 ++++++++++++++++++++++++++------
 2 files changed, 265 insertions(+), 103 deletions(-)

diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index abe7ec5e..2756784d 100644
--- a/examples/routers/input.vue
+++ b/examples/routers/input.vue
@@ -80,64 +80,67 @@
         <!--<br>-->
     <!--</div>-->
 
-    <div>
-        <Input
-                v-model="value"
-                size="small"
-                prefix="ios-contact"
-                suffix="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br>
-        <Input
-                v-model="value"
-                prefix="ios-contact"
-                suffix="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br>
-        <Input
-                v-model="value"
-                size="large"
-                prefix="ios-contact"
-                suffix="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br><br>
-        <Input
-                v-model="value"
-                size="small"
-                icon="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br>
-        <Input
-                v-model="value"
-                icon="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br>
-        <Input
-                v-model="value"
-                size="large"
-                icon="ios-search"
-                placeholder="Enter something..."
-                style="width: 300px"></Input>
-        <br><br><br>
-        <Input v-model="value" placeholder="Enter something..." style="width: 300px">
-            <Icon type="ios-alarm-outline" slot="suffix" />
-            <Icon type="ios-aperture" slot="prefix" />
-        </Input>
-        <br><br><br><br>
-        <Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />
-        <br>
-        <Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />
-        <br>
-        <Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />
-        <br><br>
-        <Input v-model="value" search style="width: 300px" @on-search="hs" />
-        <br><br>
-        <Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />
+    <!--<div>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--size="small"-->
+                <!--prefix="ios-contact"-->
+                <!--suffix="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--prefix="ios-contact"-->
+                <!--suffix="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--size="large"-->
+                <!--prefix="ios-contact"-->
+                <!--suffix="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br><br>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--size="small"-->
+                <!--icon="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--icon="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br>-->
+        <!--<Input-->
+                <!--v-model="value"-->
+                <!--size="large"-->
+                <!--icon="ios-search"-->
+                <!--placeholder="Enter something..."-->
+                <!--style="width: 300px"></Input>-->
+        <!--<br><br><br>-->
+        <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px">-->
+            <!--<Icon type="ios-alarm-outline" slot="suffix" />-->
+            <!--<Icon type="ios-aperture" slot="prefix" />-->
+        <!--</Input>-->
+        <!--<br><br><br><br>-->
+        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />-->
+        <!--<br>-->
+        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />-->
+        <!--<br>-->
+        <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />-->
+        <!--<br><br>-->
+        <!--<Input v-model="value" search style="width: 300px" @on-search="hs" />-->
+        <!--<br><br>-->
+        <!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
+    <!--</div>-->
+    <div style="width: 200px">
+        <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
     </div>
 </template>
 <script>
@@ -150,7 +153,8 @@
                 value13: '',
                 select1: 'http',
                 select2: 'com',
-                select3: 'day'
+                select3: 'day',
+                value7: ``
             }
         },
         methods: {
diff --git a/src/utils/calcTextareaHeight.js b/src/utils/calcTextareaHeight.js
index 2a0febc3..82745e5f 100644
--- a/src/utils/calcTextareaHeight.js
+++ b/src/utils/calcTextareaHeight.js
@@ -1,22 +1,131 @@
 // Thanks to
 // https://github.com/andreypopp/react-textarea-autosize/
-// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
 
-let hiddenTextarea;
+// let hiddenTextarea;
+//
+// const HIDDEN_STYLE = `
+//     height:0 !important;
+//     min-height:0 !important;
+//     max-height:none !important;
+//     visibility:hidden !important;
+//     overflow:hidden !important;
+//     position:absolute !important;
+//     z-index:-1000 !important;
+//     top:0 !important;
+//     right:0 !important
+// `;
+//
+// const CONTEXT_STYLE = [
+//     'letter-spacing',
+//     'line-height',
+//     'padding-top',
+//     'padding-bottom',
+//     'font-family',
+//     'font-weight',
+//     'font-size',
+//     'text-rendering',
+//     'text-transform',
+//     'width',
+//     'text-indent',
+//     'padding-left',
+//     'padding-right',
+//     'border-width',
+//     'box-sizing'
+// ];
+//
+// function calculateNodeStyling(node) {
+//     const style = window.getComputedStyle(node);
+//
+//     const boxSizing = style.getPropertyValue('box-sizing');
+//
+//     const paddingSize = (
+//         parseFloat(style.getPropertyValue('padding-bottom')) +
+//         parseFloat(style.getPropertyValue('padding-top'))
+//     );
+//
+//     const borderSize = (
+//         parseFloat(style.getPropertyValue('border-bottom-width')) +
+//         parseFloat(style.getPropertyValue('border-top-width'))
+//     );
+//
+//     const contextStyle = CONTEXT_STYLE
+//         .map(name => `${name}:${style.getPropertyValue(name)}`)
+//         .join(';');
+//
+//     return {contextStyle, paddingSize, borderSize, boxSizing};
+// }
+//
+// export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
+//     if (!hiddenTextarea) {
+//         hiddenTextarea = document.createElement('textarea');
+//         document.body.appendChild(hiddenTextarea);
+//     }
+//
+//     let {
+//         paddingSize,
+//         borderSize,
+//         boxSizing,
+//         contextStyle
+//     } = calculateNodeStyling(targetNode);
+//
+//     hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+//     hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
+//
+//     let height = hiddenTextarea.scrollHeight;
+//     let minHeight = -Infinity;
+//     let maxHeight = Infinity;
+//     let overflowY;
+//
+//     if (boxSizing === 'border-box') {
+//         height = height + borderSize;
+//     } else if (boxSizing === 'content-box') {
+//         height = height - paddingSize;
+//     }
+//
+//     hiddenTextarea.value = '';
+//     let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+//
+//     if (minRows !== null) {
+//         minHeight = singleRowHeight * minRows;
+//         if (boxSizing === 'border-box') {
+//             minHeight = minHeight + paddingSize + borderSize;
+//         }
+//         height = Math.max(minHeight, height);
+//     }
+//     if (maxRows !== null) {
+//         maxHeight = singleRowHeight * maxRows;
+//         if (boxSizing === 'border-box') {
+//             maxHeight = maxHeight + paddingSize + borderSize;
+//         }
+//         overflowY = height > maxHeight ? '' : 'hidden';
+//         height = Math.min(maxHeight, height);
+//     }
+//
+//     if (!maxRows) {
+//         overflowY = 'hidden';
+//     }
+//
+//     return {
+//         height: `${height}px`,
+//         minHeight: `${minHeight}px`,
+//         maxHeight: `${maxHeight}px`,
+//         overflowY
+//     };
+// }
 
-const HIDDEN_STYLE = `
-    height:0 !important;
-    min-height:0 !important;
-    max-height:none !important;
-    visibility:hidden !important;
-    overflow:hidden !important;
-    position:absolute !important;
-    z-index:-1000 !important;
-    top:0 !important;
-    right:0 !important
+const HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
 `;
 
-const CONTEXT_STYLE = [
+const SIZING_STYLE = [
     'letter-spacing',
     'line-height',
     'padding-top',
@@ -31,13 +140,29 @@ const CONTEXT_STYLE = [
     'padding-left',
     'padding-right',
     'border-width',
-    'box-sizing'
+    'box-sizing',
 ];
 
-function calculateNodeStyling(node) {
+let computedStyleCache = {};
+let hiddenTextarea;
+
+function calculateNodeStyling(node, useCache = false) {
+    const nodeRef = (
+            node.getAttribute('id') ||
+            node.getAttribute('data-reactid') ||
+            node.getAttribute('name'));
+
+    if (useCache && computedStyleCache[nodeRef]) {
+        return computedStyleCache[nodeRef];
+    }
+
     const style = window.getComputedStyle(node);
 
-    const boxSizing = style.getPropertyValue('box-sizing');
+    const boxSizing = (
+        style.getPropertyValue('box-sizing') ||
+        style.getPropertyValue('-moz-box-sizing') ||
+        style.getPropertyValue('-webkit-box-sizing')
+    );
 
     const paddingSize = (
         parseFloat(style.getPropertyValue('padding-bottom')) +
@@ -49,60 +174,93 @@ function calculateNodeStyling(node) {
         parseFloat(style.getPropertyValue('border-top-width'))
     );
 
-    const contextStyle = CONTEXT_STYLE
+    const sizingStyle = SIZING_STYLE
         .map(name => `${name}:${style.getPropertyValue(name)}`)
         .join(';');
 
-    return {contextStyle, paddingSize, borderSize, boxSizing};
+    const nodeInfo = {
+        sizingStyle,
+        paddingSize,
+        borderSize,
+        boxSizing,
+    };
+
+    if (useCache && nodeRef) {
+        computedStyleCache[nodeRef] = nodeInfo;
+    }
+
+    return nodeInfo;
 }
 
-export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
+export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows = null, useCache = false) {
     if (!hiddenTextarea) {
         hiddenTextarea = document.createElement('textarea');
         document.body.appendChild(hiddenTextarea);
     }
 
+    // Fix wrap="off" issue
+    // https://github.com/ant-design/ant-design/issues/6577
+    if (uiTextNode.getAttribute('wrap')) {
+        hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
+    } else {
+        hiddenTextarea.removeAttribute('wrap');
+    }
+
+    // Copy all CSS properties that have an impact on the height of the content in
+    // the textbox
     let {
-        paddingSize,
-        borderSize,
-        boxSizing,
-        contextStyle
-    } = calculateNodeStyling(targetNode);
+        paddingSize, borderSize,
+        boxSizing, sizingStyle,
+    } = calculateNodeStyling(uiTextNode, useCache);
 
-    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-    hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
+    // Need to have the overflow attribute to hide the scrollbar otherwise
+    // text-lines will not calculated properly as the shadow will technically be
+    // narrower for content
+    hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
+    hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
 
+    let minHeight = Number.MIN_SAFE_INTEGER;
+    let maxHeight = Number.MAX_SAFE_INTEGER;
     let height = hiddenTextarea.scrollHeight;
-    let minHeight = -Infinity;
-    let maxHeight = Infinity;
+    let overflowY;
 
     if (boxSizing === 'border-box') {
+        // border-box: add border, since height = content + padding + border
         height = height + borderSize;
     } else if (boxSizing === 'content-box') {
+        // remove padding, since height = content
         height = height - paddingSize;
     }
 
-    hiddenTextarea.value = '';
-    let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-    if (minRows !== null) {
-        minHeight = singleRowHeight * minRows;
-        if (boxSizing === 'border-box') {
-            minHeight = minHeight + paddingSize + borderSize;
+    if (minRows !== null || maxRows !== null) {
+        // measure height of a textarea with a single row
+        hiddenTextarea.value = ' ';
+        let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+        if (minRows !== null) {
+            minHeight = singleRowHeight * minRows;
+            if (boxSizing === 'border-box') {
+                minHeight = minHeight + paddingSize + borderSize;
+            }
+            height = Math.max(minHeight, height);
+        }
+        if (maxRows !== null) {
+            maxHeight = singleRowHeight * maxRows;
+            if (boxSizing === 'border-box') {
+                maxHeight = maxHeight + paddingSize + borderSize;
+            }
+            overflowY = height > maxHeight ? '' : 'hidden';
+            height = Math.min(maxHeight, height);
         }
-        height = Math.max(minHeight, height);
     }
-    if (maxRows !== null) {
-        maxHeight = singleRowHeight * maxRows;
-        if (boxSizing === 'border-box') {
-            maxHeight = maxHeight + paddingSize + borderSize;
-        }
-        height = Math.min(maxHeight, height);
+    // Remove scroll bar flash when autosize without maxRows
+    if (!maxRows) {
+        overflowY = 'hidden';
     }
 
     return {
         height: `${height}px`,
         minHeight: `${minHeight}px`,
-        maxHeight: `${maxHeight}px`
+        maxHeight: `${maxHeight}px`,
+        overflowY
     };
-}
\ No newline at end of file
+}