Skip to content

Commit 93424d5

Browse files
Nero978uyarn
Nero978
and
uyarn
authored
fix(Image): add font style to error/loading message (#2383)
* fix(Image): add font style to error message * chore: fix font size * chore: revert change * chore: fix lint --------- Co-authored-by: wū yāng <uyarnchen@gmail.com>
1 parent d6fd7d5 commit 93424d5

File tree

3 files changed

+52
-56
lines changed

3 files changed

+52
-56
lines changed

‎js/calendar/utils.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,9 @@ export const createDefaultCurDate = (): dayjs.Dayjs => dayjs(dayjs().format('YYY
1414
* @param range 用于设置日历的年月份显示范围，[范围开始，范围结束]
1515
* @returns 处理完成的日历范围
1616
*/
17-
export const handleRange = (
18-
range?: Array<CalendarValue>
19-
): { from: CalendarValue; to: CalendarValue } | null => {
17+
export const handleRange = (range?: Array<CalendarValue>): { from: CalendarValue; to: CalendarValue } | null => {
2018
// 检查范围边界
21-
const parseRangeBoundary = (
22-
value: CalendarRange['from'] | CalendarRange['to'] | null | undefined
23-
) => {
19+
const parseRangeBoundary = (value: CalendarRange['from'] | CalendarRange['to'] | null | undefined) => {
2420
if (value === undefined || value === null) {
2521
return null;
2622
}
@@ -46,9 +42,7 @@ export const handleRange = (
4642
}
4743

4844
// 未指定边界上/下限时使用默认值
49-
const fallback = (
50-
edge: 'from' | 'to'
51-
): { parsed: dayjs.Dayjs; original: string } => {
45+
const fallback = (edge: 'from' | 'to'): { parsed: dayjs.Dayjs; original: string } => {
5246
let fallbackParsed = dayjs(MIN_YEAR);
5347
if (edge === 'to') {
5448
fallbackParsed = createDefaultCurDate();

‎style/web/components/image/_index.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,8 @@
167167
&__error {
168168
.center();
169169

170+
font-size: 0.3em;
171+
line-height: 1.5;
170172
z-index: calc(@image-placeholder-z-index + 1);
171173
}
172174

‎test/unit/calendar/utils.test.js‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,103 @@
1-
import { describe, it, expect } from "vitest";
2-
import dayjs from "dayjs";
3-
import { createDefaultCurDate, handleRange } from "../../../js/calendar/utils";
1+
import { describe, it, expect } from 'vitest';
2+
import dayjs from 'dayjs';
3+
import { createDefaultCurDate, handleRange } from '../../../js/calendar/utils';
44

5-
describe("utils", () => {
6-
describe("createDefaultCurDate", () => {
7-
it("返回当前日期的dayjs对象且日期格式为YYYY-MM-DD", () => {
5+
describe('utils', () => {
6+
describe('createDefaultCurDate', () => {
7+
it('返回当前日期的dayjs对象且日期格式为YYYY-MM-DD', () => {
88
const result = createDefaultCurDate();
99
expect(result).toBeDefined();
1010
expect(result.isValid()).toBe(true);
11-
const formatted = result.format("YYYY-MM-DD");
12-
const expected = dayjs().format("YYYY-MM-DD");
11+
const formatted = result.format('YYYY-MM-DD');
12+
const expected = dayjs().format('YYYY-MM-DD');
1313
expect(formatted).toBe(expected);
1414
});
1515
});
1616

17-
describe("handleRange", () => {
17+
describe('handleRange', () => {
1818
// 场景1: 传入非列表值/传入列表值少于两项/传入列表值的两项均非日期格式
19-
it("传入 undefined 返回 null", () => {
19+
it('传入 undefined 返回 null', () => {
2020
const result = handleRange(undefined);
2121
expect(result).toBeNull();
2222
});
2323

24-
it("传入 null 返回 null", () => {
24+
it('传入 null 返回 null', () => {
2525
const result = handleRange(null);
2626
expect(result).toBeNull();
2727
});
2828

29-
it("传入非列表值返回 null", () => {
30-
const result = handleRange("not-a-array");
29+
it('传入非列表值返回 null', () => {
30+
const result = handleRange('not-a-array');
3131
expect(result).toBeNull();
3232
});
3333

34-
it("传入长度小于2的列表返回 null", () => {
34+
it('传入长度小于2的列表返回 null', () => {
3535
expect(handleRange([])).toBeNull();
36-
expect(handleRange(["2024-01-15"])).toBeNull();
36+
expect(handleRange(['2024-01-15'])).toBeNull();
3737
});
3838

39-
it("传入长度为2且两项均非日期格式的列表返回 null", () => {
39+
it('传入长度为2且两项均非日期格式的列表返回 null', () => {
4040
expect(handleRange([null, undefined])).toBeNull();
41-
expect(handleRange(["abc", "not-a-date"])).toBeNull();
41+
expect(handleRange(['abc', 'not-a-date'])).toBeNull();
4242
});
4343

4444
// 场景2: 传入列表值的两项中有一项符合日期格式，另一项不符合
45-
it("传入第一项为非日期格式且第二项为日期的列表，第一项使用默认值处理", () => {
46-
const result = handleRange(["abc", "2024-01-15"]);
45+
it('传入第一项为非日期格式且第二项为日期的列表，第一项使用默认值处理', () => {
46+
const result = handleRange(['abc', '2024-01-15']);
4747
expect(result).not.toBeNull();
48-
expect(result.from).toBe("1970-01-01");
49-
expect(result.to).toBe("2024-01-15");
48+
expect(result.from).toBe('1970-01-01');
49+
expect(result.to).toBe('2024-01-15');
5050
});
5151

52-
it("传入第一项为日期且第二项为非日期格式的列表，第二项使用默认值处理", () => {
53-
const result = handleRange(["2024-01-15", "not-a-date"]);
54-
const today = dayjs().format("YYYY-MM-DD");
52+
it('传入第一项为日期且第二项为非日期格式的列表，第二项使用默认值处理', () => {
53+
const result = handleRange(['2024-01-15', 'not-a-date']);
54+
const today = dayjs().format('YYYY-MM-DD');
5555
expect(result).not.toBeNull();
56-
expect(result.from).toBe("2024-01-15");
56+
expect(result.from).toBe('2024-01-15');
5757
expect(result.to).toBe(today);
5858
});
5959

6060
// 场景3: 传入列表值的两项均符合日期格式
61-
it("传入两项均为日期列表且第一项日期早于第二项日期，原样返回", () => {
62-
const result = handleRange(["2024-01-15", "2024-12-31"]);
61+
it('传入两项均为日期列表且第一项日期早于第二项日期，原样返回', () => {
62+
const result = handleRange(['2024-01-15', '2024-12-31']);
6363
expect(result).not.toBeNull();
64-
expect(result.from).toBe("2024-01-15");
65-
expect(result.to).toBe("2024-12-31");
64+
expect(result.from).toBe('2024-01-15');
65+
expect(result.to).toBe('2024-12-31');
6666
});
6767

68-
it("传入两项均为日期列表且第一项日期不早于第二项日期，交换两项后返回", () => {
69-
const result = handleRange(["2024-12-31", "2024-01-15"]);
68+
it('传入两项均为日期列表且第一项日期不早于第二项日期，交换两项后返回', () => {
69+
const result = handleRange(['2024-12-31', '2024-01-15']);
7070
expect(result).not.toBeNull();
71-
expect(result.from).toBe("2024-01-15");
72-
expect(result.to).toBe("2024-12-31");
71+
expect(result.from).toBe('2024-01-15');
72+
expect(result.to).toBe('2024-12-31');
7373
});
7474

75-
it("处理传入两项为Date格式的列表", () => {
76-
const date1 = new Date("2024-01-15");
77-
const date2 = new Date("2024-12-31");
75+
it('处理传入两项为Date格式的列表', () => {
76+
const date1 = new Date('2024-01-15');
77+
const date2 = new Date('2024-12-31');
7878
const result = handleRange([date1, date2]);
7979
expect(result).not.toBeNull();
8080
expect(result.from).toBeInstanceOf(Date);
8181
expect(result.to).toBeInstanceOf(Date);
82-
expect(result.from.getTime()).toBe(new Date("2024-01-15").getTime());
83-
expect(result.to.getTime()).toBe(new Date("2024-12-31").getTime());
82+
expect(result.from.getTime()).toBe(new Date('2024-01-15').getTime());
83+
expect(result.to.getTime()).toBe(new Date('2024-12-31').getTime());
8484
});
8585

86-
it("处理传入一项字符串格式日期另一项为Date格式的列表", () => {
87-
const date1 = new Date("2024-01-15");
88-
const result = handleRange([date1, "2024-12-31"]);
86+
it('处理传入一项字符串格式日期另一项为Date格式的列表', () => {
87+
const date1 = new Date('2024-01-15');
88+
const result = handleRange([date1, '2024-12-31']);
8989
expect(result).not.toBeNull();
9090
// Date object is returned as-is, string is returned as string
9191
expect(result.from).toBeInstanceOf(Date);
92-
expect(result.to).toBe("2024-12-31");
93-
expect(result.from.getTime()).toBe(new Date("2024-01-15").getTime());
92+
expect(result.to).toBe('2024-12-31');
93+
expect(result.from.getTime()).toBe(new Date('2024-01-15').getTime());
9494
});
9595

96-
it("传入两项均为日期且处于同一天的列表，原样返回", () => {
97-
const result = handleRange(["2024-01-15", "2024-01-15"]);
96+
it('传入两项均为日期且处于同一天的列表，原样返回', () => {
97+
const result = handleRange(['2024-01-15', '2024-01-15']);
9898
expect(result).not.toBeNull();
99-
expect(result.from).toBe("2024-01-15");
100-
expect(result.to).toBe("2024-01-15");
99+
expect(result.from).toBe('2024-01-15');
100+
expect(result.to).toBe('2024-01-15');
101101
});
102102
});
103103
});

0 commit comments

Comments
 (0)