giantswarm · kuosandys · Feb 7, 2023 · Jan 26, 2023 · Jan 27, 2023 · Jan 27, 2023
@@ -45,21 +45,26 @@ interface AccordionFormFieldProps {
   label: React.ReactNode;
   help?: React.ReactNode;
   error?: React.ReactNode;
+  hasChildErrors?: boolean;
 }
 
 const AccordionFormField: React.FC<
   React.PropsWithChildren<AccordionFormFieldProps>
-> = ({ label, help, error, children }) => {
+> = ({ label, help, error, hasChildErrors, children }) => {
   const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
   const isExpanded = activeIndexes.length !== 0;
 
+  const handleActive = (indices: number[]) => {
+    setActiveIndexes(indices);
+  };
+
   const helpComponent =
     typeof help === 'string' ? <Text color='text-weak'>{help}</Text> : help;
 
   return (
     <StyledAccordion
       activeIndex={activeIndexes}
-       class="x x-first x-last">setActiveIndexes
+       class="x x-first x-last">handleActive
       animate={false}
     >
       <AccordionPanel
@@ -75,6 +80,19 @@ const AccordionFormField: React.FC<
             </Box>
             <StyledLabel weight='bold' margin={{ vertical: 'small' }}>
               {label}
+              {(hasChildErrors || error) && !isExpanded && (
+                <Text
+                  size='large'
+                  color='status-danger'
+                  margin={{ left: 'small' }}
+                >
+                  <i
+                    className='fa fa-warning'
+                    role='presentation'
+                    aria-hidden='true'
+                  />
+                </Text>
+              )}
             </StyledLabel>
           </StyledHeader>
         }

@@ -1,25 +1,120 @@
 import {
   ArrayFieldTemplateItemType,
   ArrayFieldTemplateProps,
+  RJSFSchema,
 } from '@rjsf/utils';
 import { Box } from 'grommet';
-import React from 'react';
+import React, { useMemo } from 'react';
 import Button from 'UI/Controls/Button';
 
+import { IFormContext } from '..';
 import ArrayFieldItem from '../ArrayFieldItem';
 
-const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps> = ({
-  items,
-  canAdd,
-  onAddClick,
-}) => {
+function getArrayItemFieldId(
+  parentId: string,
+  idx: number,
+  idSeparator: string
+) {
+  return `${parentId}${idSeparator}${idx}`;
+}
+function shouldReorder(fields: string[], field1: string, field2: string) {
+  return fields.includes(field1) !== fields.includes(field2);
+}
+
+const ArrayFieldTemplate: React.FC<
+  ArrayFieldTemplateProps<RJSFSchema, RJSFSchema, IFormContext>
+> = ({ items, canAdd, onAddClick, idSchema, formContext }) => {
+  const getArrayItemFieldIdFn = useMemo(() => {
+    return (idx: number) => {
+      if (!formContext) return '';
+
+      return getArrayItemFieldId(
+        idSchema.$id,
+        idx,
+        formContext.idConfigs.idSeparator
+      );
+    };
+  }, [formContext, idSchema.$id]);
+
+  const reorderFields = (idx: number, newIdx: number) => {
+    if (!formContext) return;
+
+    const fieldAtIdx = getArrayItemFieldIdFn(idx);
+    const fieldAtNewIdx = getArrayItemFieldIdFn(newIdx);
+    if (shouldReorder(formContext.touchedFields, fieldAtIdx, fieldAtNewIdx)) {
+      formContext.toggleTouchedFields(fieldAtIdx, fieldAtNewIdx);
+    }
+  };
+
+  const removeField = (idx: number) => {
+    if (!formContext) return;
+
+    const fieldsToToggle = [];
+    for (let i = idx; i < items.length - 1; i++) {
+      const fieldAtIdx = getArrayItemFieldIdFn(i);
+      const fieldAtNextIdx = getArrayItemFieldIdFn(i + 1);
+
+      if (
+        shouldReorder(formContext.touchedFields, fieldAtIdx, fieldAtNextIdx)
+      ) {
+        fieldsToToggle.push(fieldAtIdx);
+      }
+    }
+
+    const fieldAtLastIdx = getArrayItemFieldIdFn(items.length - 1);
+    if (formContext.touchedFields.includes(fieldAtLastIdx)) {
+      fieldsToToggle.push(fieldAtLastIdx);
+    }
+
+    formContext.toggleTouchedFields(...fieldsToToggle);
+  };
+
+  const handleDrop =
+    (
+      idx: number,
+      onDropidxClick: (event?: React.MouseEvent<HTMLElement>) => void
+    ) =>
+    (event?: React.MouseEvent<HTMLElement>) => {
+      removeField(idx);
+
+      return onDropidxClick(event);
+    };
+
+  const handleReorder =
+    (
+      idx: number,
+      newIdx: number,
+      onReorderClick: (event?: React.MouseEvent<HTMLElement>) => void
+    ) =>
+    (event?: React.MouseEvent<HTMLElement>) => {
+      reorderFields(idx, newIdx);
+
+      return onReorderClick(event);
+    };
+
   return (
     <>
       <Box>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
-            <ArrayFieldItem key={key} {...itemProps} />
-          ))}
+            ({
+              key,
+              onDropIndexClick,
+              onReorderClick,
+              ...itemProps
+            }: ArrayFieldTemplateItemType) => (
+              <ArrayFieldItem
+                key={key}
+                 =>
+                  handleDrop(idx, onDropIndexClick(idx))
+                }
+                 newIdx) =>
+                  handleReorder(oldidx, newIdx, onReorderClick(oldidx, newIdx))
+                }
+                {...itemProps}
+              />
+            )
+          )}
       </Box>
       {canAdd && (
         <Button

@@ -14,6 +14,7 @@ const BaseInputTemplate: React.FC<WidgetProps> = ({
   readonly,
   required,
   onChange,
+  onBlur,
 }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value === '' ? options.emptyValue : e.target.value);
@@ -23,6 +24,10 @@ const BaseInputTemplate: React.FC<WidgetProps> = ({
     onChange(!patch.valid ? options.emptyValue : patch.value);
   };
 
+  const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onBlur(id, e.target.value === '' ? options.emptyValue : e.target.value);
+  };
+
   const handleSuggestionSelect = (e: { suggestion: string }) => {
     onChange(e.suggestion);
   };
@@ -47,6 +52,7 @@ const BaseInputTemplate: React.FC<WidgetProps> = ({
         width: { max: 'small' },
       }}
       >
+      >
     />
   ) : (
     <TextInput
@@ -58,6 +64,7 @@ const BaseInputTemplate: React.FC<WidgetProps> = ({
       readOnly={readonly}
       required={required}
       >
+      >
       >
       {...inputProps}
     />

@@ -1,22 +1,38 @@
-import { ErrorListProps } from '@rjsf/utils';
+import { ErrorListProps, RJSFSchema } from '@rjsf/utils';
 import { Box, Paragraph } from 'grommet';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FlashMessageType } from 'styles';
 import FlashMessage from 'UI/Display/FlashMessage';
 
-const ErrorListTemplate: React.FC<ErrorListProps> = ({ errors }) => {
-  return (
+import { IFormContext } from '..';
+import { isTouchedField, mapErrorPropertyToField } from '../utils';
+
+const ErrorListTemplate: React.FC<
+  ErrorListProps<RJSFSchema, RJSFSchema, IFormContext>
+> = ({ errors, formContext }) => {
+  const filteredErrors = useMemo(() => {
+    if (!formContext || formContext.showAllErrors) return errors;
+
+    return errors.filter((e) =>
+      isTouchedField(
+        mapErrorPropertyToField(e, formContext.idConfigs),
+        formContext.touchedFields
+      )
+    );
+  }, [errors, formContext]);
+
+  return filteredErrors.length > 0 ? (
     <FlashMessage type={FlashMessageType.Danger}>
       <Paragraph size='xlarge'>Errors</Paragraph>
       <Box>
-        {errors.map((error, idx) => (
+        {filteredErrors.map((error, idx) => (
           <Paragraph key={idx} fill>
             {error.stack}
           </Paragraph>
         ))}
       </Box>
     </FlashMessage>
-  );
+  ) : null;
 };
 
 export default ErrorListTemplate;
@@ -11,7 +11,9 @@ const FieldErrorTemplate: React.FC<FieldErrorProps> = ({ errors }) => {
     <>
       {errors.map((error, idx) => (
         <Text key={idx} size='small' color='text-error'>
-          {error}
+          {typeof error === 'string'
+            ? `${error[0].toLocaleUpperCase()}${error.slice(1)}`
+            : error}
         </Text>
       ))}
     </>