Skip to main content

List - Vivid Component

List provides a component to display arrays of information with a consistent UI.

Most design decisions will be made by the implementation for flexibility of use-cases.

Development​

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing list
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Usage​

Props

const propTypes = {
  // The component to be rendered as the header of the list. Rendered once as the first item
  Header: types.element,
  // Function returning the component which will be rendered for each item in the list
  renderItem: types.func.isRequired,
  // Array containing all the information to render in renderItem. At least an empty array is required
  items: types.array,
  // The component to be rendered if the items array is empty (there is no information to display)
  EmptyState: types.oneOfType([types.element, types.func]),
  // The component which handles fetching subsequent data from the server.
  // Will most likely require props for handling loading state and onClick handlers etc.
  LoadMore: types.oneOfType([types.element, types.func]),

  // Indicates the initial loading state of data from the server
  isLoading: types.boolean.isRequired,
  // Array of errors returned when loading fails
  loadErrors: types.array.isRequired,
  // The Component to be displayed when loading data
  LoadingView: types.func.isRequired,
  // The Component to be displayed when loading fails
  ErrorView: types.func.isRequired,

  // Function used in the render loop which gets the property used for the Key from the data object
  getKey: types.func,

  // Specify if you want the Header component to display when the list is empty
  alwaysRenderHeader: types.bool,
};

const defaultProps = {
  items: [],
  getKey: (_, index) => index,
  isLoading: false,
  isFetching: false,
  endReached: false,
  autoLoadMore: false,
  alwaysRenderHeader: false,
};

Example

const RenderComponent = (props) => {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      <div>{props.data.item1}</div>
      <div>{props.data.item2}</div>
      <div>{props.data.item3}</div>
    </div>
  );
};

<List
  renderItem={(item) => <RenderComponent data={item} />}
  items={items}
  isLoading={false}
  loadErrors={[]}
  LoadingView={() => <div>Loading...</div>}
  ErrorView={() => <div>Has Errors</div>}
/>;

Copyright (c) 2019 Rex Software All Rights Reserved.