#79 updated navigation by tabIndex

artzub · Jan 8, 2021 · 586b90a · 586b90a
1 parent 729089e
commit 586b90a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 41 deletions.
diff --git a/src/components/Header/components/BranchStep/Body.jsx b/src/components/Header/components/BranchStep/Body.jsx
@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useDebounce } from 'react-use';
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
+import ListItemButton from '../shared/ListItemButton';
 import Marker from '../shared/Marker';
 import Secondary from './Secondary';
 
@@ -115,11 +116,13 @@ const Body = () => {
 
       return (
         <ListItem
+          component={ListItemButton}
           alignItems="center"
           key={item.name}
           onClick={onClick(item)}
           style={style}
           title={item.name}
+          tabIndex="0"
         >
           <ListItemAvatar>
             <Avatar>

diff --git a/src/components/Header/components/ProfileStep/Body.jsx b/src/components/Header/components/ProfileStep/Body.jsx
@@ -6,16 +6,13 @@ import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import ScrollBar from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
 import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
-import {
-  Avatar, ListItem as ListItemOrigin,
-  ListItemAvatar, ListSubheader,
-  TextField,
-} from '@material-ui/core';
+import { Avatar, ListItem as ListItemOrigin, ListItemAvatar, ListSubheader, TextField } from '@material-ui/core';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 import { useDispatch, useSelector } from 'react-redux';
 import { useDebounce } from 'react-use';
 import styled from 'styled-components';
+import ListItemButton from '../shared/ListItemButton';
 
 const Container = styled.div`
   min-height: 100px;
@@ -115,6 +112,27 @@ const Body = () => {
     [bodyOpen],
   );
 
+  const Item = useCallback(
+    (profile) => (
+      <ListItem
+        component={ListItemButton}
+        alignItems="center"
+        key={profile.login}
+        onClick={onClick(profile)}
+        tabIndex="0"
+      >
+        <ListItemAvatar>
+          <Avatar src={profile.avatar} />
+        </ListItemAvatar>
+        <ListItemText
+          primary={<Highlight search={search} text={profile.login} />}
+          secondary={profile.type}
+        />
+      </ListItem>
+    ),
+    [search, onClick],
+  );
+
   return (
     <Container>
       <TextField
@@ -127,48 +145,22 @@ const Body = () => {
         <ListContainer>
           {!neverChange && (
             <List
+              component="div"
               ref={listRef}
               dense
               subheader={SearchHeader}
             >
               {!items.length && <NotData />}
-              {(items || []).map((profile) => (
-                <ListItem
-                  alignItems="center"
-                  key={profile.login}
-                  onClick={onClick(profile)}
-                >
-                  <ListItemAvatar>
-                    <Avatar src={profile.avatar} />
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={<Highlight search={search} text={profile.login} />}
-                    secondary={profile.type}
-                  />
-                </ListItem>
-              ))}
+              {(items || []).map(Item)}
             </List>
           )}
           {!!top.length && (
             <List
+              component="div"
               dense
               subheader={TopHeader}
             >
-              {(top || []).map((profile) => (
-                <ListItem
-                  alignItems="center"
-                  key={profile.login}
-                  onClick={onClick(profile)}
-                >
-                  <ListItemAvatar>
-                    <Avatar src={profile.avatar} />
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={profile.login}
-                    secondary={profile.type}
-                  />
-                </ListItem>
-              ))}
+              {(top || []).map(Item)}
             </List>
           )}
         </ListContainer>

diff --git a/src/components/Header/components/RepositoryStep/Body.jsx b/src/components/Header/components/RepositoryStep/Body.jsx
@@ -20,6 +20,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useDebounce } from 'react-use';
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
+import ListItemButton from '../shared/ListItemButton';
 import Marker from '../shared/Marker';
 import Secondary from './Secondary';
 
@@ -117,11 +118,13 @@ const Body = () => {
 
       return (
         <ListItem
+          component={ListItemButton}
           alignItems="center"
           key={item.name}
           onClick={onClick(item)}
           style={style}
           title={`${title} | ${item.name}`}
+          tabIndex="0"
         >
           <ListItemAvatar>
             <Avatar>
@@ -174,6 +177,7 @@ const Body = () => {
       <LoadingOverlay loading={isFetching}>
         {/*<ListContainer>*/}
         <List
+          component="div"
           dense
           subheader={ListHeader}
         >

diff --git a/src/components/Header/components/ShowStep/Header.js b/src/components/Header/components/ShowStep/Header.js
@@ -4,6 +4,7 @@ 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 PropTypes from 'prop-types';
 import { useEvent } from 'react-use';
 import styled from 'styled-components';
 import HeaderContainer from '../shared/HeaderContainer';
@@ -29,6 +30,7 @@ const ButtonContainer = styled.div`
 
 
 const Header = (props) => {
+  const { disabled, ...rest } = props;
   const [start, setStart] = useUIProperty('start');
   const [pause, setPause] = useUIProperty('pause');
 
@@ -59,17 +61,25 @@ const Header = (props) => {
 
   return (
     <HeaderContainer
-      {...props}
-      tabIndex={-1}
+      {...rest}
+      tabIndex="-1"
       button={false}
     >
       <ButtonContainer>
-        <IconButton size="small" onClick={onClick(isRun ? 'pause' : 'start')}>
+        <IconButton
+          size="small"
+          onClick={onClick(isRun ? 'pause' : 'start')}
+          disabled={disabled}
+        >
           {isRun && <PauseIcon size={24} />}
           {!isRun && <PlayArrowIcon size={24} />}
         </IconButton>
         {start && pause && (
-          <IconButton size="small" onClick={onClick('replay')}>
+          <IconButton
+            size="small"
+            onClick={onClick('replay')}
+            disabled={disabled}
+          >
             <ReplayIcon size={24} />
           </IconButton>
         )}
@@ -78,4 +88,12 @@ const Header = (props) => {
   );
 };
 
+Header.propTypes = {
+  disabled: PropTypes.bool,
+};
+
+Header.defaultProps = {
+  disabled: false,
+};
+
 export default Header;
diff --git a/src/components/Header/components/shared/ListItemButton.jsx b/src/components/Header/components/shared/ListItemButton.jsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const ListItemButton = styled.button.attrs({
+  type: 'button',
+})`
+  background: transparent;
+  border: 0;
+  color: inherit;
+`;
+
+export default ListItemButton;
diff --git a/src/components/StageController/useStageProfiles.js b/src/components/StageController/useStageProfiles.js
@@ -32,10 +32,10 @@ export const useStageProfiles = (service, profile) => {
         return;
       }
 
-      dispatch(profilesSlice.actions.fetchProfile(profile));
+      dispatch(profilesSlice.actions.fetchProfile(profile, 'profile'));
 
       return () => {
-        dispatch(profilesSlice.actions.cancel());
+        dispatch(profilesSlice.actions.cancel('profile'));
       };
     },
     [profile, login, dispatch],