[v4][ResourceList] Add existence check to ref

[AndrewMusgrave]

WHY are these changes introduced?

Noticed this wasn't working while 🎩 a change

WHAT is this pull request doing?

We cast the type of our ref so we don't have to do an existence check.

• Remove typecast as it's no longer needed
• Add check to see if the ref exists

How to 🎩

This example will fail on version-4.0.0 but work in this branch 👍

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

import * as React from 'react';
import {
  Page,
  ResourceList,
  Card,
  AppliedFilter,
  FilterType,
  Modal,
  Button,
} from '@shopify/polaris';
import {autobind} from '@shopify/javascript-utilities/decorators';

const items: any[] = [
  {
    onClick: true,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, and actions',
  },
  {
    onClick: true,
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    title: 'Has url',
  },
  {
    onClick: true,
    title: 'Has onClick',
  },
  {
    onClick: true,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, and actions',
  },
  {
    onClick: true,
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    title: 'Has url',
  },
  {
    onClick: true,
    title: 'Has onClick',
  },
  {
    onClick: true,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has url, and actions',
  },
  {
    onClick: true,
    actions: [{content: 'View listing', url: 'http://www.facebook.com'}],
    title: 'Has onClick, and actions',
  },
  {
    onClick: false,
    url: 'https://www.google.com',
    title: 'Has url',
  },
  {
    onClick: true,
    title: 'Has onClick',
  },
];

const mockFilters: any[] = [
  {
    key: 'filterKey1',
    label: 'Product type',
    operatorText: 'is',
    type: FilterType.Select,
    options: [
      'Bundle',
      {
        value: 'electronic_value',
        label: 'Electronic',
        disabled: true,
      },
      {
        value: 'beauty_value',
        label: 'Beauty',
      },
    ],
  },
  {
    key: 'filterKey2',
    label: 'Tagged with',
    type: FilterType.TextField,
  },
];

const mockAppliedFilters = [
  {
    key: 'filterKey1',
    value: 'Bundle',
  },
  {
    key: 'filterKey1',
    value: 'beauty_value',
  },
  {
    key: 'filterKey1',
    value: 'Not a option value',
  },
  {
    key: 'filterKey2',
    value: 'New Tag Name',
  },
  {
    key: 'filterKey3',
    value: 'This filter does not exist',
  },
];

const mockSortOptions = [
  'Product title (A-Z)',
  {
    value: 'PRODUCT_TITLE_DESC',
    label: 'Product title (Z-A)',
  },
  {
    value: 'EXTRA',
    label: 'Disabled Option',
    disabled: true,
  },
];

interface State {
  searchValue?: string;
  filterSearchFocused: boolean;
  appliedFilters: AppliedFilter[];
  selectedItems: string[] | 'All';
  sortValue?: string;
}

export default class Playground extends React.Component<never, State> {
  state: State = {
    selectedItems: [],
    filterSearchFocused: false,
    appliedFilters: mockAppliedFilters,
  };

  render() {
    const {searchValue, appliedFilters} = this.state;

    const resourceName = {
      singular: 'Product',
      plural: 'Products',
    };

    return (
      <Page title="Playground">
        <Card>
          <ResourceList
            resourceName={resourceName}
            items={items}
            renderItem={handleRenderItem}
            hasMoreItems
            filterControl={
              <ResourceList.FilterControl
                resourceName={resourceName}
                searchValue={searchValue}
                onSearchChange={this.handleSearchChange}
                additionalAction={{
                  content: 'Save',
                }}
                filters={mockFilters}
                appliedFilters={appliedFilters}
                onFiltersChange={this.handleFilterChange}
              />
            }
            selectedItems={this.state.selectedItems}
            onSelectionChange={this.handleSelectionChange}
            promotedBulkActions={[
              {
                content: 'Really long text on button 1',
                onAction: this.bulkActionOne,
              },
              {
                content: 'long text button 2',
                disabled: true,
                url: 'http://www.google.com',
              },
            ]}
            bulkActions={[
              {
                content: 'button 3',
                onAction: this.bulkActionThree,
              },
              {
                content: 'button 4',
                onAction: this.bulkActionFour,
              },
              {
                content: 'button 5',
                onAction: this.bulkActionFive,
                disabled: true,
              },
            ]}
            sortValue={this.state.sortValue}
            sortOptions={mockSortOptions}
            onSortChange={this.handleSortChange}
          />
        </Card>
        <Modal open>
          <Card>
            <ResourceList
              resourceName={resourceName}
              items={items}
              renderItem={handleRenderItem}
              hasMoreItems
              filterControl={
                <ResourceList.FilterControl
                  resourceName={resourceName}
                  searchValue={searchValue}
                  onSearchChange={this.handleSearchChange}
                  additionalAction={{
                    content: 'Save',
                  }}
                  filters={mockFilters}
                  appliedFilters={appliedFilters}
                  onFiltersChange={this.handleFilterChange}
                />
              }
              selectedItems={this.state.selectedItems}
              onSelectionChange={this.handleSelectionChange}
              promotedBulkActions={[
                {
                  content: 'Really long text on button 1',
                  onAction: this.bulkActionOne,
                },
                {
                  content: 'long text button 2',
                  disabled: true,
                  url: 'http://www.google.com',
                },
              ]}
              bulkActions={[
                {
                  content: 'button 3',
                  onAction: this.bulkActionThree,
                },
                {
                  content: 'button 4',
                  onAction: this.bulkActionFour,
                },
                {
                  content: 'button 5',
                  onAction: this.bulkActionFive,
                  disabled: true,
                },
              ]}
              sortValue={this.state.sortValue}
              sortOptions={mockSortOptions}
              onSortChange={this.handleSortChange}
            />
          </Card>
        </Modal>
      </Page>
    );
  }

  @autobind
  private handleSelectionChange(selectedItems: string[]) {
    this.setState({selectedItems});
  }

  @autobind
  private handleSearchChange(searchValue: string) {
    this.setState({searchValue});
  }

  @autobind
  private handleFilterChange(appliedFilters: AppliedFilter[]) {
    this.setState({appliedFilters});
  }

  @autobind
  private handleSortChange(sortValue: string) {
    this.setState({sortValue});
  }

  @autobind
  private bulkActionOne() {
    console.log('Clicked on bulk action one.');
  }

  @autobind
  private bulkActionTwo() {
    console.log('Clicked on bulk action two.');
  }

  @autobind
  private bulkActionThree() {
    console.log('Clicked on bulk action three.');
  }

  @autobind
  private bulkActionFour() {
    console.log('Clicked on bulk action four.');
  }

  @autobind
  private bulkActionFive() {
    console.log('Clicked on bulk action five.');
  }
}

function handleRenderItem(item: any, id: any) {
  return (
    <ResourceList.Item id={id} url={item.url} shortcutActions={item.actions}>
      <div>Item {id}</div>
      <div>{item.title}</div>
    </ResourceList.Item>
  );
}