feat(calendar): support auto-close property and close event

src/calendar/README.en-US.md

@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+auto-close | Boolean | true | `0.34.0` | N
 confirm-btn | String / Object / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
 custom-style | String | - | `0.25.0` | N
 first-day-of-week | Number | 0 | \- | N
@@ -23,5 +24,6 @@ visible | Boolean | false | \- | N
 name | params | description
 -- | -- | --
 change | `(value: timestamp)` | `0.28.0`
+close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: timestamp)` | \-
 select | `(value: timestamp)` | `0.28.0`

src/calendar/README.md

@@ -57,6 +57,7 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+auto-close | Boolean | true | `0.34.0`。自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
 confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts) | N
 custom-style | String | - | `0.25.0`。自定义组件样式 | N
 first-day-of-week | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
@@ -75,5 +76,6 @@ visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 |
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
+close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: timestamp)` | 点击确认按钮时触发
 select | `(value: timestamp)` | `0.28.0`。点击日期时触发

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

@@ -4,6 +4,7 @@ exports[`Calendar Calendar base demo works fine 1`] = `
 <base>
   <t-calendar
     visible="{{false}}"
+    bind:close="onClose"
     bind:confirm="handleConfirm"
   />
   <t-cell

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

@@ -4,7 +4,7 @@ exports[`calendar :base 1`] = `
 <main>
   <t-calendar>
     <t-popup
-      bind:visible-change="handleClose"
+      bind:visible-change="onVisibleChange"
     >
       <wx-view
         ariaModal="{{true}}"

src/calendar/_example/base/index.js

@@ -16,8 +16,10 @@ Component({
 
       this.setData({
         note: format(value),
-        visible: false,
       });
     },
+    onClose({ detail }) {
+      console.log(detail.trigger);
+    },
   },
 });

src/calendar/_example/base/index.wxml

@@ -1,2 +1,2 @@
-<t-calendar visible="{{visible}}" bind:confirm="handleConfirm" />
+<t-calendar visible="{{visible}}" bind:confirm="handleConfirm" bind:close="onClose" />
 <t-cell arrow title="单个选择日历" bind:tap="handleCalendar" note="{{note}}" />

src/calendar/_example/custom-button/index.wxss

@@ -1,3 +0,0 @@
-page {
-  --td-cell-note-font-size: 20rpx;
-}

src/calendar/_example/custom-range/index.js

@@ -12,7 +12,7 @@ Component({
     handleConfirm(e) {
       const { value } = e.detail;
 
-      this.setData({ value, visible: false });
+      this.setData({ value });
       console.log(value);
     },
   },

src/calendar/_example/multiple/index.js

@@ -7,7 +7,6 @@ Component({
       this.setData({ visible: true });
     },
     handleConfirm(e) {
-      this.setData({ visible: false });
       console.log(e.detail.value);
     },
   },

src/calendar/_example/range/index.js

@@ -7,7 +7,6 @@ Component({
       this.setData({ visible: true });
     },
     handleConfirm(e) {
-      this.setData({ visible: false });
       console.log(e.detail.value);
     },
   },

src/calendar/calendar.ts

@@ -122,8 +122,17 @@ export default class Calendar extends SuperComponent {
         months,
       });
     },
+    close(trigger) {
+      if (this.data.autoClose) {
+        this.setData({ visible: false });
+      }
+      this.triggerEvent('close', { trigger });
+    },
+    onVisibleChange() {
+      this.close('overlay');
+    },
     handleClose() {
-      this.setData({ visible: false });
+      this.close('close-btn');
     },
     handleSelect(e) {
       const { date, year, month } = e.currentTarget.dataset;
@@ -148,6 +157,7 @@ export default class Calendar extends SuperComponent {
       const rawValue = this.base.getTrimValue();
       const value = this.toTime(rawValue);
 
+      this.close('confirm-btn');
       this._trigger('confirm', { value });
     },
     toTime(val) {

src/calendar/calendar.wxml

@@ -1,7 +1,7 @@
 <wxs src="./calendar.wxs" module="this" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="handleClose" placement="bottom">
+<t-popup wx:if="{{usePopup}}" visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom">
   <include src="./template.wxml" />
 </t-popup>
 <include wx:else src="./template.wxml" />

src/calendar/props.ts

@@ -6,6 +6,11 @@
 
 import { TdCalendarProps } from './type';
 const props: TdCalendarProps = {
+  /** 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    value: true,
+  },
   /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。 */
   confirmBtn: {
     type: null,

src/calendar/type.ts

@@ -7,6 +7,14 @@
 import { ButtonProps } from '../button/index';
 
 export interface TdCalendarProps {
+  /**
+   * 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。
    * @default ''