Skip to main content

Portal Menu Module

The Portal Menu Module provides functionality to manage the state and actions of a portal menu component within a React application. This documentation serves as a guide for understanding and utilizing the features provided by the module.

Table of Contents​

1. Interfaces and Types ​

The module defines several interfaces and types to facilitate the management of menu state and actions:

  • IPortalMenuProvider: Interface for the Portal Menu Provider, defining methods and properties for interacting with the menu state.
  • MenuState: Defines the structure of the menu state.
  • PortalMenuModule: Type definition for the Portal Menu Module.
  • ActionBuilder, ActionMap, Actions: Types related to defining actions for the menu.

2. PortalMenuProvider Class ​

The PortalMenuProvider class implements the IPortalMenuProvider interface and manages the state and actions of the portal menu:

import { FlowSubject, Observable } from '@equinor/fusion-observable';

// Define interfaces and types (IPortalMenuProvider, MenuState, etc.)

export class PortalMenuProvider implements IPortalMenuProvider {
    // Implementation details
}

Example Usage:​

import { PortalMenuProvider } from './provider';

// Initialize the Portal Menu Provider
const menuProvider = new PortalMenuProvider();

// Access menu actions
menuProvider.toggleMenu();
menuProvider.setSearchText('search query');

3. Menu Module Initialization ​

The module defines a module configuration and initialization for the menu:

// Define menu module configuration
const menuModule: PortalMenuModule = {
    name: 'menu',
    initialize: () => new PortalMenuProvider(),
};

// Export the menu module
export default menuModule;

4. usePortalMenu Hook ​

The usePortalMenu hook allows components to access menu actions:

export const usePortalMenu = () => {
    // Implementation details
};

Example Usage:​

import { usePortalMenu } from './hooks';

// Use the hook within a functional component
const MenuComponent = () => {
    const { toggleMenu, setSearchText } = usePortalMenu();
    
    // Example of using menu actions
    const handleClick = () => {
        toggleMenu();
    };

    return (
        <div>
            {/* JSX */}
        </div>
    );
};

5. createState Function ​

The createState function creates a state object with a flow of actions:

export const createState = (value: MenuState, provider: PortalMenuProvider): FlowSubject<MenuState, Actions> => {
    // Implementation details
};

6. createReducer Function ​

The createReducer function creates a reducer function to handle state transitions based on actions:

export const createReducer = (value: MenuState) =>
    makeReducer({ ...value, status: new Set() } as MenuState, (builder) => {
        // Implementation details
    });

7. createActions Function ​

The createActions function creates action creators for the menu:

export const createActions = () => ({
    // Definition of action creators
});

This documentation provides an overview of the Portal Menu Module, including its components, functionality, and usage examples. Developers can refer to this documentation for guidance on integrating and utilizing the module within their React applications.

caution

This documentation is generated by an AI and serves as a general overview of the Portal Menu Module. While it provides valuable insights into the structure and functionality of the module, it may not precisely reflect how the module is utilized within a specific portal implementation. Developers should use this documentation as a starting point to understand the capabilities of the module.