#75 Collapse if click away.

artzub · Jan 1, 2021 · d68ff4f · d68ff4f
1 parent 3483349
commit d68ff4f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/src/components/Header/components/CommitsStep/Header.jsx b/src/components/Header/components/CommitsStep/Header.jsx
@@ -1,12 +1,19 @@
 import React from 'react';
 import PollIcon from 'mdi-react/PollIcon';
+import styled from 'styled-components';
 import HeaderContainer from '../shared/HeaderContainer';
 
+const Container = styled(HeaderContainer)`
+  & > div:first-child {
+    justify-content: center;
+  }
+`;
+
 const Header = (props) => {
   return (
-    <HeaderContainer {...props} title="Analyze commits">
+    <Container {...props} title="Analyze commits">
       <PollIcon size={32} />
-    </HeaderContainer>
+    </Container>
   );
 };
 

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -1,25 +1,35 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { StageTypes } from '@/models/StageTypes';
 import branchesSlice from '@/redux/modules/branches';
 import profilesSlice from '@/redux/modules/profiles';
 import repositoriesSlice from '@/redux/modules/repositories';
 import { useUIProperty } from '@/shared/hooks';
 import Collapse from '@material-ui/core/Collapse';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import BranchStepBody from './components/BranchStep/Body';
 import BranchStepHeader from './components/BranchStep/Header';
 import CommitsStepBody from './components/CommitsStep/Body';
-import CommitsStepHeader from './components/CommitsStep/Header';
+import CommitsStepHeaderOrigin from './components/CommitsStep/Header';
 import RepoStepBody from './components/RepositoryStep/Body';
 import RepoStepHeader from './components/RepositoryStep/Header';
 import ShowStepHeader from './components/ShowStep/Header';
 import UserStepBody from './components/UserStep/Body';
 import UserStepHeader from './components/UserStep/Header';
+import { useClickAway } from 'react-use';
+
+const PaperStyled = styled(Paper)`
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+  max-width: 480px;
+  border-radius: 0 0 20px 20px;
+  overflow: hidden;
+`;
 
 const Container = styled.div`
   display: flex;
@@ -28,28 +38,19 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const Space = styled.div`
-  flex: 1 1 0;
-`;
-
 const RepoBranchContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  flex: 2 1 auto;
   
   & > * {
     width: 100%;
   }
 `;
 
-const PaperStyled = styled(Paper)`
-  position: absolute;
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0);
-  max-width: 480px;
-  border-radius: 0 0 20px 20px;
-  overflow: hidden;
+const CommitsStepHeader = styled(CommitsStepHeaderOrigin)`
+  flex: 1 1 auto;
 `;
 
 const StepBodies = {
@@ -63,6 +64,7 @@ const Header = () => {
   const [step, setStep] = useUIProperty('step');
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const [value, setValue] = useState(0);
+  const ref = useRef();
   const { selected: profile } = useSelector(profilesSlice.selectors.getState);
   const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
   const { selected: branch } = useSelector(branchesSlice.selectors.getState);
@@ -81,8 +83,17 @@ const Header = () => {
     [setBodyOpen, setStep, step],
   );
 
+  const onClickAway = useCallback(
+    () => {
+      setBodyOpen(false);
+    },
+    [setBodyOpen],
+  );
+
+  useClickAway(ref, onClickAway);
+
   return (
-    <PaperStyled square>
+    <PaperStyled square ref={ref}>
       <Tabs
         value={value}
         indicatorColor="primary"
@@ -99,7 +110,6 @@ const Header = () => {
           onClick={onClick(StageTypes.user)}
           divider
         />
-        <Space />
         <RepoBranchContainer>
           <RepoStepHeader
             onClick={onClick(StageTypes.repository)}
@@ -110,7 +120,6 @@ const Header = () => {
             disabled={!repository}
           />
         </RepoBranchContainer>
-        <Space />
         <CommitsStepHeader
           onClick={onClick(StageTypes.commits)}
           disabled={!branch}