Contacts List React Component

Contacts List is not a separate component, but just a particular case of using <List> and <ListItem> components.

Usage example

Here is the full contacts list page example:

const contacts = {
  'A': [
  'Aaron',
  'Abbie',
  'Adam',
  'Adele',
  'Agatha',
  'Agnes',
  'Albert',
  'Alexander'
  ],
  'B': [
  'Bailey',
  'Barclay',
  'Bartolo',
  'Bellamy',
  'Belle',
  'Benjamin'
  ],
  'C': [
  'Caiden',
  'Calvin',
  'Candy',
  'Carl',
  'Cherilyn',
  'Chester',
  'Chloe'
  ],
  'V': [
  'Vladimir'
  ]
};

const ContactsList = () => (
  <Page>
    <Navbar backLink="Back" title="Contacts" sliding></Navbar>

    <List contacts>
      {Object.keys(contacts).reduce((listGroups, nextGroupName) => {
        return [
          ...listGroups,
          <ListGroup key={nextGroupName}>
            <ListItem title={nextGroupName} groupTitle />
            {contacts[nextGroupName].map(contactName => {
              return <ListItem key={contactName} title={contactName} />;
            })}
          </ListGroup>
        ];
      }, [])}
    </List>
  </Page>
);

Renders to:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left sliding">
        <a href="#" class="back link">Back</a>
      </div>
      <div class="center sliding">Contacts</div>
    </div>
  </div>
  <div class="page-content">
    <div class="list-block contacts-block">
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>A</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Aaron</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Abbie</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Adam</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>B</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bailey</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Barclay</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>C</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Caiden</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Calvin</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>V</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Vladimir</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>