myplanet / react-redux-skeletor Goto Github PK

Acceptance Criteria:

1. Refactor component to use Classes
2. Rename props to be more self-explanatory:
   value -> valuesSelected
   values -> options
3. Allow component accept options in three formats:
   • plain array (as it works now e.g. [1,2,3])
   • array of objects (e.g. [{id: 1, label: "label"}]
   • object (e.g. {1: "label-1", 2: "label-2"})
     And introduce new property 'inputFormat' ['array', 'objects', 'object'] to suggest component what is the input format is
     We still want component to implement 'labelCallback' function to allow label change from outside of component (for ALL 3 use cases above)
4. Gracefully handle input format, and report developer about incorrect input format (using propTypes and component business logic)

Acceptance criteria:
Implement component which will render the list of components (React components) and introduce pagination for the rendered results.

Suggested props:

• data (array of react components OR ids)
• itemCallback (called for each rendered item. Function will receive id and expect to return rendered component in JSX format)
• withPagination (no suggested value, when prop exists Lister will assume rendered data should be paginated)
• itemsPerPage (integer value, number of items rendered on the page)
• totalPages (optional integer; total amount of pages for pagination)
• pagerStyle (enum ['regular', 'lazy']. When regular is populated, component will render list of clickable buttons like [1], [2], [3]. When lazy populated, component will render button 'Show more' clicking on which component will append next XX amount of items to the end of the list)
• loadMoreCallback (optional callback allows developer to populate text on the 'Load more' button if pagerStyle set to lazy)
• onpageLoad (receives integer page value as input param; optional callback which will allow to request additional list of data to be rendered. Can be used if there is no full dataset available to render and allows developer to implement real Lazy Load by asynchronously request requested page and populate data on on async response)