✨ Add drawerStyle and headerStyle

close #18975
ant-design · Oct 7, 2019 · a877db7 · a877db7
1 parent 718a86d
commit a877db7
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 9 deletions.
diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
@@ -59,4 +59,23 @@ describe('Drawer', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
+    const style = {
+      backgroundColor: '#08c',
+    };
+    const wrapper = render(
+      <Drawer
+        visible
+        style={style}
+        drawerStyle={style}
+        headerStyle={style}
+        bodyStyle={style}
+        getContainer={false}
+      >
+        Here is content of Drawer
+      </Drawer>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -347,3 +347,68 @@ exports[`Drawer render top drawer 1`] = `
   </div>
 </div>
 `;
+
+exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
+<div
+  class=""
+>
+  <div
+    class="ant-drawer ant-drawer-right"
+    style="background-color:#08c"
+    tabindex="-1"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="transform:translateX(100%);-ms-transform:translateX(100%);width:256px"
+    >
+      <div
+        class="ant-drawer-content"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+          style="overflow:auto;height:100%;background-color:#08c"
+        >
+          <div
+            class="ant-drawer-header-no-title"
+            style="background-color:#08c"
+          >
+            <button
+              aria-label="Close"
+              class="ant-drawer-close"
+            >
+              <i
+                aria-label="icon: close"
+                class="anticon anticon-close"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="close"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  />
+                </svg>
+              </i>
+            </button>
+          </div>
+          <div
+            class="ant-drawer-body"
+            style="background-color:#08c"
+          >
+            Here is content of Drawer
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
@@ -25,8 +25,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | mask | Whether to show mask or not. | Boolean | true | 3.7.0 |
 | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | 3.7.0 |
 | maskStyle | Style for Drawer's mask element. | object | {} | 3.7.0 |
-| style | Style of drawer wrapper | object | - | 3.7.0 |
-| bodyStyle | Style of floating layer, typically used for adjusting its position. | object | - | 3.12.0 |
+| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | object | - | 3.7.0 |
+| drawerStyle | Style of the popup layer element | object | - | 3.24.0 |
+| headerStyle | Style of the drawer header part | object | - | 3.24.0 |
+| bodyStyle | Style of the drawer content part | object | - | 3.12.0 |
 | title | The title for Drawer. | string\|ReactNode | - | 3.7.0 |
 | visible | Whether the Drawer dialog is visible or not. | boolean | false | 3.7.0 |
 | width | Width of the Drawer dialog. | string\|number | 256 | 3.7.0 |

diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -26,6 +26,9 @@ export interface DrawerProps {
   mask?: boolean;
   maskStyle?: React.CSSProperties;
   style?: React.CSSProperties;
+  /** wrapper dom node style of header and body */
+  drawerStyle?: React.CSSProperties;
+  headerStyle?: React.CSSProperties;
   bodyStyle?: React.CSSProperties;
   title?: React.ReactNode;
   visible?: boolean;
@@ -142,14 +145,14 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   };
 
   renderHeader() {
-    const { title, prefixCls, closable } = this.props;
+    const { title, prefixCls, closable, headerStyle } = this.props;
     if (!title && !closable) {
       return null;
     }
 
     const headerClassName = title ? `${prefixCls}-header` : `${prefixCls}-header-no-title`;
     return (
-      <div className={headerClassName}>
+      <div className={headerClassName} style={headerStyle}>
         {title && <div className={`${prefixCls}-title`}>{title}</div>}
         {closable && this.renderCloseIcon()}
       </div>
@@ -170,7 +173,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
 
   // render drawer body dom
   renderBody = () => {
-    const { bodyStyle, placement, prefixCls, visible } = this.props;
+    const { bodyStyle, drawerStyle, placement, prefixCls, visible } = this.props;
     if (this.destroyClose && !visible) {
       return null;
     }
@@ -195,7 +198,10 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     return (
       <div
         className={`${prefixCls}-wrapper-body`}
-        style={containerStyle}
+        style={{
+          ...containerStyle,
+          ...drawerStyle,
+        }}
         onTransitionEnd={this.onDestroyTransitionEnd}
       >
         {this.renderHeader()}
@@ -240,6 +246,8 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
             'style',
             'closable',
             'destroyOnClose',
+            'drawerStyle',
+            'headerStyle',
             'bodyStyle',
             'title',
             'push',

diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
@@ -24,8 +24,10 @@ title: Drawer
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 |
 | mask | 是否展示遮罩 | Boolean | true | 3.7.0 |
 | maskStyle | 遮罩样式 | object | {} | 3.7.0 |
-| style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 |
-| bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 |
+| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | object | - | 3.7.0 |
+| drawerStyle | 用于设置 Drawer 弹出层的样式 | object | - | 3.24.0 |
+| headerStyle | 用于设置 Drawer 头部的样式 | object | - | 3.24.0 |
+| bodyStyle | 可用于设置 Drawer 内容部分的样式 | object | - | 3.12.0 |
 | title | 标题 | string \| ReactNode | - | 3.7.0 |
 | visible | Drawer 是否可见 | boolean | - | 3.7.0 |
 | width | 宽度 | string \| number | 256 | 3.7.0 |

diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
     "rc-checkbox": "~2.1.6",
     "rc-collapse": "~1.11.3",
     "rc-dialog": "~7.5.2",
-    "rc-drawer": "~2.0.1",
+    "rc-drawer": "~3.0.0",
     "rc-dropdown": "~2.4.1",
     "rc-editor-mention": "^1.1.13",
     "rc-form": "^2.4.5",