feat: add PowerInput component

2022-02-17 20:15:08 +01:00
parent c864a1062d
commit d06f21c927
30 changed files with 848 additions and 115 deletions
--- a/packages/web/src/components/PowerInput/Suggestions.tsx
+++ b/packages/web/src/components/PowerInput/Suggestions.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import MuiListItemText from '@mui/material/ListItemText';
+import Paper from '@mui/material/Paper';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import { Step } from 'types/step';
+
+const ListItemText = styled(MuiListItemText)``;
+
+type SuggestionsProps = {
+  query?: string | null;
+  index: number;
+  data: any;
+  onSuggestionClick: (variable: any) => void;
+};
+
+const SHORT_LIST_LENGTH = 4;
+const LIST_HEIGHT = 256;
+
+const getPartialFilteredArray = (array: any[], query = '', length = array.length) => {
+  return array
+    .filter((suboption: any) => suboption.name.includes(query))
+    .slice(0, length);
+}
+
+const Suggestions = (props: SuggestionsProps) => {
+  const {
+    query = '',
+    index: focusIndex,
+    data,
+    onSuggestionClick = () => null,
+  } = props;
+  const [current, setCurrent] = React.useState<number | null>(0);
+  const [listLength, setListLength] = React.useState<number | undefined>(SHORT_LIST_LENGTH);
+
+  const expandList = () => {
+    setListLength(undefined);
+  };
+
+  const collapseList = () => {
+    setListLength(SHORT_LIST_LENGTH);
+  }
+
+  React.useEffect(() => {
+    setListLength(SHORT_LIST_LENGTH);
+  }, [current])
+
+  return (
+    <Paper
+      elevation={5}
+      sx={{ width: '100%' }}
+    >
+      <Typography variant="subtitle2" sx={{ p: 2, }}>Variables</Typography>
+      <List
+        disablePadding
+      >
+        {data.map((option: Step, index: number) => (
+          <>
+            <ListItemButton
+              divider
+              onClick={() => setCurrent((currentIndex) => currentIndex === index ? null : index)}
+              sx={{ py: 0.5, }}
+            >
+              <ListItemText
+                primary={option.name}
+              />
+
+              {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' }}>
+                {getPartialFilteredArray(option.output as any || [], query as string, listLength)
+                  .map((suboption: any, index: number) => (
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      divider
+                      onClick={() => onSuggestionClick(suboption)}
+                      selected={focusIndex === index}>
+                      <ListItemText
+                        primary={suboption.name}
+                        primaryTypographyProps={{
+                          variant: 'subtitle1',
+                          title: 'Property name',
+                          sx: { fontWeight: 700 }
+                        }}
+                        secondary={suboption.value || ''}
+                        secondaryTypographyProps={{
+                          variant: 'subtitle2',
+                          title: 'Sample value',
+                          noWrap: true,
+                        }}
+                      />
+                    </ListItemButton>
+                  ))
+                }
+              </List>
+
+              {listLength && (
+                <Button
+                  fullWidth
+                  onClick={expandList}
+                >
+                  Show all
+                </Button>
+              )}
+
+              {listLength === undefined && (
+                <Button
+                  fullWidth
+                  onClick={collapseList}
+                >
+                  Show less
+                </Button>
+              )}
+            </Collapse>
+          </>
+        ))}
+      </List>
+    </Paper>
+  );
+}
+
+export default Suggestions;