fix: 修复collapsible组件默认打开时，组件高度没有完全展开问题 (#85)

* fix: 修复collapsible组件默认打开时，组件高度没有完全展开问题

* style: 调整代码命名规范

packages/semi-animation-react/src/Transition.tsx

@@ -158,7 +158,7 @@ export default class Transition extends Component<TransitionProps, TransitionSta
         return (
             <Animation {...restProps} force from={from} to={to} onRest={this.onRest} onStart={this.onStart}>
                 {
-                    (props: any) => (
+                    (props: Record<string, any>) => (
                         // eslint-disable-next-line no-nested-ternary
                         typeof children === 'function' ?
                             children(props) :

packages/semi-ui/collapsible/index.tsx

@@ -2,7 +2,7 @@
 import { Transition } from '@douyinfe/semi-animation-react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
 import { cssClasses } from '@douyinfe/semi-foundation/collapsible/constants';
 import { Motion } from '../_base/base';
 import getMotionObjFromProps from '@douyinfe/semi-foundation/utils/getMotionObjFromProps';
@@ -55,6 +55,7 @@ const Collapsible = (props: CollapsibleProps) => {
         if (currHeight && maxHeight !== currHeight) {
             setMaxHeight(currHeight);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [left, reCalcKey, maxHeight]);
 
     const resetHeight = () => {
@@ -65,6 +66,10 @@ const Collapsible = (props: CollapsibleProps) => {
 
     const shouldKeepDOM = () => keepDOM || collapseHeight !== 0;
 
+    const defaultMaxHeight = useMemo(() => {
+        return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight
+    }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
+
     const renderChildren = (transitionStyle: Record<string, any>) => {
         const transition =
             transitionStyle && typeof transitionStyle === 'object' ?
@@ -73,10 +78,15 @@ const Collapsible = (props: CollapsibleProps) => {
 
         const wrapperstyle = {
             overflow: 'hidden',
-            maxHeight: (isOpen || !shouldKeepDOM() && !motion) ? 'none' : collapseHeight,
+            maxHeight: defaultMaxHeight,
             ...style,
             ...transition,
         };
+
+        if (isFirst) {
+            wrapperstyle.maxHeight = defaultMaxHeight;
+        }
+
         const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
         return (
             <div style={wrapperstyle} className={wrapperCls} ref={ref}>
@@ -143,4 +153,4 @@ Collapsible.defaultProps = {
     collapseHeight: 0
 };
 
-export default Collapsible;
+export default Collapsible;