feat(list): Add component

packages/list/.npmignore

@@ -0,0 +1,3 @@
+index.js
+ListDivider.js
+ListItem.js

packages/list/ListItem.js

@@ -0,0 +1,107 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class ListItem extends Component {
+  listItemElement_ = React.createRef();
+
+  componentDidMount() {
+    const {init} = this.props;
+    init && init();
+  }
+
+  get listItemElement() {
+    return this.listItemElement_.current;
+  }
+
+  get classes() {
+    const {className} = this.props;
+    return classnames('mdc-list-item', className);
+  }
+
+  focus() {
+    const element = this.listItemElement_.current;
+    if (element) {
+      element.focus();
+    }
+  }
+
+  followHref() {
+    const element = this.listItemElement_.current;
+    if (element && element.href) {
+      element.click();
+    }
+  }
+
+  toggleCheckbox() {
+    // TODO(bonniez): implement
+    // https://github.com/material-components/material-components-web-react/issues/352
+  }
+
+  render() {
+    const {
+      /* eslint-disable */
+      className,
+      childrenTabIndex,
+      init,
+      id,
+      /* eslint-enable */
+      children,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <li
+        className={this.classes}
+        ref={this.listItemElement_}
+        {...otherProps}
+      >
+        {React.Children.map(children, this.renderChild)}
+      </li>
+    );
+  }
+
+  renderChild = (child) => {
+    const props = Object.assign({},
+      child.props,
+      {tabIndex: this.props.childrenTabIndex}
+    );
+    return React.cloneElement(child, props);
+  }
+}
+
+ListItem.propTypes = {
+  id: PropTypes.string,
+  childrenTabIndex: PropTypes.number,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  init: PropTypes.func,
+};
+
+ListItem.defaultProps = {
+  id: '',
+  childrenTabIndex: -1,
+  className: '',
+};

packages/list/ListItemGraphic.js

@@ -0,0 +1,59 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const ListItemGraphic = (props) => {
+  const {
+    tabIndex, // eslint-disable-line no-unused-vars
+    graphic,
+    tabbableOnListItemFocus,
+    className,
+    ...otherProps
+  } = props;
+
+  const graphicProps = {
+    className: classnames('mdc-list-item__graphic', className),
+    tabIndex: tabbableOnListItemFocus ? props.tabIndex : -1,
+    ...otherProps,
+  };
+
+  return React.cloneElement(graphic, graphicProps);
+};
+
+ListItemGraphic.propTypes = {
+  tabbableOnListItemFocus: PropTypes.bool,
+  className: PropTypes.string,
+  tabIndex: PropTypes.number,
+  graphic: PropTypes.element,
+};
+
+ListItemGraphic.defaultProps = {
+  tabbableOnListItemFocus: false,
+  className: '',
+  tabIndex: -1,
+  graphic: {},
+};
+
+export default ListItemGraphic;

packages/list/ListItemMeta.js

@@ -0,0 +1,69 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const ListItemMeta = (props) => {
+  const {
+    tabIndex, // eslint-disable-line no-unused-vars
+    meta,
+    className,
+    tabbableOnListItemFocus,
+    ...otherProps
+  } = props;
+
+  let metaElement = null;
+  if (typeof meta === 'string') {
+    metaElement = <span>{meta}</span>;
+  } else {
+    metaElement = meta;
+  }
+
+  const metaProps = {
+    className: classnames('mdc-list-item__meta', className, meta.className),
+    tabIndex: tabbableOnListItemFocus ? props.tabIndex : -1,
+    ...otherProps,
+  };
+
+  return React.cloneElement(metaElement, metaProps);
+};
+
+ListItemMeta.propTypes = {
+  tabbableOnListItemFocus: PropTypes.bool,
+  className: PropTypes.string,
+  tabIndex: PropTypes.number,
+  meta: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+};
+
+ListItemMeta.defaultProps = {
+  tabbableOnListItemFocus: false,
+  className: '',
+  tabIndex: -1,
+  meta: null,
+};
+
+export default ListItemMeta;

packages/list/ListItemText.js

@@ -0,0 +1,93 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const ListItemText = (props) => {
+  const {
+    primaryText,
+    secondaryText,
+    tabbableOnListItemFocus,
+    tabIndex,
+    className,
+    ...otherProps
+  } = props;
+
+  const renderText = (text, className) => {
+    if (typeof text === 'string') {
+      return (
+        <span
+          className={className}
+          tabIndex={tabbableOnListItemFocus ? tabIndex : -1}
+        >
+          {text}
+        </span>
+      );
+    }
+    const {className: textClassName, ...otherProps} = text.props;
+    const props = Object.assign({
+      className: classnames(className, textClassName),
+    }, ...otherProps);
+    return React.cloneElement(text, props);
+  };
+
+  if (!secondaryText) {
+    return renderText(primaryText, classnames('mdc-list-item__text', className));
+  }
+
+  return (
+    <span
+      className={classnames('mdc-list-item__text', className)}
+      tabIndex={tabbableOnListItemFocus ? tabIndex : -1}
+      {...otherProps}
+    >
+      {renderText(primaryText, 'mdc-list-item__primary-text')}
+      {renderText(secondaryText, 'mdc-list-item__secondary-text')}
+    </span>
+  );
+};
+
+ListItemText.propTypes = {
+  tabbableOnListItemFocus: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  className: PropTypes.string,
+  primaryText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+  secondaryText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+};
+
+ListItemText.defaultProps = {
+  tabbableOnListItemFocus: false,
+  tabIndex: -1,
+  className: '',
+  primaryText: '',
+  secondaryText: '',
+};
+
+export default ListItemText;