closeOnOutside优化下,去掉插件,直接写逻辑

This commit is contained in:
rickcole 2019-06-05 17:26:40 +08:00
parent f1c5c36fca
commit 4899cda0e6
4 changed files with 41 additions and 26 deletions

View File

@ -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"
{

View File

@ -394,7 +394,19 @@ export default {
}
]
}
}
},
{
type: 'button',
label: '可拉拽调整大小',
actionType: 'drawer',
level: 'danger',
drawer: {
title: '提示',
closeOnEsc: true,
resizable: true,
body: '这是个简单的弹框',
}
},
]
}
],

View File

@ -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",

View File

@ -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, DrawerState> {
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<DrawerProps, DrawerState> {
}
};
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<DrawerProps, DrawerState> {
},
className
)}
onClick={this.handleWidgetClick} // 其实不需要插件,直接写逻辑吧
>
{overlay ? <div className={cx(`${ns}Drawer-overlay`, fadeStyles[status])} /> : null}
<div ref={this.contentRef} className={cx(`${ns}Drawer-content`, fadeStyles[status])}>
@ -160,4 +163,4 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
}
}
export default themeable(onClickOutside(Drawer));
export default themeable(Drawer);