mirror of https://github.com/apache/druid.git
Table pagination style change (#7435)
* Style pagination * Removed use of important * Removed space * Align items * Switched back to react table 6.8.6 * Component name change
This commit is contained in:
Qi Shu
Clint Wylie
parent
408e3e1b2a
commit
bbb620125d
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.ReactTable {
|
||||
.-pageJump {
|
||||
.bp3-input {
|
||||
background-color: #374653;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.-pageSizeOptions {
|
||||
.bp3-html-select select {
|
||||
background-color: #394b59;
|
||||
width: 90px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {Button, Classes, HTMLSelect} from '@blueprintjs/core';
|
||||
import * as React from 'react';
|
||||
|
||||
import './react-table-custom-pagination.scss';
|
||||
|
||||
interface ReactTableCustomPaginationProps extends React.Props<any> {
|
||||
pages: number;
|
||||
page: number;
|
||||
showPageSizeOptions: boolean;
|
||||
pageSizeOptions: number[];
|
||||
pageSize: number;
|
||||
showPageJump: boolean;
|
||||
canPrevious: boolean;
|
||||
canNext: boolean;
|
||||
onPageSizeChange: any;
|
||||
previousText: string;
|
||||
nextText: string;
|
||||
onPageChange: any;
|
||||
ofText: string;
|
||||
pageText: string;
|
||||
rowsText: string;
|
||||
style: Record<string, any>;
|
||||
}
|
||||
|
||||
interface ReactTableCustomPaginationState {
|
||||
page: string | number;
|
||||
}
|
||||
|
||||
export class ReactTableCustomPagination extends React.Component<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
|
||||
constructor(props: ReactTableCustomPaginationProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
page: props.page
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: ReactTableCustomPaginationProps) {
|
||||
this.setState({ page: nextProps.page });
|
||||
}
|
||||
|
||||
getSafePage = (page: any) => {
|
||||
if (Number.isNaN(page)) {
|
||||
page = this.props.page;
|
||||
}
|
||||
return Math.min(Math.max(page, 0), this.props.pages - 1);
|
||||
}
|
||||
|
||||
changePage = (page: any) => {
|
||||
page = this.getSafePage(page);
|
||||
this.setState({ page });
|
||||
if (this.props.page !== page) {
|
||||
this.props.onPageChange(page);
|
||||
}
|
||||
}
|
||||
|
||||
applyPage = (e: any) => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
const page = this.state.page;
|
||||
this.changePage(page === '' ? this.props.page : page);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
pages,
|
||||
page,
|
||||
showPageSizeOptions,
|
||||
pageSizeOptions,
|
||||
pageSize,
|
||||
showPageJump,
|
||||
canPrevious,
|
||||
canNext,
|
||||
onPageSizeChange,
|
||||
style,
|
||||
previousText,
|
||||
nextText,
|
||||
ofText,
|
||||
pageText,
|
||||
rowsText
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className={'-pagination'} style={style}>
|
||||
<div className="-previous">
|
||||
<Button
|
||||
fill
|
||||
onClick={() => {
|
||||
if (!canPrevious) return;
|
||||
this.changePage(page - 1);
|
||||
}}
|
||||
disabled={!canPrevious}
|
||||
>
|
||||
{previousText}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="-center">
|
||||
<span className="-pageInfo">
|
||||
{pageText}{' '}
|
||||
{showPageJump
|
||||
? <div className="-pageJump">
|
||||
<input
|
||||
className={Classes.INPUT}
|
||||
type={this.state.page === '' ? 'text' : 'number'}
|
||||
onChange={e => {
|
||||
const val: string = e.target.value;
|
||||
const page: number = parseInt(val, 10) - 1;
|
||||
if (val === '') {
|
||||
return this.setState({ page: val });
|
||||
}
|
||||
this.setState({ page: this.getSafePage(page) });
|
||||
}}
|
||||
value={this.state.page === '' ? '' : (this.state.page as number) + 1}
|
||||
onBlur={this.applyPage}
|
||||
onKeyPress={e => {
|
||||
if (e.which === 13 || e.keyCode === 13) {
|
||||
this.applyPage(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
: <span className="-currentPage">{page + 1}</span>
|
||||
}
|
||||
{' '}
|
||||
{ofText} <span className="-totalPages">{pages || 1}</span>
|
||||
</span>
|
||||
{showPageSizeOptions && (
|
||||
<span className="select-wrap -pageSizeOptions">
|
||||
<HTMLSelect
|
||||
onChange={e => onPageSizeChange(Number(e.target.value))}
|
||||
value={pageSize}
|
||||
>
|
||||
{pageSizeOptions.map((option: any, i: number) => (
|
||||
<option key={i} value={option}>
|
||||
{`${option} ${rowsText}`}
|
||||
</option>
|
||||
))}
|
||||
</HTMLSelect>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="-next">
|
||||
<Button
|
||||
fill
|
||||
onClick={() => {
|
||||
if (!canNext) return;
|
||||
this.changePage(page + 1);
|
||||
}}
|
||||
disabled={!canNext}
|
||||
>
|
||||
{nextText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -16,20 +16,15 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Button } from '@blueprintjs/core';
|
||||
import * as React from 'react';
|
||||
import { Filter, ReactTableDefaults } from 'react-table';
|
||||
|
||||
import { Loader } from '../components/loader';
|
||||
import { countBy, makeTextFilter } from '../utils';
|
||||
|
||||
/* tslint:disable:max-classes-per-file */
|
||||
import { ReactTableCustomPagination } from './react-table-custom-pagination';
|
||||
|
||||
class FullButton extends React.Component {
|
||||
render() {
|
||||
return <Button fill {...this.props}/>;
|
||||
}
|
||||
}
|
||||
/* tslint:disable:max-classes-per-file */
|
||||
|
||||
class NoData extends React.Component {
|
||||
render() {
|
||||
|
|
@ -50,8 +45,7 @@ Object.assign(ReactTableDefaults, {
|
|||
loadingText: '',
|
||||
NoDataComponent: NoData,
|
||||
FilterComponent: makeTextFilter(),
|
||||
PreviousComponent: FullButton,
|
||||
NextComponent: FullButton,
|
||||
PaginationComponent: ReactTableCustomPagination,
|
||||
AggregatedComponent: (opt: any) => {
|
||||
const { subRows, column } = opt;
|
||||
const previewValues = subRows.filter((d: any) => typeof d[column.id] !== 'undefined').map((row: any) => row[column.id]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue