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.
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
}
}