tdesign-common
tdesign-common copied to clipboard
feat(calendar): add function to support setting start or end of range separately
🤔 这个 PR 的性质是?
- [ ] 日常 bug 修复
- [x] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [x] 测试用例
- [ ] 分支合并
- [ ] 其他
🔗 相关 Issue
- Tencent/tdesign-vue-next#6125
- https://github.com/Tencent/tdesign-vue-next/pull/6211
💡 需求背景和解决方案
单独设置日历范围上/下限本质上为完善对range参数传入值的数据处理,即处理以下情况:
- 传入非列表值/传入列表值少于两项/传入列表值的两项均非日期格式
- 传入列表值的两项中有一项符合日期格式,另一项不符合
- 传入列表值的两项均符合日期格式
以上核心在于判断列表值的两项是否符合日期格式,故首先增加了一个日期格式校验逻辑
// js\calendar\utils.ts L21~35
const parseRangeBoundary = (
value: CalendarRange['from'] | CalendarRange['to'] | null | undefined
) => {
if (value === undefined || value === null) {
return null;
}
const parsed = dayjs(value);
if (!parsed.isValid()) {
return null;
}
return {
parsed, // dayjs 对象
original: value as CalendarRange['from'] | CalendarRange['to'], // 原始值
};
};
然后在解构出列表值的两项后先进行日期格式校验即可直接处理第一种情况。
// js\calendar\utils.ts L41~42
const start = parseRangeBoundary(v1);
const end = parseRangeBoundary(v2);
随后添加fallback逻辑,当出现第二种情况时,为空缺的另外一侧边界填充内置值;若为第三种情况则保持原逻辑不变
// js\calendar\utils.ts L49~72
const fallback = (
edge: 'from' | 'to'
): { parsed: dayjs.Dayjs; original: string } => {
let fallbackParsed = dayjs(MIN_YEAR);
if (edge === 'to') {
fallbackParsed = createDefaultCurDate();
}
return {
parsed: fallbackParsed,
original: fallbackParsed.format('YYYY-MM-DD'),
};
};
let fromBoundary = start ?? fallback('from');
let toBoundary = end ?? fallback('to');
if (fromBoundary.parsed.isAfter(toBoundary.parsed)) {
[fromBoundary, toBoundary] = [toBoundary, fromBoundary]; // 当前一项日期大于后一项时交换两值以确保边界逻辑正确
}
return {
from: fromBoundary.original,
to: toBoundary.original,
};
📝 更新日志
-
feat(calendar): 新增
calendar组件的公用类型和公用常量 -
feat(calendar): 新增
range参数处理函数以支持单独设置日历范围上限或下限 -
test(calendar): 新增
createDefaultCurDate和handleRange的测试案例并提升覆盖率至100% -
[ ] 本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供