feat(collapse): 适配鸿蒙

Author: oasis-cloud

src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap

@@ -42,12 +42,16 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          </div>
         </div>
       </div>
     </div>
@@ -88,20 +92,24 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          </div>
         </div>
       </div>
     </div>
     <div
       class="nut-collapse-item"
     >
       <div
-        class="nut-collapse-item-header disabled"
+        class="nut-collapse-item-header nut-collapse-item-header-disabled"
       >
         <div
           class="nut-collapse-item-title"
@@ -134,13 +142,16 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
-        style="height: 0px;"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆”
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆”
+          </div>
         </div>
       </div>
     </div>

src/packages/collapse/__test__/collapse.spec.tsx

@@ -63,10 +63,13 @@ test('prop activeName', async () => {
       </Collapse>
     </>
   )
-
-  expect(
-    container.querySelectorAll('.nut-collapse-item-content')[2]
-  ).toHaveStyle('height:0px')
+  waitFor(() => {
+    expect(
+      container.querySelectorAll('.nut-collapse-item-content-wrapper')[2]
+    ).toHaveStyle({
+      height: '0',
+    })
+  })
 })
 
 test('prop rotate', async () => {

src/packages/collapseitem/collapseitem.scss

@@ -82,7 +82,7 @@
     transition: transform 0.3s;
   }
 
-  &-header.disabled {
+  &-header-disabled {
     color: $collapse-item-disabled-color;
 
     .nut-collapse-item-title {

src/packages/collapseitem/collapseitem.taro.tsx

@@ -115,7 +115,9 @@ export const CollapseItem: FunctionComponent<
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>
       <View
-        className={classNames(`${classPrefix}-header`, { disabled })}
+        className={classNames(`${classPrefix}-header`, {
+          [`${classPrefix}-header-disabled`]: disabled,
+        })}
         onClick={handleClick}
       >
         <View className={`${classPrefix}-title`}>{title}</View>

src/packages/collapseitem/collapseitem.tsx

@@ -73,24 +73,19 @@ export const CollapseItem: FunctionComponent<
   const [wrapperHeight, setWrapperHeight] = useState(0)
 
   const updateRectHeight = async () => {
-    setTimeout(async () => {
-      const height = contentRef.current.offsetHeight
-      console.log('oasis res', height)
-      if (height) {
-        setCurrentHeight(height)
-        setWrapperHeight(expanded ? height : 0)
-        setTimeout(() => {
-          setTran(1)
-        })
-      }
-    })
+    const height = contentRef.current.offsetHeight
+    console.log('oasis res', height)
+    if (height) {
+      setCurrentHeight(height)
+      setWrapperHeight(expanded ? height : 0)
+      setTimeout(() => {
+        setTran(1)
+      })
+    }
   }
 
   useEffect(() => {
-    setTimeout(() => {
-      console.log('oasis update', name)
-      updateRectHeight()
-    })
+    updateRectHeight()
   }, [children, expanded])
 
   const toggle = () => {
@@ -108,7 +103,9 @@ export const CollapseItem: FunctionComponent<
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>
       <div
-        className={classNames(`${classPrefix}-header`, { disabled })}
+        className={classNames(`${classPrefix}-header`, {
+          [`${classPrefix}-header-disabled`]: disabled,
+        })}
         onClick={handleClick}
       >
         <div className={`${classPrefix}-title`}>{title}</div>