feat(drawer): add innerRef prop (#749)

Author: lucasecdb

package-lock.json

@@ -67,7 +67,7 @@
     "@material/chips": "^1.0.0",
     "@material/dialog": "^0.43.0",
     "@material/dom": "^0.41.0",
-    "@material/drawer": "^0.41.0",
+    "@material/drawer": "^1.0.1",
     "@material/fab": "^0.41.0",
     "@material/floating-label": "^0.41.0",
     "@material/icon-button": "^0.41.0",
@@ -147,8 +147,8 @@
     "react-dom": "^16.4.2",
     "react-router-dom": "^4.3.1",
     "remap-istanbul": "^0.12.0",
-    "rimraf": "^2.6.3",
     "resemblejs": "^3.0.1",
+    "rimraf": "^2.6.3",
     "sass-loader": "^6.0.7",
     "testdouble": "^3.6.0",
     "ts-loader": "^3.5.0",

package.json

@@ -419,6 +419,7 @@ modal | Boolean | Indicates that the drawer is of type modal.
 dismissible | Boolean | Indicates that the drawer is of type dismissible.
 tag | String | Customizes the drawer tag type (default to `<aside>`).
 open | boolean | If true, opens drawer. If false, closes drawer.
+innerRef | RefObject | Root drawer element ref.
 
 ## Sass Mixins
 

packages/drawer/README.md

@@ -26,8 +26,7 @@ import {
   MDCDismissibleDrawerFoundation,
   MDCModalDrawerFoundation,
   util,
-// @ts-ignore no .d.ts file
-} from '@material/drawer/dist/mdc.drawer';
+} from '@material/drawer';
 // @ts-ignore no .d.ts file
 import {MDCListFoundation} from '@material/list/dist/mdc.list';
 import DrawerHeader from './Header';
@@ -39,6 +38,8 @@ import {FocusTrap} from 'focus-trap';
 
 const {cssClasses: listCssClasses} = MDCListFoundation;
 
+type RefCallback<T> = (node: T) => void;
+
 export interface DrawerProps extends React.HTMLProps<HTMLElement>{
   className?: string;
   open?: boolean;
@@ -47,15 +48,20 @@ export interface DrawerProps extends React.HTMLProps<HTMLElement>{
   tag?: string;
   dismissible?: boolean;
   modal?: boolean;
+  innerRef?: RefCallback<HTMLElement> | React.RefObject<HTMLElement>;
 };
 
 interface DrawerState {
   classList: Set<string>;
 };
 
+const isRefObject = function(ref: DrawerProps['innerRef']): ref is React.RefObject<HTMLElement> {
+  return typeof ref !== 'function';
+};
+
 class Drawer extends React.Component<DrawerProps, DrawerState> {
   previousFocus: HTMLElement | null = null;
-  foundation: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation;
+  foundation?: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation;
   focusTrap?: FocusTrap;
   drawerElement: React.RefObject<HTMLDivElement> = React.createRef();
 
@@ -106,7 +112,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
     if (changedToModal || changedToDismissible) {
       this.initFoundation();
     }
-    if (open !== prevProps.open) {
+    if (open !== prevProps.open && this.foundation) {
       open ? this.foundation.open() : this.foundation.close();
     }
   }
@@ -117,7 +123,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
   }
 
   private initializeFocusTrap = () => {
-    this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current);
+    this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current!);
   };
 
   get classes() {
@@ -184,15 +190,34 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
   handleKeyDown = (evt: React.KeyboardEvent<HTMLElement>) => {
     this.props.onKeyDown!(evt);
     if (!this.foundation) return;
-    this.foundation.handleKeydown(evt);
+    this.foundation.handleKeydown(evt.nativeEvent);
   };
 
   handleTransitionEnd = (evt: React.TransitionEvent<HTMLElement>) => {
     this.props.onTransitionEnd!(evt);
     if (!this.foundation) return;
-    this.foundation.handleTransitionEnd(evt);
+    this.foundation.handleTransitionEnd(evt.nativeEvent);
   };
 
+  attachRef = (node: HTMLElement) => {
+    const {innerRef} = this.props;
+
+    // https://github.com/facebook/react/issues/13029#issuecomment-410002316
+    // @ts-ignore this is acceptable according to the comment above
+    this.drawerElement.current = node;
+
+    if (!innerRef) {
+      return;
+    }
+
+    if (isRefObject(innerRef)) {
+      // @ts-ignore same as above
+      innerRef.current = node;
+    } else {
+      innerRef(node);
+    }
+  }
+
   render() {
     const {
       /* eslint-disable no-unused-vars */
@@ -203,9 +228,10 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
       dismissible,
       children,
       className,
+      innerRef,
+      modal,
       /* eslint-enable no-unused-vars */
       tag: Tag,
-      modal,
       ...otherProps
     } = this.props;
 
@@ -215,7 +241,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
           // @ts-ignore */}
         <Tag
           className={this.classes}
-          ref={this.drawerElement}
+          ref={this.attachRef}
           onKeyDown={this.handleKeyDown}
           onTransitionEnd={this.handleTransitionEnd}
           {...otherProps}
@@ -226,11 +252,12 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
       </React.Fragment>
     );
   }
+
   renderScrim() {
     return (
       <div
         className='mdc-drawer-scrim'
-        onClick={() => this.foundation.handleScrimClick()}
+        onClick={() => (this.foundation as MDCModalDrawerFoundation).handleScrimClick()}
       />
     );
   }

packages/drawer/index.tsx

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/drawer": "^0.41.0",
+    "@material/drawer": "^1.0.1",
     "@material/list": "^0.41.0",
     "classnames": "^2.2.6",
     "focus-trap": "^3.0.0",