Skip to content

Commit 706dae6

Browse files
xiaoyatongxiaoyatong
authored
fix: popover 无法关闭的问题,删除无用代码和无用的样式变量 (#3129)
1 parent f1acf0e commit 706dae6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+649
-986
lines changed

‎packages/nutui-taro-demo/src/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Component } from 'react'
2-
import './app.scss'
3-
42
import('@/sites/assets/styles/reset.scss')
53
import('@/packages/nutui.react.scss.taro')
64
import('@nutui/touch-emulator')
75

6+
import './app.scss'
7+
88
// console.log(NutUI)
99
class App extends Component {
1010
render() {

‎src/config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -960,9 +960,9 @@
960960
"sort": 19,
961961
"show": true,
962962
"taro": true,
963-
"v15": 10,
963+
"v15": 1,
964964
"author": "lzz",
965-
"dd": false
965+
"dd": true
966966
},
967967
{
968968
"version": "3.0.0",

‎src/hooks/use-taro-rect.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const getTaroRectById = (id: string) => {
1313
query
1414
.select(`#${id}`)
1515
.boundingClientRect()
16-
.exec(function (rect: any) {
16+
.exec((rect: any) => {
1717
if (rect[0]) {
1818
resolve(rect[0])
1919
} else {

‎src/packages/picker/picker.taro.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import React, {
88
import { View } from '@tarojs/components'
99
import classNames from 'classnames'
1010
import isEqual from 'react-fast-compare'
11-
1211
import PickerView from '@/packages/pickerview/index.taro'
1312
import Popup from '@/packages/popup/index.taro'
1413
import SafeArea from '@/packages/safearea/index.taro'

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

Lines changed: 77 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import '@testing-library/jest-dom'
44
import { Tips, Close } from '@nutui/icons-react'
55
import Popover from '../index'
66
import Button from '@/packages/button'
7+
import { FullPosition } from '@/types'
78

89
const itemList = [
910
{
@@ -27,6 +28,10 @@ const itemListOne = [
2728
icon: <Tips />,
2829
action: {
2930
icon: <Close />,
31+
onClick: (e: any) => {
32+
console.log('onclick 1')
33+
e.stopPropagation()
34+
},
3035
},
3136
},
3237
]
@@ -51,9 +56,7 @@ const itemListDisabled = [
5156
test('render popover content', async () => {
5257
const { container } = render(
5358
<Popover visible list={itemList}>
54-
<Button type="primary" shape="square">
55-
基础用法
56-
</Button>
59+
<Button type="primary">基础用法</Button>
5760
</Popover>
5861
)
5962
const content = document.querySelectorAll('.nut-popover-content')[0]
@@ -75,78 +78,53 @@ test('render popover content dark', async () => {
7578

7679
test('render popover position', async () => {
7780
render(
78-
<Popover visible list={itemList} location="bottom-start">
79-
<Button type="primary" shape="square">
80-
基础用法
81-
</Button>
81+
<Popover visible list={itemList} location="bottom-left">
82+
<Button type="primary">基础用法</Button>
8283
</Popover>
8384
)
8485
const content = document.querySelectorAll('.nut-popover-content')[0]
8586
expect(content.className).toContain(
86-
'nut-popup-none nut-popover-content nut-popover-content-bottom-start'
87+
'nut-popup-none nut-popover-content nut-popover-content-bottom-left'
8788
)
8889
})
8990

90-
test('render popover position2', async () => {
91-
const { container } = render(
92-
<Popover visible list={itemList} location="bottom-start" arrowOffset={20}>
93-
<Button type="primary" shape="square">
94-
基础用法
95-
</Button>
91+
test('render popover position with arrowOffset', async () => {
92+
const { rerender } = render(
93+
<Popover visible list={itemList} location="bottom-left" arrowOffset={20}>
94+
<Button type="primary">基础用法</Button>
9695
</Popover>
9796
)
98-
const content = document.querySelectorAll(
99-
'.nut-popover-arrow'
100-
)[0] as HTMLElement
101-
expect(content).toHaveAttribute('style', 'left: 36px;')
102-
})
10397

104-
test('render popover position22', async () => {
105-
const { container } = render(
106-
<Popover visible list={itemList} arrowOffset={20}>
107-
<Button type="primary" shape="square">
108-
基础用法
109-
</Button>
110-
</Popover>
111-
)
112-
const content = document.querySelectorAll(
113-
'.nut-popover-arrow'
114-
)[0] as HTMLElement
115-
expect(content).toHaveAttribute('style', 'left: calc(50% + 20px);')
116-
})
98+
const checkArrowStyles = (location: FullPosition, expectedStyles: string) => {
99+
rerender(
100+
<Popover visible list={itemList} location={location} arrowOffset={20}>
101+
<Button type="primary">基础用法</Button>
102+
</Popover>
103+
)
104+
content = document.querySelectorAll('.nut-popover-arrow')[0]
105+
expect(content).toHaveAttribute('style', expectedStyles)
106+
}
117107

118-
test('render popover position3', async () => {
119-
const { container } = render(
120-
<Popover visible list={itemList} location="left-start" arrowOffset={20}>
121-
<Button type="primary" shape="square">
122-
基础用法
123-
</Button>
124-
</Popover>
125-
)
126-
const content = document.querySelectorAll(
127-
'.nut-popover-arrow'
128-
)[0] as HTMLElement
129-
expect(content).toHaveAttribute('style', 'top: -4px;')
130-
})
108+
let content = document.querySelectorAll('.nut-popover-arrow')[0]
109+
expect(content).toHaveAttribute('style', 'left: 36px;')
131110

132-
test('render popover position33', async () => {
133-
const { container } = render(
134-
<Popover visible list={itemList} location="left" arrowOffset={20}>
135-
<Button type="primary" shape="square">
136-
基础用法
137-
</Button>
138-
</Popover>
139-
)
140-
const content = document.querySelectorAll(
141-
'.nut-popover-arrow'
142-
)[0] as HTMLElement
143-
expect(content).toHaveAttribute('style', 'top: calc(50% - 20px);')
111+
checkArrowStyles('bottom', 'left: calc(50% + 20px);')
112+
checkArrowStyles('bottom-right', 'right: -4px;')
113+
checkArrowStyles('left', 'top: calc(50% - 20px);')
114+
checkArrowStyles('left-bottom', 'bottom: 36px;')
115+
checkArrowStyles('left-top', 'top: -4px;')
116+
checkArrowStyles('right', 'top: calc(50% - 20px);')
117+
checkArrowStyles('right-bottom', 'bottom: 36px;')
118+
checkArrowStyles('right-top', 'top: -4px;')
119+
checkArrowStyles('top-right', 'right: -4px;')
120+
checkArrowStyles('top-left', 'left: 36px;')
121+
checkArrowStyles('top', 'left: calc(50% + 20px);')
144122
})
145123

146124
test('render position fixed ', async () => {
147125
const close = vi.fn()
148126
const click = vi.fn()
149-
const { container, getByTestId } = render(
127+
const { getByTestId } = render(
150128
<div
151129
style={{
152130
height: '200px',
@@ -166,57 +144,54 @@ test('render position fixed ', async () => {
166144
onClick={click}
167145
onClose={close}
168146
>
169-
<Button data-testid="a" type="primary" shape="square">
147+
<Button data-testid="a" type="primary">
170148
position: fixed
171149
</Button>
172150
</Popover>
173151
</div>
174152
)
175-
const item = document.querySelectorAll('.nut-popover-menu-item-name')
153+
const item = document.querySelectorAll('.nut-popover-item-name')
176154
fireEvent.click(item[0])
177155
expect(click).toBeCalled()
178156
expect(close).toBeCalled()
179157
fireEvent.click(getByTestId('a'))
180158
await waitFor(() => {
181159
fireEvent.scroll(getByTestId('aa'), { target: { scrollTop: 10 } })
182-
const item1 = document.querySelectorAll('.nut-popover-menu-item-name')
160+
const item1 = document.querySelectorAll('.nut-popover-item-name')
183161
expect(item1.length).toBe(3)
184162
})
185163
})
186164

187165
test('should emit onchoose event when clicking the action', async () => {
188166
const choose = vi.fn()
189-
const { container } = render(
167+
render(
190168
<Popover visible list={itemList} onSelect={choose}>
191-
<Button type="primary" shape="square">
192-
明朗风格
193-
</Button>
169+
<Button type="primary">明朗风格</Button>
194170
</Popover>
195171
)
196-
const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0]
172+
const contentItem = document.querySelectorAll('.nut-popover-item')[0]
197173
fireEvent.click(contentItem)
198174
await waitFor(() => expect(choose.mock.calls[0][0].name).toEqual('option1'))
199175
await waitFor(() => expect(choose.mock.calls[0][1]).toBe(0))
200176
})
201177

202178
test('should not emit select event when the action is disabled', async () => {
203179
const choose = vi.fn()
204-
const { container } = render(
180+
render(
205181
<Popover visible list={itemListDisabled} onSelect={choose}>
206-
<Button type="primary" shape="square">
207-
明朗风格
208-
</Button>
182+
<Button type="primary">明朗风格</Button>
209183
</Popover>
210184
)
211-
const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0]
185+
const contentItem = document.querySelectorAll('.nut-popover-item')[0]
212186
fireEvent.click(contentItem)
213187
await waitFor(() => expect(choose).not.toBeCalled())
214188
})
215189

216-
test('target id', async () => {
217-
const choose = vi.fn()
190+
test('click event', async () => {
218191
const close = vi.fn()
219-
const { container, getByTestId } = render(
192+
const close1 = vi.fn()
193+
const open = vi.fn()
194+
const { getByTestId, rerender } = render(
220195
<div>
221196
<Popover visible targetId="popid" list={itemListOne} />
222197
<Button type="primary" id="popid">
@@ -228,4 +203,32 @@ test('target id', async () => {
228203
</div>
229204
)
230205
fireEvent.click(getByTestId('closeid'))
206+
await waitFor(() =>
207+
expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({
208+
visibility: 'hidden',
209+
})
210+
)
211+
212+
rerender(
213+
<>
214+
<Popover
215+
visible
216+
targetId="popid"
217+
list={itemListOne}
218+
location="left-bottom"
219+
onOpen={open}
220+
onClose={close1}
221+
data-testid="popoverid"
222+
/>
223+
<Button type="primary" id="popid" data-testid="popid">
224+
自定义目标元素
225+
</Button>
226+
</>
227+
)
228+
fireEvent.click(getByTestId('popid'))
229+
await waitFor(() => {
230+
expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({
231+
visibility: 'hidden',
232+
})
233+
})
231234
})

‎src/packages/popover/demo.scss‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,3 @@
1-
.demo-popover .nut-popover-content {
2-
width: 120px;
3-
}
4-
5-
.customClass {
6-
.nut-popover-content {
7-
width: auto;
8-
}
9-
10-
.self-content {
11-
width: 195px;
12-
display: flex;
13-
flex-wrap: wrap;
14-
15-
&-item {
16-
margin-top: 10px;
17-
margin-bottom: 10px;
18-
display: flex;
19-
justify-content: center;
20-
align-items: center;
21-
flex-direction: column;
22-
}
23-
24-
&-desc {
25-
margin-top: 5px;
26-
width: 60px;
27-
font-size: 10px;
28-
text-align: center;
29-
}
30-
}
31-
}
32-
331
.brickBox {
342
margin: 80px 0;
353
display: flex;
@@ -46,5 +14,4 @@
4614
.custom-color {
4715
--nutui-popover-text-color: rgb(255, 255, 255);
4816
--nutui-popover-content-background-color: rgb(255, 0, 0);
49-
--nutui-popover-border-color: rgb(255, 0, 0);
5017
}

0 commit comments

Comments
 (0)