Merge pull request #167 from react-component/fix-no-mask

fix: scrollLocker lock trigger should disabled when no mask

Author: zombieJ

examples/no-mask.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable no-console,react/no-multi-comp */
+import { Icon, Menu } from 'antd';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+
+import Drawer from '../src';
+
+import 'antd/lib/menu/style';
+import 'antd/lib/style';
+
+import '../assets/index.less';
+import './assets/index.less';
+
+const {SubMenu} = Menu;
+const MenuItemGroup = Menu.ItemGroup;
+class Demo extends React.Component {
+  public state = {
+    open: false,
+  };
+
+  public onSwitch = () => {
+    const { open } = this.state;
+    this.setState({
+      open: !open,
+    });
+  };
+
+  public render() {
+    return (
+      <div>
+        <Drawer width="250px" showMask={false}>
+          <Menu
+            style={{ height: '200%', width: 'calc(100% - 1px)' }} // 选中的线超出
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            mode="inline"
+          >
+            <SubMenu
+              key="sub1"
+              title={
+                <span>
+                  <Icon type="mail" />
+                  <span>Navigation One</span>
+                </span>
+              }
+            >
+              <MenuItemGroup key="g1" title="Item 1">
+                <Menu.Item key="1">Option 1</Menu.Item>
+                <Menu.Item key="2">Option 2</Menu.Item>
+              </MenuItemGroup>
+              <MenuItemGroup key="g2" title="Item 2">
+                <Menu.Item key="3">Option 3</Menu.Item>
+                <Menu.Item key="4">Option 4</Menu.Item>
+              </MenuItemGroup>
+            </SubMenu>
+            <SubMenu
+              key="sub2"
+              title={
+                <span>
+                  <Icon type="appstore" />
+                  <span>Navigation Two</span>
+                </span>
+              }
+            >
+              <Menu.Item key="5">Option 5</Menu.Item>
+              <Menu.Item key="6">Option 6</Menu.Item>
+              <SubMenu key="sub3" title="Submenu">
+                <Menu.Item key="7">Option 7</Menu.Item>
+                <Menu.Item key="8">Option 8</Menu.Item>
+              </SubMenu>
+            </SubMenu>
+            <SubMenu
+              key="sub4"
+              title={
+                <span>
+                  <Icon type="setting" />
+                  <span>Navigation Three</span>
+                </span>
+              }
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+          </Menu>
+        </Drawer>
+        <div
+          style={{
+            width: '100%',
+            height: 667,
+            background: '#fff000',
+            color: '#fff',
+            textAlign: 'center',
+            lineHeight: '667px',
+          }}
+        >
+          内容区块
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Demo;

src/DrawerChild.tsx

@@ -93,7 +93,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       } catch (err) {}
       this.passive = passiveSupported ? { passive: false } : false;
     }
-    const { open, getContainer } = this.props;
+    const { open, getContainer, showMask } = this.props;
     const container = getContainer && getContainer();
     this.drawerId = `drawer_id_${Number(
       (Date.now() + Math.random())
@@ -110,12 +110,14 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       this.forceUpdate(() => {
         this.domFocus();
       });
-      this.props.scrollLocker?.lock();
+      if (showMask) {
+        this.props.scrollLocker?.lock();
+      }
     }
   }
 
   public componentDidUpdate(prevProps: IDrawerChildProps) {
-    const { open, getContainer, scrollLocker } = this.props;
+    const { open, getContainer, scrollLocker, showMask } = this.props;
     const container = getContainer && getContainer();
     if (open !== prevProps.open) {
       if (container && container.parentNode === document.body) {
@@ -124,7 +126,9 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       this.openLevelTransition();
       if (open) {
         this.domFocus();
-        scrollLocker?.lock();
+        if (showMask) {
+          scrollLocker?.lock();
+        }
       } else {
         scrollLocker?.unLock();
       }

tests/mask.spec.tsx

@@ -0,0 +1,29 @@
+import { mount } from 'enzyme';
+import * as React from 'react';
+import Drawer from '../src';
+
+describe('Drawer Mask', () => {
+  it('show mask', () => {
+    const wrapper = mount(<Drawer open />);
+
+    expect(document.body.className).toBe('ant-scrolling-effect');
+
+    wrapper.setProps({
+      open: false,
+    });
+
+    expect(document.body.className).toBe('');
+  });
+
+  it('no mask', () => {
+    const wrapper = mount(<Drawer open showMask={false} />);
+
+    expect(document.body.className).toBe('');
+
+    wrapper.setProps({
+      open: false,
+    });
+
+    expect(document.body.className).toBe('');
+  });
+});