feat: support interactive fields

2023-03-16 22:55:09 +00:00
parent 71a7943d01
commit 75bbd16b0c
9 changed files with 222 additions and 18 deletions
--- a/packages/web/src/components/DynamicField/index.tsx
+++ b/packages/web/src/components/DynamicField/index.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { useFormContext, useWatch } from 'react-hook-form';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import RemoveIcon from '@mui/icons-material/Remove';
+import AddIcon from '@mui/icons-material/Add';
+
+import { IFieldDynamic } from '@automatisch/types';
+import InputCreator from 'components/InputCreator';
+import { EditorContext } from 'contexts/Editor';
+
+interface DynamicFieldProps {
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  defaultValue?: Record<string, unknown>[];
+  name: string;
+  label: string;
+  type?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  docUrl?: string;
+  clickToCopy?: boolean;
+  disabled?: boolean;
+  fields: IFieldDynamic["fields"];
+  shouldUnregister?: boolean;
+}
+
+function DynamicField(
+  props: DynamicFieldProps
+): React.ReactElement {
+  const { label, description, fields, name, defaultValue } = props;
+  const { control, setValue, getValues } = useFormContext();
+  const fieldsValue = useWatch({ control, name }) as Record<string, unknown>[];
+  const editorContext = React.useContext(EditorContext);
+
+  const createEmptyItem = React.useCallback(() => {
+    return fields.reduce((previousValue, field) => {
+      return {
+        ...previousValue,
+        [field.key]: '',
+        __id: uuidv4(),
+      }
+    }, {});
+  }, [fields]);
+
+  const addItem = React.useCallback(() => {
+    const values = getValues(name);
+
+    if (!values) {
+      setValue(name, [createEmptyItem()]);
+    } else {
+      setValue(name, values.concat(createEmptyItem()));
+    }
+  }, [getValues, createEmptyItem]);
+
+  const removeItem = React.useCallback((index) => {
+    if (fieldsValue.length === 1) return;
+
+    const newFieldsValue = fieldsValue.filter((fieldValue, fieldIndex) => fieldIndex !== index);
+
+    setValue(name, newFieldsValue);
+  }, [fieldsValue]);
+
+  React.useEffect(function addInitialGroupWhenEmpty() {
+    const fieldValues = getValues(name);
+
+    if (!fieldValues && defaultValue) {
+      setValue(name, defaultValue);
+    } else if (!fieldValues) {
+      setValue(name, [createEmptyItem()]);
+    }
+  }, [createEmptyItem, defaultValue]);
+
+  return (
+    <React.Fragment>
+      <Typography variant="subtitle2">{label}</Typography>
+
+      {fieldsValue?.map((field, index) => (
+        <Stack direction="row" spacing={2} key={`fieldGroup-${field.__id}`}>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 2 }} sx={{ display: 'flex', flex: 1 }}>
+            {fields.map((fieldSchema, fieldSchemaIndex) => (
+              <Box sx={{ display: 'flex', flex: '1 0 0px' }} key={`field-${field.__id}-${fieldSchemaIndex}`}>
+                <InputCreator
+                  schema={fieldSchema}
+                  namePrefix={`${name}.${index}`}
+                  disabled={editorContext.readOnly}
+                  shouldUnregister={false}
+                />
+              </Box>
+            ))}
+          </Stack>
+
+          <IconButton
+            size="small"
+            edge="start"
+            onClick={() => removeItem(index)}
+            sx={{ width: 61, height: 61 }}
+          >
+            <RemoveIcon />
+          </IconButton>
+        </Stack>
+      ))}
+
+      <Stack direction="row" spacing={2}>
+        <Stack spacing={{ xs: 2 }} sx={{ display: 'flex', flex: 1 }} />
+
+        <IconButton
+          size="small"
+          edge="start"
+          onClick={addItem}
+          sx={{ width: 61, height: 61 }}
+        >
+          <AddIcon />
+        </IconButton>
+      </Stack>
+
+      <Typography variant="caption">{description}</Typography>
+    </React.Fragment>
+  );
+}
+
+export default DynamicField;