configurable-interactive-layout
v3.3.0
Published
Component used for rendering visualizations in a card structure.
Downloads
9
Maintainers
Readme
Configurable-Interactive-Layout
This library provides a set of components to create a Layout based on Amdocs Open Network Style Guide. The React components exposed in this library are:
- Layout
- Card
Installation
npm install configurable-interactive-layout --save
In your application
import {CardsLayoutManager, Card} from 'configurable-interactive-layout';
render() {
return (
<CardsLayoutManager layoutConfiguration={...} cardsConfiguration={...} >
<Card configId="card1">
<div> My Content </div>
<Card>
<Card configId="card2">
<div> My Contennt 2 </div>
</Card>
</CardsLayoutManager>
}
}
Layout
A React component with an API wrapping react-grid-layout
Renders any number of child components and, according to the configuration props passed, organized them, adds styles and support for drag and drop.
layoutConfiguration [optional]
Override default layout configurations for example, this configuration will enable dragging and dropping of cards
const layoutConfig = {draggable: true};
<CardsLayoutManager layoutConfiguration={layoutConfig} cardsConfiguration={...} >
defult:
{
draggable: false,
resizable: false,
rowHeight: 100,
cardMargin: [20, 20],
cardPadding: [20, 20],
breakpoints: [
{
id: 'lg',
col: 12,
width: 1280,
},
{
id: 'md',
col: 8,
width: 960,
},
{
id: 'sm',
col: 6,
width: 1,
},
],
};
cardsConfiguration
Configure card layout. Different configurations are expected according to the value of
layoutConfiguration.draggable = true/false
// Draggable Layout
{
cards: {
card1: {
lg: { // for each screen breakpoint
"w": 6, // the number of columns
"h": 2, // the number of rows
"x": 0, // the inital horizontal position
"y": 0 // the inital vertical position
},
md: {
"w": 4,
"h": 2,
"x": 0,
"y": 0
},
sm: {
"w": 2,
"h": 2,
"x": 0,
"y": 0
},
},
// all other cards
}
}
// Pre-Defined Layout (drag disabled)
{
{
cardsOrder: ['card1', ... all visible cards], // order will be optimized from left to right, top to bottom
cards: {
card1: {
lg: {w: 6, h: 2}, // the number of columns and rows of each card
md: {w: 4, h: 2},
sm: {w: 2, h: 2},
},
// all other cards
}
}
}
onLayoutChange (function)
- A callback to be called after a user drops a draggable card
Params: updatedCards: Array of the updated cards configuration
Card
- A React component used to render any content and, according to the configuration props passed, can have a title and actions menu
- Cards are typically used as the child components of the Layout
configId [string]
A unique identifier of the card; should match the relevant recored in the cardsConfiguration layout prop
title [optional][string]
The title of the card
actions [optional][object]
Actions to present in the actions menu
actions={
'action1' : {
displayName: 'action1 tooltip', // the tooltip text
iconURL: 'icons/trashbin.svg', // a path to the svg
iconURLHover: 'icons/trashbin_hover.svg', // a path to the on hover svg
onClick: () => { ... }, // callback function to handle a click on the action
}
}