feat: v15 popup

src/packages/cascader/cascader.taro.tsx

@@ -483,7 +483,6 @@ const InternalCascader: ForwardRefRenderFunction<
           {...popupProps}
           visible={innerVisible}
           position="bottom"
-          style={{ overflowY: 'hidden' }}
           round
           closeIcon={closeIcon}
           closeable={closeable}

src/packages/overlay/overlay.scss

@@ -15,12 +15,6 @@
   z-index: $overlay-zIndex;
 }
 
-[dir='rtl'] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -67,3 +61,9 @@
     animation-duration: $overlay-animation-duration;
   }
 }
+
+[dir='rtl'] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}

src/packages/popup/demo.taro.tsx

@@ -80,9 +80,7 @@ const PopupDemo = () => {
   return (
     <>
       <Header />
-      <ScrollView
-        className={`${!harmonyAndRn() ? `demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}` : ''}`}
-      >
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.ce5c5446}</View>
         <Demo1 />
 

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

@@ -1,25 +1,28 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react'
 
-const Demo1 = () => {
-  const [showBasic, setShowBasic] = useState(false)
+const Demo = () => {
+  const [showIcon, setShowIcon] = useState(false)
+
   return (
     <>
       <Cell
-        title="展示弹出层"
+        title="基础弹框"
         onClick={() => {
-          setShowBasic(true)
+          setShowIcon(true)
         }}
       />
       <Popup
-        zIndex={2000}
-        visible={showBasic}
-        style={{ padding: '30px 50px' }}
+        closeable
+        visible={showIcon}
+        title="标题"
+        description="这里是副标题这是副标题"
+        position="bottom"
         onClose={() => {
-          setShowBasic(false)
+          setShowIcon(false)
         }}
       />
     </>
   )
 }
-export default Demo1
+export default Demo

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

@@ -6,6 +6,7 @@ const Demo2 = () => {
   const [showBottom, setShowBottom] = useState(false)
   const [showLeft, setShowLeft] = useState(false)
   const [showRight, setShowRight] = useState(false)
+  const [showText, setShowText] = useState(false)
 
   return (
     <>
@@ -33,6 +34,12 @@ const Demo2 = () => {
           setShowRight(true)
         }}
       />
+      <Cell
+        title="居中弹出"
+        onClick={() => {
+          setShowText(true)
+        }}
+      />
       <Popup
         visible={showTop}
         destroyOnClose
@@ -50,20 +57,33 @@ const Demo2 = () => {
       />
       <Popup
         visible={showLeft}
-        style={{ width: '40%', height: '100%' }}
         position="left"
         onClose={() => {
           setShowLeft(false)
         }}
       />
       <Popup
         visible={showRight}
-        style={{ width: '40%', height: '100%' }}
         position="right"
         onClose={() => {
           setShowRight(false)
         }}
       />
+      <Popup
+        visible={showText}
+        style={{ padding: '30px 50px' }}
+        onClose={() => {
+          setShowText(false)
+        }}
+      >
+        <div style={{ height: '100px', overflowY: 'auto' }}>
+          {Array.from({ length: 10 })
+            .fill('')
+            .map((_, i) => (
+              <Cell key={i}>正文</Cell>
+            ))}
+        </div>
+      </Popup>
     </>
   )
 }

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

@@ -1,35 +1,28 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
-import { ScrollView, Text } from '@tarojs/components'
 
-const Demo1 = () => {
-  const [showBasic, setShowBasic] = useState(false)
+const Demo = () => {
+  const [showIcon, setShowIcon] = useState(false)
+
   return (
     <>
       <Cell
-        title="展示弹出层"
+        title="基础弹框"
         onClick={() => {
-          setShowBasic(true)
+          setShowIcon(true)
         }}
       />
       <Popup
-        visible={showBasic}
-        style={{ padding: '30px 50px' }}
+        closeable
+        visible={showIcon}
+        title="标题"
+        description="这里是副标题这是副标题"
+        position="bottom"
         onClose={() => {
-          setShowBasic(false)
+          setShowIcon(false)
         }}
-      >
-        <ScrollView style={{ height: '200px', overflowY: 'scroll' }}>
-          {Array.from({ length: 1 })
-            .fill('')
-            .map((_, i) => (
-              <Cell key={i}>
-                <Text>正文</Text>
-              </Cell>
-            ))}
-        </ScrollView>
-      </Popup>
+      />
     </>
   )
 }
-export default Demo1
+export default Demo

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

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
-import { ScrollView, View } from '@tarojs/components'
+import { ScrollView, Text } from '@tarojs/components'
 
 const Demo2 = () => {
   const [showTop, setShowTop] = useState(false)
   const [showBottom, setShowBottom] = useState(false)
   const [showLeft, setShowLeft] = useState(false)
   const [showRight, setShowRight] = useState(false)
+  const [showText, setShowText] = useState(false)
 
   return (
     <>
@@ -34,6 +35,12 @@ const Demo2 = () => {
           setShowRight(true)
         }}
       />
+      <Cell
+        title="居中弹出"
+        onClick={() => {
+          setShowText(true)
+        }}
+      />
       <Popup
         visible={showTop}
         destroyOnClose
@@ -45,37 +52,45 @@ const Demo2 = () => {
       <Popup
         visible={showBottom}
         position="bottom"
+        title="底部弹层"
+        style={{ height: '300px' }}
         onClose={() => {
           setShowBottom(false)
         }}
         lockScroll
-      >
-        <ScrollView scrollY style={{ height: '200px' }}>
-          {Array.from({ length: 200 })
-            .fill('')
-            .map((_, i) => (
-              <View key={i}>
-                <Cell>底部弹出-{i}</Cell>
-              </View>
-            ))}
-        </ScrollView>
-      </Popup>
+      />
       <Popup
         visible={showLeft}
-        style={{ width: '20%', height: '100%' }}
+        style={{ width: '20%' }}
         position="left"
         onClose={() => {
           setShowLeft(false)
         }}
       />
       <Popup
         visible={showRight}
-        style={{ width: '20%', height: '100%' }}
         position="right"
         onClose={() => {
           setShowRight(false)
         }}
       />
+      <Popup
+        visible={showText}
+        style={{ padding: '30px 50px' }}
+        onClose={() => {
+          setShowText(false)
+        }}
+      >
+        <ScrollView style={{ height: 200 }} scrollY>
+          {Array.from({ length: 10 })
+            .fill('')
+            .map((_, i) => (
+              <Cell key={i}>
+                <Text>正文</Text>
+              </Cell>
+            ))}
+        </ScrollView>
+      </Popup>
     </>
   )
 }

src/packages/popup/demos/taro/demo8.tsx

@@ -13,8 +13,13 @@ const Demo8 = () => {
           setScrollPenetration(true)
         }}
       />
-      <Popup visible={scrollPenetration} position="bottom" lockScroll>
-        <ScrollView scrollY style={{ height: '200px' }}>
+      <Popup
+        visible={scrollPenetration}
+        title="禁止滚动穿透"
+        position="bottom"
+        lockScroll
+      >
+        <ScrollView scrollY style={{ height: '300px' }}>
           {Array.from({ length: 200 })
             .fill('')
             .map((_, i) => (