Add go to page navigation to channel pagination options #1166

Merged
miikkatu merged 2 commits from channel-pagination-go-to-page into master 2018-03-30 19:17:27 +02:00
4 changed files with 49 additions and 27 deletions

View file

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

View file

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

View file

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

View file

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