feat(Calendar): add show-subtitle prop (#5779)

src/calendar/README.md

@@ -249,6 +249,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | round | Whether to show round corner | *boolean* | `true` |
 | show-mark | Whether to show background month mark | *boolean* | `true` |
 | show-title `v2.5.5` | Whether to show title | *boolean* | `true` |
+| show-subtitle `v2.5.5` | Whether to show subtitle | *boolean* | `true` |
 | show-confirm | Whether to show confirm button | *boolean* | `true` |
 | close-on-popstate `v2.4.4` | Whether to close when popstate | *boolean* | `false` |
 | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |

src/calendar/README.zh-CN.md

@@ -251,6 +251,7 @@ export default {
 | round | 是否显示圆角弹窗 | *boolean* | `true` |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` |
 | show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` |
+| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | *boolean* | `true` |
 | show-confirm | 是否展示确认按钮 | *boolean* | `true` |
 | close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |

src/calendar/components/Header.js

@@ -6,22 +6,23 @@ const [createComponent] = createNamespace('calendar-header');
 export default createComponent({
   props: {
     title: String,
+    subtitle: String,
     showTitle: Boolean,
-    monthTitle: String,
+    showSubtitle: Boolean,
   },
 
   methods: {
     genTitle() {
-      if (!this.showTitle) {
+      if (this.showTitle) {
-        return;
+        const title = this.slots('title') || this.title || t('title');
+        return <div class={bem('header-title')}>{title}</div>;
       }
-
-      const title = this.slots('title') || this.title || t('title');
-      return <div class={bem('header-title')}>{title}</div>;
     },
 
-    genMonth() {
+    genSubtitle() {
-      return <div class={bem('month-title')}>{this.monthTitle}</div>;
+      if (this.showSubtitle) {
+        return <div class={bem('header-subtitle')}>{this.subtitle}</div>;
+      }
     },
 
     genWeekDays() {
@@ -41,7 +42,7 @@ export default createComponent({
     return (
       <div class={bem('header')}>
         {this.genTitle()}
-        {this.genMonth()}
+        {this.genSubtitle()}
         {this.genWeekDays()}
       </div>
     );

src/calendar/index.js

@@ -77,6 +77,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    showSubtitle: {
+      type: Boolean,
+      default: true,
+    },
     safeAreaInsetBottom: {
       type: Boolean,
       default: true,
@@ -93,7 +97,7 @@ export default createComponent({
 
   data() {
     return {
-      monthTitle: '',
+      subtitle: '',
       currentDate: this.getInitialDate(),
     };
   },
@@ -239,7 +243,7 @@ export default createComponent({
 
       /* istanbul ignore else */
       if (currentMonth) {
-        this.monthTitle = currentMonth.title;
+        this.subtitle = currentMonth.title;
       }
     },
 
@@ -389,7 +393,8 @@ export default createComponent({
           <Header
             title={this.title}
             showTitle={this.showTitle}
-            monthTitle={this.monthTitle}
+            subtitle={this.subtitle}
+            showSubtitle={this.showSubtitle}
             scopedSlots={{
               title: () => this.slots('title'),
             }}
@@ -410,11 +415,11 @@ export default createComponent({
       return (
         <Popup
           round
-          closeable
           class={bem('popup')}
           value={this.value}
           round={this.round}
           position={this.position}
+          closeable={this.showTitle || this.showSubtitle}
           getContainer={this.getContainer}
           closeOnPopstate={this.closeOnPopstate}
           closeOnClickOverlay={this.closeOnClickOverlay}

src/calendar/index.less

@@ -27,8 +27,9 @@
     box-shadow: @calendar-header-box-shadow;
   }
 
+  &__month-title,
   &__header-title,
-  &__month-title {
+  &__header-subtitle {
     height: @calendar-header-title-height;
     font-weight: @font-weight-bold;
     line-height: @calendar-header-title-height;
@@ -39,6 +40,10 @@
     font-size: @calendar-header-title-font-size;
   }
 
+  &__header-subtitle {
+    font-size: @calendar-header-subtitle-font-size;
+  }
+
   &__month-title {
     font-size: @calendar-month-title-font-size;
   }

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -56,7 +56,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-calendar" style="height: 500px;">
       <div class="van-calendar__header">
         <div class="van-calendar__header-title">日历</div>
-        <div class="van-calendar__month-title">2012年1月</div>
+        <div class="van-calendar__header-subtitle">2012年1月</div>
         <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
       </div>
       <div class="van-calendar__body">

src/calendar/test/__snapshots__/index.spec.js.snap

@@ -4,7 +4,7 @@ exports[`color prop when type is range 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">日期选择</div>
-    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__header-subtitle">2010年1月</div>
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
@@ -55,7 +55,7 @@ exports[`color prop when type is single 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">日期选择</div>
-    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__header-subtitle">2010年1月</div>
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
@@ -106,7 +106,7 @@ exports[`formatter prop 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">日期选择</div>
-    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__header-subtitle">2010年1月</div>
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
@@ -163,7 +163,7 @@ exports[`popup wrapper 2`] = `
   <div class="van-calendar">
     <div class="van-calendar__header">
       <div class="van-calendar__header-title">日期选择</div>
-      <div class="van-calendar__month-title">2010年1月</div>
+      <div class="van-calendar__header-subtitle">2010年1月</div>
       <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
     </div>
     <div class="van-calendar__body">
@@ -216,7 +216,7 @@ exports[`row-height prop 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">日期选择</div>
-    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__header-subtitle">2010年1月</div>
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">
@@ -267,7 +267,7 @@ exports[`title & footer slot 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">
     <div class="van-calendar__header-title">Custom Title</div>
-    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__header-subtitle">2010年1月</div>
     <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
   </div>
   <div class="van-calendar__body">

src/calendar/test/prop.spec.js

@@ -25,15 +25,42 @@ test('max-range prop', async () => {
   expect(wrapper.emitted('confirm')).toBeFalsy();
 });
 
-test('show-title prop', async () => {
+test('show-title prop', () => {
   const wrapper = mount(Calendar, {
     propsData: {
       value: true,
     },
   });
 
-  await later();
   expect(wrapper.contains('.van-calendar__header-title')).toBeTruthy();
   wrapper.setProps({ showTitle: false });
   expect(wrapper.contains('.van-calendar__header-title')).toBeFalsy();
 });
+
+test('show-subtitle prop', () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-calendar__header-subtitle')).toBeTruthy();
+  wrapper.setProps({ showSubtitle: false });
+  expect(wrapper.contains('.van-calendar__header-subtitle')).toBeFalsy();
+});
+
+test('hide close icon when there is no title', () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-popup__close-icon')).toBeTruthy();
+
+  wrapper.setProps({
+    showTitle: false,
+    showSubtitle: false,
+  });
+  expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy();
+});

src/style/var.less

@@ -142,6 +142,7 @@
 @calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
 @calendar-header-title-height: 44px;
 @calendar-header-title-font-size: @font-size-lg;
+@calendar-header-subtitle-font-size: @font-size-md;
 @calendar-weekdays-height: 30px;
 @calendar-weekdays-font-size: @font-size-sm;
 @calendar-month-title-font-size: @font-size-md;