fix: popover 无法关闭的问题,删除无用代码和无用的样式变量

src/packages/popover/__tests__/popover.spec.tsx

@@ -172,14 +172,14 @@ test('render position fixed ', async () => {
       </Popover>
     </div>
   )
-  const item = document.querySelectorAll('.nut-popover-menu-item-name')
+  const item = document.querySelectorAll('.nut-popover-item-name')
   fireEvent.click(item[0])
   expect(click).toBeCalled()
   expect(close).toBeCalled()
   fireEvent.click(getByTestId('a'))
   await waitFor(() => {
     fireEvent.scroll(getByTestId('aa'), { target: { scrollTop: 10 } })
-    const item1 = document.querySelectorAll('.nut-popover-menu-item-name')
+    const item1 = document.querySelectorAll('.nut-popover-item-name')
     expect(item1.length).toBe(3)
   })
 })
@@ -193,7 +193,7 @@ test('should emit onchoose event when clicking the action', async () => {
       </Button>
     </Popover>
   )
-  const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0]
+  const contentItem = document.querySelectorAll('.nut-popover-item')[0]
   fireEvent.click(contentItem)
   await waitFor(() => expect(choose.mock.calls[0][0].name).toEqual('option1'))
   await waitFor(() => expect(choose.mock.calls[0][1]).toBe(0))
@@ -208,7 +208,7 @@ test('should not emit select event when the action is disabled', async () => {
       </Button>
     </Popover>
   )
-  const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0]
+  const contentItem = document.querySelectorAll('.nut-popover-item')[0]
   fireEvent.click(contentItem)
   await waitFor(() => expect(choose).not.toBeCalled())
 })

src/packages/popover/demo.scss

@@ -1,35 +1,3 @@
-.demo-popover .nut-popover-content {
-  width: 120px;
-}
-
-.customClass {
-  .nut-popover-content {
-    width: auto;
-  }
-
-  .self-content {
-    width: 195px;
-    display: flex;
-    flex-wrap: wrap;
-
-    &-item {
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    &-desc {
-      margin-top: 5px;
-      width: 60px;
-      font-size: 10px;
-      text-align: center;
-    }
-  }
-}
-
 .brickBox {
   margin: 80px 0;
   display: flex;
@@ -46,5 +14,4 @@
 .custom-color {
   --nutui-popover-text-color: rgb(255, 255, 255);
   --nutui-popover-content-background-color: rgb(255, 0, 0);
-  --nutui-popover-border-color: rgb(255, 0, 0);
 }

src/packages/popover/demo.taro.tsx

@@ -10,39 +10,32 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo41 from './demos/taro/demo4-1'
 import Demo5 from './demos/taro/demo5'
-import Demo6 from './demos/taro/demo6'
 
 const PopoverDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       title: '基础用法',
       title1: '选项配置',
-      title2: '自定义内容',
+      title2: '自定义内容+颜色',
       title3: '位置自定义：多条数据',
       title6: '位置自定义：单条数据',
       title4: '自定义目标元素',
-      content: '自定义内容',
-      contentColor: '自定义颜色',
     },
     'en-US': {
       title: 'Basic Usage',
       title1: 'Option Configuration',
-      title2: 'Custom Content',
+      title2: 'Custom Content and Color',
       title3: 'Custom Location: multi datas',
       title6: 'Custom Location: one data',
       title4: 'Custom Target Element',
-      content: 'Custom Content',
-      contentColor: 'Custom Color',
     },
     'zh-TW': {
       title: '基礎用法',
       title1: '選項配置',
-      title2: '自定義內容',
+      title2: '自定義內容+顏色',
       title3: '位置自定義：多條資料',
       title6: '位置自定義：單一資料',
       title4: '自定義目標元素',
-      content: '自定義內容',
-      contentColor: '自定義顏色',
     },
   })
 
@@ -54,16 +47,14 @@ const PopoverDemo = () => {
         <Demo1 />
         <View className="h2">{translated.title1}</View>
         <Demo2 />
-        <View className="h2">{translated.content}</View>
+        <View className="h2">{translated.title2}</View>
         <Demo3 />
         <View className="h2 demoClass">{translated.title3}</View>
         <Demo4 />
         <View className="h2">{translated.title6}</View>
         <Demo41 />
         <View className="h2">{translated.title4}</View>
         <Demo5 />
-        <View className="h2">{translated.contentColor}</View>
-        <Demo6 />
       </ScrollView>
     </>
   )

src/packages/popover/demo.tsx

@@ -8,7 +8,6 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo41 from './demos/h5/demo4-1'
 import Demo5 from './demos/h5/demo5'
-import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 
@@ -17,35 +16,30 @@ const PopoverDemo = () => {
     'zh-CN': {
       title: '基础用法',
       title1: '选项配置',
-      title2: '自定义内容',
+      title2: '自定义内容+颜色',
       title3: '位置自定义：多条数据',
       title6: '位置自定义：单条数据',
       title4: '自定义目标元素',
-      content: '自定义内容',
-      contentColor: '自定义颜色',
       scroll: '置于可滚动容器中',
       fixed: '容器设置 position: fixed',
     },
     'en-US': {
       title: 'Basic Usage',
       title1: 'Option Configuration',
-      title2: 'Custom Content',
+      title2: 'Custom Content and Color',
       title3: 'Custom Location: multi datas',
       title6: 'Custom Location: one data',
       title4: 'Custom Target Element',
-      content: 'Custom Content',
-      contentColor: 'Custom Color',
       scroll: 'In scrollable contain',
       fixed: 'position: fixed',
     },
     'zh-TW': {
       title: '基礎用法',
       title1: '選項配置',
-      title2: '自定義內容',
+      title2: '自定義內容+顏色',
       title3: '位置自定義：多條資料',
       title6: '位置自定義：單一資料',
       title4: '自定義目標元素',
-      content: '自定義內容',
       contentColor: '自定義顏色',
       scroll: '置於可滾動容器中',
       fixed: '容器設置 position: fixed',
@@ -59,16 +53,14 @@ const PopoverDemo = () => {
         <Demo1 />
         <h2>{translated.title1}</h2>
         <Demo2 />
-        <h2>{translated.content}</h2>
+        <h2>{translated.title2}</h2>
         <Demo3 />
         <h2>{translated.title3}</h2>
         <Demo4 />
         <h2>{translated.title6}</h2>
         <Demo41 />
         <h2>{translated.title4}</h2>
         <Demo5 />
-        <h2>{translated.contentColor}</h2>
-        <Demo6 />
         <h2>{translated.scroll}</h2>
         <Demo7 />
         <h2>{translated.fixed}</h2>

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

@@ -2,17 +2,22 @@ import React, { useState } from 'react'
 import { Popover, Button, Space } from '@nutui/nutui-react'
 import { Tips, Close } from '@nutui/icons-react'
 
-const Demo1 = () => {
+const Demo = () => {
   const [basic, setBasic] = useState(false)
   const [dark, setDark] = useState(false)
-
+  const [index, setIndex] = useState(0)
   const itemList = [
     {
       key: 'key1',
       name: '主要文案内容',
       icon: <Tips />,
       action: {
         icon: <Close />,
+        onClick: (e: any) => {
+          e.stopPropagation()
+          index === 0 && basic && setBasic(false)
+          index === 1 && dark && setDark(false)
+        },
       },
     },
   ]
@@ -21,31 +26,34 @@ const Demo1 = () => {
       <Popover
         visible={basic}
         list={itemList}
-        location="bottom-start"
-        style={{ marginInlineEnd: 30 }}
+        location="bottom-left"
         onClick={() => {
           basic ? setBasic(false) : setBasic(true)
+          setIndex(0)
+        }}
+        onOpen={() => {
+          console.log('打开菜单时触发')
+        }}
+        onClose={() => {
+          console.log('关闭菜单时触发')
         }}
       >
-        <Button type="primary" shape="square">
-          明亮风格
-        </Button>
+        <Button type="primary">明亮风格</Button>
       </Popover>
       <Popover
         visible={dark}
         list={itemList}
         theme="dark"
-        location="bottom-start"
+        location="bottom-left"
         onClick={() => {
           dark ? setDark(false) : setDark(true)
+          setIndex(1)
         }}
       >
-        <Button type="primary" shape="square">
-          暗黑风格
-        </Button>
+        <Button type="primary">暗黑风格</Button>
       </Popover>
     </Space>
   )
 }
 
-export default Demo1
+export default Demo

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Popover, Button, Space } from '@nutui/nutui-react'
-import { Home, Cart, Location, Check } from '@nutui/icons-react'
+import { Home, Check } from '@nutui/icons-react'
 
 interface List {
   key?: string
@@ -15,41 +15,26 @@ const Demo2 = () => {
   const iconItemList = [
     {
       key: 'key1',
-      name: 'option1',
+      name: '主要文案内容',
       icon: <Home />,
       action: {
-        icon: <Check color="rgba(250, 44, 25, 1)" />,
+        icon: <Check />,
         onClick: (e: any) => {
           console.log('onclick 1')
           e.stopPropagation()
         },
       },
     },
-    {
-      key: 'key2',
-      name: 'option2',
-      icon: <Cart />,
-    },
-    {
-      key: 'key3',
-      name: 'option3',
-      icon: <Location />,
-    },
   ]
   const itemListDisabled = [
     {
       key: 'key1',
-      name: 'option1',
+      name: '主要文案内容',
       disabled: true,
     },
     {
       key: 'key2',
-      name: 'option2',
-      disabled: true,
-    },
-    {
-      key: 'key3',
-      name: 'option3',
+      name: '主要文案内容',
     },
   ]
   const chooseHandle = (item: List, index: number) => {
@@ -58,31 +43,27 @@ const Demo2 = () => {
   return (
     <Space>
       <Popover
-        className="demo-popover"
         visible={showIcon}
-        location="bottom-start"
+        theme="dark"
+        location="bottom-left"
         onClick={() => {
           showIcon ? setShowIcon(false) : setShowIcon(true)
         }}
         list={iconItemList}
-        style={{ marginInlineEnd: 30 }}
       >
-        <Button type="primary" shape="square">
-          展示图标
-        </Button>
+        <Button type="primary">图标选项</Button>
       </Popover>
       <Popover
         visible={disableAction}
+        theme="dark"
         onClick={() => {
           disableAction ? setDisableAction(false) : setDisableAction(true)
         }}
         list={itemListDisabled}
-        // location="right"
+        location="right"
         onSelect={chooseHandle}
       >
-        <Button type="primary" shape="square">
-          禁用选项
-        </Button>
+        <Button type="primary">禁用选项</Button>
       </Popover>
     </Space>
   )