shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

extract out PaginatedDataListItem

Browse Source
This commit is contained in:
Keith Grant 2019-05-16 21:51:43 -04:00
parent 510d56b245
commit 8cd05679c2
3 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/PaginatedDataList/PaginatedDataList.jsx
View File

@ -2,11 +2,6 @@ import React, { Fragment } from 'react';
import PropTypes, { arrayOf, shape, string, bool } from 'prop-types'; import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
import { import {
DataList, DataList,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
TextContent,
Title, Title,
EmptyState, EmptyState,
EmptyStateIcon, EmptyStateIcon,
@ -15,11 +10,12 @@ import {
import { CubesIcon } from '@patternfly/react-icons'; import { CubesIcon } from '@patternfly/react-icons';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withRouter, Link } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import Pagination from '../Pagination'; import Pagination from '../Pagination';
import DataListToolbar from '../DataListToolbar'; import DataListToolbar from '../DataListToolbar';
import PaginatedDataListItem from './PaginatedDataListItem';
import { import {
parseNamespacedQueryString, parseNamespacedQueryString,
updateNamespacedQueryString, updateNamespacedQueryString,
@ -38,13 +34,6 @@ const EmptyStateControlsWrapper = styled.div`
margin-left: 20px; margin-left: 20px;
} }
`; `;
const ListItemGrid = styled(TextContent)`
display: grid;
grid-template-columns: minmax(70px,max-content) repeat(auto-fit, minmax(60px,max-content));
grid-gap: 10px;
`;
class PaginatedDataList extends React.Component { class PaginatedDataList extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
@ -58,12 +47,6 @@ class PaginatedDataList extends React.Component {
this.handleSort = this.handleSort.bind(this); this.handleSort = this.handleSort.bind(this);
} }
getPageCount () {
const { itemCount, qsConfig, location } = this.props;
const queryParams = parseNamespacedQueryString(qsConfig, location.search);
return Math.ceil(itemCount / queryParams.page_size);
}
getSortOrder () { getSortOrder () {
const { qsConfig, location } = this.props; const { qsConfig, location } = this.props;
const queryParams = parseNamespacedQueryString(qsConfig, location.search); const queryParams = parseNamespacedQueryString(qsConfig, location.search);
@ -95,11 +78,6 @@ class PaginatedDataList extends React.Component {
history.push(`${pathname}?${qs}`); history.push(`${pathname}?${qs}`);
} }
getPluralItemName () {
const { itemName, itemNamePlural } = this.props;
return itemNamePlural || `${itemName}s`;
}
render () { render () {
const { const {
emptyStateControls, emptyStateControls,
@ -156,25 +134,7 @@ class PaginatedDataList extends React.Component {
})} })}
<DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}> <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
{items.map(item => (renderItem ? renderItem(item) : ( {items.map(item => (renderItem ? renderItem(item) : (
<DataListItem <PaginatedDataListItem key={item.id} item={item} />
aria-labelledby={`items-list-item-${item.id}`}
key={item.id}
>
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="team-name">
<ListItemGrid>
<Link to={{ pathname: item.url }}>
<b id={`items-list-item-${item.id}`}>
{item.name}
</b>
</Link>
</ListItemGrid>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
)))} )))}
</DataList> </DataList>
<Pagination <Pagination
@ -226,7 +186,7 @@ PaginatedDataList.defaultProps = {
itemName: 'item', itemName: 'item',
itemNamePlural: '', itemNamePlural: '',
showPageSizeOptions: true, showPageSizeOptions: true,
renderToolbar: ({ ...props }) => (<DataListToolbar {...props} />), renderToolbar: (props) => (<DataListToolbar {...props} />),
}; };
export { PaginatedDataList as _PaginatedDataList }; export { PaginatedDataList as _PaginatedDataList };

42
src/components/PaginatedDataList/PaginatedDataListItem.jsx Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
TextContent,
} from '@patternfly/react-core';
import styled from 'styled-components';
const DetailWrapper = styled(TextContent)`
display: grid;
grid-template-columns:
minmax(70px, max-content)
repeat(auto-fit, minmax(60px, max-content));
grid-gap: 10px;
`;
export default function PaginatedDataListItem ({ item }) {
return (
<DataListItem
aria-labelledby={`items-list-item-${item.id}`}
key={item.id}
>
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="team-name">
<DetailWrapper>
<Link to={{ pathname: item.url }}>
<b id={`items-list-item-${item.id}`}>
{item.name}
</b>
</Link>
</DetailWrapper>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
);
}

1
src/components/PaginatedDataList/index.js
View File

@ -1,5 +1,6 @@
import PaginatedDataList from './PaginatedDataList'; import PaginatedDataList from './PaginatedDataList';
export default PaginatedDataList; export default PaginatedDataList;
export { default as PaginatedDataListItem } from './PaginatedDataListItem';
export { default as ToolbarDeleteButton } from './ToolbarDeleteButton'; export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
export { default as ToolbarAddButton } from './ToolbarAddButton'; export { default as ToolbarAddButton } from './ToolbarAddButton';