feat(modal): 新增 modal 遮罩层可被点击取消

jd-opensource · Oct 18, 2018 · 0de416f · 0de416f
1 parent 35311a0
commit 0de416f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 18 deletions.
diff --git a/@types/modal.d.ts b/@types/modal.d.ts
@@ -3,9 +3,9 @@ import { BaseEventFunction } from '@tarojs/components/types/common'
 
 import AtComponent from './base'
 
-export interface AtModalProps extends AtComponent{
+export interface AtModalProps extends AtComponent {
   title?: string
-  
+
   isOpened: boolean
 
   content?: string
@@ -14,6 +14,8 @@ export interface AtModalProps extends AtComponent{
 
   confirmText?: string
 
+  onClose?: BaseEventFunction
+
   onCancel?: BaseEventFunction
 
   onConfirm?: BaseEventFunction

diff --git a/docs/markdown/modal.md b/docs/markdown/modal.md
@@ -49,6 +49,7 @@ import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
   title='标题'
   cancelText='取消'
   confirmText='确认'
+  onClose={ this.handleClose }
   onCancel={ this.handleCancel }
   onConfirm={ this.handleConfirm }
   content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
@@ -59,18 +60,17 @@ import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
 
 ## AtModal 参数
 
-| 参数        | 说明                   | 类型     | 可选值 | 默认值 |
-| ----------- | ---------------------- | -------- | ------ | ------ |
-| title       | 元素的标题             | String   | -      | -      |
-| content     | 元素的内容             | String   | -      | -      |
-| cancelText  | 取消按钮的文本         | String   | -      | -      |
-| confirmText | 确认按钮的文本         | String   | -      | -      |
-| onCancel    | 点击取消按钮触发的样式 | Function | -      | -      |
-| onConfirm   | 点击确认按钮触发的事件 | Function | -      | -      |
+| 参数        | 说明           | 类型   | 可选值 | 默认值 |
+| ----------- | -------------- | ------ | ------ | ------ |
+| title       | 元素的标题     | String | -      | -      |
+| content     | 元素的内容     | String | -      | -      |
+| cancelText  | 取消按钮的文本 | String | -      | -      |
+| confirmText | 确认按钮的文本 | String | -      | -      |
 
 ## AtModal 事件
 
 | 事件名称  | 说明                   | 返回参数 |
 | --------- | ---------------------- | -------- |
+| onClose   | 触发关闭时的事件       | -        |
 | onCancel  | 点击取消按钮触发的样式 | -        |
 | onConfirm | 点击确认按钮触发的事件 | -        |
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
@@ -3,6 +3,7 @@ import { View, Button, Text } from '@tarojs/components'
 
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import _isFunction from 'lodash/isFunction'
 
 import AtModalHeader from './header/index'
 import AtModalAction from './action/index'
@@ -30,6 +31,33 @@ export default class AtModal extends AtComponent {
     }
   }
 
+  close = () => {
+    this.setState(
+      {
+        _isOpened: false
+      },
+      this.handleClose
+    )
+  }
+
+  handleClose = () => {
+    if (_isFunction(this.props.onClose)) {
+      this.props.onClose()
+    }
+  }
+
+  handleCancel = () => {
+    if (_isFunction(this.props.onCancel)) {
+      this.props.onCancel()
+    }
+  }
+
+  handleConfirm = () => {
+    if (_isFunction(this.props.onConfirm)) {
+      this.props.onConfirm()
+    }
+  }
+
   handleTouchMove = e => {
     e.stopPropagation()
   }
@@ -50,7 +78,7 @@ export default class AtModal extends AtComponent {
       const isRenderAction = cancelText || confirmText
       return (
         <View className={rootClass} onTouchMove={this.handleTouchMove}>
-          <View className='at-modal__overlay' />
+          <View onClick={this.close} className='at-modal__overlay' />
           <View className='at-modal__container'>
             {title && (
               <AtModalHeader>
@@ -67,10 +95,10 @@ export default class AtModal extends AtComponent {
             {isRenderAction && (
               <AtModalAction isSimple>
                 {cancelText && (
-                  <Button onClick={this.props.onCancel}>{cancelText}</Button>
+                  <Button onClick={this.handleCancel}>{cancelText}</Button>
                 )}
                 {confirmText && (
-                  <Button onClick={this.props.onConfirm}>{confirmText}</Button>
+                  <Button onClick={this.handleConfirm}>{confirmText}</Button>
                 )}
               </AtModalAction>
             )}
@@ -80,11 +108,8 @@ export default class AtModal extends AtComponent {
     }
 
     return (
-      <View
-        onTouchMove={this.handleTouchMove}
-        className={this.getClassName(rootClass, this.props.className)}
-      >
-        <View className='at-modal__overlay' />
+      <View onTouchMove={this.handleTouchMove} className={rootClass}>
+        <View className='at-modal__overlay' onClick={this.close} />
         <View className='at-modal__container'>{this.props.children}</View>
       </View>
     )

diff --git a/src/components/modal/index.test.js b/src/components/modal/index.test.js
@@ -97,13 +97,15 @@ describe('Modal Behavior ', () => {
   it('Modal onClose & onCancel & onClick', () => {
     const onCancel = jest.fn()
     const onConfirm = jest.fn()
+    const onClose = jest.fn()
 
     const component = renderIntoDocument(
       <AtModal
         isOpened
         title='标题'
         cancelText='取消'
         confirmText='确认'
+        onClose={onClose}
         onCancel={onCancel}
         onConfirm={onConfirm}
         content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
@@ -117,11 +119,19 @@ describe('Modal Behavior ', () => {
     const confirmDom = componentDom.querySelector(
       '.at-modal-footer__action button:last-child'
     )
+    const overlayDom = componentDom.querySelector('.at-modal__overlay')
 
     Simulate.click(cancelDom)
     expect(onCancel).toBeCalled()
 
     Simulate.click(confirmDom)
     expect(onConfirm).toBeCalled()
+
+    expect(component.state._isOpened).toBeTruthy()
+    Simulate.click(overlayDom)
+    process.nextTick(() => {
+      expect(onClose).toBeCalled()
+      expect(component.state._isOpened).toBeFalsy()
+    })
   })
 })