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

wip: Restructure twitter integration

Browse Source
This commit is contained in:
Faruk AYDIN
2022-10-04 23:09:50 +03:00
parent dc0e03245f
commit 8308265a62
21 changed files with 358 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/web/src/components/PowerInput/Suggestions.tsx
View File

@@ -24,13 +24,10 @@ const LIST_HEIGHT = 256;
const getPartialArray = (array: any[], length = array.length) => {
return array.slice(0, length);
}
};
const Suggestions = (props: SuggestionsProps) => {
const {
data,
onSuggestionClick = () => null,
} = props;
const { data, onSuggestionClick = () => null } = props;
const [current, setCurrent] = React.useState<number | null>(0);
const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
@@ -40,41 +37,43 @@ const Suggestions = (props: SuggestionsProps) => {
const collapseList = () => {
setListLength(SHORT_LIST_LENGTH);
}
};
React.useEffect(() => {
setListLength(SHORT_LIST_LENGTH);
}, [current])
}, [current]);
return (
<Paper
elevation={5}
sx={{ width: '100%' }}
>
<Typography variant="subtitle2" sx={{ p: 2, }}>Variables</Typography>
<List
disablePadding
>
<Paper elevation={5} sx={{ width: '100%' }}>
<Typography variant="subtitle2" sx={{ p: 2 }}>
Variables
</Typography>
<List disablePadding>
{data.map((option: IStep, index: number) => (
<>
<ListItemButton
divider
onClick={() => setCurrent((currentIndex) => currentIndex === index ? null : index)}
sx={{ py: 0.5, }}
onClick={() =>
setCurrent((currentIndex) =>
currentIndex === index ? null : index
)
}
sx={{ py: 0.5 }}
>
<ListItemText
primary={option.name}
/>
<ListItemText primary={option.name} />
{!!option.output?.length && (
current === index ? <ExpandLess /> : <ExpandMore />
)}
{!!option.output?.length &&
(current === index ? <ExpandLess /> : <ExpandMore />)}
</ListItemButton>
<Collapse in={current === index} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}>
{getPartialArray(option.output as any || [], listLength)
.map((suboption: any, index: number) => (
<List
component="div"
disablePadding
sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
>
{getPartialArray((option.output as any) || [], listLength).map(
(suboption: any, index: number) => (
<ListItemButton
sx={{ pl: 4 }}
divider
@@ -85,7 +84,7 @@ const Suggestions = (props: SuggestionsProps) => {
primaryTypographyProps={{
variant: 'subtitle1',
title: 'Property name',
sx: { fontWeight: 700 }
sx: { fontWeight: 700 },
}}
secondary={suboption.value || ''}
secondaryTypographyProps={{
@@ -95,24 +94,18 @@ const Suggestions = (props: SuggestionsProps) => {
}}
/>
</ListItemButton>
))
}
)
)}
</List>
{option.output?.length > listLength && (
<Button
fullWidth
onClick={expandList}
>
{(option.output?.length || 0) > listLength && (
<Button fullWidth onClick={expandList}>
Show all
</Button>
)}
{listLength === Infinity && (
<Button
fullWidth
onClick={collapseList}
>
<Button fullWidth onClick={collapseList}>
Show less
</Button>
)}
@@ -122,6 +115,6 @@ const Suggestions = (props: SuggestionsProps) => {
</List>
</Paper>
);
}
};
export default Suggestions;

35
packages/web/src/components/PowerInput/data.ts
View File

@@ -1,6 +1,7 @@
import type { IStep } from '@automatisch/types';
const joinBy = (delimiter = '.', ...args: string[]) => args.filter(Boolean).join(delimiter);
const joinBy = (delimiter = '.', ...args: string[]) =>
args.filter(Boolean).join(delimiter);
const process = (data: any, parentKey?: any, index?: number): any[] => {
if (typeof data !== 'object') {
@@ -8,14 +9,19 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
{
name: `${parentKey}.${index}`,
value: data,
}
]
},
];
}
const entries = Object.entries(data);
return entries.flatMap(([name, value]) => {
const fullName = joinBy('.', parentKey, (index as number)?.toString(), name);
const fullName = joinBy(
'.',
parentKey,
(index as number)?.toString(),
name
);
if (Array.isArray(value)) {
return value.flatMap((item, index) => process(item, fullName, index));
@@ -25,10 +31,12 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
return process(value, fullName);
}
return [{
name: fullName,
value,
}];
return [
{
name: fullName,
value,
},
];
});
};
@@ -39,12 +47,17 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
.filter((step: IStep) => {
const hasExecutionSteps = !!step.executionSteps?.length;
return hasExecutionSteps
return hasExecutionSteps;
})
.map((step: IStep, index: number) => ({
id: step.id,
// TODO: replace with step.name once introduced
name: `${index + 1}. ${step.appKey?.charAt(0)?.toUpperCase() + step.appKey?.slice(1)}`,
output: process(step.executionSteps?.[0]?.dataOut || {}, `step.${step.id}`),
name: `${index + 1}. ${
(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
}`,
output: process(
step.executionSteps?.[0]?.dataOut || {},
`step.${step.id}`
),
}));
};