react-spatial/components/List/List.js

Components to build React map apps.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import ListItem from '../ListItem';

var propTypes = {
  className: PropTypes.string,
  items: PropTypes.array,
  renderItem: PropTypes.func,
  onSelect: PropTypes.func,
  onKeyDownItem: PropTypes.func,
  getItemKey: PropTypes.func.isRequired,
};

var defaultProps = {
  className: 'tm-list',
  items: [],
  renderItem: function () {},
  onSelect: function () {},
  onKeyDownItem: function () {},
};

/**
 * This component displays a `<ul>` HMTL tag element.
 *
 * This component also add keyboard navigation (arrow up/down, w/s) between list
 * items.
 */
var List = /*@__PURE__*/(function (PureComponent) {
  function List () {
    PureComponent.apply(this, arguments);
  }

  if ( PureComponent ) List.__proto__ = PureComponent;
  List.prototype = Object.create( PureComponent && PureComponent.prototype );
  List.prototype.constructor = List;

  List.prototype.render = function render () {
    var ref = this.props;
    var className = ref.className;
    var items = ref.items;
    var renderItem = ref.renderItem;
    var onSelect = ref.onSelect;
    var onKeyDownItem = ref.onKeyDownItem;
    var getItemKey = ref.getItemKey;

    if (!items.length) {
      return null;
    }

    return (
      React.createElement( 'ul', { role: "menu", className: className },
        items.map(function (item) { return (
          React.createElement( ListItem, {
            key: getItemKey(item), item: item, onSelect: function (e, itm) {
              onSelect(e, itm);
            }, onKeyDown: function (e) {
              onKeyDownItem(e);
            } },
            renderItem(item)
          )
        ); })
      )
    );
  };

  return List;
}(PureComponent));

List.propTypes = propTypes;
List.defaultProps = defaultProps;

export default List;

//# sourceMappingURL=List.js.map