feat: Picker、DatePicker add maskClosable

demo/pages/CascaderPicker/index.axml

@@ -7,6 +7,8 @@
             options="{{cityList}}" 
             onPickerChange="handleCityPickerChange" 
             onOk="handleCityOnOk"
+            onDismiss="handleDismiss"
+            data-x="1"
             />
     </list-item>
 </demo-block>

demo/pages/CascaderPicker/index.js

@@ -19,4 +19,8 @@ Page({
   changeValue() {
     this.setData({ value: ["31", "310"] });
   },
+
+  handleDismiss(e) {
+    console.log('handleDismiss', e)
+  }
 });

demo/pages/DatePicker/index.axml

@@ -9,6 +9,23 @@
             value="{{defaultDate}}"
             placeholder="请选择"
             onPickerChange="handlePickerChange"
+            onTriggerPicker="handleTriggerPicker"
+            onDismiss="handleDismiss"
+            onOk="handleOk">
+        </date-picker>
+    </list-item>
+    <list-item>
+        请选择日期（点击蒙层关闭）
+        <date-picker 
+            data-value="value"
+            min="{{min}}"
+            max="{{max}}"
+            slot="extra"
+            value="{{defaultDate}}"
+            placeholder="请选择"
+            onPickerChange="handlePickerChange"
+            onTriggerPicker="handleTriggerPicker"
+            maskClosable
             onOk="handleOk">
         </date-picker>
     </list-item>
@@ -30,6 +47,7 @@
             precision="month"
             format="YYYY-MM"
             placeholder="选择"
+            onTriggerPicker="handleTriggerPicker"
             onOk="handleOk"/>
     </list-item>
     <list-item>
@@ -39,6 +57,7 @@
             precision="minute"
             format="YYYY-MM-DD HH:mm"
             placeholder="选择"
+            onTriggerPicker="handleTriggerPicker"
             onOk="handleOk"/>
     </list-item>
 </demo-block>
@@ -60,6 +79,7 @@
             placeholder="请选择"
             value="{{defaultDateRange}}"
             onPickerChange="handlePickerRangeChange"
+            onTriggerPicker="handleTriggerPicker"
             onOk="handleRangeOk">
         </range-picker>
     </list-item>

demo/pages/DatePicker/index.js

@@ -23,4 +23,11 @@ Page({
   handleChangeDate() {
     this.setData({ defaultDate: new Date('2019/05/02') });
   },
+  handleTriggerPicker(visible, e) {
+    console.log('onTriggerPicker', visible, e);
+  },
+
+  handleDismiss(e) {
+    console.log('e', e)
+  }
 });

demo/pages/Picker/index.axml

@@ -4,7 +4,8 @@
     <picker 
       slot="extra"
       data-value="test"
-      onDismiss="handleCancelPicker"
+      onDismiss="handleDismissPicker"
+      onTriggerPicker="handleTriggerPicker"
       onOk="handleOk"
       value="{{value}}"
       placeholder="请选择"
@@ -13,14 +14,31 @@
       data="{{list}}">
     </picker>
   </list-item>
+  <list-item>
+    选择城市（点击蒙层关闭）
+    <picker 
+      slot="extra"
+      data-value="test"
+      onDismiss="handleDismissPicker"
+      onTriggerPicker="handleTriggerPicker"
+      onOk="handleOk"
+      value="{{value}}"
+      placeholder="请选择"
+      title="请选择"
+      onChange="handleChange"
+      maskClosable
+      data="{{list}}">
+    </picker>
+  </list-item>
 </demo-block>
 
 <demo-block title="对象用法"  padding="0">
   <list-item>
     选择日期
     <picker 
       slot="extra"
-      onDismiss="handleCancelPicker"
+      onDismiss="handleDismissPicker"
+      onTriggerPicker="handleTriggerPicker"
       onOk="handleOk"
       placeholder="请选择"
       title="请选择"
@@ -38,6 +56,7 @@
   <picker 
     slot="extra"
     placeholder="请选择"
+    onTriggerPicker="handleTriggerPicker"
     value="{{['Tues', 'pm']}}"
     title="请选择"
     onOk="handleOk"

demo/pages/Picker/index.js

@@ -24,7 +24,7 @@ Page({
     ],
   },
 
-  handleCancelPicker(e) {
+  handleDismissPicker(e) {
     my.showToast({
       content: '取消操作，关闭 picker',
     });
@@ -43,8 +43,10 @@ Page({
     return column.map((c) => c && c.label).join('');
   },
 
-
   handleOnOk(value, column) {
     console.log('value', value, 'column', column);
   },
+  handleTriggerPicker(visible, e) {
+    console.log('onTriggerPicker', visible, e);
+  },
 });

src/CascaderPicker/index.axml

@@ -16,6 +16,7 @@
     onDismiss="onDismiss"
     onOk="onOk"
     onTriggerPicker="onTriggerPicker"
+    maskClosable="{{maskClosable}}"
     onFormat="onFormat">
     <slot name="title" slot="title"/>
 </picker>

src/CascaderPicker/index.ts

@@ -169,10 +169,10 @@ Component({
       );
     },
 
-    onDismiss() {
+    onDismiss(e) {
       const { onDismiss } = this.props;
       if (onDismiss) {
-        onDismiss(fmtEvent(this.props));
+        onDismiss(fmtEvent(this.props, e));
       }
     },
   },

src/CascaderPicker/props.d.ts

@@ -73,5 +73,10 @@ export interface ICascaderProps extends IBaseFormItemPropsWithOutFocus {
     selectedOptions: ICascaderOption[],
     e: Record<string, any>
   ) => void;
+  /**
+   * @description 点击蒙层是否可以关闭
+   * @default false
+   */
+  maskClosable?: boolean;
 }
 export declare const CascaderDefaultProps: Partial<ICascaderProps>;

src/CascaderPicker/props.js

@@ -3,6 +3,7 @@ export const CascaderDefaultProps = {
   okText: '确定',
   dismissText: '取消',
   disabled: false,
+  maskClosable: false,
   onFormat(value, options) {
     if (options) {
       return options.map((v) => v.label).join('');

src/DatePicker/index.axml

@@ -16,6 +16,7 @@
   onDismiss="onDismiss"
   onOk="onOk"
   onTriggerPicker="onTriggerPicker"
+  maskClosable="{{maskClosable}}"
   forceUpdate="{{forceUpdate}}"
   onFormat="onFormat">
   <slot name="title" slot="title"/>

src/DatePicker/index.md

@@ -27,7 +27,8 @@ toc: 'content'
 | placeholder | 提示文案 | string | '请选择' | 
 | title |  弹出框标题 | string | - |
 | okText | 确认按钮文案 | string | '确定' |
-| dismissText |  取消文案 | string | '取消' |  |
+| dismissText |  取消文案 | string | '取消' |  
+| maskClosable | 点击蒙层是否可以关闭 | boolean | false | 
 | maskStyle | 蒙层的样式 | string | - | 
 | maskClass |  蒙层的类名 | string | - |
 | indicatorStyle | 选中框样式  | string | - |
@@ -49,7 +50,8 @@ toc: 'content'
 | splitCharacter | 显示连接符 | string | '~' | 
 | title |  弹出框标题 | string | - |
 | okText | 确认按钮文案 | string | '确定' |
-| dismissText |  取消文案 | string | '取消' |  |
+| dismissText |  取消文案 | string | '取消' |  
+| maskClosable | 点击蒙层是否可以关闭 | boolean | false | 
 | maskStyle | 蒙层的样式 | string | - | 
 | maskClass |  蒙层的类名 | string | - |
 | indicatorStyle | 选中框样式  | string | - |
@@ -61,7 +63,7 @@ toc: 'content'
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
 | onOk | 点击确定按钮，触发回调 | (date: Date, dateStr: string, dateArr:number[], event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
-| onDismiss | 点击取消按钮，触发回调 | (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
+| onDismiss | 点击取消按钮/蒙层，触发回调 | (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
 | onPickerChange | 选中项发生变化，触发回调 | (date: Date, dateStr: string, dateArr:number[], event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
 | onFormat | 选中值的文本显示格式 | (date: Date, dateStr: string, dateArr:number[]) => string |
 | onTriggerPicker | 弹出框显示/隐藏状态变化触发 | (visible: boolean, (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
@@ -70,7 +72,7 @@ toc: 'content'
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
 | onOk | 点击确定按钮，触发回调 | (date: [Date,Date], dateStr: [string,string], dateArr:[number[],number[]], event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
-| onDismiss | 点击取消按钮，触发回调 | (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
+| onDismiss | 点击取消按钮/蒙层，触发回调 | (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
 | onPickerChange | 选中项发生变化，触发回调 | (type: 'start'\|'end', date: Date, dateStr: string, dateArr:number[], event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |
 | onFormat | 选中值的文本显示格式 | (date: [Date,Date], dateStr: [string,string], dateArr:[number[],number[]]) => string |
 | onTriggerPicker | 弹出框显示/隐藏状态变化触发 | (visible: boolean, (event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void |

src/DatePicker/index.ts

@@ -65,7 +65,7 @@ Component({
         }
       }
     },
-  
+
     // 判断value是否有效
     getValidPropValue() {
       const { min, max, value } = this.props;
@@ -79,7 +79,7 @@ Component({
       }
       return cValue;
     },
-  
+
     getMin() {
       const { min } = this.props;
       //@ts-ignore
@@ -98,20 +98,23 @@ Component({
       const currentValue = this.getCurrentValueWithCValue();
       const newColumns = this.generateData(currentValue);
       if (!equal(newColumns, this.data.columns)) {
-        this.setData({
-          columns: newColumns
-        }, () => {
-          this.setData({
-            currentValue
-          })
-        })
+        this.setData(
+          {
+            columns: newColumns,
+          },
+          () => {
+            this.setData({
+              currentValue,
+            });
+          }
+        );
       } else {
         this.setData({
-          currentValue
-        })
+          currentValue,
+        });
       }
     },
-  
+
     // 生成选项数据，didmound、picker change、打开弹窗触发
     generateData(currentValue) {
       const { precision } = this.props;
@@ -131,7 +134,6 @@ Component({
       return newColumns;
     },
 
-
     onChange(selectedIndex) {
       selectedIndex = getValidValue(selectedIndex);
       const { onPickerChange, format, precision } = this.props;
@@ -148,28 +150,41 @@ Component({
       }
       const newColumns = this.generateData(selectedIndex);
       if (!equal(newColumns, this.data.columns)) {
-        this.setData({
-          columns: newColumns
-        }, () => {
-          this.setData({ currentValue: selectedIndex });
-          if (onPickerChange) {
-            const date = getDateByValue(selectedIndex);
-            onPickerChange(date, dayjs(date).format(format), selectedIndex, fmtEvent(this.props));
+        this.setData(
+          {
+            columns: newColumns,
+          },
+          () => {
+            this.setData({ currentValue: selectedIndex });
+            if (onPickerChange) {
+              const date = getDateByValue(selectedIndex);
+              onPickerChange(
+                date,
+                dayjs(date).format(format),
+                selectedIndex,
+                fmtEvent(this.props)
+              );
+            }
           }
-        })
+        );
       } else {
         this.setData({ currentValue: selectedIndex });
         if (onPickerChange) {
           const date = getDateByValue(selectedIndex);
-          onPickerChange(date, dayjs(date).format(format), selectedIndex, fmtEvent(this.props));
+          onPickerChange(
+            date,
+            dayjs(date).format(format),
+            selectedIndex,
+            fmtEvent(this.props)
+          );
         }
       }
     },
 
-    onDismiss() {
+    onDismiss(e) {
       const { onDismiss } = this.props;
       if (onDismiss) {
-        onDismiss(fmtEvent(this.props));
+        onDismiss(fmtEvent(this.props, e));
       }
     },
 

src/DatePicker/props.d.ts

@@ -84,5 +84,10 @@ export interface IDatePickerProps extends IBaseFormItemPropsWithOutFocus {
    * @description 切换显示隐藏
    */
   onTriggerPicker?: (visible, e: Record<string, any>) => void;
+  /**
+   * @description 点击蒙层是否可以关闭
+   * @default false
+   */
+  maskClosable?: boolean;
 }
 export declare const DatePickerDefaultProps: Partial<IDatePickerProps>;

src/DatePicker/props.js

@@ -3,6 +3,7 @@ import { PickerDefaultProps } from '../Picker/props';
 export const DatePickerDefaultProps = {
   ...PickerDefaultProps,
   format: 'YYYY/MM/DD',
+  maskClosable: false,
   onFormat(value, valueStr) {
     if (this.props.format && valueStr) {
       return valueStr;

src/Picker/index.axml

@@ -15,6 +15,8 @@
 <popup
   className="amd-picker-popup {{popClassName}}"
   position="bottom"
+  maskClosable
+  onClose="onMaskDismiss"
   visible="{{visible}}">
   <view class="amd-picker-header">
     <view class="amd-picker-header-item amd-picker-header-cancel"