diff options
| -rw-r--r-- | package-lock.json | 2 | ||||
| -rw-r--r-- | src/lib/Header/Header.tsx (renamed from src/lib/Header/Header.js) | 22 |
2 files changed, 18 insertions, 6 deletions
diff --git a/package-lock.json b/package-lock.json index 78a002e..1e0ba76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-benzin", - "version": "2.0.0", + "version": "2.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/lib/Header/Header.js b/src/lib/Header/Header.tsx index 3ade7b3..7f3d35d 100644 --- a/src/lib/Header/Header.js +++ b/src/lib/Header/Header.tsx @@ -11,7 +11,19 @@ import { import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +interface PropTypes { + logo: { + icon: React.ReactNode; + title: string; + }; + contents: { + [key: string]: React.ReactNode | null; + }; + page: string; + setPage: (newPage: string) => void; +} + +const useStyles = makeStyles((theme: any) => ({ root: { background: theme.palette.background.elevation2, color: theme.palette.text.primary, @@ -34,10 +46,10 @@ const useStyles = makeStyles(theme => ({ })); -const Header = ({ logo, contents, page, setPage }) => { +const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const handleChange = (event, newPage) => { + const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => { setPage(newPage); }; @@ -49,10 +61,10 @@ const Header = ({ logo, contents, page, setPage }) => { {logo.title} </Typography> <Tabs onChange={handleChange} value={page}> - {contents && Object.keys(contents).map(item => ( + {contents && Object.keys(contents).map((item: string) => ( <Tab label={item} - icon={contents[item]} + icon={contents[item] as JSX.Element} value={item} className={classes.tab} key={item} |