upgrade to patternfly 2.x, pf/react-core 3.x (#184)

This commit is contained in:
Keith Grant
2019-04-30 08:19:19 -04:00
committed by GitHub
parent 6fe93f474f
commit ffade973a9
13 changed files with 1317 additions and 904 deletions

View File

@@ -3,7 +3,14 @@ import { shape, number, string, bool, func } from 'prop-types';
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { Badge, Switch, DataListItem, DataListCell } from '@patternfly/react-core';
import {
Badge,
Switch,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
} from '@patternfly/react-core';
function NotificationListItem (props) {
const {
@@ -25,48 +32,53 @@ function NotificationListItem (props) {
aria-labelledby={`items-list-item-${notification.id}`}
key={notification.id}
>
<DataListCell>
<Link
to={{
pathname: detailUrl
}}
style={{ marginRight: '1.5em' }}
>
<b id={`items-list-item-${notification.id}`}>{notification.name}</b>
</Link>
<Badge
style={capText}
isRead
>
{notification.notification_type}
</Badge>
</DataListCell>
<DataListCell alignRight>
<Switch
id={`notification-${notification.id}-success-toggle`}
label={i18n._(t`Successful`)}
isChecked={successTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
successTurnedOn,
'success'
)}
aria-label={i18n._(t`Toggle notification success`)}
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="name">
<Link
to={{
pathname: detailUrl
}}
style={{ marginRight: '1.5em' }}
>
<b id={`items-list-item-${notification.id}`}>{notification.name}</b>
</Link>
<Badge
style={capText}
isRead
>
{notification.notification_type}
</Badge>
</DataListCell>,
<DataListCell key="toggles" alignRight>
<Switch
id={`notification-${notification.id}-success-toggle`}
label={i18n._(t`Successful`)}
isChecked={successTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
successTurnedOn,
'success'
)}
aria-label={i18n._(t`Toggle notification success`)}
/>
<Switch
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
errorTurnedOn,
'error'
)}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListCell>
]}
/>
<Switch
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
errorTurnedOn,
'error'
)}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListCell>
</DataListItemRow>
</DataListItem>
)}
</I18n>

View File

@@ -3,6 +3,8 @@ import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
import {
DataList,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
Text,
TextContent,
@@ -154,21 +156,26 @@ class PaginatedDataList extends React.Component {
aria-labelledby={`items-list-item-${item.id}`}
key={item.id}
>
<DataListCell>
<TextContent style={detailWrapperStyle}>
<Link to={{ pathname: item.url }}>
<Text
id="items-list-item"
component={TextVariants.h6}
style={detailLabelStyle}
>
<span id={`items-list-item-${item.id}`}>
{item.name}
</span>
</Text>
</Link>
</TextContent>
</DataListCell>
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="team-name">
<TextContent style={detailWrapperStyle}>
<Link to={{ pathname: item.url }}>
<Text
id="items-list-item"
component={TextVariants.h6}
style={detailLabelStyle}
>
<span id={`items-list-item-${item.id}`}>
{item.name}
</span>
</Text>
</Link>
</TextContent>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
)))}
</DataList>