#75 slide tabs

package.json

@@ -103,6 +103,7 @@
     "mdi-react": "7.4.0",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pixi.js": "^5.3.7",
     "pnp-webpack-plugin": "1.6.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

src/components/Header/components/ShowStep/Header.js

@@ -61,7 +61,7 @@ const Header = (props) => {
     <HeaderContainer
       {...props}
       tabIndex={-1}
-      className="notAction"
+      button={false}
     >
       <ButtonContainer>
         <IconButton size="small" onClick={onClick(isRun ? 'pause' : 'start')}>

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

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Container = styled.button`
+const Button = styled.button.attrs({
+  type: 'button',
+})`
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -31,6 +33,17 @@ const Container = styled.button`
   }
 `;
 
+const Div = styled.div.attrs({
+  className: `${Button}`,
+})`
+  outline: 0 !important;
+  
+  ${({ disabled }) => disabled && `
+    pointer-events: none;
+    opacity: 0.4;
+  `}
+`;
+
 const Children = styled.div`
   position: relative;
   display: flex;
@@ -43,19 +56,19 @@ const Children = styled.div`
   overflow: hidden;
   background: transparent;
   
-  ${Container}.notAction &:not(#fake_id_hack) {
+  ${Button}.notAction &:not(#fake_id_hack) {
     background: transparent;
   }
 
-  ${Container}:hover:not(:disabled) & {
+  ${Button}:hover:not(:disabled) & {
     background: rgba(255, 255, 255, 0.1);
   }
 
-  ${Container}:active:not(:disabled) & {
+  ${Button}:active:not(:disabled) & {
     background: rgba(255, 255, 255, 0.2);
   }
 
-  ${Container}:disabled & {
+  ${Button}:disabled & {
     opacity: 0.4;
   }
 `;
@@ -84,21 +97,22 @@ const Divider = styled.div`
     transition: background 0.3s;
   }
 
-  ${Container}:hover:not(:disabled) &:after {
+  ${Button}:hover:not(:disabled) &:after {
     background: rgba(255, 255, 255, 0.1);
   }
 
-  ${Container}:active:not(:disabled) &:after {
+  ${Button}:active:not(:disabled) &:after {
     background: rgba(255, 255, 255, 0.2);
   }
 `;
 
-const HeaderContainer = ({ divider, children, ...rest }) => {
+const HeaderContainer = ({ divider, button, children, ...rest }) => {
+  const Component = button ? Button : Div;
   return (
-    <Container type="button" {...rest}>
+    <Component {...rest}>
       <Children>{children}</Children>
       {divider && <Divider />}
-    </Container>
+    </Component>
   );
 };
 
@@ -108,9 +122,11 @@ HeaderContainer.propTypes = {
     PropTypes.node,
   ]),
   divider: PropTypes.bool,
+  button: PropTypes.bool,
 };
 
 HeaderContainer.defaultProps = {
+  button: true,
   children: [],
   divider: false,
 };

src/components/Header/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { StageTypes } from '@/models/StageTypes';
 import branchesSlice from '@/redux/modules/branches';
 import profilesSlice from '@/redux/modules/profiles';
@@ -9,6 +9,7 @@ import Paper from '@material-ui/core/Paper';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import { useSelector } from 'react-redux';
+import { useClickAway } from 'react-use';
 import styled from 'styled-components';
 import BranchStepBody from './components/BranchStep/Body';
 import BranchStepHeader from './components/BranchStep/Header';
@@ -19,7 +20,6 @@ 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;
@@ -29,6 +29,7 @@ const PaperStyled = styled(Paper)`
   max-width: 480px;
   border-radius: 0 0 20px 20px;
   overflow: hidden;
+  z-index: 10;
 `;
 
 const Container = styled.div`
@@ -54,23 +55,23 @@ const CommitsStepHeader = styled(CommitsStepHeaderOrigin)`
 `;
 
 const StepBodies = {
-  [StageTypes.user]: UserStepBody,
+  [StageTypes.profile]: UserStepBody,
   [StageTypes.repository]: RepoStepBody,
   [StageTypes.branch]: BranchStepBody,
   [StageTypes.commits]: CommitsStepBody,
 };
 
 const Header = () => {
+  const [view, setView] = useUIProperty('view', StageTypes.profile);
   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);
 
   const handleChange = (event, newValue) => {
-    setValue(newValue);
+    setView(newValue);
   };
 
   const StepBody = StepBodies[step];
@@ -95,19 +96,19 @@ const Header = () => {
   return (
     <PaperStyled square ref={ref}>
       <Tabs
-        value={value}
+        value={view}
         indicatorColor="primary"
         textColor="primary"
         centered
         onChange={handleChange}
       >
-        <Tab label="User" />
-        <Tab label="Repository" />
-        <Tab label="Show" />
+        <Tab label="User" value={StageTypes.profile} />
+        <Tab label="Repository" value={StageTypes.repository} />
+        <Tab label="Show" value={StageTypes.show} />
       </Tabs>
       <Container>
         <UserStepHeader
-          onClick={onClick(StageTypes.user)}
+          onClick={onClick(StageTypes.profile)}
           divider
         />
         <RepoBranchContainer>

src/components/Layout.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import Header from '@/components/Header';
-import Main from '@/components/Main';
 import Progress from '@/components/Progress';
 import StageController from '@/components/StageController';
+import Visualization from '@/components/Visualization';
 
 const Layout = () => (
   <React.Fragment>
     <StageController />
+    <Visualization />
     <Progress />
     <Header />
-    <Main />
   </React.Fragment>
 );
 

src/components/Visualization/index.js

@@ -0,0 +1,129 @@
+import React, { useMemo, useRef } from 'react';
+import { StageTypes } from '@/models/StageTypes';
+import { useUIProperty } from '@/shared/hooks';
+import styled, { keyframes } from 'styled-components';
+
+const Container = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+`;
+
+const left = keyframes`
+  0% {
+    transform: translate3d(-100%, 0, 0);
+    z-index: 2;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    z-index: 3;
+  }
+`;
+
+const right = keyframes`
+  0% {
+    transform: translate3d(100%, 0, 0);
+    z-index: 2;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    z-index: 3;
+  }
+`;
+
+const leftRev = keyframes`
+  0% {
+    transform: translate3d(0, 0, 0);
+    z-index: 3;
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+    z-index: 2;
+  }
+`;
+
+const rightRev = keyframes`
+  0% {
+    transform: translate3d(0, 0, 0);
+    z-index: 3;
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+    z-index: 2;
+  }
+`;
+
+const Tab = styled(Container)`
+  background: ${({ theme }) => theme.palette.background.default};
+  z-index: 1;
+  transform: translate3d(100%, 0, 0);
+  
+  animation-name: ${({ $active, $prev, $dir }) => {
+    if ($active) {
+      return $dir > 0 ? right : left;
+    }
+
+    if ($prev) {
+      return $dir > 0 ? leftRev : rightRev;
+    }
+    
+    return 'none';
+  }};
+  animation-timing-function: ease-in;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+`;
+
+const Order = {
+  [StageTypes.profile]: 0,
+  [StageTypes.repository]: 1,
+  [StageTypes.show]: 2,
+};
+
+const Visualization = () => {
+  const [stage] = useUIProperty('view', StageTypes.profile);
+  const prev = useRef(stage);
+
+  const [dir, from] = useMemo(
+    () => {
+      const last = prev.current;
+      const dir = Order[stage] - Order[prev.current];
+
+      prev.current = stage;
+
+      return [dir, last];
+    },
+    [stage],
+  );
+
+  return (
+    <Container>
+      <Tab
+        $active={stage === StageTypes.profile}
+        $prev={from === StageTypes.profile}
+        $dir={dir}
+      >
+        {StageTypes.profile}
+      </Tab>
+      <Tab
+        $active={stage === StageTypes.repository}
+        $prev={from === StageTypes.repository}
+        $dir={dir}
+      >
+        {StageTypes.repository}
+      </Tab>
+      <Tab
+        $active={stage === StageTypes.show}
+        $prev={from === StageTypes.show}
+        $dir={dir}
+      >
+        {StageTypes.show}
+      </Tab>
+    </Container>
+  );
+};
+
+export default Visualization;

src/models/StageTypes.js

@@ -1,5 +1,5 @@
 export const StageTypes = {
-  user: 'user',
+  profile: 'profile',
   repository: 'repository',
   branch: 'branch',
   commits: 'commits',

src/redux/modules/ui.js

@@ -2,8 +2,8 @@ import { StageTypes } from '@/models/StageTypes';
 import { createSlice } from '@/redux/utils';
 
 const initialState = {
-  step: StageTypes.user,
-  view: StageTypes.repository,
+  step: StageTypes.profile,
+  view: StageTypes.profile,
   bodyOpen: false,
 };