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';
|
||||
|
||||
type Props = {
|
||||
centered?: boolean,
|
||||
children: React.Node,
|
||||
padded?: boolean,
|
||||
verticallyCentered?: boolean,
|
||||
|
@ -15,12 +16,13 @@ export class FormRow extends React.PureComponent<Props> {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { children, padded, verticallyCentered } = this.props;
|
||||
const { centered, children, padded, verticallyCentered } = this.props;
|
||||
return (
|
||||
<div
|
||||
className={classnames('form-row', {
|
||||
'form-row--centered': centered,
|
||||
'form-row--padded': padded,
|
||||
'form-row--centered': verticallyCentered,
|
||||
'form-row--vertically-centered': verticallyCentered,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { buildURI } from 'lbryURI';
|
||||
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 Button from 'component/button';
|
||||
import SubscribeButton from 'component/subscribeButton';
|
||||
|
@ -24,8 +23,6 @@ type Props = {
|
|||
fetchClaims: (string, number) => void,
|
||||
fetchClaimCount: string => void,
|
||||
navigate: (string, {}) => void,
|
||||
doChannelSubscribe: string => void,
|
||||
doChannelUnsubscribe: string => void,
|
||||
openModal: (string, {}) => void,
|
||||
};
|
||||
|
||||
|
@ -38,12 +35,12 @@ class ChannelPage extends React.PureComponent<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) {
|
||||
fetchClaims(nextProps.uri, nextProps.page);
|
||||
}
|
||||
if (nextProps.uri != uri) {
|
||||
if (nextProps.uri !== uri) {
|
||||
fetchClaimCount(uri);
|
||||
}
|
||||
}
|
||||
|
@ -55,10 +52,17 @@ class ChannelPage extends React.PureComponent<Props> {
|
|||
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() {
|
||||
const { fetching, claimsInChannel, claim, uri, page, totalPages, openModal } = this.props;
|
||||
const { name, claim_id: claimId } = claim;
|
||||
const subscriptionUri = buildURI({ channelName: name, claimId }, false);
|
||||
const { name } = claim;
|
||||
|
||||
let contentList;
|
||||
if (fetching) {
|
||||
|
@ -89,21 +93,30 @@ class ChannelPage extends React.PureComponent<Props> {
|
|||
<section>{contentList}</section>
|
||||
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
|
||||
totalPages > 1 && (
|
||||
<ReactPaginate
|
||||
pageCount={totalPages}
|
||||
pageRangeDisplayed={2}
|
||||
previousLabel="‹"
|
||||
nextLabel="›"
|
||||
activeClassName="pagination__item--selected"
|
||||
pageClassName="pagination__item"
|
||||
previousClassName="pagination__item pagination__item--previous"
|
||||
nextClassName="pagination__item pagination__item--next"
|
||||
breakClassName="pagination__item pagination__item--break"
|
||||
marginPagesDisplayed={2}
|
||||
onPageChange={e => this.changePage(e.selected + 1)}
|
||||
initialPage={parseInt(page - 1)}
|
||||
containerClassName="pagination"
|
||||
/>
|
||||
<FormRow verticallyCentered centered>
|
||||
<ReactPaginate
|
||||
pageCount={totalPages}
|
||||
pageRangeDisplayed={2}
|
||||
previousLabel="‹"
|
||||
nextLabel="›"
|
||||
activeClassName="pagination__item--selected"
|
||||
pageClassName="pagination__item"
|
||||
previousClassName="pagination__item pagination__item--previous"
|
||||
nextClassName="pagination__item pagination__item--next"
|
||||
breakClassName="pagination__item pagination__item--break"
|
||||
marginPagesDisplayed={2}
|
||||
onPageChange={e => this.changePage(e.selected + 1)}
|
||||
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>
|
||||
);
|
||||
|
|
|
@ -7,11 +7,15 @@
|
|||
padding-left: $spacing-vertical;
|
||||
}
|
||||
|
||||
&.form-row--centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.form-row--padded {
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
&.form-row--centered {
|
||||
&.form-row--vertically-centered {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
@ -44,6 +48,10 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input.paginate-channel {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&.form-field--auto-height {
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.pagination {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue