# <EditFormField /> Component

## Description

• This is the container to use as the sortable item in the SortableList Component • Used for managing the editing of individual form fields • It's the element that gets dragged up and down • Shows a dropdown for selecting the type of form field you want to edit • Then the appropriate form field component is displayed in "edit" mode

## Checklist

This component should...

- (Rendering) Should show the <TextField /> when the type prop is TEXT
- (Rendering) Should show the <DateField /> when the type prop is DATE
- (Rendering) Should show the <NumberField /> input when the type prop is NUMBER
- (Rendering) Should show the <CurrencyField /> when the type prop is CURRENCY
- (Rendering) Should show <DropdownField /> menu when the type prop is DROPDOWN
- (Rendering) Should show a checkbox & label (<Checkboxes /> the when type prop is CHECKBOX
- (Rendering) Should show radio input fields (<MultipleChoice /> the when type prop is MULTIPLECHOICE
- (Rendering) Should show a <ContentField /> the when type prop is TYPOGRAPHY
- (Rendering) Should show a <FileUpload /> component when the type prop is FILEUPLOAD
- (Rendering) Should show a <LinearScale /> component when the type prop is LINEARSCALE
- (Rendering) Should show an icon in the dom that reflects the item being loaded
- (Rendering) Show in expanded state when isExpanded is true
- (Rendering) Should show the LIVE preview of the component when showPreview is true
- (Rendering) Should show the caption provided in the dom
- (Events) Should trigger the onChange event when any change occurs in the form field
- (Events) Should pass an object that matches the the shape of the LiveFormFieldProps type when onChange is called
- (Events) Should trigger the onClick method when the container is clicked
- (Actions) Should toggle the expansion or collapsing of the container when clicked

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as EditFormField from '@sandcastle/components/EditFormField`

export default () => (
  <EditFormField

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here