Numerous Pulsating Martians

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

    Install

    npm i configurable-interactive-layout

    DownloadsWeekly Downloads

    32

    Version

    3.3.0

    License

    ISC

    Unpacked Size

    1.53 MB

    Total Files

    104

    Last publish

    Collaborators

    • configurable_ui_components