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