Using Decorators

Calling any of our decorator functions on your component will wrap it in a component called the PaginationWrapper. This process adds properties to your component to allow it to interact with violet-paginator, and also adds lifecycle hooks so that a new page of results will be requiested at the appropriate time. All decorators require a listId property.

As an example, see the Flipper component below:

import React, { PropTypes } from 'react'
import { flip } from './decorators'
import { Prev } from './Prev'
import { Next } from './Next'

export function Flipper(props) {
  return (
    <ul className="pagination">
      <li>
        <Prev {...props} />
      </li>
      <li>
        <Next {...props} />
      </li>
    </ul>
  )
}

Flipper.propTypes = {
  hasPreviousPage: PropTypes.bool,
  hasNextPage: PropTypes.bool
}

export default flip(Flipper)

The hasPreviousPage and hasNextPage properties are both injected simply by calling flip.

flip()

The flip() decorator is for simple 'previous' and 'next' links.

paginate()

The paginate() decorator is for full pagination controls, including specific page links as well as 'previous' and 'next' links.

tabulate()

The tabulate() decorator is for components that render the results list.

tabulateLean()

The tabulateLean() decorator is for components that render the results lists that require inline updating. Similar to tabulate() but performs better when updates occur.

stretch()

The stretch() decorator is for a component that can change the page size.

sort()

The sort() decorator is for a component that sorts the list by a given field.

violatePaginator()

Something of a kitchen sink. Includes properties from most of the decorators listed above.

decorate

Allows you to create your own decorator. This function accepts two arguments:

1. The component class or function to decorate
2. A decorator function that accepts the component's props as an argument and returns an object.

An example decorator function to mimick our own flip() decorator would look like this:

export const flipper = props => {
  const { paginator } = props

  const totalPages =
    Math.ceil(paginator.get('totalCount') / paginator.get('pageSize'))

  const page = paginator.get('page')

  return {
    hasPreviousPage: page > 1,
    hasNextPage: page < totalPages
  }
}

Putting it all together, to use this decorator with the flipper function, you might define a node module like this:

import { decorators } from 'violet-paginator'
import { flipper }  from './myCustomSelectors/flipper'

export default function flip(Component) {
  return decorators.decorate(Component, flipper)
}

You could then use your decorator to decorate your custom flipper component:

import React from 'react'
import flip from './myCustomDecorators/flip'

export function MyCustomFlipper({ hasPreviousPage, hasNextPage }) {
  ...
})

export default flip(MyCustomFlipper)