GUI Library - Infomaker/Dashboard-Plugin GitHub Wiki

const GUI = Dashboard.GUI

import { GUI } from 'Dashboard'

<GUI.Button text="My button" onClick={() => {}} />

<GUI.Card card={myCard} />

const myCardIcon = {
    iconClass: 'world',
    onClick: () => {
        // On icon clicked....
    }
}

const myCard = {
    ...
    icon: myCardIcon,
    ...
}

const myCard = {
    title: 'My card No: 1',
    status: 'done',
    header: myHeaderComponent,
    headline: 'Boomers smugglas in via Helsinborgs hamn och monteras på bilar - "De ska explodera när bilen öppnas"',
    images: ['http://www.url.se/image1.png', 'http://www.url.se/image2.png'],
    footer: 'SVERIGE | NYHET |​​​​​​​ Mathilda Sigurdardottir'
}

<GUI.Card card={myCard} onClick={card => //Do stuff with the card....}/>

<GUI.Checkbox className="custom-class" onChange={checked => {}} />

<GUI.ColumnsLayout className="custom-class" columns={columns} />

[
    {
        id: '63a43aa4-29b5-4e84-b0d2-52de5adfd1ef',
        align: 'left',
        rows: [
            {
                id: '12fd54-2gfd5-400e84-b0dddd2-gfdde5a41',
                content: 'My row content'
            }
        ]
    }
]

const columns = [
    {
        id: '63a43aa4-29b5-4e84-b0d2-52de5adfd1ef',
        align: 'left',
        rows: [
            {
                id: 'columns-1-rows-1-id',
                content: 'column 1 - row 1'
            },
            {
                id: 'columns-1-rows-2-id',
                content: 'column 1 - row 2'
            },
            {
                id: 'columns-1-rows-3-id',
                content: 'column 1 - row 3'
            }
        ]
    },
    {
        id: 'ffdf35-f3325-00sd-1cxxxa-sd2ffjj39717s',
        align: 'center',
        rows: [
            {
                id: 'columns-2-rows-1-id',
                content: 'column 2 - row 1'
            },
            {
                id: 'columns-2-rows-2-id',
                content: 'column 2 - row 2'
            },
            {
                id: 'columns-2-rows-3-id',
                content: 'column 2 - row 3'
            }
        ]
    },
    {
        id: '12fd54-2gfd5-400e84-b0dddd2-gfdde5a41',
        align: 'right',
        rows: [
            {
                id: 'columns-3-rows-1-id',
                content: 'column 3 - row 1'
            },
            {
                id: 'columns-3-rows-2-id',
                content: 'column 3 - row 2'
            },
            {
                id: 'columns-3-rows-3-id',
                content: 'column 3 - row 3'
            }
        ]
    }
]

<GUI.ColumnsLayout columns={columns} columnsClass={'my-custom-columns-class'} rowsClass={'my-custom-rows-class'}/>

<GUI.ConfigCheckbox ref="configRef" label="config text" />

constructor(props) {
	super(props)
	this.state = {
		myConfig: props.config.myCheckboxConfig
	}
}

<GUI.ConfigCheckbox ref="myCheckboxConfig" label="My Checkbox Config" />

<GUI.ConfigDropDown items={items} ref="configRef" />

const items = [
   {
		iconClass: 'rocket',
		iconColor: 'gray',
		content: 'My content 1',
		id: 'my-custom-id-1'
	},
	{
		iconClass: 'star',
		iconColor: 'gray',
		content: 'My content 2',
		id: 'my-custom-id-2'
	}
]

<GUI.ConfigDropDown ref="myDropDownConfig" defaultSelectedItem={items[0]} items={items} />

<GUI.ConfigEditor ref="configEditorRef"/> 

<GUI.ConfigInput ref="configRef" name="config text" /> 

<GUI.ConfigInput ref="myConfig" name="My Config Input" validation={['required']} />

<GUI.ConfigJsonTree ref="configRef" name="config text" value={}/> 

<GUI.ConfigJsonTree ref="myConfig" name="My Config JsonTree" />

<GUI.ConfigPassword ref="configRef" name="config text" />

<GUI.ConfigPassword ref="myPasswordConfig" name="My Password Config Input" validation={['required']} />

<GUI.ConfigSwitchButton ref="configRef" label="Config SwitchButton" />

<GUI.ConfigSwitchButton ref="mySwitchButtonConfig" label="My SwitchButton Config Input" validation={['required']} />

<GUI.ConfigTextarea ref="configRef" name="config text" />

<GUI.ConfigTextarea ref="myTextareaConfig" name="My Textarea Config Input" validation={['required']} />

<GUI.Datalist id={} options={}/>

{
    value: 'my option1',
    id: '63a43aa4-29b5-4e84-b0d2-52de5adfd1ef'
}

const items = [
	{
		id: "my-custom-id-1",
		value: "apple"
	},
	{
		id: "my-custom-id-2",
		value: "anything!"
	},
	{
		id: "my-custom-id-3",
		value: "option 1"
	}
]

<GUI.Input list={'my-input-list-id'} />
<GUI.Datalist id={'my-input-list-id'} options={items} />

<GUI.DatePicker />

const icon = {
    position: 'right',
    iconClass: 'calendar'
}
const label='My label text'

<GUI.DatePicker label={label} icon={icon} />

<GUI.DropDown items={[]} />

{
    id: "my-custom-dropdown-id",
    iconClass: "network-1",
    iconSize: "large",
    style: {
      color: 'gray'  
    },
    content: "dropdown item value"
}

const items = [
		{
			id: "my-custom-dropdown-id-1",
			iconClass: "network-1",
			content: "Dropdown item 1",
			style: {
				color: 'gray'
			}
		},
		{
			id: "my-custom-dropdown-id-2",
			iconClass: "network-2",
			content: "Dropdown item 2",
			style: {
				color: 'red'
			}
		},
		{
			id: "my-custom-dropdown-id-3",
			iconClass: "network-3",
			content: "Dropdown item 3",
			style: {
				color: 'blue'
			}
		}
	]

<GUI.DropDown items={items} />

<GUI.DropMenu items={[]} />

{
    iconClass: "icon class name",
    id: 'my-drop-menu-custom-id',
    content: "dropmenu item content",
    onClick: () => {
	//Do Something.		    	
    }
}

const items = [
	{
		iconClass: "network-1",
		id: 'my-item-1-id',
		content: "dropmenu item content 1",
		onClick: () => {
			//Do Something.             
		}
	},
	{
		iconClass: "network-2",
		id: 'my-item-2-id',
		content: "dropmenu item content 2",
		disabled: true,
		onClick: () => {
			//Do Something.             
		}
	},
	{
		iconClass: "network-3",
		id: 'my-item-3-id',
		content: "dropmenu item content 3",
		onClick: () => {
			//Do Something.             
		}
	}
]

<GUI.DropMenu items={items} />

<GUI.Gallery items={items} />

{
	original: 'PATH_TO_FULL_SIZE_IMAGE',
	thumbnail: 'PATH_TO_THUMBNAIL',
	description: 'Optional description...',
	sizes: { width: '200px', height: '150px'}
}

const items = [
	{
		original: 'https://static.ewtest.infomaker.io/wp-content/uploads/sites/2/2017/03/22081303/icon-writer.png',
		sizes: { width: '150px', height: '200px'},
		description: 'IMAGE NUMBER 1',
	},
	{
		original: 'https://static.ewtest.infomaker.io/wp-content/uploads/sites/2/2017/03/22081344/icon-everyware.png',
		description: 'IMAGE NUMBER 2',
	},
	{
		embedUrl: 'https://www.youtube.com/embed/2ul5GTBYCd0',
		description: 'VIDEO NUMBER 1',
		video: true
	}
]

<GUI.Wrapper style={{width: '100%', height: '500px'}}>
	<GUI.Gallery items={items} />
</GUI.Wrapper>

<GUI.Header text="My header title" />

<GUI.Heading level="3" text="My h3 title" />

<GUI.Heading level="3" text="My h3 title" />

<GUI.HTML  htmlValue={__html} />

const htmlValue = "<h1>Hi there!</h1>"

<GUI.HTML htmlValue={htmlValue} />

<GUI.Icon iconClass="star" onClick={e => {}} text="My icon text" />

<GUI.Icon iconClass="star" text="My star icon" iconColor={"gray"}/>
<GUI.Icon iconClass="graph-bar" iconColor={"blue"}/>
<GUI.Icon iconClass="cloud" text="My cloud icon" iconColor={"red"}/>

<GUI.IconSwitch icons={myIcons} onClick={() => { /* Do something */ }} onChange={item => {console.log(item)}} />

const icons = [
    {
        id: 'my-lock-icon-switch-id',
        iconClass: 'lock',
        locked: true
    },
    {
        id: 'my-unlock-icon-switch-id',
        iconClass: 'lock-open',
        locked: false
    }
]
<GUI.IconSwitch icons={icons} onClick={() => console.log('Clicked !')} onChange={item => console.log(item)}/>

<GUI.Webview src={'my url src'} />

<Webview src='my-src-url' ref={ref => this.myWebview = ref}/>
...
const myDataObj = {
    // Some data to send ....
}
this.myWebView.sendData(myDataObj)

const url = "https://www.infomaker.se/"

<GUI.Webview src={url} height={"600px"}/>

<GUI.Img src={'my url img'} />

const url = "https://s3-eu-west-1.amazonaws.com/dashboard-plugin-wiki-screenshots/gui/Infomaker+logo.png"

<GUI.Img src={url} />

<GUI.Input placeholder="My input placeholder text" onChange={value => {}} />

<GUI.Input placeholder="My input placeholder text" onChange={value => console.log(value)} />

<GUI.JsonTree name="My JsonTree name" data={myDataObject} onChange={value => //Do stuff with modyfied DataObject} />

const myDataObject = {
    srting: 'My string',
    object: {
        key1: 'my key1 value',
        key2: 'my key2 value'
        key3: 'my key3 value'
    },
    array: [
        'item1',
        'item2',
        'item3'
    ],
    boolean: true
}

<GUI.JsonTree name="Newsday Planner Config (JSON)" data={myDataObject} />

<GUI.Label className="custom class" htmlFor={htmlForValue} text={myText} />

const myText = "My label text"

<GUI.Label htmlFor={'my-example-input'} text={myText} />

<GUI.List items={[]} />

{
    id: "2b42d026-e5cb-4731-8fc0-2f87fde06b38",
    title: "list item title",
    content: "list item content",
    image: { src: "list-item-image.png" },
    author: "list item author"
}

const items = [{
    id: "my-custom-list-id-1",
    title: 'Title 1',
    content: "content 1"
}, {
    id: "my-custom-list-id-2",
    title: "title 2",
    content: <GUI.Header text="content 2" onClick={() => {}} />,
    image: { src: "list-item-image.png" }
}]

<GUI.List items={items} />

<GUI.List items={items} inlineItems={true}/>

<GUI.MarkdownViewer className="custom class" htmlFor={htmlForValue} text={myText} />

const myMarkdownText = `
    # Headline 1
    ## Headline 2

    **Cool bold text**
`

<GUI.MarkdownViewer text={myMarkdownText} />

<GUI.Menu items={myItems} />

{
    iconClass: 'rocket',
    id: 'my-menu-item-id',
    text: 'My title text',
    showText: true
}

const items = [
	{
		iconClass: 'rocket',
		iconColor: 'black',
		text: 'My title text',
		link: 'https://www.infomaker.se',
		showText: true,
		id: "my-custom-menu-id-1",
	},
	{
		iconClass: 'star',
		iconColor: 'black',
		text: 'Title 2',
		link: 'https://www.google.se',
		showText: true,
		id: "my-custom-dropdown-id-2",
	}
]

<GUI.Menu items={items} />

<GUI.MultiSelectList className="custom_class" items={seletListItems} />

{
    uuid: 'my-item-1',
    label: 'my item label  text',
    checked: false,
    ...ANY_OTHER_PROERTIES
}

const items = [
    {
        uuid: 'my-item-1',
        label: 'my label 1',
        checked: false,
    },
    {
        uuid: 'my-item-2',
        label: 'my label 2',
        checked: false,
    }
]

<GUI.MultiSelectList items={items} />

<GUI.Paragraph text="My paragraph text" />

<GUI.Paragraph text="My paragraph text" />

<GUI.Paragraph>
   My paragraph <strong>text</strong>
<GUI.Paragraph>

<GUI.Search className='my-class' placeholder='search here' />

<GUI.Popover  />

<GUI.Popover content={<MyCustomImportComponent />} trigger={<MyCustomPlusIcon />} hold={{timeout: 300}} arrow={false} />

<GUI.Popover hover content={<MyCustomMenuComponent />} trigger={<MyCustomMenuIconElement />} />

<GUI.Section title="my-section" buttons={[]} />

<GUI.Section title="my-title" buttons={[
    <GUI.Button text="first button" />,
    <GUI.Button text="second button" />
]}>
    // Section content
</GUI.Section>

<GUI.Wrapper className="@plugin_bundle_class">
    <GUI.Section title="First Section" buttons={[
        <GUI.Button text="first button" />
    ]}>
        // first section content
    </GUI.Section>

    <GUI.Section title="Second Section" minimized buttons={[
        <GUI.Button text="second button" />
    ]}>
        // second section content
    </GUI.Section>

    <GUI.Section toggleable={false} title="Third Section">
        // Third section content
    </GUI.Section>
</GUI.Wrapper>

<GUI.Span text="my-span" />

<GUI.Span text="my-span" />

<GUI.SuggestSearch title={} ocInstance={} config={} onSearch={} cacheKey={} />

constructor(props) {
    super(props)

    this.lcc = null
    this.ocInstance = null

     this.state = {
        title: "Example",
        config: {
            suggestFields: [
                {
                    name: 'PubStatus', 
                    order: 10
                }, 
                {
                    name: 'Tags', 
                    order: 15 
                },
                {
                    name: 'Authors',
                    order: 20
                }
            ],
            suggestLabels: {'PubStatus': 'Status', 'Tags': 'Tagg', 'Authors': 'Författare'},
            searchOptions: {
                start: 0,
                limit: 10,
                property: ['uuid', 'PubStatus', 'Tag', 'Authors'],
                defaultQuery: '*:* NOT PubStatus:draft',
                filterQuery: 'contenttype:Article',
                sortField: 'updated',
                sortAscending: false
            },
            initialSearch: [
                {
                    "value": "Dans",
                    "field": "Tags",
                }, {
                    "value": "Mat och dryck",
                    "field": "Tags",
                }, {
                    "value": "John Doe",
                    "field": "Authors",
                    "operator": "AND"
                }
            ]
        }
    }
}

const LCC_BUNDLE = 'io.infomaker.lcc'
const LCC_GET_LIB = `${LCC_BUNDLE}:getLCCLib`
const LCC_LIB = `${LCC_BUNDLE}:LCCLib`

componentDidMount() {
    try {
        this.ready(LCC_BUNDLE, () => {
            this.on(LCC_LIB, userData => {
                let LCC = userData.LCC

                this.lcc = new LCC({
                    plugin: this,
                    onLccReadyStateChange: this.onLccReadyStateChange.bind(this)
                })

                this.lcc.start()
            })

            this.send(LCC_GET_LIB, {v:1})
        })
    } catch(err) {
        console.warn(err)
    }
}

onLccReadyStateChange(lccReady) {
    this.ocInstance = this.lcc.opencontent("my-opencontent-provider")
}

onSearch(result) {
    /**
        result === {
            items: [...],
            search: {
               start: 0,
               limit: 10,
               property: [...list of properties to fetch],
               q: '(Tags: "Dans" OR Tags: "Mat och dryck") AND Authors: "John Doe" AND contenttype:Article',
               sort.indexfield: "updated",
               sort.updated.ascending: false
            },
            suggestionSeach: [{value:"Dans", field:"Tags", operator:null}, {value:"Mat och dryck", field:"Tags", operator:null}, {value:"John Doe", field:"Authors", operator:"AND"}],
            totalHits: 0
        }
     */
}

render() {
    return (
        <GUI.SuggestSearch title={this.state.title} ocInstance={this.ocInstance} config={this.state.config} onSearch={this.onSearch} cacheKey={"my-cache-key"} />
    )
}

<GUI.SwitchButton onChange={checked => {}} />

const myLabel = {
    left: 'Disable',
    right: 'Enable'
}

<GUI.SwitchButton label={myLabel} />

<GUI.Tabs tabs={myTabs} />

{
    id: "2b42d026-e5cb-4731-8fc0-2f87fde06b38",
    title: "My tab title",
    content: 'My tab content'
}

tabs: [
	{
		id: 'my-tsab-1-id',
		title: 'Tab 1',
		content: <Tab1 myTitle={'i am a custom component inside Tab 1'}/>
	},
	{
		id: 'my-tsab-2-id',
		title: 'Tab 2',
		content: 'I am just a string 🙃'
	},
	{
		id: 'my-tsab-3-id',
		title: 'Tab 3',
		content: 'tab 3 content'
	}
]
<GUI.Tabs tabs={myTabs} />

class Tab1 extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return <GUI.Wrapper>
			<GUI.Header text={this.props.myTitle} />
		</GUI.Wrapper>
	}
}
	
class Application extends Dashboard.Application {
    constructor(props) {
    	super(props)
    
    	this.state = {
    		tabs: [
    			{
    				id: 'my-tsab-1-id',
    				title: 'Tab 1',
    				content: <Tab1 myTitle={'i am a custom component inside Tab 1'}/>
    			},
    			{
    				id: 'my-tsab-2-id',
    				title: 'Tab 2',
    				content: 'I am just a string 🙃'
    			},
    			{
    				id: 'my-tsab-3-id',
    				title: 'you can close me >>>>>>>>>>',
    				content: 'I am a closeable tab 😎',
    				onClose: newTabs => {
    					console.log(newTabs) //return an Array with the new tabs without the closed one, here you should update you state with the new tabs 😊
    				}
    			}
    		]
    	}
    }
    <GUI.Tabs tabs={this.state.tabs} onSelect={(index, event) => console.log(index, event)} onAdd={() => this.setState({
    	tabs: [
    		...this.state.tabs,
    		{
    			id: 'my-tab-4-id',
    			title: 'New tab',
    			content: 'NEW TAB 🎉'
    		}
    	]
    })}/>
}

<GUI.Textarea onChange={() => myFunction()} />

<GUI.TextButton text={'Text Button Only'} onClick={() => {/* Do something... */} />

<GUI.Title text="My h1 title" />

<GUI.UploadButton text='Upload file' size='large' onSuccess={file => /* Do something with the file */} onError={err => console.log(err)}/>

...
    <GUI.UploadButton text='Upload file' size='large' onSuccess={file => this.setState({imgSrc: file})}/>
    <GUI.Img src={this.state.imgSrc} width='300px' height='300px'/>
...

<GUI.WidgetButton text="My button" />

<GUI.WidgetIcon iconClass={'my-icon-class'}/>

    <GUI.WidgetIcon iconClass={'store'} iconColor={'red'} />
	<GUI.WidgetIcon iconClass={'web'} iconColor={'black'} />
	<GUI.WidgetIcon iconClass={'shopping-bag'} iconColor={'gray'} />

<GUI.WriterPublishFlow
    article={article}
    writerPublishFlow={writerFlowConfig}
    onFlowClicked={actions => console.log(actions)}
    articleHasUpdated={this.state.articleHasUpdated}
    onPubStopChange={date => console.log(date)}
    onPubStartChange={date => console.log(date)}
    onClose={() => {}}
/>

{
    uuid: 'ARTICLE_UUID',
    status: 'DEFAULT_WRITER_STATUS', // draft, done, approved, withheld, usable, canceled
    hasPublishedVersion: 'WRITER_HAS_PUBLISH_VERSION_VALUE', // true or false
    headline: 'ARTICLE_HEADLINE_VALUE',
    published: 'ARTICLE_PUBDATE_VALUE',
    pubStart: 'ARTICLE_PUBSTART_VALUE',
    pubStop: 'ARTICLE_PUBSTOP_VALUE'
}

<GUI.Wrapper>
    // content
</GUI.Wrapper>

this.send({
    name: 'GUI:Popover',
    userData: {
        eventName: 'close',
        eventId: 'my-popover-eventId'
    }
)

<GUI.Popover eventId={'my-popover-eventId'} />