groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FlowStep): introduce expand more/less icons

Browse Source
This commit is contained in:
Ali BARIN
2022-02-04 22:05:39 +01:00
committed by Ömer Faruk Aydın
parent 4b69d7f983
commit 50015ae073
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/components/FlowStep/index.tsx
View File

@@ -11,6 +11,8 @@ import ListItemButton from '@mui/material/ListItemButton';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import IconButton from '@mui/material/IconButton';
import ChooseAccountSubstep from 'components/ChooseAccountSubstep';
@@ -82,6 +84,8 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
const substeps = React.useMemo(() => actionsOrTriggers?.find(({ key }) => key === step.key)?.subSteps, [actionsOrTriggers, step?.key]);
const expandNextStep = React.useCallback(() => { setCurrentSubstep((currentSubstep) => (currentSubstep ?? 0) + 1); }, []);
const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
if (typeof selectedOption === 'object') {
const typedSelectedOption = selectedOption as { value: string; };
@@ -101,6 +105,8 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
key: eventKey,
parameters: {},
}));
expandNextStep();
}
}, []);
@@ -111,6 +117,8 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
id: connectionId,
},
}));
expandNextStep();
}, []);
const onParameterChange = React.useCallback((event: React.SyntheticEvent) => {
@@ -173,15 +181,17 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
<Content>
<List>
<ListItemButton onClick={() => toggleSubstep(0)} selected={currentSubstep === 0} divider>
<Typography variant="body2">
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
{currentSubstep === 0 ? <ExpandLessIcon /> : <ExpandMoreIcon />}
Choose app & event
</Typography>
</ListItemButton>
<Collapse in={currentSubstep === 0} timeout="auto" unmountOnExit>
<ListItem sx={{ pt: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
<ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
<Autocomplete
fullWidth
disablePortal
disableClearable
options={appOptions}
renderInput={(params) => <TextField {...params} label="Choose an app" />}
value={getOption(appOptions, step.appKey)}
@@ -197,6 +207,7 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
<Autocomplete
fullWidth
disablePortal
disableClearable
options={actionOptions}
renderInput={(params) => <TextField {...params} label="Choose an event" />}
value={getOption(actionOptions, step.key)}
@@ -211,12 +222,13 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
{substeps?.length > 0 && substeps.map((substep: { name: string, arguments: AppFields[] }, index: number) => (
<React.Fragment key={`${substep?.name}-${index}`}>
<ListItemButton onClick={() => toggleSubstep(index + 1)} selected={currentSubstep === (index + 1)} divider>
<Typography variant="body2">
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
{currentSubstep === (index + 1) ? <ExpandLessIcon /> : <ExpandMoreIcon />}
{substep.name as string}
</Typography>
</ListItemButton>
<Collapse in={currentSubstep === (index + 1)} timeout="auto" unmountOnExit>
<ListItem sx={{ pt: 2 }}>
<ListItem sx={{ pt: 2, pb: 3 }}>
{substep.name === 'Choose account' && (
<ChooseAccountSubstep
appKey={step.appKey}
@@ -240,7 +252,7 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
</List>
</Content>
<Button onClick={onClose}>
<Button fullWidth onClick={onClose}>
Close
</Button>
</Collapse>