# Card

## About

Returns a component that has a Card design with a predefined look and an ability to change some parts of it

<div align="left"><img src="https://2896638327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LozHhsSL4VkhXym3gOF%2F-LozKMeJLS7yOBywZGq_%2F-LozLvjr84z_j-sYkILt%2FScreenshot%202019-09-16%20at%2010.47.31.png?alt=media&#x26;token=239009c0-614a-4a01-bdcc-d446e1882927" alt="Example of a card rendered with a specific style config."></div>

The card portal has a main part that is not so configurable with a headline, subheadline and an image part. In order to not render subheadline or images, just don't send any values in to these.

Header and footer part is totally up the plugin requiring the portal to handle. Here you are able to render what ever suits your needs.

## How to use

First of you need to register a requirement for your plugin to use a portal, you can read more about it [here.](https://app.gitbook.com/@infomaker/s/dashboard-plugin/register/requirements#portals)

{% tabs %}
{% tab title="Hook component" %}

```javascript
import { usePortal, getMappedId } from 'Dashboard'
import { useEffect, createElement, useRef } from 'react'

const MyComponent = props => {
    const CardRef = useRef()
    
    useEffect(() => {
         CardRef.current = usePortal(getMappedId('@plugin_bundle', 'portal', 'MY_CARD_PORTAL_ID'))
    }, [])
    
    const Card = CardRef.current && createElement(CardRef.current, {
        title: 'title string'
        dragData: {'fizz': 'buzz'}
        onClick: () => console.log('clicked')
        striped: true
        displayStatusBar: true
        styleObject: {
            borderColor: 'red',
            backgroundColor: 'purple',
            textColor: 'black',
            font: 'Lato'
        }
        headline: 'My card headline'
        subheadline: 'My card subheadline'
        images: [
            "https://src-to-my-image.png",
            "https://src-to-my-second-image.jpg"
        ]
        headerContent: {<div>Render whatever component you want</div>}
        footerContent: {<span>Same goes here...</span>}
        imageMaxWidth: 70
        imageMaxHeight: 40
    })
    
    return Card || null
}
```

{% endtab %}

{% tab title="Class component" %}

```javascript
import { Component } from 'react'
import { usePortal, getMappedId } from 'Dashboard'

class MyClass extends Component {
    constructor(props) {
        super(props)
        
        this.card = null
    }    

    componentDidMount() {
        //here we need to get the mapped function that returnes the Card component
        this.card = usePortal(getMappedId('@plugin_bundle', 'portal', 'MY_CARD_PORTAL_ID'))    
    }
    
    render() {
        const Card = this.card
    
        // render the card if its a valid component
        return (
            {Card && 
                <Card 
                    title={'title string'}
                    dragData={{'fizz': 'buzz'}}
                    onClick={() => console.log('clicked')}
                    striped={true}
                    displayStatusBar={true}
                    styleObject={{
                        borderColor: 'red',
                        backgroundColor: 'purple',
                        textColor: 'black',
                        font: 'Lato'
                    }}
                    headline={'My card headline'}
                    subheadline={'My card subheadline'}
                    images={[
                        "https://src-to-my-image.png",
                        "https://src-to-my-second-image.jpg"
                    ]}
                    headerContent={<div>Render whatever component you want</div>}
                    footerContent={<span>Same goes here...</span>}
                    imageMaxWidth={70}
                    imageMaxHeight={40}
                />  
            }
        )
    }
}
```

{% endtab %}

{% tab title="index.js" %}

```javascript
import { register } from 'Dashboard'

(() => {
    register({
        bundle: "@plugin_bundle",

        application: MyApplication,
        settings: MySettings,

        requirements: {
            actions: [],
            portals: [
                {
                    id: 'MY_CARD_PORTAL_ID',
                    name: 'Card portal',
                    description: 'A portal to render a card with information',
                }
            ]
        }
    })
})()
```

{% endtab %}
{% endtabs %}

| Property             | Description                                                                                                                                  | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| **title**            | Value to use in title attribute on element                                                                                                   |         |
| **dragData**         | Object containing data that will be able to be parsed on drag and drop, if this is passed the cards will get draggable attribute set to true |         |
| **onClick**          | A function that will get triggered when a click occurs on the card                                                                           |         |
| **striped**          | If the status bar will have a striped look                                                                                                   | false   |
| **displayStatusBar** | If the card should display a status bar to the left or not                                                                                   | false   |
| **styleObject**      | A object containing a style scheme for the card                                                                                              | object  |
| **headline**         | The headline of the card                                                                                                                     |         |
| **subheadline**      | The subheadline fo the card                                                                                                                  |         |
| **images**           | An array containing image sources                                                                                                            |         |
| **headerContent**    | A valid react element to render in the header part                                                                                           |         |
| **footerContent**    | A valid react element to render in the footer part                                                                                           |         |
| **imageMaxWidth**    | An integer representing the max width the image can have                                                                                     |         |
| **imageMaxHeight**   | An integer representing the max height the image can have                                                                                    |         |