configurable-interactive-layout v3.3.0

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

  The title of the card

  actions optional

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