2021-12-30 15:46:12 +00:00
|
|
|
import { useRouter } from '@uirouter/react';
|
2022-06-23 06:32:18 +00:00
|
|
|
import { RefreshCw } from 'react-feather';
|
2021-12-30 15:46:12 +00:00
|
|
|
|
2022-06-17 16:18:42 +00:00
|
|
|
import { Button } from '../buttons';
|
2021-12-30 15:46:12 +00:00
|
|
|
|
|
|
|
import { Breadcrumbs } from './Breadcrumbs';
|
|
|
|
import { Crumb } from './Breadcrumbs/Breadcrumbs';
|
|
|
|
import { HeaderContainer } from './HeaderContainer';
|
|
|
|
import { HeaderContent } from './HeaderContent';
|
|
|
|
import { HeaderTitle } from './HeaderTitle';
|
2022-03-08 12:14:23 +00:00
|
|
|
import styles from './PageHeader.module.css';
|
2021-12-30 15:46:12 +00:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
reload?: boolean;
|
2022-06-23 06:32:18 +00:00
|
|
|
loading?: boolean;
|
|
|
|
onReload?(): Promise<void> | void;
|
2021-12-30 15:46:12 +00:00
|
|
|
breadcrumbs?: Crumb[];
|
|
|
|
title: string;
|
|
|
|
}
|
|
|
|
|
2022-06-23 06:32:18 +00:00
|
|
|
export function PageHeader({
|
|
|
|
title,
|
|
|
|
breadcrumbs = [],
|
|
|
|
reload,
|
|
|
|
loading,
|
|
|
|
onReload,
|
|
|
|
}: Props) {
|
2021-12-30 15:46:12 +00:00
|
|
|
const router = useRouter();
|
2022-06-23 06:32:18 +00:00
|
|
|
|
|
|
|
function onClickedRefresh() {
|
|
|
|
return onReload ? onReload() : router.stateService.reload();
|
|
|
|
}
|
|
|
|
|
2021-12-30 15:46:12 +00:00
|
|
|
return (
|
|
|
|
<HeaderContainer>
|
2022-07-01 01:14:22 +00:00
|
|
|
<HeaderContent>
|
|
|
|
<Breadcrumbs breadcrumbs={breadcrumbs} />
|
|
|
|
</HeaderContent>
|
2021-12-30 15:46:12 +00:00
|
|
|
<HeaderTitle title={title}>
|
|
|
|
{reload && (
|
2022-03-08 12:14:23 +00:00
|
|
|
<Button
|
|
|
|
color="link"
|
|
|
|
size="medium"
|
2022-06-23 06:32:18 +00:00
|
|
|
onClick={onClickedRefresh}
|
2022-03-08 12:14:23 +00:00
|
|
|
className={styles.reloadButton}
|
2022-06-23 06:32:18 +00:00
|
|
|
disabled={loading}
|
2022-03-08 12:14:23 +00:00
|
|
|
>
|
2022-07-06 06:08:45 +00:00
|
|
|
<RefreshCw className="feather icon-sm" />
|
2021-12-30 15:46:12 +00:00
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</HeaderTitle>
|
|
|
|
</HeaderContainer>
|
|
|
|
);
|
|
|
|
}
|