Add go to page navigation to channel pagination options #1166
4 changed files with 49 additions and 27 deletions
|
@ -4,6 +4,7 @@ import * as React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
centered?: boolean,
|
||||||
children: React.Node,
|
children: React.Node,
|
||||||
padded?: boolean,
|
padded?: boolean,
|
||||||
verticallyCentered?: boolean,
|
verticallyCentered?: boolean,
|
||||||
|
@ -15,12 +16,13 @@ export class FormRow extends React.PureComponent<Props> {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { children, padded, verticallyCentered } = this.props;
|
const { centered, children, padded, verticallyCentered } = this.props;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classnames('form-row', {
|
className={classnames('form-row', {
|
||||||
|
'form-row--centered': centered,
|
||||||
'form-row--padded': padded,
|
'form-row--padded': padded,
|
||||||
'form-row--centered': verticallyCentered,
|
'form-row--vertically-centered': verticallyCentered,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { buildURI } from 'lbryURI';
|
|
||||||
import BusyIndicator from 'component/common/busy-indicator';
|
import BusyIndicator from 'component/common/busy-indicator';
|
||||||
import FileTile from 'component/fileTile';
|
import { FormField, FormRow } from 'component/common/form';
|
||||||
import ReactPaginate from 'react-paginate';
|
import ReactPaginate from 'react-paginate';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import SubscribeButton from 'component/subscribeButton';
|
import SubscribeButton from 'component/subscribeButton';
|
||||||
|
@ -24,8 +23,6 @@ type Props = {
|
||||||
fetchClaims: (string, number) => void,
|
fetchClaims: (string, number) => void,
|
||||||
fetchClaimCount: string => void,
|
fetchClaimCount: string => void,
|
||||||
navigate: (string, {}) => void,
|
navigate: (string, {}) => void,
|
||||||
doChannelSubscribe: string => void,
|
|
||||||
doChannelUnsubscribe: string => void,
|
|
||||||
openModal: (string, {}) => void,
|
openModal: (string, {}) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -38,12 +35,12 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps: Props) {
|
componentWillReceiveProps(nextProps: Props) {
|
||||||
const { page, uri, fetching, fetchClaims, fetchClaimCount } = this.props;
|
const { page, uri, fetchClaims, fetchClaimCount } = this.props;
|
||||||
|
|
||||||
if (nextProps.page && page !== nextProps.page) {
|
if (nextProps.page && page !== nextProps.page) {
|
||||||
fetchClaims(nextProps.uri, nextProps.page);
|
fetchClaims(nextProps.uri, nextProps.page);
|
||||||
}
|
}
|
||||||
if (nextProps.uri != uri) {
|
if (nextProps.uri !== uri) {
|
||||||
fetchClaimCount(uri);
|
fetchClaimCount(uri);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -55,10 +52,17 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
this.props.navigate('/show', newParams);
|
this.props.navigate('/show', newParams);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
paginate(e, totalPages) {
|
||||||
|
// Change page if enter was pressed, and the given page is between
|
||||||
|
// the first and the last.
|
||||||
|
if (e.keyCode === 13 && e.target.value > 0 && e.target.value <= totalPages) {
|
||||||
|
this.changePage(e.target.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fetching, claimsInChannel, claim, uri, page, totalPages, openModal } = this.props;
|
const { fetching, claimsInChannel, claim, uri, page, totalPages, openModal } = this.props;
|
||||||
const { name, claim_id: claimId } = claim;
|
const { name } = claim;
|
||||||
const subscriptionUri = buildURI({ channelName: name, claimId }, false);
|
|
||||||
|
|
||||||
let contentList;
|
let contentList;
|
||||||
if (fetching) {
|
if (fetching) {
|
||||||
|
@ -89,21 +93,30 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
<section>{contentList}</section>
|
<section>{contentList}</section>
|
||||||
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
|
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
|
||||||
totalPages > 1 && (
|
totalPages > 1 && (
|
||||||
<ReactPaginate
|
<FormRow verticallyCentered centered>
|
||||||
pageCount={totalPages}
|
<ReactPaginate
|
||||||
pageRangeDisplayed={2}
|
pageCount={totalPages}
|
||||||
previousLabel="‹"
|
pageRangeDisplayed={2}
|
||||||
nextLabel="›"
|
previousLabel="‹"
|
||||||
activeClassName="pagination__item--selected"
|
nextLabel="›"
|
||||||
pageClassName="pagination__item"
|
activeClassName="pagination__item--selected"
|
||||||
previousClassName="pagination__item pagination__item--previous"
|
pageClassName="pagination__item"
|
||||||
nextClassName="pagination__item pagination__item--next"
|
previousClassName="pagination__item pagination__item--previous"
|
||||||
breakClassName="pagination__item pagination__item--break"
|
nextClassName="pagination__item pagination__item--next"
|
||||||
marginPagesDisplayed={2}
|
breakClassName="pagination__item pagination__item--break"
|
||||||
onPageChange={e => this.changePage(e.selected + 1)}
|
marginPagesDisplayed={2}
|
||||||
initialPage={parseInt(page - 1)}
|
onPageChange={e => this.changePage(e.selected + 1)}
|
||||||
containerClassName="pagination"
|
initialPage={parseInt(page - 1, 10)}
|
||||||
/>
|
containerClassName="pagination"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
className="paginate-channel"
|
||||||
|
onKeyUp={e => this.paginate(e, totalPages)}
|
||||||
|
prefix={__('Go to page:')}
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</FormRow>
|
||||||
)}
|
)}
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,11 +7,15 @@
|
||||||
padding-left: $spacing-vertical;
|
padding-left: $spacing-vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.form-row--centered {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
&.form-row--padded {
|
&.form-row--padded {
|
||||||
padding-top: $spacing-vertical * 2/3;
|
padding-top: $spacing-vertical * 2/3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.form-row--centered {
|
&.form-row--vertically-centered {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,6 +48,10 @@
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input.paginate-channel {
|
||||||
|
width: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
&.form-field--auto-height {
|
&.form-field--auto-height {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
.pagination {
|
.pagination {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue