diff --git a/README.md b/README.md index 2185a620..fd4b2095 100755 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ ReactDom.render( | onHandleClick | func | nul | handle icon click function | | keyboard | Boolean | true | Whether support press esc to close | | contentWrapperStyle | CSSProperties | null | content wrapper style | +| autoFocus | Boolean | true | Whether focusing on the drawer after it opened | > 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`. diff --git a/src/DrawerChild.tsx b/src/DrawerChild.tsx index 65cb74fb..bcdf9346 100644 --- a/src/DrawerChild.tsx +++ b/src/DrawerChild.tsx @@ -93,7 +93,7 @@ class DrawerChild extends React.Component { } catch (err) {} this.passive = passiveSupported ? { passive: false } : false; } - const { open, getContainer, showMask } = this.props; + const { open, getContainer, showMask, autoFocus } = this.props; const container = getContainer && getContainer(); this.drawerId = `drawer_id_${Number( (Date.now() + Math.random()) @@ -108,7 +108,9 @@ class DrawerChild extends React.Component { // 默认打开状态时推出 level; this.openLevelTransition(); this.forceUpdate(() => { - this.domFocus(); + if (autoFocus) { + this.domFocus(); + } }); if (showMask) { this.props.scrollLocker?.lock(); @@ -117,7 +119,13 @@ class DrawerChild extends React.Component { } public componentDidUpdate(prevProps: IDrawerChildProps) { - const { open, getContainer, scrollLocker, showMask } = this.props; + const { + open, + getContainer, + scrollLocker, + showMask, + autoFocus, + } = this.props; const container = getContainer && getContainer(); if (open !== prevProps.open) { if (container && container.parentNode === document.body) { @@ -125,7 +133,9 @@ class DrawerChild extends React.Component { } this.openLevelTransition(); if (open) { - this.domFocus(); + if (autoFocus) { + this.domFocus(); + } if (showMask) { scrollLocker?.lock(); } @@ -547,7 +557,7 @@ class DrawerChild extends React.Component { msTransform: transform, width: isNumeric(width) ? `${width}px` : width, height: isNumeric(height) ? `${height}px` : height, - ...contentWrapperStyle + ...contentWrapperStyle, }} ref={c => { this.contentWrapper = c as HTMLElement; diff --git a/src/DrawerWrapper.tsx b/src/DrawerWrapper.tsx index 4ed262f5..3446a4b6 100644 --- a/src/DrawerWrapper.tsx +++ b/src/DrawerWrapper.tsx @@ -35,6 +35,7 @@ class DrawerWrapper extends React.Component { className: '', keyboard: true, forceRender: false, + autoFocus: true, }; public static getDerivedStateFromProps( diff --git a/src/IDrawerPropTypes.ts b/src/IDrawerPropTypes.ts index 028b3572..e8637b2c 100644 --- a/src/IDrawerPropTypes.ts +++ b/src/IDrawerPropTypes.ts @@ -35,6 +35,7 @@ interface IProps extends Omit, 'onChange'> { onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void; keyboard?: boolean; contentWrapperStyle?: React.CSSProperties; + autoFocus?: boolean; } export interface IDrawerProps extends IProps { diff --git a/tests/drawer.spec.tsx b/tests/drawer.spec.tsx index 5b1ff853..a3986ac9 100644 --- a/tests/drawer.spec.tsx +++ b/tests/drawer.spec.tsx @@ -1,11 +1,11 @@ +/* eslint-disable max-classes-per-file */ // eslint-disable react/no-multi-comp import { mount } from 'enzyme'; import * as React from 'react'; import Drawer from '../src/'; -import { IDrawerProps } from '../src/IDrawerPropTypes'; +import type { IDrawerProps } from '../src/IDrawerPropTypes'; import toJson from 'enzyme-to-json'; - class DrawerTesterRef extends React.Component { public container: HTMLDivElement; public getContainer = () => { @@ -51,7 +51,11 @@ class DrawerTesterDom extends React.Component {
{this.state.visible ? ( - +

Here is content of Drawer

) : null} @@ -62,7 +66,7 @@ class DrawerTesterDom extends React.Component { /* eslint react/no-multi-comp: 0 */ // tslint:disable-next-line:max-classes-per-file -const DrawerTesterBoolean = (props) => ( +const DrawerTesterBoolean = props => (

Here is content of Drawer

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index c0414796..69ffe00f 100755 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -225,4 +225,32 @@ describe('rc-drawer-menu', () => { const content = instance.find('.drawer-content-wrapper').instance() as any; expect(content.style.background).toBe('rgb(255, 0, 0)'); }); + + it('autoFocus', () => { + instance = mount( + +

Here is content of Drawer

+
, + ); + + // In case { autoFocus: false }, default activeElement shouldn't be drawer node + expect(document.activeElement).not.toBe( + instance.find('.auto-focus-test-wrapper .drawer').at(0).getDOMNode(), + ); + + // Close and reopen drawer with props {autoFocus: true} + instance.setProps({ open: false, autoFocus: true }); + + instance.setProps({ open: true }); + + // In case { autoFocus: true }, by which is also 's default, the activeElement will be drawer by itself + expect(document.activeElement).toBe( + instance.find('.auto-focus-test-wrapper .drawer').at(0).getDOMNode(), + ); + }); });