chore(*): add types for drawer

Lucianing · Aug 16, 2019 · 6505594 · 6505594
1 parent 00bbfe6
commit 6505594
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 21 deletions.
diff --git 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
                 </Drawer>

diff --git 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
@@ -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,21 +56,25 @@ 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,
         /**
          * 显示隐藏时动画的播放方式
          * @property {String} in 进场动画
          * @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
@@ -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
@@ -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,13 +19,34 @@ export interface DrawerProps extends PopupProps {
      */
     closeable?: string | boolean;
 
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * body上的样式
+     */
+    bodyStyle?: React.CSSProperties;
     /**
      * 显示隐藏时动画的播放方式
      * @property {String} in 进场动画
      * @property {String} out 出场动画
      */
     animation?: {} | boolean;
 
+    /**
+     * 宽度，仅在 placement是 left right 的时候生效
+     */
+    width?: number | string;
+
+    /**
+     * 高度，仅在 placement是 top bottom 的时候生效
+     */
+    height?: number | string;
+    /**
+     * 受控模式下(没有 trigger 的时候)，只会在关闭时触发，相当于onClose
+     */
+    onVisibleChange?: (visible: boolean, reason: string) => void;
     /**
      * 位于页面的位置
      */