feat(DateTimePicker): support auto-close props (#3263)

* feat(DateTimePicker): support auto-close props

* feat(DateTimePicker): update demo

* test: update snapshots

Author: anlyyao

src/date-time-picker/README.en-US.md

@@ -8,6 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+auto-close | Boolean | false | \- | N
 cancel-btn | String | 取消 | \- | N
 confirm-btn | String | - | \- | N
 custom-locale | String | zh | \- | N

src/date-time-picker/README.md

@@ -62,6 +62,7 @@ isComponent: true
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+auto-close | Boolean | false | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
 cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 custom-locale | String | zh |  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N

src/date-time-picker/__test__/__snapshots__/demo.test.js.snap

@@ -177,6 +177,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
     bind:tap="showPicker"
   />
   <t-date-time-picker
+    autoClose="{{true}}"
     defaultValue="{{1640217600000}}"
     end="2030-09-09 12:12:12"
     filter="{{[Function]}}"
@@ -192,6 +193,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
     visible="{{false}}"
     bind:cancel="hidePicker"
     bind:change="onConfirm"
+    bind:close="handleClose"
     bind:pick="onColumnChange"
   />
 </year-month-date>

src/date-time-picker/_example/year-month-date/index.js

@@ -25,12 +25,11 @@ Page({
       [`${mode}Visible`]: true,
     });
   },
-  hidePicker() {
-    const { mode } = this.data;
-    this.setData({
-      [`${mode}Visible`]: false,
-    });
+
+  handleClose(e) {
+    console.log('handleClose:', e);
   },
+
   onConfirm(e) {
     const { value } = e.detail;
     const { mode } = this.data;
@@ -41,8 +40,6 @@ Page({
       [mode]: value,
       [`${mode}Text`]: value,
     });
-
-    this.hidePicker();
   },
 
   onColumnChange(e) {

src/date-time-picker/_example/year-month-date/index.wxml

@@ -11,10 +11,11 @@
 
 <!-- 年月日 -->
 <t-date-time-picker
+  auto-close
   title="选择日期"
   visible="{{dateVisible}}"
   mode="date"
-  defaultValue="{{date}}"
+  default-value="{{date}}"
   format="YYYY-MM-DD"
   start="{{start}}"
   end="{{end}}"
@@ -23,4 +24,5 @@
   bindchange="onConfirm"
   bindpick="onColumnChange"
   bindcancel="hidePicker"
+  bindclose="handleClose"
 />

src/date-time-picker/date-time-picker.wxml

@@ -4,17 +4,18 @@
   class="class {{prefix}}-class {{classPrefix}}"
   visible="{{visible}}"
   value="{{columnsValue}}"
+  header="{{header}}"
+  title="{{title}}"
+  auto-close="{{autoClose}}"
+  confirm-btn="{{confirmBtn || locale.confirm}}"
+  cancel-btn="{{cancelBtn || locale.cancel}}"
+  use-popup="{{usePopup}}"
+  popup-props="{{ popupProps }}"
   bind:pick="onColumnChange"
   bind:change="onConfirm"
   bind:cancel="onCancel"
   bind:visible-change="onVisibleChange"
   bind:close="onClose"
-  header="{{header}}"
-  title="{{title}}"
-  confirmBtn="{{confirmBtn || locale.confirm}}"
-  cancelBtn="{{cancelBtn || locale.cancel}}"
-  usePopup="{{usePopup}}"
-  popupProps="{{ popupProps }}"
 >
   <slot slot="header" name="header" />
   <t-picker-item

src/date-time-picker/props.ts

@@ -6,6 +6,11 @@
 
 import { TdDateTimePickerProps } from './type';
 const props: TdDateTimePickerProps = {
+  /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    value: false,
+  },
   /** 取消按钮文字 */
   cancelBtn: {
     type: String,

src/date-time-picker/type.ts

@@ -7,6 +7,14 @@
 import { PopupProps } from '../popup/index';
 
 export interface TdDateTimePickerProps {
+  /**
+   * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+   * @default false
+   */
+  autoClose?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 取消按钮文字
    * @default 取消