From da0c1e7b82b94ec334457cd85a7b6cf7890a93dd Mon Sep 17 00:00:00 2001 From: rickcole Date: Wed, 5 Jun 2019 17:26:40 +0800 Subject: [PATCH] =?UTF-8?q?closeOnOutside=E4=BC=98=E5=8C=96=E4=B8=8B?= =?UTF-8?q?=EF=BC=8C=E5=8E=BB=E6=8E=89=E6=8F=92=E4=BB=B6=EF=BC=8C=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E5=86=99=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/renderers/Drawer.md | 23 +++++++++++---------- examples/components/Dialog/Drawer.jsx | 14 ++++++++++++- package.json | 1 - src/components/Drawer.tsx | 29 +++++++++++++++------------ 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/docs/renderers/Drawer.md b/docs/renderers/Drawer.md index d3831b41..1b2810d2 100644 --- a/docs/renderers/Drawer.md +++ b/docs/renderers/Drawer.md @@ -2,17 +2,18 @@ Drawer 由 [Action](./Action.md) 触发。 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ | -| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 | -| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 | -| body | [Container](./Types.md#Container) | | 往 Dialog 内容区加内容 | -| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` | -| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 | -| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog | -| overlay | `boolean` | `true` | 是否显示蒙层 | -| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 | -| actions | Array Of [Action](./Action.md) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ | +| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 | +| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 | +| body | [Container](./Types.md#Container) | | 往 Drawer 内容区加内容 | +| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` | +| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 | +| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer | +| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer | +| overlay | `boolean` | `true` | 是否显示蒙层 | +| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 | +| actions | Array Of [Action](./Action.md) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 | ```schema:height="200" { diff --git a/examples/components/Dialog/Drawer.jsx b/examples/components/Dialog/Drawer.jsx index 7d4ba46d..632429cf 100644 --- a/examples/components/Dialog/Drawer.jsx +++ b/examples/components/Dialog/Drawer.jsx @@ -394,7 +394,19 @@ export default { } ] } - } + }, + { + type: 'button', + label: '可拉拽调整大小', + actionType: 'drawer', + level: 'danger', + drawer: { + title: '提示', + closeOnEsc: true, + resizable: true, + body: '这是个简单的弹框', + } + }, ] } ], diff --git a/package.json b/package.json index 6f36b185..6731c790 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "react-dropzone": "4.2.1", "react-input-range": "1.2.1", "react-json-tree": "0.11.0", - "react-onclickoutside": "6.7.0", "react-progress-2": "^4.4.2", "react-select": "1.2.1", "react-textarea-autosize": "5.1.0", diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx index 76898660..2908e5dd 100644 --- a/src/components/Drawer.tsx +++ b/src/components/Drawer.tsx @@ -10,10 +10,8 @@ import {Portal} from 'react-overlays'; import {closeIcon} from './icons'; import * as cx from 'classnames'; import {current, addModal, removeModal} from './ModalManager'; -import onClickOutside from 'react-onclickoutside'; -import {classPrefix, classnames} from '../themes/default'; import {ClassNamesFn, themeable} from '../theme'; -import {noop} from '../utils/helper'; +import {noop, autobind} from '../utils/helper'; type DrawerPosition = 'top' | 'right' | 'bottom' | 'left'; @@ -47,13 +45,13 @@ export class Drawer extends React.Component { DrawerProps, 'container' | 'position' | 'size' | 'overlay' | 'disableOnClickOutside' | 'enableOnClickOutside' > = { - container: document.body, - position: 'left', - size: 'md', - overlay: true, - disableOnClickOutside: noop, - enableOnClickOutside: noop, - }; + container: document.body, + position: 'left', + size: 'md', + overlay: true, + disableOnClickOutside: noop, + enableOnClickOutside: noop, + }; contentDom: any; @@ -93,8 +91,12 @@ export class Drawer extends React.Component { } }; - handleClickOutside() { - const {closeOnOutside, onHide} = this.props; + @autobind + handleWidgetClick(e: React.MouseEvent) { + const {classPrefix: ns, closeOnOutside, onHide} = this.props; + if ((e.target as HTMLElement).closest(`.${ns}Drawer-content`)) { + return; + } closeOnOutside && onHide && onHide(); } @@ -143,6 +145,7 @@ export class Drawer extends React.Component { }, className )} + onClick={this.handleWidgetClick} // 其实不需要插件，直接写逻辑吧 > {overlay ?
: null}
@@ -160,4 +163,4 @@ export class Drawer extends React.Component { } } -export default themeable(onClickOutside(Drawer)); +export default themeable(Drawer);