-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create EmailHeader component w/ docs
- Loading branch information
Justin Campbell
committed
Sep 21, 2020
1 parent
c37ac25
commit 223fcc6
Showing
3 changed files
with
83 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import { Card, CardHeader, makeStyles } from "@material-ui/core"; | ||
import UserAvatar from "../UserAvatar/"; | ||
import webqueue2Theme from "../../theme"; | ||
|
||
export default function EmailHeader({name, date, email}){ | ||
|
||
const theme = webqueue2Theme(false); | ||
const useStyles = makeStyles({ | ||
"verticalPadding": { | ||
paddingTop: theme.spacing(1), | ||
paddingBottom: theme.spacing(1), | ||
}, | ||
"removeCardHeaderPadding": { | ||
padding: "0" | ||
} | ||
}); | ||
const classes = useStyles(); | ||
|
||
/** | ||
* Returns the title for the user. | ||
* @param {string} name Name of the user. | ||
* @param {string} email Email address of the user. | ||
* @example | ||
* // Has alias and name | ||
* return "campb303 (Justin Campbell)" | ||
* // Has alias but no name | ||
* return "campb303" | ||
* // Has no alias and no name | ||
* return "" | ||
* @returns {string} | ||
*/ | ||
function buildTitle(name, email){ | ||
let title = ""; | ||
const isNotEmpty = (value) => { | ||
return value === "" || value === null ? false : true; | ||
}; | ||
if (isNotEmpty(name)){ | ||
title += `${name}`; | ||
}; | ||
if (isNotEmpty(email)){ | ||
title += ` <${email}>` | ||
} | ||
return title; | ||
}; | ||
|
||
return( | ||
<Card elevation={0} classes={{root: classes.verticalPadding}}> | ||
<CardHeader | ||
avatar={<UserAvatar userName={name} />} | ||
title={buildTitle(name, email)} | ||
subheader={Date(date)} | ||
classes={{root: classes.removeCardHeaderPadding}} | ||
/> | ||
</Card> | ||
); | ||
}; | ||
|
||
EmailHeader.propTypes = { | ||
/** Name of the user. */ | ||
"name": PropTypes.string, | ||
/** Date of the message. */ | ||
"date": PropTypes.string, | ||
/** Email address of the user. */ | ||
"email": PropTypes.string | ||
}; | ||
|
||
EmailHeader.defaultProps = { | ||
"name": "", | ||
"date": "", | ||
"email": "" | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
Description of EmailHeader. | ||
|
||
```jsx | ||
import EmailHeader from "./EmailHeader"; | ||
<EmailHeader /> | ||
``` | ||
```jsx static | ||
<EmailHeader /> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as EmailHeader } from "./EmailHeader"; |