Empower Category Menu

Installation

npm i empower-category-menu

Usage

Include in the component:

import CategoryMenu from 'empower-category-menu';

Properties

title - Title of the Category Menu

data - object composed of label,action,status,icon and subdata
label - The label for each category
action - This is the called action upon clicking the categories
status - Status of category (e.g. in-progress,locked,completed,standard)
icon - The icon that will be displayed beside the category label, preferably svg
subData - If the category has sub category, this should have data sets same as the data props 

button - object composed of label,icon
label - The label of the action above the categories.
icon - Optional, an action button icon above the categories.

selected - this is the current selected category, this value should be the same value of action of the category

preSelected - Same as the selected but upon initializing, this will be the active category if it is set

inner - If this is set to true, the category will have a classname of 'category-menu-inner' and empty if its false.

isStepper - This is a boolean, if you want broken lines connecting to each categories, make this option as true, if not, make it false.

loaded - This is the identifier if the category menu will be display or still on loading as some of the category            might be from an external api return.

getActions - this is the function that will be called upon clicking each category

Example

const sampleProps = {
  title: 'Test Menu',
  data: [
          {
              label: 'Menu 1',
              action: 'menu-1',
              status: 'in-progress',
              icon: SVG_DOCUMENT,
              subData: [
                {
                  label: 'Menu 1 Sub Menu 1',
                  action: 'menu-1-sub-menu-1',
                  status: 'in-progress',
                  icon: SVG_DOCUMENT,
                },
                {
                  label: 'Menu 1 Sub Menu 2',
                  action: 'menu-1-sub-menu-2',
                  status: 'in-progress',
                  icon: SVG_DOCUMENT,
                },
              ],
          },
          {
            label: 'Menu 2',
            action: 'menu-2',
            status: 'locked',
            icon: SVG_DOCUMENT
          },
          {
            label: 'Menu 3',
            action: 'menu-3',
            status: 'completed',
            icon: SVG_DOCUMENT
          },
          {
            label: 'Menu 4',
            action: 'menu-4',
            status: 'standard',
            icon: SVG_DOCUMENT
          },
          {
            label: 'Menu 5',
            action: 'menu-5',
            status: 'pending',
            icon: SVG_DOCUMENT
          },
  ],
  selected: 'menu-1-sub-menu-1',
  inner: true,
  loaded: true,
};

const App = () => {

  let getCategoryMenuActions = (action, value) => {
    console.log(action,value);
    // this will handle the selected action
  }

  return (
    <div className="sample-div">
      <CategoryMenu
        {...sampleProps}
        preSelected={'menu-1-sub-menu-1'}
        getActions={(action, value) => getCategoryMenuActions(action, value)}
      />
    </div>
  );
}

export default App;