# <DataCard /> Component

## Description

The default card to use to display a record in the DisplayItems component

## Checklist

This component should...

- Should render the component in the dom
- Should show an icon if one is provided in the props
- Should show a component if one is provided in the component prop
- Should show a list of tags if any are provided in the tags prop
- Should show a caption if one is provided in the label prop
- Should turn the label caption into an editable text field when clicked if the labelIsEditable prop is set to true
- Should trigger the onDataChange event when the textfield is blurred
- Should trigger the onDataChange event when the [enter] key is pressed while in the text field
- Should revert to original text if the [esc] key is pressed while in the text field
- Should revert back to text mode after the onDataChange event has been called
- Should show a dropdown menu (in the form of an icon) if the showActionControls prop is set to true
- Should show a list of items in the action controls dropdown menu as specified by the actions prop
- Should trigger the onActionSelect event when an action item is selected
- Should trigger the onClick event when the card is clicked
- Should trigger the onDoubleClick event when the card is double-clicked

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

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

export default () => (
  <DataCard
    icon=""
    image=""
    component={<div />}
    tags=""
    label=""
    canEditLabel=""
    actions=""
    showActionControls=""
    onClick=""
    onDoubleClick=""
    onActionSelect=""
    onDataChange=""
  />
)
```

## 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