API.md

docs/API.md

@@ -7,11 +7,11 @@ In these API docs, a higher-order component (HOC) refers to a function that acce
 - [Components](#components)
   - [`ReactBigList`](#react-big-list)
 - [Higher-order components](#higher-order-components)
-
   - [`asBigList()`](#as-big-list)
   - [`withBigListConfig()`](#with-big-list-config)
   - [`withPageSize()`](#with-page-size)
   - [`withCustomFilters()`](#with-custom-filters)
+- [Props passed to children](#props-children)
 
 ## Components
 
@@ -117,6 +117,8 @@ const WithCustomFilters = withCustomFilters(ReactBigList, {
 });
 ```
 
+###### Config options
+
 ```js
 type BigListConfig<T> = {
   pageSize?: number,
@@ -126,3 +128,81 @@ type BigListConfig<T> = {
   sortFunction?: ListSortProps<T>,
 };
 ```
+
+## Props passed to children
+
+> displayedMembers: T[]
+
+Array of currently displayed members.
+
+> filteredMembers: T[]
+
+Array of members that came through filters - before pagination is applied.
+
+> setPageNumber: (pageNumber: number) => void
+
+Sets current pagination page number.
+
+> setQueryString: (queryString: string) => void
+
+Sets queryString.
+
+> queryString: string
+
+Query string.
+
+> activeFilters: string[]
+
+Array of active custom filters.
+
+> toggleFilter: (filter: string) => void;
+
+Toggles filter off/on by name.
+
+> clearFilters() => void
+
+Turns off all custom filters.
+
+> setSort: (sortColumn?: string) => void
+
+This toggles sort by columnName.
+
+> sortDirection?: 'asc' | 'desc';
+
+Sort direction applied.
+
+> sortColumn: string
+
+Name of the column being sorted by.
+
+> activePage: number
+
+Currently active page.
+
+> displayingFrom: number
+
+Start of pagination slice e.g. 50 in 50-70.
+
+> displayingTo: number;
+
+End of pagination slice e.g. 70 in 50-70.
+
+> initialCount: number
+
+Length of members array passed in.
+
+> filteredCount: number
+
+Length of filteredMembers array.
+
+> displayedCount: number
+
+Length of displayedMembers array. Number of currently displayed members.
+
+> numPages: number
+
+Number of pages in your collection.
+
+> pageSize: number
+
+Size of one page - number of elements to be rendered on one page.

src/ReactBigList/index.tsx

@@ -16,7 +16,7 @@ type State<T> = {
   activeFilters: string[];
   displayedCount: number;
   slicedMembers: T[];
-  filteredUsers: T[];
+  filteredMembers: T[];
   numPages: number;
   displayingFrom: number;
   displayingTo: number;
@@ -54,7 +54,7 @@ class ReactBigList<T> extends React.Component<ListifyProps<T>, State<T>> {
         sortDirection: this.props.initialSortDirection,
         sortColumn: undefined,
         slicedMembers: [],
-        filteredUsers: [],
+        filteredMembers: [],
         filteredCount: 0,
         displayedCount: 0,
         numPages: 1,
@@ -155,12 +155,12 @@ class ReactBigList<T> extends React.Component<ListifyProps<T>, State<T>> {
   };
 
   relistify(members: T[]): void {
-    let filteredUsers = this._sort(members);
-    filteredUsers = this._queryStringFilter(filteredUsers);
-    filteredUsers = this._customFilter(filteredUsers);
+    let filteredMembers = this._sort(members);
+    filteredMembers = this._queryStringFilter(filteredMembers);
+    filteredMembers = this._customFilter(filteredMembers);
 
     const { slicedMembers, numPages, displayingFrom, displayingTo, activePage } = this._paginate(
-      filteredUsers,
+      filteredMembers,
     );
 
     this.setState({
@@ -170,8 +170,8 @@ class ReactBigList<T> extends React.Component<ListifyProps<T>, State<T>> {
       displayingFrom,
       displayingTo,
       activePage,
-      filteredUsers,
-      filteredCount: filteredUsers.length,
+      filteredMembers,
+      filteredCount: filteredMembers.length,
     });
   }
 
@@ -221,7 +221,7 @@ class ReactBigList<T> extends React.Component<ListifyProps<T>, State<T>> {
       activePage,
       displayingTo,
       filteredCount,
-      filteredUsers,
+      filteredMembers,
     } = this.state;
 
     return children!({
@@ -235,7 +235,7 @@ class ReactBigList<T> extends React.Component<ListifyProps<T>, State<T>> {
       activePage,
       filteredCount,
       queryString,
-      filteredUsers,
+      filteredMembers,
       displayedMembers: slicedMembers,
       displayedCount: slicedMembers.length,
       setPageNumber: this.setPageNumber,

src/types.tsx

@@ -62,7 +62,7 @@ export interface PaginationData extends PaginationProps {
 
 export interface ChildrenProps<T> extends PaginationData {
   displayedMembers: T[];
-  filteredUsers: T[];
+  filteredMembers: T[];
   setPageNumber: (pageNumber: number) => void;
   setQueryString: (queryString: string) => void;
   queryString: string;

tests/index.spec.tsx

@@ -64,7 +64,7 @@ describe('ReactBigList', () => {
         activeFilters: [],
         activePage: 1,
         displayedCount: STRINGS.length,
-        filteredUsers: STRINGS,
+        filteredMembers: STRINGS,
         displayingFrom: 1,
         displayedMembers: STRINGS,
         initialCount: STRINGS.length,
@@ -104,7 +104,7 @@ describe('ReactBigList', () => {
       expect(data).toEqual({
         sortColumn: undefined,
         sortDirection: undefined,
-        filteredUsers: STRINGS,
+        filteredMembers: STRINGS,
         activeFilters: [],
         initialCount: 6,
         numPages: 3,
@@ -127,7 +127,7 @@ describe('ReactBigList', () => {
       const data: any = removePassedFunctions(childrenSpy.getCall(2).args[0]);
       expect(data).toEqual({
         activeFilters: [],
-        filteredUsers: ['azz', 'b', 'deee', 'e', 'g', 'z'],
+        filteredMembers: ['azz', 'b', 'deee', 'e', 'g', 'z'],
         activePage: 1,
         displayedCount: 6,
         displayingFrom: 1,
@@ -162,7 +162,7 @@ describe('ReactBigList', () => {
         initialCount: 6,
         numPages: 2,
         displayingFrom: 4,
-        filteredUsers: ['azz', 'b', 'deee', 'e', 'g', 'z'],
+        filteredMembers: ['azz', 'b', 'deee', 'e', 'g', 'z'],
         displayingTo: 6,
         activePage: 2,
         filteredCount: 6,