[ResourceList] Multiselect

[AndrewMusgrave]

WHY are these changes introduced?

Add multi-select to ResourceList

Fixes: #935

WHAT is this pull request doing?

• Add example to readme
• Add multiselect logic
• Add tests
• Fix failing tests

Video

https://cl.ly/9e5e755caa40

How to 🎩

• Playground with multiselect is provided below
• I'm linking to an example PR in web adding multiselect that can be used for 🎩 (hidden between the deploys)

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Card, ResourceList, Avatar, TextStyle} from '../src';

const items = [
  {
    id: 341,
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: 256,
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
  {
    id: 3412341,
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: 25566546,
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
  {
    id: 34222341,
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: 2567896,
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
  {
    id: 34765451,
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: 2543436,
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
  {
    id: 312341,
    url: 'customers/341',
    name: 'Mae Jemison',
    location: 'Decatur, USA',
  },
  {
    id: 434256,
    url: 'customers/256',
    name: 'Ellen Ochoa',
    location: 'Los Angeles, USA',
  },
];

export default class ResourceListExample extends React.Component {
  state = {
    selectedItems: [],
  };

  handleSelectionChange = (selectedItems) => {
    this.setState({selectedItems});
  };

  renderItem = (item, _, index) => {
    const {id, url, name, location} = item;
    const media = <Avatar customer size="medium" name={name} />;

    return (
      <ResourceList.Item
        id={id}
        url={url}
        media={media}
        sortOrder={index}
        accessibilityLabel={`View details for ${name}`}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceList.Item>
    );
  };

  render() {
    const resourceName = {
      singular: 'customer',
      plural: 'customers',
    };

    const promotedBulkActions = [
      {
        content: 'Edit customers',
        onAction: () => console.log('Todo: implement bulk edit'),
      },
    ];

    const bulkActions = [
      {
        content: 'Add tags',
        onAction: () => console.log('Todo: implement bulk add tags'),
      },
      {
        content: 'Remove tags',
        onAction: () => console.log('Todo: implement bulk remove tags'),
      },
      {
        content: 'Delete customers',
        onAction: () => console.log('Todo: implement bulk delete'),
      },
    ];

    return (
      <Card>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={this.renderItem}
          selectedItems={this.state.selectedItems}
          onSelectionChange={this.handleSelectionChange}
          promotedBulkActions={promotedBulkActions}
          bulkActions={bulkActions}
          resolveItemId={resolveItemIds}
        />
      </Card>
    );
  }
}

function resolveItemIds({id}) {
  return id;
}

[danrosenthal]

Re-pinging @alex-page and @dleroux for this one, as it's been quiet for a little while

[dleroux]

Sorry for the delay on this. Do you mind rebasing and pinging me again @AndrewMusgrave ?

[AndrewMusgrave]

@dleroux

[dleroux]

what was happening without this?

[AndrewMusgrave]

You'll select text when multi-selecting, really bad experience 😬

[dleroux]

Our Checkbox renders block elements so probably best to make this a div.

[AndrewMusgrave]

Nice catch, I'll change this on Monday and merge 🚢

[dleroux]

🎩 looks good. Just a small change request on the mark-up, after that 🐑 🇮🇹

[AndrewMusgrave]

Before I 🚢 , @alex-page what do you think?

[alex-page]

Great work @AndrewMusgrave, make sure the id's on the items are unique compared to the other examples otherwise you will get an accessibility issue.