[v5.0.0-bate-19] fix(Collapse): fix height issue. (#974) 7246b0d

uiwjs · Nov 8, 2023 · 3d5b58f · 3d5b58f
1 parent dc48461
commit 3d5b58f
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 18 deletions.
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.3d080c32.css",
-    "main.js": "/static/js/main.7d301286.js",
+    "main.js": "/static/js/main.37118da6.js",
     "static/css/3174.3b3d8416.chunk.css": "/static/css/3174.3b3d8416.chunk.css",
     "static/js/3174.d48bb4d7.chunk.js": "/static/js/3174.d48bb4d7.chunk.js",
     "static/js/6449.6938ace8.chunk.js": "/static/js/6449.6938ace8.chunk.js",
@@ -86,7 +86,7 @@
     "static/css/9677.b9557aaf.chunk.css": "/static/css/9677.b9557aaf.chunk.css",
     "index.html": "/index.html",
     "main.3d080c32.css.map": "/static/css/main.3d080c32.css.map",
-    "main.7d301286.js.map": "/static/js/main.7d301286.js.map",
+    "main.37118da6.js.map": "/static/js/main.37118da6.js.map",
     "3174.3b3d8416.chunk.css.map": "/static/css/3174.3b3d8416.chunk.css.map",
     "3174.d48bb4d7.chunk.js.map": "/static/js/3174.d48bb4d7.chunk.js.map",
     "6449.6938ace8.chunk.js.map": "/static/js/6449.6938ace8.chunk.js.map",
@@ -175,6 +175,6 @@
     "static/js/vendors-react.7a0f6827.js",
     "static/js/6450.229bd6df.js",
     "static/css/main.3d080c32.css",
-    "static/js/main.7d301286.js"
+    "static/js/main.37118da6.js"
   ]
 }
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-uiwjs.bc70d56e.js"></script><script defer="defer" src="./static/js/vendors-react.7a0f6827.js"></script><script defer="defer" src="./static/js/6450.229bd6df.js"></script><script defer="defer" src="./static/js/main.7d301286.js"></script><link href="./static/css/main.3d080c32.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-uiwjs.bc70d56e.js"></script><script defer="defer" src="./static/js/vendors-react.7a0f6827.js"></script><script defer="defer" src="./static/js/6450.229bd6df.js"></script><script defer="defer" src="./static/js/main.37118da6.js"></script><link href="./static/css/main.3d080c32.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/static/js/main.37118da6.js b/static/js/main.37118da6.js
diff --git a/static/js/main.37118da6.js.map b/static/js/main.37118da6.js.map
diff --git a/static/js/main.7d301286.js b/static/js/main.7d301286.js
diff --git a/static/js/main.7d301286.js.map b/static/js/main.7d301286.js.map
diff --git a/uiw.js b/uiw.js
@@ -4961,7 +4961,8 @@ function Panel(props) {
       instance.style.height = '1px';
     }
     if (status === 'entered' || status === 'entering') {
-      instance.style.height = instance.scrollHeight + "px";
+      // instance.style.height = `${instance.scrollHeight}px`;
+      instance.style.height = getElementHeight(instance) + "px";
     }
   }
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", _extends({
@@ -4973,25 +4974,62 @@ function Panel(props) {
       children: [showArrow && iconRender, /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
         className: prefixCls + "-title",
         children: header
-      }), extra && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: prefixCls + "-extra",
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)(Extra, {
+        prefixCls: prefixCls,
         children: extra
       })]
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(esm_CSSTransition, {
       in: isActive,
       unmountOnExit: false,
       timeout: 300,
       classNames: prefixCls + "-panel",
-      children: status => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement( /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        children: _children
-      }), {
-        className: prefixCls + "-panel",
-        style: childStyle(_children),
-        ref: e => getInstance(status, e)
-      })
+      children: status => {
+        return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement( /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          children: _children
+        }), {
+          className: prefixCls + "-panel",
+          style: childStyle(_children),
+          ref: e => getInstance(status, e)
+        });
+      }
     })]
   }));
 }
+function Extra(_ref) {
+  var {
+    children,
+    prefixCls
+  } = _ref;
+  if (!children) return null;
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: prefixCls + "-extra",
+    children: children
+  });
+}
+function getElementHeight(elm) {
+  var childNodes = elm.children;
+  var totalHeight = 0;
+  var beforeElmStyle = getComputedStyle(elm, '::before');
+  var afterElmStyle = getComputedStyle(elm, '::after');
+  var beforeHeight = parseInt(beforeElmStyle.height) || 0;
+  var afterHeight = parseInt(afterElmStyle.height) || 0;
+  totalHeight += beforeHeight + afterHeight;
+  if (childNodes.length === 0) {
+    return totalHeight;
+  }
+  for (var i = 0; i < childNodes.length; i++) {
+    var childNode = childNodes[i];
+    var computedStyle = getComputedStyle(childNode);
+    var height = childNode.offsetHeight + parseInt(computedStyle.marginTop) + parseInt(computedStyle.marginBottom) + parseInt(computedStyle.borderTopWidth) + parseInt(computedStyle.borderBottomWidth) + parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom);
+    totalHeight += height;
+    var beforeStyle = getComputedStyle(childNode, '::before');
+    var afterStyle = getComputedStyle(childNode, '::after');
+    var _beforeHeight = parseInt(beforeStyle.height) || 0;
+    var _afterHeight = parseInt(afterStyle.height) || 0;
+    totalHeight += _beforeHeight + _afterHeight;
+  }
+  return totalHeight;
+}
 ;// CONCATENATED MODULE: ../react-collapse/esm/style/index.css
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const react_collapse_esm_style = ({});

diff --git a/uiw.min.js b/uiw.min.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-uiwjs.bc70d56e.js"></script><script defer="defer" src="./static/js/vendors-react.7a0f6827.js"></script><script defer="defer" src="./static/js/6450.229bd6df.js"></script><script defer="defer" src="./static/js/main.7d301286.js"></script><link href="./static/css/main.3d080c32.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
		<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-uiwjs.bc70d56e.js"></script><script defer="defer" src="./static/js/vendors-react.7a0f6827.js"></script><script defer="defer" src="./static/js/6450.229bd6df.js"></script><script defer="defer" src="./static/js/main.37118da6.js"></script><link href="./static/css/main.3d080c32.css" rel="stylesheet"></head><body><div id="root"></div></body></html>