agilite-react

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')
)