mirror of
https://github.com/ansible/awx.git
synced 2026-03-19 18:07:33 -02:30
Removes withRouter from breadcrumbs in favor of hooks
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
|||||||
BreadcrumbItem,
|
BreadcrumbItem,
|
||||||
BreadcrumbHeading,
|
BreadcrumbHeading,
|
||||||
} from '@patternfly/react-core';
|
} from '@patternfly/react-core';
|
||||||
import { Link, Route, withRouter, useRouteMatch } from 'react-router-dom';
|
import { Link, Route, useRouteMatch } from 'react-router-dom';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
@@ -16,21 +16,22 @@ const PageSection = styled(PFPageSection)`
|
|||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Breadcrumbs = ({ breadcrumbConfig, match }) => {
|
const Breadcrumbs = ({ breadcrumbConfig }) => {
|
||||||
const { light } = PageSectionVariants;
|
const { light } = PageSectionVariants;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageSection variant={light}>
|
<PageSection variant={light}>
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<Route path="/:path">
|
<Route path="/:path">
|
||||||
<Crumb breadcrumbConfig={breadcrumbConfig} match={match} />
|
<Crumb breadcrumbConfig={breadcrumbConfig} />
|
||||||
</Route>
|
</Route>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Crumb = ({ breadcrumbConfig, match }) => {
|
const Crumb = ({ breadcrumbConfig }) => {
|
||||||
|
const match = useRouteMatch();
|
||||||
const crumb = breadcrumbConfig[match.url];
|
const crumb = breadcrumbConfig[match.url];
|
||||||
|
|
||||||
let crumbElement = (
|
let crumbElement = (
|
||||||
@@ -49,16 +50,11 @@ const Crumb = ({ breadcrumbConfig, match }) => {
|
|||||||
crumbElement = null;
|
crumbElement = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function NextCrumb() {
|
|
||||||
const routeMatch = useRouteMatch();
|
|
||||||
return <Crumb breadcrumbConfig={breadcrumbConfig} match={routeMatch} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{crumbElement}
|
{crumbElement}
|
||||||
<Route path={`${match.url}/:path`}>
|
<Route path={`${match.url}/:path`}>
|
||||||
<NextCrumb />
|
<Crumb breadcrumbConfig={breadcrumbConfig} />
|
||||||
</Route>
|
</Route>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
@@ -72,4 +68,4 @@ Crumb.propTypes = {
|
|||||||
breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
|
breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withRouter(Breadcrumbs);
|
export default Breadcrumbs;
|
||||||
|
|||||||
Reference in New Issue
Block a user