diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx index 5fc32169a..c3e9c06e3 100644 --- a/src/renderer/component/common/form-components/form-row.jsx +++ b/src/renderer/component/common/form-components/form-row.jsx @@ -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 { }; render() { - const { children, padded, verticallyCentered } = this.props; + const { centered, children, padded, verticallyCentered } = this.props; return (
{children} diff --git a/src/renderer/page/channel/view.jsx b/src/renderer/page/channel/view.jsx index d0ba96394..a2e80df44 100644 --- a/src/renderer/page/channel/view.jsx +++ b/src/renderer/page/channel/view.jsx @@ -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 { } 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 { 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 {
{contentList}
{(!fetching || (claimsInChannel && claimsInChannel.length)) && totalPages > 1 && ( - this.changePage(e.selected + 1)} - initialPage={parseInt(page - 1)} - containerClassName="pagination" - /> + + this.changePage(e.selected + 1)} + initialPage={parseInt(page - 1, 10)} + containerClassName="pagination" + /> + + this.paginate(e, totalPages)} + prefix={__('Go to page:')} + type="text" + /> + )} ); diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index 8e54d2f75..f05b802df 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -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; } diff --git a/src/renderer/scss/component/_pagination.scss b/src/renderer/scss/component/_pagination.scss index 9c70d32f4..6bb885469 100644 --- a/src/renderer/scss/component/_pagination.scss +++ b/src/renderer/scss/component/_pagination.scss @@ -1,7 +1,6 @@ .pagination { display: block; padding: 0; - margin: 0 auto; text-align: center; }