vant icon indicating copy to clipboard operation
vant copied to clipboard

fix(Calendar): fix the issue where disabled dates can be selected und…

Open pany-ang opened this issue 1 year ago • 5 comments

switch-modenone 时不存在该问题。

当为 monthyear-month 时,如果用户选择的「开始日期」和「结束日期」中间包含了「禁用日期」,那么该范围依旧能被选中,预期是无论如何都不能选中「禁用日期」

该 PR 保证了 nonemonthyear-month 三个模式下 UI 行为是一致的。

pany-ang avatar Aug 22 '24 07:08 pany-ang

Codecov Report

Attention: Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 89.68%. Comparing base (eef8e0b) to head (90cbfd1). Report is 2 commits behind head on main.

Files Patch % Lines
packages/vant/src/calendar/Calendar.tsx 50.00% 0 Missing and 1 partial :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13080      +/-   ##
==========================================
+ Coverage   89.66%   89.68%   +0.01%     
==========================================
  Files         257      257              
  Lines        6987     6988       +1     
  Branches     1724     1725       +1     
==========================================
+ Hits         6265     6267       +2     
  Misses        382      382              
+ Partials      340      339       -1     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov-commenter avatar Aug 22 '24 07:08 codecov-commenter

感谢 PR,因为切换和非切换的实现原理不同,当 switch-mode 不为 none 时,从底层实现上来看,我们已经做不到选择的时间范围内不包含「禁用日期」,基于这个 PR 改动,用户在切换月份后,仍可以轻松地绕开这一限制。

平铺的模式下会渲染所有的月份,所以可以获取对应的数据,但代价是增加了性能开销,这也是我们引入 switch-mode 的原因。因为交互相似,参考了其它组件库的 RangePicker 组件对于这个场景的处理,它们确保起始和结束日期不能为「禁用日期」,现在的交互也是如此。考虑到不同 switch-mode 的交互和真实的适用场景不同,部分功能有所差异是可以接受的。

如果你有更好的实现方案,也可以在此讨论。

inottn avatar Aug 24 '24 13:08 inottn

用户在切换月份后,仍可以轻松地绕开这一限制

嗯对,该 PR 只解决了用户在当前显示月份进行范围选择时不能选中禁用日期的问题。

我想的话,好像可以用一个顶层 map 来缓存一下已经渲染过的月份的禁用日期,并且 onPanelChange 每次切换月份时,都去更新一下该 map 中对应月份的数据。

然后我们用该 map 来限制用户不能选中禁用日期即可。

const disabledDaysCache = ref<{ [key: string]: CalendarDayItem[] }>({});

pany-ang avatar Aug 27 '24 10:08 pany-ang

用户在切换月份后,仍可以轻松地绕开这一限制

嗯对,该 PR 只解决了用户在当前显示月份进行范围选择时不能选中禁用日期的问题。

我想的话,好像可以用一个顶层 map 来缓存一下已经渲染过的月份的禁用日期,并且 onPanelChange 每次切换月份时,都去更新一下该 map 中对应月份的数据。

然后我们用该 map 来限制用户不能选中禁用日期即可。

const disabledDaysCache = ref<{ [key: string]: CalendarDayItem[] }>({});

用户应该可以通过切换年,再切换月绕开这一限制 🤔

inottn avatar Aug 27 '24 10:08 inottn

😱

pany-ang avatar Aug 27 '24 10:08 pany-ang