Skip to content

Commit

Permalink
Replace Edit component w/ TimelineActionCard
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Campbell committed Oct 22, 2020
1 parent 32c0963 commit db82683
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 35 deletions.
29 changes: 0 additions & 29 deletions src/components/Edit/Edit.md

This file was deleted.

1 change: 0 additions & 1 deletion src/components/Edit/index.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,27 @@ import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core';
import clsx from "clsx";
import RelativeTime from "react-relative-time";

export default function Edit({ datetime, by, content }){
export default function TimelineActionCard({ type, datetime, by, content }){

const theme = useTheme();

const types = {
"edit": {
"verbage": "added an edit",
"coloring": theme.palette.edit.main
},
"reply_to_user": {
"verbage": "replied",
"coloring": theme.palette.reply_to_user.main
}
}

const useStyles = makeStyles({
"Paper-root": {
overflow: "hidden"
},
"headerColor": {
backgroundColor: theme.palette.edit.main
backgroundColor: types[type].coloring
},
"padding": {
padding: theme.spacing(1)
Expand All @@ -25,7 +36,7 @@ export default function Edit({ datetime, by, content }){
return(
<Paper classes={{root: classes["Paper-root"]}}>
<div className={clsx(classes.headerColor, classes.padding)}>
<Typography variant="body1"><b>{by}</b> added an edit <RelativeTime value={datetime} /></Typography>
<Typography variant="body1"><b>{by}</b> {types[type].verbage} <RelativeTime value={datetime} /></Typography>
</div>
<div className={classes.padding}>
{content.map((line) => (
Expand All @@ -36,11 +47,19 @@ export default function Edit({ datetime, by, content }){
);
}

Edit.propTypes = {
TimelineActionCard.propTypes = {
"type": PropTypes.oneOf([
"edit",
"reply_to_user"
]),
/** ISO 8601 formatted time string. */
"datetime": PropTypes.string.isRequired,
/** The name of the person who added the edit. */
"by": PropTypes.string.isRequired,
/** An array of strings containing the content of the edit. */
"content": PropTypes.array.isRequired
}
};

TimelineActionCard.defaultProps = {
"type": "edit",
};
60 changes: 60 additions & 0 deletions src/components/TimelineActionCard/TimelineActionCard.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
Renders a card like view for an action with free form text content like an Edit or Reply.

```jsx
import { ThemeProvider } from "@material-ui/core/styles";
import webqueue2Theme from "../../theme";
import TimelineActionCard from "./TimelineActionCard";

const theme = webqueue2Theme(false);

<ThemeProvider theme={theme}>
<div style={{ display: "flex", justifyContent: "space-around" }}>
<div style={{ flexGrow: 1, padding: "0 8px" }}>
<TimelineActionCard
type="edit"
by="campb303"
datetime="2020-06-23T13:27:56"
content={[
"This be an edit my boy\n"
]}
/>
</div>
<div style={{ flexGrow: 1, padding: "0 8px" }}>
<TimelineActionCard
type="reply_to_user"
by="campb303"
datetime="2020-06-23T13:28:18"
content={[
"This be a reply my son\n",
"\n",
"Justin\n",
"ECN\n"
]}
/>
</div>
</div>
</ThemeProvider>
```

```jsx static
<TimelineActionCard
type="edit"
by="campb303"
datetime="2020-06-23T13:27:56"
content={[
"This be an edit my boy\n"
]}
/>

<TimelineActionCard
type="reply_to_user"
by="campb303"
datetime="2020-06-23T13:28:18"
content={[
"This be a reply my son\n",
"\n",
"Justin\n",
"ECN\n"
]}
/>
```
1 change: 1 addition & 0 deletions src/components/TimelineActionCard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./TimelineActionCard";

0 comments on commit db82683

Please sign in to comment.