diff --git a/src/components/Header/components/BranchStep/Body.jsx b/src/components/Header/components/BranchStep/Body.jsx index ebc3e9b..3f75091 100644 --- 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 ( diff --git a/src/components/Header/components/ProfileStep/Body.jsx b/src/components/Header/components/ProfileStep/Body.jsx index 0006df0..b8310a0 100644 --- 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) => ( + + + + + } + secondary={profile.type} + /> + + ), + [search, onClick], + ); + return ( { {!neverChange && ( {!items.length && } - {(items || []).map((profile) => ( - - - - - } - secondary={profile.type} - /> - - ))} + {(items || []).map(Item)} )} {!!top.length && ( - {(top || []).map((profile) => ( - - - - - - - ))} + {(top || []).map(Item)} )} diff --git a/src/components/Header/components/RepositoryStep/Body.jsx b/src/components/Header/components/RepositoryStep/Body.jsx index be3248d..ce7e163 100644 --- 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 ( @@ -174,6 +177,7 @@ const Body = () => { {/**/} diff --git a/src/components/Header/components/ShowStep/Header.js b/src/components/Header/components/ShowStep/Header.js index ae6901c..6333276 100644 --- 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 ( - + {isRun && } {!isRun && } {start && pause && ( - + )} @@ -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 new file mode 100644 index 0000000..9323c3f --- /dev/null +++ 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 index fa08d29..37c5e3a 100644 --- 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],