Skip to content

Conversation

AndrewMusgrave
Copy link
Member

WHY are these changes introduced?

Removes deprecated lifecycle method

WHAT is this pull request doing?

  • Moves logic to componentDidUpdate
  • Add update to test

How to 🎩

Test out examples and playground code 🎉

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Avatar, Card, Label, List, ResourceList, Select, TextStyle} from '@shopify/polaris';
interface State {}

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

  componentDidMount() {
    this.setState({selectedItems: [256]})
  }

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

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

    return (
      <ResourceList.Item
        id={id}
        url={url}
        media={media}
        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 items = [
      {
        id: 341,
        url: 'customers/341',
        name: 'Mae Jemison',
        location: 'Decatur, USA',
      },
      {
        id: 256,
        url: 'customers/256',
        name: 'Ellen Ochoa',
        location: 'Los Angeles, USA',
      },
    ];

    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}
        />
      </Card>
    );
  }
}

@BPScott BPScott temporarily deployed to polaris-react-pr-1235 March 21, 2019 19:03 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1235 March 21, 2019 19:09 Inactive
/>,
);

expect(resourceList.find(Spinner).exists()).toBe(true);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the refactored code didn't have test coverage. This bumps it 👍

@BPScott BPScott requested a deployment to polaris-react-pr-1235 April 8, 2019 18:36 Abandoned
@AndrewMusgrave AndrewMusgrave merged commit b769509 into master Apr 8, 2019
@AndrewMusgrave AndrewMusgrave deleted the rl-rm-cdu branch April 8, 2019 18:50
@alex-page alex-page temporarily deployed to production April 22, 2019 19:27 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants