feat(actionsheet): harmony cpp adaption

src/config.json

@@ -705,7 +705,7 @@
       "enName": "feedback",
       "packages": [
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "ActionSheet",
           "type": "component",
           "cName": "动作面板",

src/packages/actionsheet/__test__/actionsheet.spec.tsx

@@ -63,7 +63,9 @@ test('props test has value ', async () => {
     '.nut-actionsheet-list .nut-actionsheet-item'
   )[0]
   expect(chooseTagEle).toHaveTextContent('选项一')
-  expect(chooseTagEle).toHaveClass('danger')
+  expect(chooseTagEle).toHaveClass(
+    'nut-actionsheet-item nut-actionsheet-item-danger'
+  )
 })
 
 test('props test choose item and show value', async () => {
@@ -101,7 +103,9 @@ test('props test disabled item has disabled classes', async () => {
     '.nut-actionsheet-list .nut-actionsheet-item'
   )
   const disableItem = options[1]
-  expect(disableItem).toHaveClass('nut-actionsheet-item disabled')
+  expect(disableItem).toHaveClass(
+    'nut-actionsheet-item nut-actionsheet-item-disabled'
+  )
 })
 
 test('props test click disabled item and not call fn', async () => {

src/packages/actionsheet/actionsheet.scss

@@ -28,20 +28,26 @@
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
     color: $actionsheet-item-color;
-    background-color: $color-background-overlay;
     cursor: pointer;
-
+    &-name {
+      text-align: $actionsheet-item-text-align;
+      line-height: $actionsheet-item-line-height;
+      font-size: $font-size-base;
+      color: $actionsheet-item-color;
+    }
     &-description {
       display: block;
       font-size: $font-size-s;
       color: $color-text;
+      text-align: $actionsheet-item-text-align;
+      line-height: $actionsheet-item-line-height;
     }
 
-    &.danger {
+    &-danger {
       color: $actionsheet-item-danger;
     }
 
-    &.disabled {
+    &-disabled {
       color: $color-text-disabled !important;
       cursor: not-allowed;
     }

src/packages/actionsheet/actionsheet.taro.tsx

@@ -76,16 +76,19 @@ export const ActionSheet: FunctionComponent<
         {options.length ? (
           <View className={`${classPrefix}-list`}>
             {options.map((item, index) => {
+              const statusClass = `${item.disabled ? `${classPrefix}-item-disabled` : ''} ${item.danger ? `${classPrefix}-item-danger` : ''}`
               return (
                 <View
-                  className={`${classPrefix}-item ${
-                    item.disabled ? 'disabled' : ''
-                  } ${item.danger ? 'danger' : ''}`}
+                  className={`${classPrefix}-item ${statusClass}`}
                   key={index}
                   onClick={() => chooseItem(item, index)}
                 >
-                  {item[optionKey.name]}
-                  <View className={`${classPrefix}-item-description`}>
+                  <View className={`${classPrefix}-item-name ${statusClass}`}>
+                    {item[optionKey.name]}
+                  </View>
+                  <View
+                    className={`${classPrefix}-item-description ${statusClass}`}
+                  >
                     {item[optionKey.description]}
                   </View>
                 </View>

src/packages/actionsheet/actionsheet.tsx

@@ -75,16 +75,19 @@ export const ActionSheet: FunctionComponent<
         {options.length ? (
           <div className={`${classPrefix}-list`}>
             {options.map((item, index) => {
+              const statusClass = `${item.disabled ? `${classPrefix}-item-disabled` : ''} ${item.danger ? `${classPrefix}-item-danger` : ''}`
               return (
                 <div
-                  className={`${classPrefix}-item ${
-                    item.disabled ? 'disabled' : ''
-                  } ${item.danger ? 'danger' : ''}`}
+                  className={`${classPrefix}-item ${statusClass}`}
                   key={index}
                   onClick={() => chooseItem(item, index)}
                 >
-                  {item[optionKey.name]}
-                  <div className={`${classPrefix}-item-description`}>
+                  <div className={`${classPrefix}-item-name ${statusClass}`}>
+                    {item[optionKey.name]}
+                  </div>
+                  <div
+                    className={`${classPrefix}-item-description ${statusClass}`}
+                  >
                     {item[optionKey.description]}
                   </div>
                 </div>

src/packages/actionsheet/demos/taro/demo1.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const [val, setVal] = useState('')
@@ -25,8 +26,10 @@ const Demo1 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>基础用法</span>
-        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
+        <View>基础用法</View>
+        <View style={{ marginLeft: pxTransform(10), color: '#999' }}>
+          {val}
+        </View>
       </Cell>
       <ActionSheet
         title="标题"

src/packages/actionsheet/demos/taro/demo2.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -23,8 +24,10 @@ const Demo2 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>展示取消按钮</span>
-        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
+        <View>展示取消按钮</View>
+        <View style={{ marginLeft: pxTransform(10), color: '#999' }}>
+          {val}
+        </View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/actionsheet/demos/taro/demo3.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -24,8 +25,10 @@ const Demo3 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>展示描述信息</span>
-        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
+        <View>展示描述信息</View>
+        <View style={{ marginLeft: pxTransform(10), color: '#999' }}>
+          {val}
+        </View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/actionsheet/demos/taro/demo4.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo4 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -16,7 +17,7 @@ const Demo4 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>选项状态</span>
+        <View>选项状态</View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/actionsheet/demos/taro/demo5.tsx

@@ -1,13 +1,19 @@
-import React, { useState } from 'react'
+import React, { CSSProperties, useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const [isVisible, setIsVisible] = useState(false)
+  const viewStyle: CSSProperties = {
+    textAlign: 'left',
+    paddingLeft: pxTransform(20),
+    paddingTop: pxTransform(10),
+  }
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>自定义内容</span>
+        <View>自定义内容</View>
       </Cell>
       <ActionSheet
         visible={isVisible}
@@ -17,12 +23,8 @@ const Demo5 = () => {
         }}
         onCancel={() => setIsVisible(false)}
       >
-        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
-          新建表格
-        </View>
-        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
-          新建文档
-        </View>
+        <View style={viewStyle}>新建表格</View>
+        <View style={viewStyle}>新建文档</View>
       </ActionSheet>
     </>
   )

src/packages/actionsheet/demos/taro/demo6.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo6 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -21,7 +22,7 @@ const Demo6 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>自定义key</span>
+        <View>自定义key</View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/popup/popup.scss

@@ -100,9 +100,6 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    /* #ifdef rn */
-    height: 300px;
-    /* #endif */
 
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;