@bynder/compact-view

Bynder Compact View React Component

Usage example

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { CompactView, Modal, Login } from '@bynder/compact-view';
const assetFieldSelection = `
  name
  url
  originalUrl
  derivatives {
    thumbnail
    webImage
  }
  ... on Video {
    previewUrls
  }
`;
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { isOpen: false };
	}
	onSuccess(assets) {
		console.log(assets);
	}
	render() {
		return (
			<>
				<button onClick={() => this.setState({ isOpen: true })}>Open Compact View</button>
				<Modal isOpen={this.state.isOpen} onClose={() => this.setState({ isOpen: false })}>
					<Login>
						<CompactView
							language="en_US"
							onSuccess={this.onSuccess}
							assetFieldSelection={assetFieldSelection}
						/>
					</Login>
				</Modal>
			</>
		);
	}
}
ReactDOM.render(<App />, document.getElementById('app'));

See more info on Bynder Docs

Configuration

The optional options object accepts the following attributes (which are also all optional):

Attribute	Description	Possible Values	Default Value
onSuccess	Comma separated list of asset types to display	function (assets: asset[], { selectedFile?: File })): void	console.log
container	A DOM element to act as the container for Compact View (disables modal)	A Dom.HTMLElement instance	None
portal	Portal config object		None
portal.url	Set a default portal URL for the Compact View login screen	A string containing Bynder portal URL	None
portal.readOnly	If true, limits Compact View to a single portal	true, false	false
defaultSearchTerm	Set the initial value for search term	"Keyword"	None
language	Set language for the Compact View	"en_US", "nl_NL", "de_DE", "fr_FR", "es_ES",	"en_US"
mode	Set the Compact View to allow multiple or single asset selection	"SingleSelect", "SingleSelectFile", "MultiSelect"	"MultiSelect"
theme	A theme object for customizing Compact View look and feel	Object (see below for recognized keys)	None
assetTypes	An array of strings for limiting allowed asset types	AssetType[]	["image", "audio", "video", "document"]
hideExternalAccess	If true, removes access to external DAM from assets and collections	true, false	false
hideLimitedUse	If true, limited assets are hidden	true, false	false
selectedAssets	An array of asset ids. When mode is different than MultiSelect, the last id in the array will be selected	["id1", "id2", "id3"]	[]
modalStyles	An object with css properties for modal wrapper using strings as keys and values { [key: string]: string }	{"width": "100%"}	None
assetFieldSelection	A multiline string containing desired asset fields	string	None
assetFilter	Set predefined filters for the Compact View	AssetFilterJson	None

type File = {
	url: string;
	width?: number;
	height?: number;
	fileSize?: number;
};

type AssetFilterJson = {
	assetType_in?: AssetType[]; //predefined asset types
	collectionId?: string; //predefined collection id
	metapropertyOptionId_in?: string[]; //predefined metaproperty IDs
	searchTerm?: string; //predefined search term
	tagNames_in?: string[]; //predefined tags
	isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
	showToolbar?: boolean; //show toolbar for predefined filters (false by default)
};

type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE';

type theme = {
	colorPrimary?: CSSColor;
	colorButtonPrimary?: CSSColor;
	colorButtonPrimaryLabel?: CSSColor;
	colorButtonPrimaryActive?: CSSColor;
	colorButtonPrimaryHover?: CSSColor;
	colorButtonPrimaryHoverLabel?: CSSColor;
};