Card

About

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

Example of a card rendered with a specific style config.

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.

Hook component

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
}

Class component

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}
                />  
            }
        )
    }
}

index.js

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',
                }
            ]
        }
    })
})()

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