This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git
The following commit(s) were added to refs/heads/master by this push:
new bbb6201 Table pagination style change (#7435)
bbb6201 is described below
commit bbb620125d7808f81544303684d70cd715d9d10d
Author: Qi Shu <shuqi...@gmail.com>
AuthorDate: Wed Apr 10 23:34:03 2019 -0700
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
---
.../bootstrap/react-table-custom-pagination.scss | 36 +++++
.../bootstrap/react-table-custom-pagination.tsx | 176 +++++++++++++++++++++
web-console/src/bootstrap/react-table-defaults.tsx | 12 +-
3 files changed, 215 insertions(+), 9 deletions(-)
diff --git a/web-console/src/bootstrap/react-table-custom-pagination.scss
b/web-console/src/bootstrap/react-table-custom-pagination.scss
new file mode 100644
index 0000000..3d6a18b
--- /dev/null
+++ b/web-console/src/bootstrap/react-table-custom-pagination.scss
@@ -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;
+ }
+ }
+}
diff --git a/web-console/src/bootstrap/react-table-custom-pagination.tsx
b/web-console/src/bootstrap/react-table-custom-pagination.tsx
new file mode 100644
index 0000000..a55cf51
--- /dev/null
+++ b/web-console/src/bootstrap/react-table-custom-pagination.tsx
@@ -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>
+ );
+ }
+}
diff --git a/web-console/src/bootstrap/react-table-defaults.tsx
b/web-console/src/bootstrap/react-table-defaults.tsx
index 0a9d632..728781c 100644
--- a/web-console/src/bootstrap/react-table-defaults.tsx
+++ b/web-console/src/bootstrap/react-table-defaults.tsx
@@ -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]);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@druid.apache.org
For additional commands, e-mail: commits-h...@druid.apache.org
