Skip to content

Commit dd0b0b2

Browse files
tangjinzhoutangjinzhou
committed
feat: date-picker support vshow, close #5132 
1 parent 98755f3 commit dd0b0b2

File tree

26 files changed

+2122
-463
lines changed

26 files changed

+2122
-463
lines changed

‎components/_util/Portal.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import {
66
onBeforeUnmount,
77
onUpdated,
88
Teleport,
9+
watch,
910
} from 'vue';
11+
import { useInjectPortal } from '../vc-trigger/context';
1012

1113
export default defineComponent({
1214
name: 'Portal',
@@ -19,13 +21,26 @@ export default defineComponent({
1921
let isSSR = true;
2022
// getContainer 不会改变，不用响应式
2123
let container: HTMLElement;
24+
const { shouldRender } = useInjectPortal();
2225
onBeforeMount(() => {
2326
isSSR = false;
24-
container = props.getContainer();
27+
if (shouldRender.value) {
28+
container = props.getContainer();
29+
}
30+
});
31+
const stopWatch = watch(shouldRender, () => {
32+
if (shouldRender.value && !container) {
33+
container = props.getContainer();
34+
}
35+
if (container) {
36+
stopWatch();
37+
}
2538
});
2639
onUpdated(() => {
2740
nextTick(() => {
28-
props.didUpdate?.(props);
41+
if (shouldRender.value) {
42+
props.didUpdate?.(props);
43+
}
2944
});
3045
});
3146
onBeforeUnmount(() => {
@@ -34,6 +49,7 @@ export default defineComponent({
3449
}
3550
});
3651
return () => {
52+
if (!shouldRender.value) return null;
3753
if (isSSR) {
3854
return slots.default?.();
3955
}

‎components/date-picker/__tests__/DatePicker.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
44
import MockDate from 'mockdate';
55
import DatePicker from '..';
66
import focusTest from '../../../tests/shared/focusTest';
7-
7+
jest.mock('../../_util/Portal');
88
describe('DatePicker', () => {
99
focusTest(DatePicker);
1010

‎components/date-picker/__tests__/QuarterPicker.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DatePicker from '..';
33
import focusTest from '../../../tests/shared/focusTest';
44

55
const { QuarterPicker } = DatePicker;
6-
6+
jest.mock('../../_util/Portal');
77
describe('QuarterPicker', () => {
88
focusTest(QuarterPicker);
99
fit('reset select item when popup close', async () => {

‎components/date-picker/__tests__/RangePicker.test.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,9 @@ describe('RangePicker', () => {
6464
});
6565
});
6666

67-
it('customize separator', () => {
67+
fit('customize separator', async () => {
6868
const wrapper = mount(RangePicker, { props: { separator: 'test' } });
69+
await sleep();
6970
expect(wrapper.html()).toMatchSnapshot();
7071
});
7172
});

‎components/date-picker/__tests__/WeekPicker.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DatePicker from '..';
44
import focusTest from '../../../tests/shared/focusTest';
55

66
const { WeekPicker } = DatePicker;
7-
7+
jest.mock('../../_util/Portal');
88
describe('WeekPicker', () => {
99
focusTest(WeekPicker);
1010

‎components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

+173-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,180 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`DatePicker prop locale should works 1`] = `
4-
<!--teleport start-->
5-
<!--teleport end-->
64
<div class="ant-picker">
75
<div class="ant-picker-input"><input readonly="" placeholder="Избери дата" title="2000-01-01" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
6+
<div>
7+
<!---->
8+
<div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
9+
<div class="ant-picker-panel-container">
10+
<div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
11+
<div class="ant-picker-date-panel">
12+
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-prev-btn"><span class="ant-picker-prev-icon"></span></button>
13+
<div class="ant-picker-header-view"><button type="button" tabindex="-1" class="ant-picker-month-btn">Jan</button><button type="button" tabindex="-1" class="ant-picker-year-btn">2000</button></div><button type="button" tabindex="-1" class="ant-picker-header-next-btn"><span class="ant-picker-next-icon"></span></button><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
14+
</div>
15+
<div class="ant-picker-body">
16+
<table class="ant-picker-content">
17+
<thead>
18+
<tr>
19+
<th>Su</th>
20+
<th>Mo</th>
21+
<th>Tu</th>
22+
<th>We</th>
23+
<th>Th</th>
24+
<th>Fr</th>
25+
<th>Sa</th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
<tr>
30+
<td title="1999-12-26" class="ant-picker-cell">
31+
<div class="ant-picker-cell-inner">26</div>
32+
</td>
33+
<td title="1999-12-27" class="ant-picker-cell">
34+
<div class="ant-picker-cell-inner">27</div>
35+
</td>
36+
<td title="1999-12-28" class="ant-picker-cell">
37+
<div class="ant-picker-cell-inner">28</div>
38+
</td>
39+
<td title="1999-12-29" class="ant-picker-cell">
40+
<div class="ant-picker-cell-inner">29</div>
41+
</td>
42+
<td title="1999-12-30" class="ant-picker-cell">
43+
<div class="ant-picker-cell-inner">30</div>
44+
</td>
45+
<td title="1999-12-31" class="ant-picker-cell ant-picker-cell-end">
46+
<div class="ant-picker-cell-inner">31</div>
47+
</td>
48+
<td title="2000-01-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view ant-picker-cell-selected">
49+
<div class="ant-picker-cell-inner">1</div>
50+
</td>
51+
</tr>
52+
<tr>
53+
<td title="2000-01-02" class="ant-picker-cell ant-picker-cell-in-view">
54+
<div class="ant-picker-cell-inner">2</div>
55+
</td>
56+
<td title="2000-01-03" class="ant-picker-cell ant-picker-cell-in-view">
57+
<div class="ant-picker-cell-inner">3</div>
58+
</td>
59+
<td title="2000-01-04" class="ant-picker-cell ant-picker-cell-in-view">
60+
<div class="ant-picker-cell-inner">4</div>
61+
</td>
62+
<td title="2000-01-05" class="ant-picker-cell ant-picker-cell-in-view">
63+
<div class="ant-picker-cell-inner">5</div>
64+
</td>
65+
<td title="2000-01-06" class="ant-picker-cell ant-picker-cell-in-view">
66+
<div class="ant-picker-cell-inner">6</div>
67+
</td>
68+
<td title="2000-01-07" class="ant-picker-cell ant-picker-cell-in-view">
69+
<div class="ant-picker-cell-inner">7</div>
70+
</td>
71+
<td title="2000-01-08" class="ant-picker-cell ant-picker-cell-in-view">
72+
<div class="ant-picker-cell-inner">8</div>
73+
</td>
74+
</tr>
75+
<tr>
76+
<td title="2000-01-09" class="ant-picker-cell ant-picker-cell-in-view">
77+
<div class="ant-picker-cell-inner">9</div>
78+
</td>
79+
<td title="2000-01-10" class="ant-picker-cell ant-picker-cell-in-view">
80+
<div class="ant-picker-cell-inner">10</div>
81+
</td>
82+
<td title="2000-01-11" class="ant-picker-cell ant-picker-cell-in-view">
83+
<div class="ant-picker-cell-inner">11</div>
84+
</td>
85+
<td title="2000-01-12" class="ant-picker-cell ant-picker-cell-in-view">
86+
<div class="ant-picker-cell-inner">12</div>
87+
</td>
88+
<td title="2000-01-13" class="ant-picker-cell ant-picker-cell-in-view">
89+
<div class="ant-picker-cell-inner">13</div>
90+
</td>
91+
<td title="2000-01-14" class="ant-picker-cell ant-picker-cell-in-view">
92+
<div class="ant-picker-cell-inner">14</div>
93+
</td>
94+
<td title="2000-01-15" class="ant-picker-cell ant-picker-cell-in-view">
95+
<div class="ant-picker-cell-inner">15</div>
96+
</td>
97+
</tr>
98+
<tr>
99+
<td title="2000-01-16" class="ant-picker-cell ant-picker-cell-in-view">
100+
<div class="ant-picker-cell-inner">16</div>
101+
</td>
102+
<td title="2000-01-17" class="ant-picker-cell ant-picker-cell-in-view">
103+
<div class="ant-picker-cell-inner">17</div>
104+
</td>
105+
<td title="2000-01-18" class="ant-picker-cell ant-picker-cell-in-view">
106+
<div class="ant-picker-cell-inner">18</div>
107+
</td>
108+
<td title="2000-01-19" class="ant-picker-cell ant-picker-cell-in-view">
109+
<div class="ant-picker-cell-inner">19</div>
110+
</td>
111+
<td title="2000-01-20" class="ant-picker-cell ant-picker-cell-in-view">
112+
<div class="ant-picker-cell-inner">20</div>
113+
</td>
114+
<td title="2000-01-21" class="ant-picker-cell ant-picker-cell-in-view">
115+
<div class="ant-picker-cell-inner">21</div>
116+
</td>
117+
<td title="2000-01-22" class="ant-picker-cell ant-picker-cell-in-view">
118+
<div class="ant-picker-cell-inner">22</div>
119+
</td>
120+
</tr>
121+
<tr>
122+
<td title="2000-01-23" class="ant-picker-cell ant-picker-cell-in-view">
123+
<div class="ant-picker-cell-inner">23</div>
124+
</td>
125+
<td title="2000-01-24" class="ant-picker-cell ant-picker-cell-in-view">
126+
<div class="ant-picker-cell-inner">24</div>
127+
</td>
128+
<td title="2000-01-25" class="ant-picker-cell ant-picker-cell-in-view">
129+
<div class="ant-picker-cell-inner">25</div>
130+
</td>
131+
<td title="2000-01-26" class="ant-picker-cell ant-picker-cell-in-view">
132+
<div class="ant-picker-cell-inner">26</div>
133+
</td>
134+
<td title="2000-01-27" class="ant-picker-cell ant-picker-cell-in-view">
135+
<div class="ant-picker-cell-inner">27</div>
136+
</td>
137+
<td title="2000-01-28" class="ant-picker-cell ant-picker-cell-in-view">
138+
<div class="ant-picker-cell-inner">28</div>
139+
</td>
140+
<td title="2000-01-29" class="ant-picker-cell ant-picker-cell-in-view">
141+
<div class="ant-picker-cell-inner">29</div>
142+
</td>
143+
</tr>
144+
<tr>
145+
<td title="2000-01-30" class="ant-picker-cell ant-picker-cell-in-view">
146+
<div class="ant-picker-cell-inner">30</div>
147+
</td>
148+
<td title="2000-01-31" class="ant-picker-cell ant-picker-cell-in-view">
149+
<div class="ant-picker-cell-inner">31</div>
150+
</td>
151+
<td title="2000-02-01" class="ant-picker-cell ant-picker-cell-start">
152+
<div class="ant-picker-cell-inner">1</div>
153+
</td>
154+
<td title="2000-02-02" class="ant-picker-cell">
155+
<div class="ant-picker-cell-inner">2</div>
156+
</td>
157+
<td title="2000-02-03" class="ant-picker-cell">
158+
<div class="ant-picker-cell-inner">3</div>
159+
</td>
160+
<td title="2000-02-04" class="ant-picker-cell">
161+
<div class="ant-picker-cell-inner">4</div>
162+
</td>
163+
<td title="2000-02-05" class="ant-picker-cell">
164+
<div class="ant-picker-cell-inner">5</div>
165+
</td>
166+
</tr>
167+
</tbody>
168+
</table>
169+
</div>
170+
</div>
171+
<div class="ant-picker-footer">
172+
<!---->
173+
<!----><a class="ant-picker-today-btn">Днес</a>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
8179
</div>
9180
`;

‎components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap

+38
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,43 @@ exports[`QuarterPicker reset select item when popup close 1`] = `
55
<div class="ant-picker-input"><input readonly="" placeholder="Select quarter" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span>
66
<!---->
77
</div>
8+
<div>
9+
<!---->
10+
<div class="ant-picker-dropdown" style="pointer-events: none; display: none;">
11+
<div class="ant-picker-panel-container">
12+
<div tabindex="-1" class="ant-picker-panel ant-picker-panel-focused">
13+
<div class="ant-picker-quarter-panel">
14+
<div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button>
15+
<!---->
16+
<div class="ant-picker-header-view"><button type="button" class="ant-picker-year-btn">2022</button></div>
17+
<!----><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
18+
</div>
19+
<div class="ant-picker-body">
20+
<table class="ant-picker-content">
21+
<!---->
22+
<tbody>
23+
<tr>
24+
<td title="2022-Q1" class="ant-picker-cell ant-picker-cell-in-view">
25+
<div class="ant-picker-cell-inner">Q1</div>
26+
</td>
27+
<td title="2022-Q2" class="ant-picker-cell ant-picker-cell-in-view">
28+
<div class="ant-picker-cell-inner">Q2</div>
29+
</td>
30+
<td title="2022-Q3" class="ant-picker-cell ant-picker-cell-in-view">
31+
<div class="ant-picker-cell-inner">Q3</div>
32+
</td>
33+
<td title="2022-Q4" class="ant-picker-cell ant-picker-cell-in-view">
34+
<div class="ant-picker-cell-inner">Q4</div>
35+
</td>
36+
</tr>
37+
</tbody>
38+
</table>
39+
</div>
40+
</div>
41+
<!---->
42+
</div>
43+
</div>
44+
</div>
45+
</div>
846
</div>
947
`;

0 commit comments

Comments
 (0)