closeOnOutside优化下,去掉插件,直接写逻辑
This commit is contained in:
parent
f1c5c36fca
commit
4899cda0e6
|
@ -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"
|
||||
{
|
||||
|
|
|
@ -394,7 +394,19 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '可拉拽调整大小',
|
||||
actionType: 'drawer',
|
||||
level: 'danger',
|
||||
drawer: {
|
||||
title: '提示',
|
||||
closeOnEsc: true,
|
||||
resizable: true,
|
||||
body: '这是个简单的弹框',
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue