1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports["default"] = calculateNodeHeight;
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | var HIDDEN_TEXTAREA_STYLE = "\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n";
|
13 | var SIZING_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'];
|
14 | var computedStyleCache = {};
|
15 | var hiddenTextarea;
|
16 |
|
17 | function calculateNodeStyling(node) {
|
18 | var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
19 | var nodeRef = node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name');
|
20 |
|
21 | if (useCache && computedStyleCache[nodeRef]) {
|
22 | return computedStyleCache[nodeRef];
|
23 | }
|
24 |
|
25 | var style = window.getComputedStyle(node);
|
26 | var boxSizing = style.getPropertyValue('box-sizing') || style.getPropertyValue('-moz-box-sizing') || style.getPropertyValue('-webkit-box-sizing');
|
27 | var paddingSize = parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'));
|
28 | var borderSize = parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'));
|
29 | var sizingStyle = SIZING_STYLE.map(function (name) {
|
30 | return "".concat(name, ":").concat(style.getPropertyValue(name));
|
31 | }).join(';');
|
32 | var nodeInfo = {
|
33 | sizingStyle: sizingStyle,
|
34 | paddingSize: paddingSize,
|
35 | borderSize: borderSize,
|
36 | boxSizing: boxSizing
|
37 | };
|
38 |
|
39 | if (useCache && nodeRef) {
|
40 | computedStyleCache[nodeRef] = nodeInfo;
|
41 | }
|
42 |
|
43 | return nodeInfo;
|
44 | }
|
45 |
|
46 | function calculateNodeHeight(uiTextNode) {
|
47 | var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
48 | var minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
49 | var maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
50 |
|
51 | if (!hiddenTextarea) {
|
52 | hiddenTextarea = document.createElement('textarea');
|
53 | document.body.appendChild(hiddenTextarea);
|
54 | }
|
55 |
|
56 |
|
57 | if (uiTextNode.getAttribute('wrap')) {
|
58 | hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
|
59 | } else {
|
60 | hiddenTextarea.removeAttribute('wrap');
|
61 | }
|
62 |
|
63 |
|
64 |
|
65 | var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache),
|
66 | paddingSize = _calculateNodeStyling.paddingSize,
|
67 | borderSize = _calculateNodeStyling.borderSize,
|
68 | boxSizing = _calculateNodeStyling.boxSizing,
|
69 | sizingStyle = _calculateNodeStyling.sizingStyle;
|
70 |
|
71 |
|
72 |
|
73 |
|
74 | hiddenTextarea.setAttribute('style', "".concat(sizingStyle, ";").concat(HIDDEN_TEXTAREA_STYLE));
|
75 | hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
|
76 | var minHeight = Number.MIN_SAFE_INTEGER;
|
77 | var maxHeight = Number.MAX_SAFE_INTEGER;
|
78 | var height = hiddenTextarea.scrollHeight;
|
79 | var overflowY;
|
80 |
|
81 | if (boxSizing === 'border-box') {
|
82 |
|
83 | height += borderSize;
|
84 | } else if (boxSizing === 'content-box') {
|
85 |
|
86 | height -= paddingSize;
|
87 | }
|
88 |
|
89 | if (minRows !== null || maxRows !== null) {
|
90 |
|
91 | hiddenTextarea.value = ' ';
|
92 | var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
93 |
|
94 | if (minRows !== null) {
|
95 | minHeight = singleRowHeight * minRows;
|
96 |
|
97 | if (boxSizing === 'border-box') {
|
98 | minHeight = minHeight + paddingSize + borderSize;
|
99 | }
|
100 |
|
101 | height = Math.max(minHeight, height);
|
102 | }
|
103 |
|
104 | if (maxRows !== null) {
|
105 | maxHeight = singleRowHeight * maxRows;
|
106 |
|
107 | if (boxSizing === 'border-box') {
|
108 | maxHeight = maxHeight + paddingSize + borderSize;
|
109 | }
|
110 |
|
111 | overflowY = height > maxHeight ? '' : 'hidden';
|
112 | height = Math.min(maxHeight, height);
|
113 | }
|
114 | }
|
115 |
|
116 |
|
117 | if (!maxRows) {
|
118 | overflowY = 'hidden';
|
119 | }
|
120 |
|
121 | return {
|
122 | height: height,
|
123 | minHeight: minHeight,
|
124 | maxHeight: maxHeight,
|
125 | overflowY: overflowY
|
126 | };
|
127 | }
|
128 |
|