feat(actionsheet): v15多端适配

src/config.json

@@ -842,7 +842,7 @@
           "sort": 11,
           "show": true,
           "taro": true,
-          "v15": 2,
+          "v15": 1,
           "author": "dsj",
           "dd": true
         },

src/packages/actionsheet/actionsheet.scss

@@ -2,14 +2,22 @@
 
 .nut-actionsheet {
   text-align: center;
-
+  box-sizing: border-box;
+  padding: 16px;
+  .nut-popup-title {
+    padding: 0;
+  }
+  width: 100%;
+  &-bottom {
+    padding-bottom: 34px;
+  }
   &.nut-popup {
     min-height: 10%;
     background-color: $actionsheet-background-color;
   }
-
-  .nut-popup-title {
-    border-bottom: 1px solid $actionsheet-border-color;
+  &-close-icon {
+    width: 16px;
+    height: 16px;
   }
 
   &-list {
@@ -23,12 +31,17 @@
   &-cancel,
   &-item {
     display: block;
-    padding: 10px;
     text-align: $actionsheet-item-text-align;
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
     color: $actionsheet-item-color;
     cursor: pointer;
+    &-border {
+      border-bottom: $actionsheet-item-border-bottom;
+      /* #ifdef harmony */
+      border-width: 1px;
+      /* #endif */
+    }
     &-name {
       text-align: $actionsheet-item-text-align;
       line-height: $actionsheet-item-line-height;
@@ -54,9 +67,19 @@
   }
 
   &-cancel {
-    margin-top: 5px;
-    border-top: 1px solid $actionsheet-border-color;
+    border: 0.5px solid #c2c4cc;
+    /* #ifdef harmony */
+    border-width: 1px;
+    /* #endif */
     border-radius: $actionsheet-border-radius;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    line-height: 40px;
+    color: $color-title;
+    margin-top: 16px;
   }
 
   &-safe-area {

src/packages/actionsheet/actionsheet.taro.tsx

@@ -1,5 +1,7 @@
 import React, { FunctionComponent } from 'react'
 import { View } from '@tarojs/components'
+import { Close } from '@nutui/icons-react-taro'
+import classNames from 'classnames'
 import Popup from '@/packages/popup/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { mergeProps } from '@/utils/merge-props'
@@ -12,6 +14,7 @@ const defaultProps = {
   options: [],
   optionKey: { name: 'name', description: 'description' },
   cancelText: '',
+  position: 'bottom',
   onCancel: () => {},
   onSelect: () => {},
 } as unknown as TaroActionSheetProps
@@ -31,6 +34,7 @@ export const ActionSheet: FunctionComponent<
     visible,
     className,
     style,
+    position,
     ...rest
   } = mergeProps(defaultProps, props)
 
@@ -52,15 +56,17 @@ export const ActionSheet: FunctionComponent<
   return (
     <Popup
       {...rest}
+      title={title}
       round
       visible={visible}
-      position="bottom"
-      title={title}
+      position={position}
       description={description}
-      className={classPrefix}
+      className={`${classPrefix} ${classPrefix}-${position}`}
       onClose={() => {
-        onCancel && onCancel()
+        onCancel?.()
       }}
+      closeable={position === 'top'}
+      closeIcon={<Close className={`${classPrefix}-close-icon`} />}
     >
       <View className={`${className}`} style={style}>
         {options.length ? (
@@ -69,7 +75,10 @@ export const ActionSheet: FunctionComponent<
               const statusClass = `${item.disabled ? `${classPrefix}-item-disabled` : ''} ${item.danger ? `${classPrefix}-item-danger` : ''}`
               return (
                 <View
-                  className={`${classPrefix}-item ${statusClass}`}
+                  className={classNames(`${classPrefix}-item`, statusClass, {
+                    [`${classPrefix}-item-border`]:
+                      index !== options.length - 1,
+                  })}
                   key={index}
                   onClick={() => chooseItem(item, index)}
                 >

src/packages/actionsheet/actionsheet.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent } from 'react'
+import { Close } from '@nutui/icons-react'
+import classNames from 'classnames'
 import Popup from '@/packages/popup/index'
 import { ComponentDefaults } from '@/utils/typings'
 import { mergeProps } from '@/utils/merge-props'
@@ -11,6 +13,7 @@
   options: [],
   optionKey: { name: 'name', description: 'description' },
   cancelText: '',
+  position: 'bottom',
   onCancel: () => {},
   onSelect: () => {},
 } as unknown as WebActionSheetProps
@@ -30,6 +33,7 @@
     visible,
     className,
     style,
+    position,
     ...rest
   } = mergeProps(defaultProps, props)
 
@@ -51,24 +55,32 @@
   return (
     <Popup
       {...rest}
+      title={title}
       round
       visible={visible}
-      position="bottom"
-      title={title}
+      position={position}
       description={description}
-      className={classPrefix}
+      className={`${classPrefix} ${classPrefix}-${position}`}
       onClose={() => {
-        onCancel && onCancel()
+        onCancel?.()
       }}
+      closeable={position === 'top'}
+      closeIcon={<Close className={`${classPrefix}-close-icon`} />}
     >
       <div className={`${className}`} style={style}>
+        {/* {title && (
+          <div className={`${classPrefix}-${position}-title`}>{title}</div>
+        )} */}
         {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 ${statusClass}`}
+                  className={classNames(`${classPrefix}-item`, statusClass, {
+                    [`${classPrefix}-item-border`]:
+                      index !== options.length - 1,
+                  })}
                   key={index}
                   onClick={() => chooseItem(item, index)}
                 >

src/packages/actionsheet/demo.taro.tsx

@@ -10,6 +10,7 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
 
 const ActionSheetDemo = () => {
   const [translated] = useTranslate({
@@ -45,8 +46,9 @@ const ActionSheetDemo = () => {
         <Demo4 />
         <View className="h2">{translated.c3a08065}</View>
         <Demo5 />
-        <View className="h2">{translated.c3a08066}</View>
         <Demo6 />
+        <View className="h2">{translated.c3a08066}</View>
+        <Demo7 />
       </ScrollView>
     </>
   )

src/packages/actionsheet/demo.tsx

@@ -7,6 +7,7 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
 
 const ActionSheetDemo = () => {
   const [translated] = useTranslate({
@@ -41,8 +42,9 @@ const ActionSheetDemo = () => {
         <Demo4 />
         <h2>{translated.c3a08065}</h2>
         <Demo5 />
-        <h2>{translated.c3a08066}</h2>
         <Demo6 />
+        <h2>{translated.c3a08066}</h2>
+        <Demo7 />
       </div>
     </>
   )

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

@@ -1,18 +1,18 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react'
 
-const Demo1 = () => {
+const Demo = () => {
   const [val, setVal] = useState('')
   const [isVisible, setIsVisible] = useState(false)
   const options = [
     {
-      name: '权限设置',
+      name: '分享给朋友',
     },
     {
-      name: '重命名',
+      name: '添加到收藏夹',
     },
     {
-      name: '删除',
+      name: '复制商品链接',
     },
   ]
 
@@ -28,7 +28,6 @@ const Demo1 = () => {
         <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
       </Cell>
       <ActionSheet
-        title="标题"
         visible={isVisible}
         options={options}
         onSelect={handleSelect}
@@ -37,4 +36,4 @@ const Demo1 = () => {
     </>
   )
 }
-export default Demo1
+export default Demo

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

@@ -1,39 +1,38 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react'
 
-const Demo2 = () => {
-  const [isVisible, setIsVisible] = useState(false)
+const Demo = () => {
   const [val, setVal] = useState('')
+  const [isVisible, setIsVisible] = useState(false)
   const options = [
     {
-      name: '权限设置',
+      name: '分享给朋友',
     },
     {
-      name: '重命名',
-    },
-    {
-      name: '删除',
+      name: '添加到收藏夹',
     },
   ]
+
   const handleSelect = (item: any) => {
     setVal(item.name)
     setIsVisible(false)
   }
+
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>展示取消按钮</span>
+        <span>展示标题</span>
         <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
       </Cell>
-
       <ActionSheet
+        title="标题"
         visible={isVisible}
-        cancelText="取消"
         options={options}
         onSelect={handleSelect}
         onCancel={() => setIsVisible(false)}
+        cancelText="取消"
       />
     </>
   )
 }
-export default Demo2
+export default Demo

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

@@ -1,19 +1,15 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react'
 
-const Demo3 = () => {
+const Demo = () => {
   const [isVisible, setIsVisible] = useState(false)
   const [val, setVal] = useState('')
-  const options: Record<string, string>[] = [
+  const options = [
     {
-      name: '权限设置',
+      name: '分享给朋友',
     },
     {
-      name: '重命名',
-    },
-    {
-      name: '删除',
-      description: '删除后无法恢复',
+      name: '添加到收藏夹',
     },
   ]
 
@@ -25,19 +21,18 @@ const Demo3 = () => {
   return (
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
-        <span>展示描述信息</span>
+        <span>顶部弹出</span>
         <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
       </Cell>
       <ActionSheet
+        position="top"
         visible={isVisible}
         title="标题"
-        description="请选择操作动作"
-        cancelText="取消"
         options={options}
         onSelect={handleSelect}
         onCancel={() => setIsVisible(false)}
       />
     </>
   )
 }
-export default Demo3
+export default Demo

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react'
 
-const Demo4 = () => {
+const Demo = () => {
   const [isVisible, setIsVisible] = useState(false)
   const optionsThree: Record<string, string | boolean>[] = [
     {
@@ -30,4 +30,4 @@ const Demo4 = () => {
     </>
   )
 }
-export default Demo4
+export default Demo