diff --git a/docs/drawer/demo/basic.md b/docs/drawer/demo/basic.md index c5cf4f7a2c..2519f5280c 100644 --- a/docs/drawer/demo/basic.md +++ b/docs/drawer/demo/basic.md @@ -14,7 +14,7 @@ First drawer --- ````jsx -import { Radio, Button, Drawer } from '@alifd/next'; +import { Button, Drawer } from '@alifd/next'; class Demo extends React.Component { state = { @@ -28,7 +28,7 @@ class Demo extends React.Component { }; onClose = (reason, e) => { - console.log(reason, e); + console.log('onClose: ', reason, e); this.setState({ visible: false }); @@ -42,7 +42,6 @@ class Demo extends React.Component { title="标题" placement="right" visible={this.state.visible} - closeable onClose={this.onClose}> Start your business here by searching a popular product diff --git a/docs/drawer/demo/select.md b/docs/drawer/demo/select.md index 3012da3681..c7ece8258b 100644 --- a/docs/drawer/demo/select.md +++ b/docs/drawer/demo/select.md @@ -1,13 +1,13 @@ # 抽屉式选择 -- order: 1 +- order: 3 将 Select 的弹出模式换成 Drawer :::lang=en-us # Drawer Select -- order: 1 +- order: 3 Select width drawer ::: diff --git a/src/drawer/drawer.jsx b/src/drawer/drawer.jsx index 2e5077ea75..ac063da08f 100644 --- a/src/drawer/drawer.jsx +++ b/src/drawer/drawer.jsx @@ -20,6 +20,7 @@ export default class Drawer extends Component { prefix: PropTypes.string, pure: PropTypes.bool, rtl: PropTypes.bool, + // 不建议使用trigger trigger: PropTypes.element, triggerType: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), /** @@ -30,14 +31,6 @@ export default class Drawer extends Component { * 高度,仅在 placement是 top bottom 的时候生效 */ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * 是否显示 - */ - visible: PropTypes.bool, - /** - * 是否显示遮罩 - */ - hasMask: PropTypes.bool, /** * 控制对话框关闭的方式,值可以为字符串或者布尔值,其中字符串是由以下值组成: * **close** 表示点击关闭按钮可以关闭对话框 @@ -63,10 +56,18 @@ export default class Drawer extends Component { */ title: PropTypes.node, /** - * 弹层显示或隐藏时触发的回调 - * @param {Boolean} visible 弹层是否显示 - * @param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发; fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发 + * body上的样式 + */ + bodyStyle: PropTypes.object, + /** + * 是否显示 + */ + visible: PropTypes.bool, + /** + * 是否显示遮罩 */ + hasMask: PropTypes.bool, + // 受控模式下(没有 trigger 的时候),只会在关闭时触发,相当于onClose onVisibleChange: PropTypes.func, /** * 显示隐藏时动画的播放方式 @@ -74,10 +75,6 @@ export default class Drawer extends Component { * @property {String} out 出场动画 */ animation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), - /** - * body上的样式 - */ - bodyStyle: PropTypes.object, locale: PropTypes.object, }; diff --git a/src/drawer/inner.jsx b/src/drawer/inner.jsx index 5d7fd33152..5b1a1751c9 100644 --- a/src/drawer/inner.jsx +++ b/src/drawer/inner.jsx @@ -14,6 +14,7 @@ export default class Inner extends Component { className: PropTypes.string, closeable: PropTypes.bool, role: PropTypes.string, + title: PropTypes.string, placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), rtl: PropTypes.bool, onClose: PropTypes.func, diff --git a/types/drawer/index.d.ts b/types/drawer/index.d.ts index 51f2df1d3c..e01db71ee1 100644 --- a/types/drawer/index.d.ts +++ b/types/drawer/index.d.ts @@ -2,9 +2,13 @@ import * as React from 'react'; import { PopupProps } from '../overlay'; +import CommonProps from '../util'; +interface HTMLAttributesWeak extends PopupProps { + title?: any; +} -export interface DrawerProps extends PopupProps { +export interface DrawerProps extends HTMLAttributesWeak, CommonProps { /** * 控制对话框关闭的方式,值可以为字符串或者布尔值,其中字符串是由以下值组成: * **mask** 表示点击遮罩区域可以关闭对话框 @@ -15,6 +19,14 @@ export interface DrawerProps extends PopupProps { */ closeable?: string | boolean; + /** + * 标题 + */ + title?: React.ReactNode; + /** + * body上的样式 + */ + bodyStyle?: React.CSSProperties; /** * 显示隐藏时动画的播放方式 * @property {String} in 进场动画 @@ -22,6 +34,19 @@ export interface DrawerProps extends PopupProps { */ animation?: {} | boolean; + /** + * 宽度,仅在 placement是 left right 的时候生效 + */ + width?: number | string; + + /** + * 高度,仅在 placement是 top bottom 的时候生效 + */ + height?: number | string; + /** + * 受控模式下(没有 trigger 的时候),只会在关闭时触发,相当于onClose + */ + onVisibleChange?: (visible: boolean, reason: string) => void; /** * 位于页面的位置 */