feat(menu): add component (#786)

Author: Matt Goo

package-lock.json

@@ -14,7 +14,7 @@
     "pretest": "npm stop",
     "test": "npm run lint && npm run test:unit && npm run test:screenshots",
     "posttest": "npm stop && istanbul report --root coverage text-summary && istanbul check-coverage --lines 95 --statements 95 --branches 95 --functions 95",
-    "postinstall": "lerna bootstrap",
+    "postinstall": "lerna bootstrap && rm node_modules/**/.babelrc -f && rm packages/**/node_modules/.babelrc -f",
     "test:watch": "karma start karma.local.js --auto-watch",
     "test:unit": "npm run clean && cross-env NODE_ENV=test karma start karma.local.js --single-run",
     "test:unit-ci": "karma start karma.ci.js --single-run",
@@ -77,6 +77,7 @@
     "@material/line-ripple": "^1.0.0",
     "@material/linear-progress": "^1.1.0",
     "@material/list": "^1.0.0",
+    "@material/menu": "^1.1.0",
     "@material/menu-surface": "^1.0.1",
     "@material/notched-outline": "^1.1.1",
     "@material/radio": "^1.1.0",
@@ -122,8 +123,8 @@
     "cp-file": "^6.0.0",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.10",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "eslint": "^5.9.0",
     "eslint-config-google": "^0.9.1",
     "eslint-plugin-react": "^7.7.0",

package.json

@@ -23,24 +23,24 @@
 import React from 'react';
 import classnames from 'classnames';
 import {MDCListFoundation} from '@material/list/foundation';
+import {ListItemContext, ListItemContextShape} from './index';
+import {closest} from '@material/dom/ponyfill';
 
-export interface ListItemProps<T> extends React.HTMLProps<T> {
+export interface ListItemProps<T extends HTMLElement = HTMLElement> extends React.HTMLProps<T>, ListItemContextShape {
   checkboxList?: boolean;
   radioList?: boolean;
-  onKeyDown?: React.KeyboardEventHandler<T>;
-  onClick?: React.MouseEventHandler<T>;
-  onFocus?: React.FocusEventHandler<T>;
-  onBlur?: React.FocusEventHandler<T>;
   tag?: string;
   activated?: boolean;
   selected?: boolean;
-  onDestroy?: () => void;
+  ref?: React.Ref<any>;
+};
+
+export interface ListItemState {
+  tabIndex?: number;
 }
 
-export default class ListItem<T extends HTMLElement = HTMLElement> extends React.Component<
-  ListItemProps<T>,
-  {}
-  > {
+export class ListItemBase<T extends HTMLElement = HTMLElement> extends React.Component<
+  ListItemProps<T>, ListItemState> {
   private listItemElement = React.createRef<T>();
 
   static defaultProps: Partial<ListItemProps<HTMLElement>> = {
@@ -54,15 +54,54 @@ export default class ListItem<T extends HTMLElement = HTMLElement> extends React
     onBlur: () => {},
     onDestroy: () => {},
     tag: 'li',
+    handleClick: () => {},
+    handleKeyDown: () => {},
+    handleBlur: () => {},
+    handleFocus: () => {},
+    getListItemInitialTabIndex: () => -1,
+    getClassNamesFromList: () => ({}),
+  };
+
+  state = {
+    tabIndex: this.props.tabIndex,
   };
 
+  get listElements(): Element[] {
+    if (this.listItemElement.current) {
+      const listElement = closest(this.listItemElement.current, `.${MDCListFoundation.cssClasses.ROOT}`);
+      if (!listElement) return [];
+      return [].slice.call(
+        listElement.querySelectorAll(MDCListFoundation.strings.ENABLED_ITEMS_SELECTOR)
+      );
+    }
+    return [];
+  }
+
+  componentDidMount() {
+    this.initializeTabIndex();
+  }
+
+  componentDidUpdate(prevProps: ListItemProps) {
+    if (prevProps.tabIndex !== this.props.tabIndex) {
+      this.setState({tabIndex: this.props.tabIndex});
+    }
+  }
+
   componentWillUnmount() {
-    this.props.onDestroy!();
+    if (this.listItemElement.current) {
+      const index = this.getIndex(this.listItemElement.current);
+      this.props.onDestroy!(index);
+    }
   }
 
   get classes() {
-    const {className, activated, disabled, selected} = this.props;
-    return classnames('mdc-list-item', className, {
+    const {className, activated, disabled, selected, getClassNamesFromList} = this.props;
+    let classesFromList = [''];
+    if (this.listItemElement.current) {
+      const index = this.getIndex(this.listItemElement.current);
+      classesFromList = getClassNamesFromList!()[index];
+    }
+    return classnames('mdc-list-item', className, classesFromList, {
       [MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS]: activated,
       [MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS]: selected,
       'mdc-list-item--disabled': disabled,
@@ -81,6 +120,42 @@ export default class ListItem<T extends HTMLElement = HTMLElement> extends React
     return null;
   }
 
+  private initializeTabIndex = () => {
+    if (this.listItemElement.current) {
+      const index = this.getIndex(this.listItemElement.current);
+      const tabIndex = this.props.getListItemInitialTabIndex!(index);
+      this.setState({tabIndex});
+    }
+  }
+
+  getIndex = (listElement: Element) => {
+    return this.listElements.indexOf(listElement);
+  }
+
+  handleClick = (e: React.MouseEvent<any>) => {
+    const {onClick} = this.props;
+    onClick!(e);
+    this.props.handleClick!(e, this.getIndex(e.currentTarget));
+  }
+
+  handleKeyDown = (e: React.KeyboardEvent<any>) => {
+    const {onKeyDown} = this.props;
+    onKeyDown!(e);
+    this.props.handleKeyDown!(e, this.getIndex(e.currentTarget));
+  }
+
+  handleFocus = (e: React.FocusEvent<any>) => {
+    const {onFocus} = this.props;
+    onFocus!(e);
+    this.props.handleFocus!(e, this.getIndex(e.currentTarget));
+  }
+
+  handleBlur = (e: React.FocusEvent<any>) => {
+    const {onBlur} = this.props;
+    onBlur!(e);
+    this.props.handleBlur!(e, this.getIndex(e.currentTarget));
+  }
+
   render() {
     const {
       /* eslint-disable no-unused-vars */
@@ -90,21 +165,51 @@ export default class ListItem<T extends HTMLElement = HTMLElement> extends React
       checkboxList,
       radioList,
       onDestroy,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      handleClick,
+      handleKeyDown,
+      handleFocus,
+      handleBlur,
+      getListItemInitialTabIndex,
+      getClassNamesFromList,
+      tabIndex,
       /* eslint-enable no-unused-vars */
       tag: Tag,
       ...otherProps
     } = this.props;
+
     return (
       // https://github.com/Microsoft/TypeScript/issues/28892
       // @ts-ignore
       <Tag
+        {...otherProps}
+        {...this.context}
         role={this.role}
         className={this.classes}
         ref={this.listItemElement}
-        {...otherProps}
+        onClick={this.handleClick}
+        onKeyDown={this.handleKeyDown}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        tabIndex={this.state.tabIndex}
       >
-        {this.props.children}
+        {children}
       </Tag>
     );
   }
 }
+
+const ListItem: React.FunctionComponent<ListItemProps> = (props) => {
+  return (
+    <ListItemContext.Consumer>
+      {(context) => (
+        <ListItemBase {...context} {...props}/>
+      )}
+    </ListItemContext.Consumer>
+  );
+};
+
+export default ListItem;