agilite-react v2.1.2

agilite-react

A ReactJS module that allows you to create a customizable SPA (Single Page Application), with tabbing, menu navigation, Ant Design library and integration into Agilit-e.

Installation 🔨

Using NPM:

npm install agilite-react --save-dev

Usage 💻

Import the AgiliteReact Component

import AgiliteReact from 'agilite-react'

Basic Rendering of Component

• When the component is rendered without any properties, default values are used to render a simple SPA

import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

ReactDOM.render(
  <AgiliteReact />,
  document.getElementById('root')
)

Advanced Rendering of Component with state

In order to customise the AgiliteReact component, declare a JavaScript Object and add it as a state prop to the component:

import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

function TestComponent () {
  return (
    <div>Hello World</div>
  )
}

const state = {
  rootContent: TestComponent,
  toolbar: {
    enabled: true,
    title: 'My Toolbar Title'
  }
}

ReactDOM.render(
  <AgiliteReact state={state} />,
  document.getElementById('root')
)

Below is a detailed rundown of the state props that can be passed to the AgiliteReact component:

• state object: The JavaScript Object to be passed as the AgiliteReact component state (see example above)
  • rootContent React.ReactNode: Primary content that is rendered on load of the Application
  • theme object: Theme object - default theme below

  {
    primary: '#d32f2f',
    primaryLight: '#ff6659',
    primaryDark: '#9a0007',
    secondary: '#e0e0e0',
    secondaryLight: '#ffffff',
    secondaryDark: '#aeaeae'
  }

  • leftMenu object: Left menu properties
    • leftMenuTitle string: Menu title
    • leftMenuEnabled boolean: Enable/Disable Menu
    • menuItems: Array of Menu Item Objects, example below

      [
        {
          key: 'todos', // string - Menu Item Key
          title: 'Todo', // String/React.ReactNode
          children: [ // Sub Menu Items
            {
              key: 'all_todos',
              title: 'All Todos' // String/React.ReactNode
            }
          ]
        }
      ]

      Note: Menu items can contain children properties to nest sub menus

    • visible: boolean: Control when the menu drawer is open or closed
    • onLeftMenuOpen: function(event): This function is called whenever the menu is opened, state can be used here to set the visible property accordingly
    • onLeftMenuClose: function(event): This function is called whenever the menu is closed, state can be used here to set the visible property accordingly
    • onLeftMenuItemClick: function(event): This function is called whenever a menu item is clicked, the event contains a key property which matches the key of the clicked menu item
    • expandedMenuItems array(string): Array containing the sub menu item key(s) that have to be expanded by default

      Note: All the 'leftMenu' rules apply for the 'rightMenu'

  • toolbar object: Toolbar at the top of the application
    • enabled boolean: Whether the toolbar is enabled/disabled
    • title string: The toolbar title
    • customMenus object: Custom menus within the toolbar (see example below)

    customMenus: {
      content: SignOutIcon // React.ReactNode || String
    }

  • tabNavigation object: Application tab navigation configuration
    • enabled boolean: Whether tab navigation is enabled/disabled
    • activeKey string: Active tab key
    • animated boolean: Animated Tabs
    • rootTabKey string: Key of the root tab
    • rootTabTitle string: Title of the root tab
    • tabs array: Array containing tab objects (below is an example of a tab object)

    {
      key: 'users', // string - Tab key
      closeable: true, // boolean - Whether the tab is closeable
      title: 'Users', // string - Tab title
      content: Users // React.ReactNode - The content of the tab
    }

    • onTabChange function(key): This function is called whenever a tab is clicked, the clicked tab key is passed to the function
    • onTabClose function(key): This function is called when the close icon on a tab is clicked, the key of the tab requesting to close is passed to the function

Below is an example of the default configuration

import React from 'react'
import ReactDOM from 'react-dom'
import AgiliteReact from 'agilite-react'

function RootContent () {
  return (
    <div>Root Content</div>
  )
}

const state = {
  rootContent: RootContent,
  theme: {},
  leftMenu: {
    leftMenuTitle: 'Left Menu',
    leftMenuEnabled: true,
    menuItems: [],
    visible: false,
    onLeftMenuOpen: () => { },
    onLeftMenuClose: () => { },
    onLeftMenuItemClick: () => { },
    expandedMenuItems: []
  },
  rightMenu: {
    rightMenuTitle: 'Right Menu',
    rightMenuEnabled: true,
    menuItems: [],
    visible: false,
    onRightMenuOpen: () => { },
    onRightMenuClose: () => { },
    onRightMenuItemClick: () => { },
    expandedMenuItems: []
  },
  toolbar: {
    enabled: true,
    title: 'Agilit-e React',
    customMenus: {
      content: null
    }
  },
  tabNavigation: {
    enabled: true,
    rootTabKey: 'home',
    rootTabTitle: 'Home',
    activeKey: 'home',
    animated: true,
    tabs: [],
    onTabChange: () => { },
    onTabClose: () => { }
  }
}

ReactDOM.render(
  <AgiliteReact state={state} />,
  document.getElementById('root')
)