62817568a7
* Replace withStyleswith useStyles (#1100) * Replace withStyleswith useStyles * Update messages * Use rem as a spacing unit (#1101) * Use rems as spacing units * Fix visual bugs * Update stories * Use macaw-ui as theme provider (#1108) * Use macaw ui as a theme provider * Add react-dom to aliases * Fix jest module resolution * Update useTheme hook usage * Fix test wrapper * Use macaw from git repo * Fix CI * Update stories * Fix aliasing * Extract savebar to macaw ui (#1146) * wip * Use savebar from macaw * Use confirm button from macaw * Improve file structure * Use sidebar context from macaw * Update macaw * Update macaw version * Remove savebar from storybook * Update stories * Use alerts and notifications from macaw (#1166) * Use alerts from macaw * Add notifications from macaw * Update stories * Pin macaw version * Encapsulate limit reached in one component * Remove unused imports * Use backlinks from macaw (#1183) * Use backlink from macaw * Update macaw version * Use macaw sidebar (#1148) * Use sidebar from macaw * Use shipped logo * Use lowercase * Update stories * Use user chip from macaw (#1191) * Use user chip from macaw * Use dedicated components for menu items * Simplify code * Bump version and fix types (#1210) * Rename onBack to onClick * Rename UserChip to UserChipMenu * Rename IMenuItem to SidebarMenuItem * Update macaw version * Fix tables after changes in macaw (#1220) * Update macaw version * Update changelog * Update stories * Fix after rebase * Update to macaw 0.2.0 * Lint files * Update macaw to 0.2.2
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { Typography } from "@material-ui/core";
|
|
import useNavigator from "@saleor/hooks/useNavigator";
|
|
import { makeStyles } from "@saleor/macaw-ui";
|
|
import React from "react";
|
|
|
|
import { DateTime } from "../Date";
|
|
import Link from "../Link";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
container: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
width: "100%"
|
|
},
|
|
date: {
|
|
color: theme.typography.caption.color,
|
|
paddingLeft: 24
|
|
},
|
|
elementsContainer: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap"
|
|
},
|
|
secondaryTitle: {
|
|
color: "#9e9e9e",
|
|
fontSize: 14,
|
|
marginTop: theme.spacing(2)
|
|
},
|
|
titleElement: {
|
|
marginRight: theme.spacing(0.5)
|
|
}
|
|
}),
|
|
{ name: "TimelineEventHeader" }
|
|
);
|
|
|
|
export interface TitleElement {
|
|
text: string;
|
|
link?: string;
|
|
}
|
|
|
|
export interface TimelineEventHeaderProps {
|
|
title?: string;
|
|
date: string;
|
|
titleElements?: TitleElement[];
|
|
secondaryTitle?: string;
|
|
}
|
|
|
|
export const TimelineEventHeader: React.FC<TimelineEventHeaderProps> = props => {
|
|
const { title, date, titleElements, secondaryTitle } = props;
|
|
const navigate = useNavigator();
|
|
|
|
const classes = useStyles(props);
|
|
|
|
return (
|
|
<div className={classes.container}>
|
|
{title && <Typography>{title}</Typography>}
|
|
{titleElements && (
|
|
<div className={classes.elementsContainer}>
|
|
{titleElements.filter(Boolean).map(({ text, link }) => {
|
|
if (link) {
|
|
return (
|
|
<Link
|
|
className={classes.titleElement}
|
|
onClick={() => navigate(link)}
|
|
>
|
|
{text}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Typography className={classes.titleElement}>{text}</Typography>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<Typography className={classes.date}>
|
|
<DateTime date={date} />
|
|
</Typography>
|
|
{secondaryTitle && (
|
|
<Typography className={classes.secondaryTitle}>
|
|
{secondaryTitle}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimelineEventHeader;
|