feat: v15 popup (#2844)

jdf2e · Dec 24, 2024 · 71f0a53 · 71f0a53
1 parent 23561c4
commit 71f0a53
Show file tree

Hide file tree

Showing 24 changed files with 308 additions and 229 deletions.
diff --git a/src/config.json b/src/config.json
@@ -857,6 +857,7 @@
           "type": "component",
           "show": true,
           "taro": true,
+          "v15": true,
           "rn": true,
           "desc": "弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示",
           "author": "szg2008"

diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap
diff --git a/src/packages/address/__test__/address.spec.tsx b/src/packages/address/__test__/address.spec.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { Star } from '@nutui/icons-react'
 import { Address } from '../address'
 
 const existList = [
@@ -117,6 +118,48 @@ 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: show custom icon', async () => {
+  const { container } = render(
+    <Address
+      visible
+      options={optionsDemo1}
+      custom
+      backIcon={<Star />}
+      title="选择地址"
+    />
+  )
+  expect(container.innerHTML).toMatchSnapshot()
+})
+
+test('Address: show custom icon', async () => {
+  const onExistSelect = vi.fn()
+  const onSwitch = vi.fn()
+  const { container } = render(
+    <Address
+      visible
+      type="exist"
+      existList={existList}
+      options={optionsDemo1}
+      custom="选择其他地址"
+      onExistSelect={onExistSelect}
+      onSwitch={onSwitch}
+    />
+  )
+  expect(container.innerHTML).toMatchSnapshot()
+  const btn = container.querySelector('.nut-address-footer-btn') as Element
+  fireEvent.click(btn)
+  const leftIcon = container.querySelector('.nut-address-left-icon') as Element
+  expect(leftIcon).toBeTruthy()
+  fireEvent.click(leftIcon)
+})
+
 test('Address: options disabled', async () => {
   const { container } = render(<Address visible options={optionsDemo1} />)
   const items = container.querySelectorAll('.nut-cascader-item')

diff --git a/src/packages/address/address.tsx b/src/packages/address/address.tsx
@@ -121,19 +121,18 @@ export const InternalAddress: ForwardRefRenderFunction<
   }
 
   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) => {

diff --git a/src/packages/cascader/cascader.taro.tsx b/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}

diff --git a/src/packages/overlay/overlay.scss b/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;
+}
diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/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(
@@ -84,7 +106,7 @@ test('should have "nut-popup-round" class when setting the round prop', () => {
 })
 
 test('should allow to using portal prop', () => {
-  render(<Popup visible />)
+  render(<Popup visible portal={document.body} />)
   expect(document.body.querySelector('.nut-popup')).toBeTruthy()
 })
 
@@ -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()
+})
diff --git a/src/packages/popup/demo.taro.tsx b/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 />
 

diff --git a/src/packages/popup/demos/h5/demo1.tsx b/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
diff --git a/src/packages/popup/demos/h5/demo2.tsx b/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>
     </>
   )
 }

diff --git a/src/packages/popup/demos/taro/demo1.tsx b/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