Merge pull request #1166 from miikkatu/channel-pagination-go-to-page

Add go to page navigation to channel pagination options
This commit is contained in:
Sean Yesmunt 2018-03-30 10:17:26 -07:00 committed by GitHub
commit d6c7953658
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 27 deletions

View file

@ -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}

View file

@ -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,6 +93,7 @@ class ChannelPage extends React.PureComponent<Props> {
<section>{contentList}</section>
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
totalPages > 1 && (
<FormRow verticallyCentered centered>
<ReactPaginate
pageCount={totalPages}
pageRangeDisplayed={2}
@ -101,9 +106,17 @@ class ChannelPage extends React.PureComponent<Props> {
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={e => this.changePage(e.selected + 1)}
initialPage={parseInt(page - 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>
);

View file

@ -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;
}

View file

@ -1,7 +1,6 @@
.pagination {
display: block;
padding: 0;
margin: 0 auto;
text-align: center;
}