From cf10bd8925fe8cbffb91e2b282e16f086575bf32 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 19:53:37 +0300 Subject: feat: migrate Header to TypeScript --- src/lib/Header/Header.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/lib/Header/Header.tsx (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx new file mode 100644 index 0000000..85dac4b --- /dev/null +++ b/src/lib/Header/Header.tsx @@ -0,0 +1,79 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; + + +interface PropTypes { + logo: { + icon: React.ReactNode; + title: string; + }; + contents: any; + page: string; + setPage: any; +} + + + +const useStyles = makeStyles((theme: any) => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + paddingLeft: theme.spacing(3), + }, + logo: { + margin: theme.spacing(0, 3, 0, 1), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + fontSize: '0.8125rem', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header: React.FC = ({ logo, contents, page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event: any, newPage: string) => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map(item => ( + + ))} + + + + ); +}; + +export default Header; -- cgit v1.2.3 From f0a70407aaf633eeb2612ca054af27204d8c0a9f Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 19:56:47 +0300 Subject: fix: add missing prop --- src/lib/Header/Header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 85dac4b..2b13e3f 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -16,13 +16,13 @@ interface PropTypes { icon: React.ReactNode; title: string; }; - contents: any; + contents: { + [key: string]: React.ReactNode; + }; page: string; setPage: any; } - - const useStyles = makeStyles((theme: any) => ({ root: { background: theme.palette.background.elevation2, -- cgit v1.2.3 From ddb2ba73406d6982e81bc779c155e6c687f98bb5 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 20:19:57 +0300 Subject: feat: separate HeaderTab component @asketonim, feel free to correct these changes --- src/lib/Header/Header.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 2b13e3f..cc73fd9 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -10,14 +10,13 @@ import { import { makeStyles } from '@material-ui/core/styles'; - interface PropTypes { logo: { icon: React.ReactNode; title: string; }; contents: { - [key: string]: React.ReactNode; + [key: string]: React.ReactNode | null; }; page: string; setPage: any; @@ -49,6 +48,19 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); + const HeaderTab: React.FC<{ item: string }> = ({ item }) => { + const icon = contents[item]; + return ( + + ) + }; + const handleChange = (event: any, newPage: string) => { setPage(newPage); }; @@ -61,14 +73,8 @@ const Header: React.FC = ({ logo, contents, page, setPage }) => { {logo.title} - {contents && Object.keys(contents).map(item => ( - + {contents && Object.keys(contents).map((item: string) => ( + ))} -- cgit v1.2.3 From 78f5ec6998f96da4f99f169c10e6639dfa818207 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 21:07:49 +0300 Subject: fix: correct icon type This partially reverts last commit --- src/lib/Header/Header.tsx | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index cc73fd9..e052f6c 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -10,6 +10,7 @@ import { import { makeStyles } from '@material-ui/core/styles'; + interface PropTypes { logo: { icon: React.ReactNode; @@ -48,19 +49,6 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const HeaderTab: React.FC<{ item: string }> = ({ item }) => { - const icon = contents[item]; - return ( - - ) - }; - const handleChange = (event: any, newPage: string) => { setPage(newPage); }; @@ -74,7 +62,13 @@ const Header: React.FC = ({ logo, contents, page, setPage }) => { {contents && Object.keys(contents).map((item: string) => ( - + ))} -- cgit v1.2.3 From ea4472805d4d5a717f6b880200977805961dc546 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 21:28:11 +0300 Subject: fix: correct handleChange prop types --- src/lib/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index e052f6c..4e75ada 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const handleChange = (event: any, newPage: string) => { + const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => { setPage(newPage); }; -- cgit v1.2.3 From 94a00e852a0f99dbe9cef949375a79e175c7cc94 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 22:00:48 +0300 Subject: fix: correct setPage type --- src/lib/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 4e75ada..7f3d35d 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -20,7 +20,7 @@ interface PropTypes { [key: string]: React.ReactNode | null; }; page: string; - setPage: any; + setPage: (newPage: string) => void; } const useStyles = makeStyles((theme: any) => ({ -- cgit v1.2.3 From d50ac5ba261d1da6f367bd0e9e02da11f9de5921 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 6 Feb 2020 19:46:51 +0300 Subject: fix: get rid of all ESlint warnings --- src/lib/Header/Header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/lib/Header/Header.tsx') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 7f3d35d..233eacb 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -23,7 +23,7 @@ interface PropTypes { setPage: (newPage: string) => void; } -const useStyles = makeStyles((theme: any) => ({ +const useStyles = makeStyles(theme => ({ root: { background: theme.palette.background.elevation2, color: theme.palette.text.primary, @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => { + const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { setPage(newPage); }; -- cgit v1.2.3