mirror of https://github.com/apache/superset.git
chore: Breaks the dataViewCommon folder into TableCollection and Pagination (#17132)
This commit is contained in:
parent
55be249870
commit
4c96ae76e3
|
@ -22,7 +22,7 @@ import configureStore from 'redux-mock-store';
|
|||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import QueryTable from 'src/SqlLab/components/QueryTable';
|
||||
import TableView from 'src/components/TableView';
|
||||
import { TableCollection } from 'src/components/dataViewCommon';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import { Provider } from 'react-redux';
|
||||
import { queries, user } from 'src/SqlLab/fixtures';
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@ import { getChartControlPanelRegistry } from '@superset-ui/core';
|
|||
import AlteredSliceTag from 'src/components/AlteredSliceTag';
|
||||
import ModalTrigger from 'src/components/ModalTrigger';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import TableCollection from 'src/components/dataViewCommon/TableCollection';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import TableView from 'src/components/TableView';
|
||||
|
||||
import {
|
||||
|
|
|
@ -29,9 +29,9 @@ import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
|
|||
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
||||
import ListView from 'src/components/ListView/ListView';
|
||||
import ListViewFilters from 'src/components/ListView/Filters';
|
||||
import ListViewPagination from 'src/components/dataViewCommon/Pagination';
|
||||
import TableCollection from 'src/components/dataViewCommon/TableCollection';
|
||||
import Pagination from 'src/components/Pagination';
|
||||
import ListViewPagination from 'src/components/Pagination';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import Pagination from 'src/components/Pagination/Wrapper';
|
||||
|
||||
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
||||
|
||||
|
|
|
@ -25,7 +25,8 @@ import cx from 'classnames';
|
|||
import Button from 'src/components/Button';
|
||||
import Icons from 'src/components/Icons';
|
||||
import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
|
||||
import { TableCollection, Pagination } from 'src/components/dataViewCommon';
|
||||
import Pagination from 'src/components/Pagination';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import CardCollection from './CardCollection';
|
||||
import FilterControls from './Filters';
|
||||
import { CardSortSelect } from './CardSortSelect';
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import Pagination from '.';
|
||||
import Wrapper from './Wrapper';
|
||||
|
||||
jest.mock('./Next', () => ({
|
||||
Next: () => <div data-test="next" />,
|
||||
|
@ -36,34 +36,34 @@ jest.mock('./Ellipsis', () => ({
|
|||
|
||||
test('Pagination rendering correctly', () => {
|
||||
render(
|
||||
<Pagination>
|
||||
<Wrapper>
|
||||
<li data-test="test" />
|
||||
</Pagination>,
|
||||
</Wrapper>,
|
||||
);
|
||||
expect(screen.getByRole('navigation')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('test')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Next attribute', () => {
|
||||
render(<Pagination.Next onClick={jest.fn()} />);
|
||||
render(<Wrapper.Next onClick={jest.fn()} />);
|
||||
expect(screen.getByTestId('next')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Prev attribute', () => {
|
||||
render(<Pagination.Next onClick={jest.fn()} />);
|
||||
render(<Wrapper.Next onClick={jest.fn()} />);
|
||||
expect(screen.getByTestId('next')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Item attribute', () => {
|
||||
render(
|
||||
<Pagination.Item onClick={jest.fn()}>
|
||||
<Wrapper.Item onClick={jest.fn()}>
|
||||
<></>
|
||||
</Pagination.Item>,
|
||||
</Wrapper.Item>,
|
||||
);
|
||||
expect(screen.getByTestId('item')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Ellipsis attribute', () => {
|
||||
render(<Pagination.Ellipsis onClick={jest.fn()} />);
|
||||
render(<Wrapper.Ellipsis onClick={jest.fn()} />);
|
||||
expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
|
||||
});
|
|
@ -0,0 +1,88 @@
|
|||
/**
|
||||
* 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 React from 'react';
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { Next } from './Next';
|
||||
import { Prev } from './Prev';
|
||||
import { Item } from './Item';
|
||||
import { Ellipsis } from './Ellipsis';
|
||||
|
||||
interface PaginationProps {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
}
|
||||
|
||||
const PaginationList = styled.ul`
|
||||
display: inline-block;
|
||||
margin: 16px 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0 4px;
|
||||
|
||||
span {
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light3};
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
span {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
z-index: 3;
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
cursor: default;
|
||||
background-color: ${({ theme }) => theme.colors.primary.base};
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function Pagination({ children }: PaginationProps) {
|
||||
return <PaginationList role="navigation">{children}</PaginationList>;
|
||||
}
|
||||
|
||||
Pagination.Next = Next;
|
||||
Pagination.Prev = Prev;
|
||||
Pagination.Item = Item;
|
||||
Pagination.Ellipsis = Ellipsis;
|
||||
|
||||
export default Pagination;
|
|
@ -16,73 +16,33 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { Next } from './Next';
|
||||
import { Prev } from './Prev';
|
||||
import { Item } from './Item';
|
||||
import { Ellipsis } from './Ellipsis';
|
||||
import Pagination from 'src/components/Pagination/Wrapper';
|
||||
import {
|
||||
createUltimatePagination,
|
||||
ITEM_TYPES,
|
||||
} from 'react-ultimate-pagination';
|
||||
|
||||
interface PaginationProps {
|
||||
children: JSX.Element | JSX.Element[];
|
||||
}
|
||||
const ListViewPagination = createUltimatePagination({
|
||||
WrapperComponent: Pagination,
|
||||
itemTypeToComponent: {
|
||||
[ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
|
||||
<Pagination.Item active={isActive} onClick={onClick}>
|
||||
{value}
|
||||
</Pagination.Item>
|
||||
),
|
||||
[ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
|
||||
<Pagination.Ellipsis disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
|
||||
<Pagination.Prev disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
|
||||
<Pagination.Next disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.FIRST_PAGE_LINK]: () => null,
|
||||
[ITEM_TYPES.LAST_PAGE_LINK]: () => null,
|
||||
},
|
||||
});
|
||||
|
||||
const PaginationList = styled.ul`
|
||||
display: inline-block;
|
||||
margin: 16px 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0 4px;
|
||||
|
||||
span {
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light3};
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
span {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
z-index: 3;
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
cursor: default;
|
||||
background-color: ${({ theme }) => theme.colors.primary.base};
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function Pagination({ children }: PaginationProps) {
|
||||
return <PaginationList role="navigation">{children}</PaginationList>;
|
||||
}
|
||||
|
||||
Pagination.Next = Next;
|
||||
Pagination.Prev = Prev;
|
||||
Pagination.Item = Item;
|
||||
Pagination.Ellipsis = Ellipsis;
|
||||
|
||||
export default Pagination;
|
||||
export default ListViewPagination;
|
||||
|
|
|
@ -20,7 +20,7 @@ import React from 'react';
|
|||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import { TableInstance, useTable } from 'react-table';
|
||||
import TableCollection from './TableCollection';
|
||||
import TableCollection from '.';
|
||||
|
||||
let defaultProps: any;
|
||||
|
|
@ -21,7 +21,8 @@ import isEqual from 'lodash/isEqual';
|
|||
import { styled, t } from '@superset-ui/core';
|
||||
import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
|
||||
import { Empty } from 'src/common/components';
|
||||
import { TableCollection, Pagination } from 'src/components/dataViewCommon';
|
||||
import Pagination from 'src/components/Pagination';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import { SortByType, ServerPagination } from './types';
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
|
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
* 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 React from 'react';
|
||||
import Pagination from 'src/components/Pagination';
|
||||
import {
|
||||
createUltimatePagination,
|
||||
ITEM_TYPES,
|
||||
} from 'react-ultimate-pagination';
|
||||
|
||||
const ListViewPagination = createUltimatePagination({
|
||||
WrapperComponent: Pagination,
|
||||
itemTypeToComponent: {
|
||||
[ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
|
||||
<Pagination.Item active={isActive} onClick={onClick}>
|
||||
{value}
|
||||
</Pagination.Item>
|
||||
),
|
||||
[ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
|
||||
<Pagination.Ellipsis disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
|
||||
<Pagination.Prev disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
|
||||
<Pagination.Next disabled={isActive} onClick={onClick} />
|
||||
),
|
||||
[ITEM_TYPES.FIRST_PAGE_LINK]: () => null,
|
||||
[ITEM_TYPES.LAST_PAGE_LINK]: () => null,
|
||||
},
|
||||
});
|
||||
|
||||
export default ListViewPagination;
|
|
@ -1,20 +0,0 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
export { default as Pagination } from './Pagination';
|
||||
export { default as TableCollection } from './TableCollection';
|
Loading…
Reference in New Issue