feat: v15 popup

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Address: exist defaultIcon & selectIcon 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">请选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item active"><div class="select">456</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
+exports[`Address: exist defaultIcon & selectIcon 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">请选择地址</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item active"><div class="select">456</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
 
-exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><span class="nut-tabs-titles-item-text">请选择</span><span class="nut-tabs-titles-item-line"></span></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;
+exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">选择地址</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><span class="nut-tabs-titles-item-text">请选择</span><span class="nut-tabs-titles-item-line"></span></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;
 
-exports[`Address: show exist 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item active"><svg class="nut-icon nut-icon-Check " style="color: var(--nutui-color-primary);" xmlns="http://www.w3.org/2000/svg" color="var(--nutui-color-primary)" viewBox="0 0 49 48" aria-labelledby="Check" role="presentation"><path d="M45.121 16.121 47.243 14 43 9.757l-2.121 2.122L19 33.757 7.121 21.88 5 19.757.757 24l2.122 2.121L14.757 38l2.122 2.121L19 42.243l2.121-2.122L23.243 38z" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M533.33 1024s448-232.53 448-576c0-247.47-200.53-448-448-448s-448 200.53-448 448c0 343.47 448 576 448 576m181.12-206.72c-52.91 47.57-105.81 85.33-145.92 111.36a893 893 0 0 1-35.2 21.76 1148.8 1148.8 0 0 1-181.12-133.12C244.05 719.79 149.33 591.79 149.33 448c0-212.05 171.95-384 384-384s384 171.95 384 384c0 143.79-94.72 271.79-202.88 369.28M533.33 640a192 192 0 1 0-.02-384.02 192 192 0 0 0 .02 384.02m0-64c-70.61 0-128-57.39-128-128s57.39-128 128-128 128 57.39 128 128-57.39 128-128 128" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M533.33 1024s448-232.53 448-576c0-247.47-200.53-448-448-448s-448 200.53-448 448c0 343.47 448 576 448 576m181.12-206.72c-52.91 47.57-105.81 85.33-145.92 111.36a893 893 0 0 1-35.2 21.76 1148.8 1148.8 0 0 1-181.12-133.12C244.05 719.79 149.33 591.79 149.33 448c0-212.05 171.95-384 384-384s384 171.95 384 384c0 143.79-94.72 271.79-202.88 369.28M533.33 640a192 192 0 1 0-.02-384.02 192 192 0 0 0 .02 384.02m0-64c-70.61 0-128-57.39-128-128s57.39-128 128-128 128 57.39 128 128-57.39 128-128 128" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
+exports[`Address: show exist 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-wrapper"><div class="nut-popup-title-title">选择地址</div></div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="m512 557.23 279.25 279.25c4.27 4.27 10.88 4.27 14.94 0l30.29-30.29c4.27-4.27 4.27-10.88 0-14.94L557.23 512l279.25-279.25c4.27-4.27 4.27-10.88 0-14.94l-30.29-30.29c-4.27-4.27-10.88-4.27-14.94 0L512 466.77 232.75 187.52c-4.27-4.27-10.88-4.27-14.94 0l-30.29 30.29c-4.27 4.27-4.27 10.88 0 14.94L466.77 512 187.52 791.25c-4.27 4.27-4.27 10.88 0 14.94l30.29 30.29c4.27 4.27 10.88 4.27 14.94 0z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item active"><svg class="nut-icon nut-icon-Check " style="color: var(--nutui-color-primary);" xmlns="http://www.w3.org/2000/svg" color="var(--nutui-color-primary)" viewBox="0 0 49 48" aria-labelledby="Check" role="presentation"><path d="M45.121 16.121 47.243 14 43 9.757l-2.121 2.122L19 33.757 7.121 21.88 5 19.757.757 24l2.122 2.121L14.757 38l2.122 2.121L19 42.243l2.121-2.122L23.243 38z" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M533.33 1024s448-232.53 448-576c0-247.47-200.53-448-448-448s-448 200.53-448 448c0 343.47 448 576 448 576m181.12-206.72c-52.91 47.57-105.81 85.33-145.92 111.36a893 893 0 0 1-35.2 21.76 1148.8 1148.8 0 0 1-181.12-133.12C244.05 719.79 149.33 591.79 149.33 448c0-212.05 171.95-384 384-384s384 171.95 384 384c0 143.79-94.72 271.79-202.88 369.28M533.33 640a192 192 0 1 0-.02-384.02 192 192 0 0 0 .02 384.02m0-64c-70.61 0-128-57.39-128-128s57.39-128 128-128 128 57.39 128 128-57.39 128-128 128" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M533.33 1024s448-232.53 448-576c0-247.47-200.53-448-448-448s-448 200.53-448 448c0 343.47 448 576 448 576m181.12-206.72c-52.91 47.57-105.81 85.33-145.92 111.36a893 893 0 0 1-35.2 21.76 1148.8 1148.8 0 0 1-181.12-133.12C244.05 719.79 149.33 591.79 149.33 448c0-212.05 171.95-384 384-384s384 171.95 384 384c0 143.79-94.72 271.79-202.88 369.28M533.33 640a192 192 0 1 0-.02-384.02 192 192 0 0 0 .02 384.02m0-64c-70.61 0-128-57.39-128-128s57.39-128 128-128 128 57.39 128 128-57.39 128-128 128" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;

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