From 5744923265ff51e392575edfd6a8182589105dc6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Wed, 12 Aug 2020 01:59:27 +0300 Subject: feat: PollCreation page and Fab component --- src/components/Fab/Fab.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/components/Fab/Fab.tsx (limited to 'src/components/Fab/Fab.tsx') diff --git a/src/components/Fab/Fab.tsx b/src/components/Fab/Fab.tsx new file mode 100644 index 0000000..335fcba --- /dev/null +++ b/src/components/Fab/Fab.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom' +import { + Fab as FabBase, + useMediaQuery, + Slide, + useScrollTrigger +} from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; +import PlusIcon from '@material-ui/icons/Add'; + +interface PropTypes { + hideOnScroll?: boolean; +} + +const useStyles = makeStyles(theme => ({ + root: { + zIndex: 1200, + position: 'fixed', + + [theme.breakpoints.down('sm')]: { + right: theme.spacing(2), + bottom: theme.spacing(8) + }, + [theme.breakpoints.up('md')]: { + right: theme.spacing(5), + bottom: theme.spacing(5) + } + } +})); + +const Fab: React.FC = ({ hideOnScroll=false }) => { + const classes = useStyles(); + const history = useHistory(); + const trigger = useScrollTrigger(); + + const handleClick = () => { + history.push('/new'); + }; + + return ( + + + + + + ); +}; + +export default Fab; + -- cgit v1.2.3 From c65923480118e90675c81782b9e3bc653e8e3b40 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 17:20:28 +0300 Subject: fix: resolve eslint errors --- src/components/Fab/Fab.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) (limited to 'src/components/Fab/Fab.tsx') diff --git a/src/components/Fab/Fab.tsx b/src/components/Fab/Fab.tsx index 335fcba..7ca2893 100644 --- a/src/components/Fab/Fab.tsx +++ b/src/components/Fab/Fab.tsx @@ -1,11 +1,6 @@ import React from 'react'; -import { useHistory } from 'react-router-dom' -import { - Fab as FabBase, - useMediaQuery, - Slide, - useScrollTrigger -} from '@material-ui/core/'; +import { useHistory } from 'react-router-dom'; +import { Fab as FabBase, Slide, useScrollTrigger } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; import PlusIcon from '@material-ui/icons/Add'; @@ -15,7 +10,7 @@ interface PropTypes { const useStyles = makeStyles(theme => ({ root: { - zIndex: 1200, + zIndex: 1000, position: 'fixed', [theme.breakpoints.down('sm')]: { @@ -29,7 +24,7 @@ const useStyles = makeStyles(theme => ({ } })); -const Fab: React.FC = ({ hideOnScroll=false }) => { +const Fab: React.FC = ({ hideOnScroll = false }) => { const classes = useStyles(); const history = useHistory(); const trigger = useScrollTrigger(); @@ -40,7 +35,7 @@ const Fab: React.FC = ({ hideOnScroll=false }) => { return ( -