Add required option to array fields

Author: danielfdsilva

packages/data-widgets/lib/components/elements.tsx

@@ -8,7 +8,8 @@ import {
   Button,
   HeadingProps,
   IconButtonProps,
-  FlexProps
+  FlexProps,
+  Text
 } from '@chakra-ui/react';
 import {
   CollecticonTrashBin,
@@ -95,6 +96,7 @@ export const FieldsetDeleteBtn = forwardRef<IconButtonProps, 'button'>(
 
 interface ArrayFieldsetProps {
   label: React.ReactNode;
+  isRequired?: boolean;
   children: React.ReactNode;
   onRemove?: () => void;
   onAdd?: () => void;
@@ -103,16 +105,35 @@ interface ArrayFieldsetProps {
 }
 
 export function ArrayFieldset(props: ArrayFieldsetProps) {
-  const { label, children, onRemove, onAdd, addDisabled, removeDisabled } =
-    props;
+  const {
+    label,
+    isRequired,
+    children,
+    onRemove,
+    onAdd,
+    addDisabled,
+    removeDisabled
+  } = props;
 
   return (
     <Fieldset className='widget--array'>
       {(label || onRemove) && (
         <FieldsetHeader>
           {label && (
             <Box>
-              <FieldLabel>{label}</FieldLabel>
+              <FieldLabel>
+                {label}
+                {isRequired && (
+                  <Text
+                    as='span'
+                    color='danger.500'
+                    role='presentation'
+                    aria-hidden='true'
+                  >
+                    *
+                  </Text>
+                )}
+              </FieldLabel>
             </Box>
           )}
           {onRemove && (

packages/data-widgets/lib/widgets/array-input.tsx

@@ -13,7 +13,7 @@ import { ArrayFieldset } from '../components/elements';
 import { WidgetInput } from './input';
 
 export function WidgetArrayInput(props: WidgetProps) {
-  const { pointer } = props;
+  const { pointer, isRequired } = props;
   const field = props.field as SchemaFieldArray;
 
   const { values } = useFormikContext();
@@ -28,6 +28,7 @@ export function WidgetArrayInput(props: WidgetProps) {
       name={pointer}
       render={({ remove, push }) => (
         <ArrayFieldset
+          isRequired={isRequired}
           label={field.label}
           onAdd={
             isFixed

packages/data-widgets/lib/widgets/array.tsx

@@ -12,16 +12,15 @@ import { getArrayLabel } from '../utils';
 import { ArrayFieldset } from '../components/elements';
 
 export function WidgetArray(props: WidgetProps) {
-  // const { pointer, isRequired } = props;
-  const { pointer } = props;
+  const { pointer, isRequired } = props;
   const field = props.field as SchemaFieldArray;
 
   return (
     <ArrayItem
       label={field.label}
       pointer={pointer}
       field={field}
-      // isRequired={isRequired}
+      isRequired={isRequired}
     />
   );
 }
@@ -30,12 +29,13 @@ interface ArrayItemProps {
   label: React.ReactNode;
   field: SchemaFieldArray;
   pointer: string;
+  isRequired?: boolean;
   onRemove?: () => void;
   removeDisabled?: boolean;
 }
 
 function ArrayItem(props: ArrayItemProps) {
-  const { label, field, pointer, onRemove, removeDisabled } = props;
+  const { label, field, pointer, onRemove, removeDisabled, isRequired } = props;
 
   const { values } = useFormikContext();
   const fields: any[] = get(values, pointer) || [];
@@ -56,6 +56,7 @@ function ArrayItem(props: ArrayItemProps) {
       render={({ remove, push }) => (
         <ArrayFieldset
           label={label}
+          isRequired={isRequired}
           onRemove={onRemove}
           onAdd={
             isFixedCount