Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit a8c64b5

Browse files
lucasecdbMatt Goo
authored and
Matt Goo
committed
feat(drawer): add innerRef prop (#749)
1 parent 5f55983 commit a8c64b5

File tree

5 files changed

+181
-77
lines changed

5 files changed

+181
-77
lines changed

package-lock.json

Lines changed: 108 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@material/chips": "^1.0.0",
6868
"@material/dialog": "^0.43.0",
6969
"@material/dom": "^0.41.0",
70-
"@material/drawer": "^0.41.0",
70+
"@material/drawer": "^1.0.1",
7171
"@material/fab": "^0.41.0",
7272
"@material/floating-label": "^0.41.0",
7373
"@material/icon-button": "^0.41.0",
@@ -147,8 +147,8 @@
147147
"react-dom": "^16.4.2",
148148
"react-router-dom": "^4.3.1",
149149
"remap-istanbul": "^0.12.0",
150-
"rimraf": "^2.6.3",
151150
"resemblejs": "^3.0.1",
151+
"rimraf": "^2.6.3",
152152
"sass-loader": "^6.0.7",
153153
"testdouble": "^3.6.0",
154154
"ts-loader": "^3.5.0",

packages/drawer/index.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ import {
2626
MDCDismissibleDrawerFoundation,
2727
MDCModalDrawerFoundation,
2828
util,
29-
// @ts-ignore no .d.ts file
30-
} from '@material/drawer/dist/mdc.drawer';
29+
} from '@material/drawer';
3130
// @ts-ignore no .d.ts file
3231
import {MDCListFoundation} from '@material/list/dist/mdc.list';
3332
import DrawerHeader from './Header';
@@ -62,7 +61,7 @@ const isRefObject = function(ref: DrawerProps['innerRef']): ref is React.RefObje
6261

6362
class Drawer extends React.Component<DrawerProps, DrawerState> {
6463
previousFocus: HTMLElement | null = null;
65-
foundation: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation;
64+
foundation?: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation;
6665
focusTrap?: FocusTrap;
6766
drawerElement: React.RefObject<HTMLDivElement> = React.createRef();
6867

@@ -113,7 +112,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
113112
if (changedToModal || changedToDismissible) {
114113
this.initFoundation();
115114
}
116-
if (open !== prevProps.open) {
115+
if (open !== prevProps.open && this.foundation) {
117116
open ? this.foundation.open() : this.foundation.close();
118117
}
119118
}
@@ -124,7 +123,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
124123
}
125124

126125
private initializeFocusTrap = () => {
127-
this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current);
126+
this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current!);
128127
};
129128

130129
get classes() {
@@ -191,13 +190,13 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
191190
handleKeyDown = (evt: React.KeyboardEvent<HTMLElement>) => {
192191
this.props.onKeyDown!(evt);
193192
if (!this.foundation) return;
194-
this.foundation.handleKeydown(evt);
193+
this.foundation.handleKeydown(evt.nativeEvent);
195194
};
196195

197196
handleTransitionEnd = (evt: React.TransitionEvent<HTMLElement>) => {
198197
this.props.onTransitionEnd!(evt);
199198
if (!this.foundation) return;
200-
this.foundation.handleTransitionEnd(evt);
199+
this.foundation.handleTransitionEnd(evt.nativeEvent);
201200
};
202201

203202
attachRef = (node: HTMLElement) => {
@@ -230,9 +229,9 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
230229
children,
231230
className,
232231
innerRef,
232+
modal,
233233
/* eslint-enable no-unused-vars */
234234
tag: Tag,
235-
modal,
236235
...otherProps
237236
} = this.props;
238237

@@ -253,11 +252,12 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
253252
</React.Fragment>
254253
);
255254
}
255+
256256
renderScrim() {
257257
return (
258258
<div
259259
className='mdc-drawer-scrim'
260-
onClick={() => this.foundation.handleScrimClick()}
260+
onClick={() => (this.foundation as MDCModalDrawerFoundation).handleScrimClick()}
261261
/>
262262
);
263263
}

packages/drawer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"url": "https://github.com/material-components/material-components-web-react.git"
1818
},
1919
"dependencies": {
20-
"@material/drawer": "^0.41.0",
20+
"@material/drawer": "^1.0.1",
2121
"@material/list": "^0.41.0",
2222
"classnames": "^2.2.6",
2323
"focus-trap": "^4.0.2",

0 commit comments

Comments
 (0)