#68 Added show step.

artzub · Feb 3, 2022 · df24279 · df24279
1 parent e42f1a1
commit df24279
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 25 deletions.
diff --git a/src/components/Header/components/CommitsStep/Header.jsx b/src/components/Header/components/CommitsStep/Header.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import PollIcon from 'mdi-react/PollIcon';
-import styled from 'styled-components';
 import HeaderContainer from '../shared/HeaderContainer';
 
-const Container = styled(HeaderContainer)`
-  flex: unset;
-`;
-
 const Header = (props) => {
   return (
-    <Container {...props} title="Analyze commits">
+    <HeaderContainer {...props} title="Analyze commits">
       <PollIcon size={32} />
-    </Container>
+    </HeaderContainer>
   );
 };
 

diff --git a/src/components/Header/components/ShowStep/Header.js b/src/components/Header/components/ShowStep/Header.js
@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { useUIProperty } from '@/shared/hooks';
+import { IconButton } from '@material-ui/core';
+import PauseIcon from 'mdi-react/PauseIcon';
+import PlayArrowIcon from 'mdi-react/PlayArrowIcon';
+import ReplayIcon from 'mdi-react/ReplayIcon';
+import { useEvent } from 'react-use';
+import styled from 'styled-components';
+import HeaderContainer from '../shared/HeaderContainer';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 64px;
+  max-width: 64px;
+  overflow: hidden;
+  
+  & > * {
+    transition: margin-left 0.3s, transform 0.3s;
+    margin-left: 0;
+    transform: translate(0, 0);
+  }
+
+  & > *:first-child:last-child {
+    margin-left: 50%;
+    transform: translate(-50%, 0);
+  }
+`;
+
+
+const Header = (props) => {
+  const [start, setStart] = useUIProperty('start');
+  const [pause, setPause] = useUIProperty('pause');
+
+  const onClick = useCallback(
+    (type) => () => {
+      switch (type) {
+        case 'start':
+          setStart(true);
+          setPause(false);
+          break;
+        case 'pause':
+          setPause(true);
+          break;
+        case 'replay':
+          setPause(false);
+          setStart(true);
+          break;
+        default:
+          break;
+      }
+    },
+    [setPause, setStart],
+  );
+
+  useEvent('blur', () => setPause(true), window);
+
+  const isRun = start && !pause;
+
+  return (
+    <HeaderContainer
+      {...props}
+      tabIndex={-1}
+      className="notAction"
+    >
+      <ButtonContainer>
+        <IconButton size="small" onClick={onClick(isRun ? 'pause' : 'start')}>
+          {isRun && <PauseIcon size={24} />}
+          {!isRun && <PlayArrowIcon size={24} />}
+        </IconButton>
+        {start && pause && (
+          <IconButton size="small" onClick={onClick('replay')}>
+            <ReplayIcon size={24} />
+          </IconButton>
+        )}
+      </ButtonContainer>
+    </HeaderContainer>
+  );
+};
+
+export default Header;
diff --git a/src/components/Header/components/UserStep/Header.jsx b/src/components/Header/components/UserStep/Header.jsx
@@ -14,6 +14,12 @@ import Property from '../shared/Property';
 import PropertyValue from '../shared/PropertyValue';
 import Title from '../shared/Title';
 
+const Container = styled(HeaderContainer)`
+  & > div:first-child {
+    padding-left: 8px;
+  }
+`;
+
 const Link = styled(LinkOrigin)`
   display: flex;
   align-items: center;
@@ -34,7 +40,7 @@ const Header = (props) => {
   } = selected || {};
 
   return (
-    <HeaderContainer {...props}>
+    <Container {...props}>
       <Avatar src={avatar_url} />
       <InfoContainer>
         {!selected && <div>Find a user</div>}
@@ -78,7 +84,7 @@ const Header = (props) => {
           </React.Fragment>
         )}
       </InfoContainer>
-    </HeaderContainer>
+    </Container>
   );
 };
 

diff --git a/src/components/Header/components/shared/HeaderContainer.jsx b/src/components/Header/components/shared/HeaderContainer.jsx
@@ -21,8 +21,12 @@ const Container = styled.button`
   &:focus-visible {
     outline: -webkit-focus-ring-color auto 1px;
   }
-  
+
   &:disabled {
+    pointer-events: none;
+  }
+  
+  &.notAction {
     cursor: default;
   }
 `;
@@ -37,6 +41,11 @@ const Children = styled.div`
   transition: background 0.3s, opacity 0.5s;
   flex: 1 1 0;
   overflow: hidden;
+  background: transparent;
+  
+  ${Container}.notAction &:not(#fake_id_hack) {
+    background: transparent;
+  }
 
   ${Container}:hover:not(:disabled) & {
     background: rgba(255, 255, 255, 0.1);

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -17,6 +17,7 @@ import CommitsStepBody from './components/CommitsStep/Body';
 import CommitsStepHeader 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';
 
@@ -27,26 +28,29 @@ 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: 1 1 0;
   
   & > * {
     width: 100%;
   }
 `;
 
-const PaperStyled = withStyles(() => ({
-  root: {
-    position: 'absolute',
-    left: '50%',
-    top: 0,
-    transform: 'translate(-50%, 0)',
-    maxWidth: '480px',
-  },
-}))(Paper);
+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 StepBodies = {
   [StageTypes.user]: UserStepBody,
@@ -95,6 +99,7 @@ const Header = () => {
           onClick={onClick(StageTypes.user)}
           divider
         />
+        <Space />
         <RepoBranchContainer>
           <RepoStepHeader
             onClick={onClick(StageTypes.repository)}
@@ -105,14 +110,13 @@ const Header = () => {
             disabled={!repository}
           />
         </RepoBranchContainer>
+        <Space />
         <CommitsStepHeader
           onClick={onClick(StageTypes.commits)}
           disabled={!branch}
           divider
         />
-        <div>
-          Show
-        </div>
+        <ShowStepHeader disabled />
       </Container>
       {StepBody && (
         <Collapse in={bodyOpen}>

diff --git a/src/components/StageController/useStageCommits.js b/src/components/StageController/useStageCommits.js
@@ -9,6 +9,8 @@ import { useDispatch, useSelector } from 'react-redux';
 export const useStageCommits = (amount) => {
   const dispatch = useDispatch();
   const [, setStoredValue] = useUIProperty('commitsCount');
+  const [, setStart] = useUIProperty('start');
+  const [, setPause] = useUIProperty('pause');
   const [refreshKey] = useUIProperty('refreshKey');
 
   const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
@@ -21,13 +23,17 @@ export const useStageCommits = (amount) => {
 
   useEffect(
     () => {
-      dispatch(commitsSlice.actions.clear());
       const fixedAmount = +amount;
 
       if (!branch || !owner || !repo || !fixedAmount || fixedAmount < 1) {
         return undefined;
       }
 
+      setStart(false);
+      setPause(false);
+
+      dispatch(commitsSlice.actions.clear());
+
       setStoredValue(fixedAmount);
 
       dispatch(commitsSlice.actions.fetch({
@@ -41,6 +47,10 @@ export const useStageCommits = (amount) => {
         dispatch(commitsSlice.actions.cancel());
       };
     },
-    [branch, owner, repo, dispatch, amount, setStoredValue, refreshKey],
+    [
+      branch, owner, repo,
+      dispatch, amount, setStoredValue,
+      refreshKey, setStart, setPause,
+    ],
   );
 };