Skip to content

Commit 4c98e84

Browse files
xiaoyatongxiaoyatong
authored
feat(calendar): add viewmode (#2985)
1 parent c5ba309 commit 4c98e84

38 files changed

+1992
-321
lines changed

‎src/locales/base.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ export interface BaseLang {
3434
start: string
3535
confirm: string
3636
title: string
37+
week: string
38+
month: string
39+
year: string
40+
quarter: string
3741
// eslint-disable-next-line @typescript-eslint/ban-types
3842
monthTitle: Function
3943
today: string

‎src/locales/en-US.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ const enUS: BaseLang = {
3434
start: 'Start',
3535
confirm: 'Confirm',
3636
title: 'Calendar',
37+
week: 'W',
38+
month: 'M',
39+
year: 'Y',
40+
quarter: 'Q',
3741
monthTitle: (year: number, month: number) =>
3842
`${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
3943
today: 'Today',

‎src/locales/id-ID.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ const idID: BaseLang = {
3434
start: 'Mulai',
3535
confirm: 'Mengonfirmasi',
3636
title: 'Kalender',
37+
week: 'Mg',
38+
month: 'Bl',
39+
year: 'Th',
40+
quarter: 'Kt',
3741
monthTitle: (year: number, month: number) =>
3842
`${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
3943
today: 'Hari ini',

‎src/locales/tr-TR.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ const trTR: BaseLang = {
4242
start: 'Başlangıç',
4343
confirm: 'Onayla',
4444
title: 'Takvim seçimi',
45+
week: 'H',
46+
month: 'A',
47+
year: 'Y',
48+
quarter: 'Ç',
4549
monthTitle: (year: number, month: number) =>
4650
`${year}/${Number(month) < 10 ? `0${Number(month)}` : month}`,
4751
today: 'Bugün',

‎src/locales/zh-CN.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
3636
start: '开始',
3737
confirm: '确认',
3838
title: '日历选择',
39+
week: '周',
40+
month: '月',
41+
year: '年',
42+
quarter: '季度',
3943
monthTitle: (year: number, month: number) =>
4044
`${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
4145
today: '今天',

‎src/locales/zh-TW.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ const zhCN: BaseLang = {
3636
start: '開始',
3737
confirm: '確認',
3838
title: '日歷選擇',
39+
week: '周',
40+
month: '月',
41+
year: '年',
42+
quarter: '季度',
3943
monthTitle: (year: number, month: number) =>
4044
`${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
4145
today: '今天',

‎src/locales/zh-UG.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ const zhUG: BaseLang = {
3434
start: 'بېشى',
3535
confirm: 'جەزملەشتۈرۈڭ',
3636
title: 'تاللاڭ',
37+
week: 'ھە',
38+
month: 'ئا',
39+
year: 'ي',
40+
quarter: 'پە',
3741
monthTitle: (year: number, month: number) =>
3842
`${year} يىلى ${Number(month) < 10 ? `0${Number(month)}` : month} ئاي`,
3943
today: 'بۈگۈن',

‎src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap‎

Lines changed: 11 additions & 3 deletions
Large diffs are not rendered by default.

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

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,10 @@ test('week prop', async () => {
6464
firstDayOfWeek={1}
6565
/>
6666
)
67-
const viewArea = container.querySelector('.viewArea') as HTMLElement
68-
// expect(viewArea.innerHTML).toMatchSnapshot()
67+
const viewArea = container.querySelector(
68+
'.nut-calendar-pannel'
69+
) as HTMLElement
70+
expect(viewArea.innerHTML).toMatchSnapshot()
6971
})
7072

7173
test('range prop', async () => {
@@ -80,8 +82,76 @@ test('range prop', async () => {
8082
firstDayOfWeek={1}
8183
/>
8284
)
83-
const viewArea = container.querySelector('.viewArea') as HTMLElement
84-
// expect(viewArea.innerHTML).toMatchSnapshot()
85+
const viewArea = container.querySelector(
86+
'.nut-calendar-pannel'
87+
) as HTMLElement
88+
expect(viewArea.innerHTML).toMatchSnapshot()
89+
})
90+
91+
test('viewmode prop', async () => {
92+
const onItemClick = vi.fn()
93+
const { container } = render(
94+
<Calendar
95+
viewMode="quarter"
96+
defaultValue="2025-Q1"
97+
startDate="2025-01-01"
98+
endDate="2025-3-31"
99+
onItemClick={onItemClick}
100+
/>
101+
)
102+
const viewArea = container.querySelector(
103+
'.nut-calendar-viewmode-pannel'
104+
) as HTMLElement
105+
expect(viewArea.innerHTML).toMatchSnapshot()
106+
})
107+
108+
test('should render calendar in quarter view with extended date range', async () => {
109+
const { container } = render(
110+
<Calendar
111+
viewMode="quarter"
112+
defaultValue="2025-Q1"
113+
startDate="2025-01-01"
114+
endDate="2027-3-31"
115+
/>
116+
)
117+
const viewArea = container.querySelector(
118+
'.nut-calendar-viewmode-pannel'
119+
) as HTMLElement
120+
expect(viewArea.innerHTML).toMatchSnapshot()
121+
})
122+
123+
test('should render calendar in month view with onItemClick', async () => {
124+
const onItemClick = vi.fn()
125+
const { container } = render(
126+
<Calendar
127+
viewMode="month"
128+
defaultValue="2025-01"
129+
startDate="2025-01-01"
130+
endDate="2025-3-31"
131+
onItemClick={onItemClick}
132+
/>
133+
)
134+
const viewArea = container.querySelector(
135+
'.nut-calendar-viewmode-pannel'
136+
) as HTMLElement
137+
expect(viewArea.innerHTML).toMatchSnapshot()
138+
})
139+
140+
test('should render calendar in month view with extended date range', async () => {
141+
const onItemClick = vi.fn()
142+
const { container } = render(
143+
<Calendar
144+
viewMode="month"
145+
defaultValue="2025-01"
146+
startDate="2025-01-01"
147+
endDate="2027-3-31"
148+
onItemClick={onItemClick}
149+
/>
150+
)
151+
const viewArea = container.querySelector(
152+
'.nut-calendar-viewmode-pannel'
153+
) as HTMLElement
154+
expect(viewArea.innerHTML).toMatchSnapshot()
85155
})
86156

87157
test('popup prop', async () => {
@@ -121,7 +191,9 @@ test('should render slot correctly', async () => {
121191
const topSlot = container.querySelector(
122192
'.nut-calendar-header-buttons'
123193
) as HTMLElement
124-
const viewArea = container.querySelector('.viewArea') as HTMLElement
194+
const viewArea = container.querySelector(
195+
'.nut-calendar-pannel'
196+
) as HTMLElement
125197
expect(topSlot.innerHTML).toContain('<div class="d_div"> 最近七天</div>')
126198
expect(viewArea.innerHTML).toMatchSnapshot()
127199
})
@@ -217,13 +289,13 @@ test('range select event when click item', () => {
217289
const start = container.querySelectorAll(
218290
'.nut-calendar-day-active .nut-calendar-day-day'
219291
)[0]
220-
expect(start.innerHTML).toBe('13')
292+
expect(start.innerHTML).toBe('10')
221293

222294
const calendarMonthDay2 = container.querySelectorAll('.nut-calendar-day')[20]
223295
fireEvent.click(calendarMonthDay2)
224296
expect(onDayClick).toBeCalled()
225297
const next = container.querySelectorAll(
226298
'.nut-calendar-day-choose .nut-calendar-day-day'
227299
)[0]
228-
expect(next.innerHTML).toBe('14')
300+
expect(next.innerHTML).toBe('11')
229301
})

‎src/packages/calendar/calendar.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../popup/popup.scss';
2+
@import './calendarviewmode.scss';
23

34
.nut-calendar {
45
position: relative;
@@ -62,6 +63,10 @@
6263
height: 36px;
6364
border-radius: 0px 0px 12px 12px;
6465
box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
66+
67+
&-shrink {
68+
padding-left: 17%;
69+
}
6570
}
6671

6772
&-week-item {
@@ -111,6 +116,22 @@
111116
margin: 8px 0;
112117
}
113118

119+
&-weeknumber {
120+
width: 35%;
121+
&-index {
122+
display: flex;
123+
align-items: center;
124+
justify-content: center;
125+
flex-direction: column;
126+
position: relative;
127+
height: $calendar-day-height;
128+
font-weight: $font-weight;
129+
font-size: $font-size-base;
130+
margin-bottom: 4px;
131+
color: $color-text-help;
132+
}
133+
}
134+
114135
&-days {
115136
overflow: hidden;
116137
}
@@ -205,6 +226,10 @@
205226
}
206227
}
207228

229+
.shrink {
230+
display: flex;
231+
}
232+
208233
// 底部导航
209234
&-footer {
210235
display: flex;

0 commit comments

Comments
 (0)