fieldDescriptions: cartoonFields()

in src/elements/cartoon/CartoonForm.tsx [29:178]
149 lines of code
5 McCabe index (conditional complexity)

    fieldDescriptions: cartoonFields(
      cartoonImageSelector,
      createCaptionPlugins
    ),
    component: ({ fields }) => {
      const addImageAtIndex = (
        imageToInsert: Image,
        images: Image[],
        index?: number
      ) => {
        if (index !== undefined && index > -1 && index < images.length) {
          return images.map((image, i) => {
            if (i === index) {
              return imageToInsert;
            } else {
              return image;
            }
          });
        } else {
          return [...images, imageToInsert];
        }
      };

      return (
        <FieldLayoutVertical>
          <ImageSet
            label={"Desktop images (default)"}
            images={fields.largeImages.value}
            alt={fields.alt.value}
            addImage={(mediaId?: string, index?: number) => {
              fields.largeImages.description.props.cartoonImageSelector(
                (imageToInsert: Image) =>
                  fields.largeImages.update(
                    addImageAtIndex(
                      imageToInsert,
                      fields.largeImages.value,
                      index
                    )
                  ),
                mediaId
              );
            }}
            removeImage={(index) => {
              fields.largeImages.update(
                fields.largeImages.value.filter((_, i) => i !== index)
              );
            }}
            required={true}
            mainMediaId={fields.largeImages.value[0]?.mediaId}
          />
          <ImageSet
            label={"Mobile images"}
            images={fields.smallImages.value}
            alt={fields.alt.value}
            addImage={(mediaId?: string, index?: number) => {
              fields.smallImages.description.props.cartoonImageSelector(
                (imageToInsert: Image) =>
                  fields.smallImages.update(
                    addImageAtIndex(
                      imageToInsert,
                      fields.smallImages.value,
                      index
                    )
                  ),
                mediaId
              );
            }}
            removeImage={(index) => {
              fields.smallImages.update(
                fields.smallImages.value.filter((_, i) => i !== index)
              );
            }}
            mainMediaId={fields.largeImages.value[0]?.mediaId}
          />
          <DemoFieldWrapper field={fields.caption} headingLabel="Caption" />
          <DemoFieldWrapper
            field={fields.alt}
            headingLabel={
              <span
                css={css`
                  margin-right: ${space[2]}px;
                `}
              >
                Alt text
              </span>
            }
            headingContent={
              <>
                <Tooltip>
                  <p>
                    ‘Alt text’ describes what’s in an image. It helps users of
                    screen readers understand our images, and improves our SEO.
                  </p>
                  <p>
                    <a
                      href="https://docs.google.com/document/d/1oW542iCRyKfI4DS22QU7AH0TQRWLYMm7bTlhJlX5_Ng/edit?usp=sharing"
                      target="_blank"
                    >
                      Find out more
                    </a>
                  </p>
                </Tooltip>
                <Button
                  priority="secondary"
                  size="xsmall"
                  iconSide="left"
                  onClick={() => {
                    fields.alt.update(fields.caption.value);
                  }}
                >
                  Copy from caption
                </Button>
              </>
            }
          />
          <Columns>
            <Column width={1 / 3}>
              <DemoFieldWrapper
                field={fields.photographer}
                headingLabel={"Byline"}
              />
            </Column>
            <Column width={1 / 3}>
              <DemoFieldWrapper field={fields.source} headingLabel={"Source"} />
            </Column>
            <Column width={1 / 3}>
              <CustomDropdownView
                field={fields.role}
                label="Weighting"
                display={"block"}
              />
            </Column>
          </Columns>
          <Columns>
            <Column width={2 / 3}>
              <CustomCheckboxView
                field={fields.displayCredit}
                label="Display credit information"
              />
            </Column>
            <Column width={1 / 3}>
              <CustomDropdownView
                field={fields.imageType}
                label={"Image type"}
              ></CustomDropdownView>
            </Column>
          </Columns>
        </FieldLayoutVertical>
      );
    },