feat: v15 popup

src/packages/address/__test__/address.spec.tsx

@@ -117,6 +117,13 @@ test('Address: show custom', async () => {
   expect(container.innerHTML).toMatchSnapshot()
 })
 
+test('Address: show custom', async () => {
+  const { container } = render(
+    <Address visible options={optionsDemo1} custom title="选择地址" />
+  )
+  expect(container.innerHTML).toMatchSnapshot()
+})
+
 test('Address: options disabled', async () => {
   const { container } = render(<Address visible options={optionsDemo1} />)
   const items = container.querySelectorAll('.nut-cascader-item')

src/packages/address/address.tsx

@@ -121,19 +121,18 @@
   }
 
   const renderLeftOnCustomSwitch = () => {
-    return (
-      <>
-        {custom && (
-          <div className={`${classPrefix}-left-icon`} onClick={onSwitchModule}>
-            {React.isValidElement(backIcon) ? (
-              backIcon
-            ) : (
-              <ArrowLeft color="#cccccc" />
-            )}
-          </div>
-        )}
-      </>
-    )
+    if (custom) {
+      return (
+        <div className={`${classPrefix}-left-icon`} onClick={onSwitchModule}>
+          {React.isValidElement(backIcon) ? (
+            backIcon
+          ) : (
+            <ArrowLeft color="#cccccc" />
+          )}
+        </div>
+      )
+    }
+    return null
   }
 
   const selectedExistItem = (data: AddressList) => {

src/packages/cascader/cascader.taro.tsx

@@ -481,7 +481,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/__tests__/popup.spec.tsx

@@ -69,6 +69,28 @@ test('pop from right', () => {
   expect(pop).toBeTruthy()
 })
 
+test('pop title', () => {
+  const { container } = render(<Popup title="标题" visible position="bottom" />)
+  const title = container.querySelector('.nut-popup-title-title') as HTMLElement
+  expect(title).toHaveTextContent('标题')
+})
+
+test('pop left', () => {
+  const { container } = render(<Popup left="返回" visible position="bottom" />)
+  const title = container.querySelector('.nut-popup-title-left') as HTMLElement
+  expect(title).toHaveTextContent('返回')
+})
+
+test('pop description', () => {
+  const { container } = render(
+    <Popup description="副标题" visible position="bottom" />
+  )
+  const title = container.querySelector(
+    '.nut-popup-title-description'
+  ) as HTMLElement
+  expect(title).toHaveTextContent('副标题')
+})
+
 test('should render close icon when using closeable prop', () => {
   const { container } = render(<Popup visible closeable />)
   const closeIcon = container.querySelector(
@@ -117,7 +139,6 @@ test('event click-title-right icon and keep overlay test ', () => {
   const closeIcon = container.querySelector(
     '.nut-popup-title-right'
   ) as HTMLElement
-  const overlay = container.querySelector('.nut-overlay') as Element
   fireEvent.click(closeIcon)
   expect(onCloseIconClick).toBeCalled()
   const overlay2 = container.querySelector('.hidden-render') as Element
@@ -140,3 +161,13 @@ test('event click-overlay test', async () => {
   fireEvent.click(overlay)
   expect(onOverlayClick).toBeCalled()
 })
+
+test('pop destroyOnClose', () => {
+  const onClose = vi.fn()
+  const { container } = render(
+    <Popup visible destroyOnClose onClose={onClose} />
+  )
+  const overlay = container.querySelector('.nut-overlay') as Element
+  fireEvent.click(overlay)
+  expect(onClose).toBeCalled()
+})

src/packages/popup/demo.taro.tsx

@@ -77,9 +77,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) => (