From 0a3ed531873bd76cd14ff643b7a7e0e468b2bbd7 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 17 Mar 2020 19:37:12 +0800 Subject: [PATCH] feat(Calendar): add allow-same-day prop (#5688) --- src/calendar/README.md | 1 + src/calendar/README.zh-CN.md | 1 + src/calendar/components/Month.js | 29 ++++++++++++++++++----------- src/calendar/index.js | 4 ++++ src/calendar/index.less | 2 ++ src/calendar/test/index.spec.js | 6 +++++- src/calendar/test/prop.spec.js | 30 ++++++++++++++++++++++++++++++ src/locale/lang/en-US.ts | 1 + src/locale/lang/es-ES.ts | 3 ++- src/locale/lang/tr-TR.ts | 1 + src/locale/lang/zh-CN.ts | 1 + src/locale/lang/zh-HK.ts | 1 + src/locale/lang/zh-TW.ts | 1 + 13 files changed, 68 insertions(+), 13 deletions(-) diff --git a/src/calendar/README.md b/src/calendar/README.md index f05556bdf..28e4defd3 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -273,6 +273,7 @@ Following props are supported when the type is range |------|------|------|------| | max-range `v2.4.3` | Number of selectable days | *number \| string* | - | | range-prompt `v2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` | +| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | *boolean* | `fasle` | ### Data Structure of Day diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 959e111ce..14504c0be 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -275,6 +275,7 @@ export default { |------|------|------|------| | max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - | | range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` | +| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | *boolean* | `fasle` | ### Day 数据结构 diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 05d6ad792..c38573fb0 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -23,6 +23,7 @@ export default createComponent({ rowHeight: [Number, String], formatter: Function, currentDate: [Date, Array], + allowSameDay: Boolean, showSubtitle: Boolean, showMonthTitle: Boolean, }, @@ -125,19 +126,25 @@ export default createComponent({ const [startDay, endDay] = this.currentDate; if (!startDay) { - return; + return ''; } const compareToStart = compareDay(day, startDay); + + if (!endDay) { + return compareToStart === 0 ? 'start' : ''; + } + + const compareToEnd = compareDay(day, endDay); + + if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) { + return 'start-end'; + } + if (compareToStart === 0) { return 'start'; } - if (!endDay) { - return; - } - - const compareToEnd = compareDay(day, endDay); if (compareToEnd === 0) { return 'end'; } @@ -170,11 +177,11 @@ export default createComponent({ getBottomInfo(type) { if (this.type === 'range') { - if (type === 'start') { - return t('start'); + if (type === 'start' || type === 'end') { + return t(type); } - if (type === 'end') { - return t('end'); + if (type === 'start-end') { + return t('startEnd'); } } }, @@ -254,7 +261,7 @@ export default createComponent({ role="gridcell" style={style} class={[bem('day'), item.className]} - tabindex={disabled ? null : -1} + tabindex={-1} onClick={onClick} >
diff --git a/src/calendar/index.js b/src/calendar/index.js index 468da160b..7f271d7aa 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -30,6 +30,7 @@ export default createComponent({ rangePrompt: String, defaultDate: [Date, Array], getContainer: [String, Function], + allowSameDay: Boolean, closeOnPopstate: Boolean, confirmDisabledText: String, type: { @@ -261,6 +262,8 @@ export default createComponent({ this.select([startDay, date], true); } else if (compareToStart === -1) { this.select([date, null]); + } else if (this.allowSameDay) { + this.select([date, date]); } } else { this.select([date, null]); @@ -342,6 +345,7 @@ export default createComponent({ rowHeight={this.rowHeight} currentDate={this.currentDate} showSubtitle={this.showSubtitle} + allowSameDay={this.allowSameDay} showMonthTitle={showMonthTitle} onClick={this.onClickDay} /> diff --git a/src/calendar/index.less b/src/calendar/index.less index 800f81b94..ca67a4c1f 100644 --- a/src/calendar/index.less +++ b/src/calendar/index.less @@ -100,6 +100,7 @@ &--end, &--start, + &--start-end, &--multiple-middle, &--multiple-selected { color: @calendar-range-edge-color; @@ -114,6 +115,7 @@ border-radius: 0 @border-radius-md @border-radius-md 0; } + &--start-end, &--multiple-selected { border-radius: @border-radius-md; } diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js index 765574a09..49d97e6de 100644 --- a/src/calendar/test/index.spec.js +++ b/src/calendar/test/index.spec.js @@ -82,6 +82,7 @@ test('select event when type is multiple', async () => { const days = wrapper.findAll('.van-calendar__day'); days.at(15).trigger('click'); days.at(16).trigger('click'); + days.at(17).trigger('click'); await later(); days.at(15).trigger('click'); @@ -93,7 +94,10 @@ test('select event when type is multiple', async () => { '2010/1/10,2010/1/16,2010/1/17' ); expect(formatMultiple(emittedSelect[2][0])).toEqual( - '2010/1/10,2010/1/17,2010/1/13' + '2010/1/10,2010/1/16,2010/1/17,2010/1/18' + ); + expect(formatMultiple(emittedSelect[3][0])).toEqual( + '2010/1/10,2010/1/17,2010/1/18,2010/1/13' ); }); diff --git a/src/calendar/test/prop.spec.js b/src/calendar/test/prop.spec.js index 91797c59d..8bbf7d801 100644 --- a/src/calendar/test/prop.spec.js +++ b/src/calendar/test/prop.spec.js @@ -64,3 +64,33 @@ test('hide close icon when there is no title', () => { }); expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy(); }); + +test('allow-same-day prop', async () => { + const select = jest.fn(); + const wrapper = mount(Calendar, { + propsData: { + type: 'range', + minDate, + maxDate, + poppable: false, + }, + listeners: { + select, + }, + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(9).trigger('click'); + days.at(9).trigger('click'); + + expect(select).toHaveBeenLastCalledWith([minDate, null]); + + wrapper.setProps({ + allowSameDay: true, + }); + + days.at(9).trigger('click'); + expect(select).toHaveBeenLastCalledWith([minDate, minDate]); +}); diff --git a/src/locale/lang/en-US.ts b/src/locale/lang/en-US.ts index 49010945a..99268eae0 100644 --- a/src/locale/lang/en-US.ts +++ b/src/locale/lang/en-US.ts @@ -16,6 +16,7 @@ export default { end: 'End', start: 'Start', title: 'Calendar', + startEnd: 'Start/End', weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], monthTitle: (year: number, month: number) => `${year}/${month}`, rangePrompt: (maxRange: number) => `Choose no more than ${maxRange} days`, diff --git a/src/locale/lang/es-ES.ts b/src/locale/lang/es-ES.ts index 5521e969a..85dc38d7f 100644 --- a/src/locale/lang/es-ES.ts +++ b/src/locale/lang/es-ES.ts @@ -14,8 +14,9 @@ export default { telInvalid: 'Teléfono inválido', vanCalendar: { end: 'Fin', - start: 'Comienzo', + start: 'Inicio', title: 'Calendario', + startEnd: 'Inicio/Fin', weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'], monthTitle: (year: number, month: number) => `${year}/${month}`, rangePrompt: (maxRange: number) => `Elija no más de ${maxRange} días`, diff --git a/src/locale/lang/tr-TR.ts b/src/locale/lang/tr-TR.ts index aad4bde69..76218b8fa 100644 --- a/src/locale/lang/tr-TR.ts +++ b/src/locale/lang/tr-TR.ts @@ -16,6 +16,7 @@ export default { end: 'Son', start: 'Başlat', title: 'Takvim', + startEnd: 'Başlat/Son', weekdays: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'], monthTitle: (year: number, month: number) => `${year}/${month}`, rangePrompt: (maxRange: number) => `En fazla ${maxRange} gün seçin`, diff --git a/src/locale/lang/zh-CN.ts b/src/locale/lang/zh-CN.ts index a6aa2c12b..c9010ff82 100644 --- a/src/locale/lang/zh-CN.ts +++ b/src/locale/lang/zh-CN.ts @@ -17,6 +17,7 @@ export default { start: '开始', title: '日期选择', confirm: '确定', + startEnd: '开始/结束', weekdays: ['日', '一', '二', '三', '四', '五', '六'], monthTitle: (year: number, month: number) => `${year}年${month}月`, rangePrompt: (maxRange: number) => `选择天数不能超过 ${maxRange} 天`, diff --git a/src/locale/lang/zh-HK.ts b/src/locale/lang/zh-HK.ts index 78d912fa1..3d567b08f 100644 --- a/src/locale/lang/zh-HK.ts +++ b/src/locale/lang/zh-HK.ts @@ -17,6 +17,7 @@ export default { start: '開始', title: '日期選擇', confirm: '確定', + startEnd: '開始/結束', weekdays: ['日', '壹', '二', '三', '四', '五', '六'], monthTitle: (year: number, month: number) => `${year}年${month}月`, rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`, diff --git a/src/locale/lang/zh-TW.ts b/src/locale/lang/zh-TW.ts index 2992dba8b..aecda17ec 100644 --- a/src/locale/lang/zh-TW.ts +++ b/src/locale/lang/zh-TW.ts @@ -17,6 +17,7 @@ export default { start: '開始', title: '日期選擇', confirm: '確定', + startEnd: '開始/結束', weekdays: ['日', '壹', '二', '三', '四', '五', '六'], monthTitle: (year: number, month: number) => `${year}年${month}月`, rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,