configurable-interactive-layout

3.3.0 • Public • Published

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

Dependents (0)

Package Sidebar

Install

npm i configurable-interactive-layout

Weekly Downloads

1

Version

3.3.0

License

ISC

Unpacked Size

1.53 MB

Total Files

104

Last publish

Collaborators

  • configurable_ui_components