#81 After closing body return focus to a header.

package.json

@@ -132,6 +132,7 @@
     "react-window": "^1.8.6",
     "redux-devtools-extension": "2.13.8",
     "redux-saga": "1.1.3",
+    "resize-observer": "^1.0.0",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",

src/components/Header/components/BranchStep/Header.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import slice from '@/redux/modules/branches';
 import HistoryIcon from 'mdi-react/HistoryIcon';
 import SourceBranchIcon from 'mdi-react/SourceBranchIcon';
@@ -15,12 +15,12 @@ const Properties = styled(PropertiesOrigin)`
   font-size: 1em;
 `;
 
-const Header = (props) => {
+const Header = forwardRef((props, ref) => {
   const { selected } = useSelector(slice.selectors.getState);
   const { name, commits } = selected || {};
 
   return (
-    <Container {...props}>
+    <Container {...props} ref={ref}>
       <SourceBranchIcon size={20} />
       <InfoContainer>
         {!selected && <div>Choose a branch</div>}
@@ -40,6 +40,8 @@ const Header = (props) => {
       </InfoContainer>
     </Container>
   );
-};
+});
+
+Header.displayName = 'Header';
 
 export default Header;

src/components/Header/components/CommitsStep/Header.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PollIcon from 'mdi-react/PollIcon';
 import styled from 'styled-components';
 import HeaderContainer from '../shared/HeaderContainer';
@@ -9,12 +9,14 @@ const Container = styled(HeaderContainer)`
   }
 `;
 
-const Header = (props) => {
+const Header = forwardRef((props, ref) => {
   return (
-    <Container {...props} title="Analyze commits">
+    <Container {...props} title="Analyze commits" ref={ref}>
       <PollIcon size={32} />
     </Container>
   );
-};
+});
+
+Header.displayName = 'Header';
 
 export default Header;

src/components/Header/components/ProfileStep/Header.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import slice from '@/redux/modules/profiles';
 import { Avatar } from '@material-ui/core';
 import LinkOrigin from '@material-ui/core/Link';
@@ -34,15 +34,15 @@ const Properties = styled(PropertiesOrigin)`
 
 const onClick = (event) => event.stopPropagation();
 
-const Header = (props) => {
+const Header = forwardRef((props, ref) => {
   const { selected } = useSelector(slice.selectors.getState);
   const {
     avatar, name, login,
     url, publicRepos, site,
   } = selected || {};
 
   return (
-    <Container {...props}>
+    <Container {...props} ref={ref}>
       <Avatar src={avatar} />
       <InfoContainer>
         {!selected && <div>Find a profile</div>}
@@ -88,6 +88,8 @@ const Header = (props) => {
       </InfoContainer>
     </Container>
   );
-};
+});
+
+Header.displayName = 'Header';
 
 export default Header;

src/components/Header/components/RepositoryStep/Header.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import slice from '@/redux/modules/repositories';
 import Link from '@material-ui/core/Link';
 import BookIcon from 'mdi-react/BookIcon';
@@ -12,12 +12,12 @@ import Title from '../shared/Title';
 
 const onClick = (event) => event.stopPropagation();
 
-const Header = (props) => {
+const Header = forwardRef((props, ref) => {
   const { selected } = useSelector(slice.selectors.getState);
   const { name, isPrivate, isFork, url } = selected || {};
 
   return (
-    <Container {...props}>
+    <Container {...props} ref={ref}>
       {isPrivate ? <BookLockIcon size={20} /> : (
         isFork
           ? <SourceRepositoryIcon size={20} />
@@ -42,6 +42,8 @@ const Header = (props) => {
       </InfoContainer>
     </Container>
   );
-};
+});
+
+Header.displayName = 'Header';
 
 export default Header;

src/components/Header/components/shared/HeaderContainer.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -106,15 +106,18 @@ const Divider = styled.div`
   }
 `;
 
-const HeaderContainer = ({ divider, button, children, ...rest }) => {
+const HeaderContainer = forwardRef((props, ref) => {
+  const { divider, button, children, ...rest } = props;
   const Component = button ? Button : Div;
   return (
-    <Component {...rest}>
+    <Component {...rest} ref={ref}>
       <Children>{children}</Children>
       {divider && <Divider />}
     </Component>
   );
-};
+});
+
+HeaderContainer.displayName = 'HeaderContainer';
 
 HeaderContainer.propTypes = {
   children: PropTypes.oneOfType([

src/components/Header/index.jsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } 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 DividerOriginal from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
 import { useSelector } from 'react-redux';
 import { useClickAway } from 'react-use';
@@ -25,10 +26,9 @@ const PaperStyled = styled(Paper)`
   left: 50%;
   top: 0;
   transform: translate(-50%, 0);
-  max-width: 480px;
-  min-width: 480px;
-  width: 480px;
-  //border-radius: 0 0 20px 20px;
+  max-width: 70vw;
+  min-width: 300px;
+  border-radius: 0 0 10px 10px;
   overflow: hidden;
   z-index: 10;
 `;
@@ -40,6 +40,10 @@ const Container = styled.div`
   width: 100%;
 `;
 
+const Divider = styled(DividerOriginal)`
+  background: rgba(0, 0, 0, 0.2);
+`;
+
 const RepoBranchContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -67,6 +71,10 @@ const Header = () => {
   const [step, setStep] = useUIProperty('step');
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const ref = useRef();
+  const profileRef = useRef();
+  const repositoryRef = useRef();
+  const branchRef = useRef();
+  const commitsRef = useRef();
   const { selected: profile } = useSelector(profilesSlice.selectors.getState);
   const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
   const { selected: branch } = useSelector(branchesSlice.selectors.getState);
@@ -90,27 +98,62 @@ const Header = () => {
 
   useClickAway(ref, onClickAway);
 
+  useEffect(
+    () => {
+      if (bodyOpen) {
+        return;
+      }
+
+      let element;
+      switch (step) {
+        case StageTypes.profile:
+          element = profileRef.current;
+          break;
+        case StageTypes.repository:
+          element = repositoryRef.current;
+          break;
+        case StageTypes.branch:
+          element = branchRef.current;
+          break;
+        case StageTypes.commits:
+          element = commitsRef.current;
+          break;
+        default:
+          break;
+      }
+
+      if (element) {
+        element.focus();
+      }
+    },
+    [bodyOpen, step],
+  );
+
   return (
     <PaperStyled square ref={ref}>
       <Container>
         <ProfileStepHeader
           onClick={onClick(StageTypes.profile)}
           divider
+          ref={profileRef}
         />
         <RepoBranchContainer>
           <RepoStepHeader
             onClick={onClick(StageTypes.repository)}
             disabled={!profile}
+            ref={repositoryRef}
           />
           <BranchStepHeader
             onClick={onClick(StageTypes.branch)}
             disabled={!repository}
+            ref={branchRef}
           />
         </RepoBranchContainer>
         <CommitsStepHeader
           onClick={onClick(StageTypes.commits)}
           disabled={!branch}
           divider
+          ref={commitsRef}
         />
         <ShowStepHeader disabled />
       </Container>
@@ -119,6 +162,7 @@ const Header = () => {
           <StepBody />
         </Collapse>
       )}
+      {bodyOpen && StepBody && <Divider />}
       <Tabs />
     </PaperStyled>
   );