feat(modal): 新增可控的 overlay 点击关闭属性 close #166

jd-opensource · Nov 13, 2018 · aa64d57 · aa64d57
1 parent 8cb53c3
commit aa64d57
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 25 deletions.
diff --git a/@types/modal.d.ts b/@types/modal.d.ts
@@ -1,7 +1,7 @@
-import { MouseEvent, ComponentClass } from 'react'
-import { BaseEventFunction } from '@tarojs/components/types/common'
+import { MouseEvent, ComponentClass } from "react"
+import { BaseEventFunction } from "@tarojs/components/types/common"
 
-import AtComponent from './base'
+import AtComponent from "./base"
 
 export interface AtModalProps extends AtComponent {
   title?: string
@@ -10,6 +10,8 @@ export interface AtModalProps extends AtComponent {
 
   content?: string
 
+  closeOnClickOverlay?: boolean
+
   cancelText?: string
 
   confirmText?: string

diff --git a/docs/markdown/modal.md b/docs/markdown/modal.md
@@ -26,14 +26,11 @@ import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
 <AtModal isOpened>
   <AtModalHeader>标题</AtModalHeader>
   <AtModalContent>
-      这里是正文内容，欢迎加入京东凹凸实验室
-      这里是正文内容，欢迎加入京东凹凸实验室
-      这里是正文内容，欢迎加入京东凹凸实验室
+    这里是正文内容，欢迎加入京东凹凸实验室
+    这里是正文内容，欢迎加入京东凹凸实验室
+    这里是正文内容，欢迎加入京东凹凸实验室
   </AtModalContent>
-  <AtModalAction>
-    <Button>取消</Button>
-    <Button>确定</Button>
-  </AtModalAction>
+  <AtModalAction> <button>取消</button> <button>确定</button> </AtModalAction>
 </AtModal>
 ```
 
@@ -60,12 +57,13 @@ import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
 
 ## AtModal 参数
 
-| 参数        | 说明           | 类型   | 可选值 | 默认值 |
-| ----------- | -------------- | ------ | ------ | ------ |
-| title       | 元素的标题     | String | -      | -      |
-| content     | 元素的内容     | String | -      | -      |
-| cancelText  | 取消按钮的文本 | String | -      | -      |
-| confirmText | 确认按钮的文本 | String | -      | -      |
+| 参数                | 说明                       | 类型    | 可选值 | 默认值  |
+| ------------------- | -------------------------- | ------- | ------ | ------- |
+| title               | 元素的标题                 | String  | -      | -       |
+| content             | 元素的内容                 | String  | -      | -       |
+| cancelText          | 取消按钮的文本             | String  | -      | -       |
+| closeOnClickOverlay | 点击浮层的时候时候自动关闭 | Boolean | -      | `true` |
+| confirmText         | 确认按钮的文本             | String  | -      | -       |
 
 ## AtModal 事件
 

diff --git a/src/components/modal/index.js b/src/components/modal/index.js
@@ -31,13 +31,15 @@ export default class AtModal extends AtComponent {
     }
   }
 
-  close = () => {
-    this.setState(
-      {
-        _isOpened: false
-      },
-      this.handleClose
-    )
+  handleClickOverlay = () => {
+    if (this.props.closeOnClickOverlay) {
+      this.setState(
+        {
+          _isOpened: false
+        },
+        this.handleClose
+      )
+    }
   }
 
   handleClose = () => {
@@ -78,7 +80,10 @@ export default class AtModal extends AtComponent {
       const isRenderAction = cancelText || confirmText
       return (
         <View className={rootClass} onTouchMove={this.handleTouchMove}>
-          <View onClick={this.close} className='at-modal__overlay' />
+          <View
+            onClick={this.handleClickOverlay}
+            className='at-modal__overlay'
+          />
           <View className='at-modal__container'>
             {title && (
               <AtModalHeader>
@@ -109,19 +114,24 @@ export default class AtModal extends AtComponent {
 
     return (
       <View onTouchMove={this.handleTouchMove} className={rootClass}>
-        <View className='at-modal__overlay' onClick={this.close} />
+        <View className='at-modal__overlay' onClick={this.handleClickOverlay} />
         <View className='at-modal__container'>{this.props.children}</View>
       </View>
     )
   }
 }
 
+AtModal.defaultProps = {
+  closeOnClickOverlay: true
+}
+
 AtModal.propTypes = {
   title: PropTypes.string,
   isOpened: PropTypes.bool,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func,
   content: PropTypes.string,
+  closeOnClickOverlay: PropTypes.bool,
   cancelText: PropTypes.string,
   confirmText: PropTypes.string
 }
diff --git a/src/components/modal/index.test.js b/src/components/modal/index.test.js
@@ -134,4 +134,32 @@ describe('Modal Behavior ', () => {
       expect(component.state._isOpened).toBeFalsy()
     })
   })
+
+  it('Modal onClose will not be called', () => {
+    const onClose = jest.fn()
+
+    const component = renderIntoDocument(
+      <AtModal
+        isOpened
+        title='标题'
+        cancelText='取消'
+        closeOnClickOverlay={false}
+        confirmText='确认'
+        onClose={onClose}
+        content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
+      />
+    )
+    const componentDom = findDOMNode(component, 'at-modal')
+
+    const overlayDom = componentDom.querySelector('.at-modal__overlay')
+
+    expect(component.state._isOpened).toBeTruthy()
+
+    Simulate.click(overlayDom)
+
+    process.nextTick(() => {
+      expect(onClose).not.toBeCalled()
+      expect(component.state._isOpened).toBeTruthy()
+    })
+  })
 })