nishant-design-system/lib/components/SideMenuLink/SideMenuLink.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import {Icon} from '../Icon';
import {SubTitleSmall, TEXT_COLORS} from '../Text';

import css from './SideMenuLink.module.css';


export const MENU_NAME_LIST = Object.freeze({
  dashboard: {
    title: 'Dashboard',
    iconName: 'house',
    iconType: 'duotone',
    iconSwapOpacity: false,
  },
  engage: {
    title: 'Engage',
    iconName: 'bullseye-pointer',
    iconType: 'duotone',
    iconSwapOpacity: false,
  },
  trm: {
    title: 'TRM',
    iconName: 'screen-users',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  analytics: {
    title: 'Analytics',
    iconName: 'chart-column',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  messaging: {
    title: 'Messaging',
    iconName: 'messages',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  chatbot: {
    title: 'Chatbot',
    iconName: 'message-bot',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  referrals: {
    title: 'Referrals',
    iconName: 'user-check',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  records: {
    title: 'Records',
    iconName: 'folder-open',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  bulkCleanup: {
    title: 'Bulk Cleanup',
    iconName: 'retweet',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  support: {
    title: 'Support',
    iconName: 'headset',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  audit: {
    title: 'Audit',
    iconName: 'print-magnifying-glass',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  timeline: {
    title: 'Timeline',
    iconName: 'timeline',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  people: {
    title: 'People',
    iconName: 'people-group',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  contacts: {
    title: 'Contacts',
    iconName: 'address-card',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  contacts2: {
    title: 'Contacts',
    iconName: 'calendars',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  contacts3: {
    title: 'Contacts',
    iconName: 'browser',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
});

type ClassNames = $ReadOnly<{wrapper?: string}>;

export type SideMenuLinkProps = {
  classNames?: ClassNames,
  children?: React.Node,
  pageNameKey: string,
  disabled?: boolean,
  hovered?: boolean,
  selectedValue?: string,
  opened?: boolean,
  onChange?: (newValue: string) => mixed,
};

export const SideMenuLink: React$AbstractComponent<
  SideMenuLinkProps,
  HTMLDivElement,
> = React.forwardRef<SideMenuLinkProps, HTMLDivElement>(
  (
    {
      classNames,
      pageNameKey,
      disabled,
      opened,
      selectedValue,
      onChange,
    }: SideMenuLinkProps,
    ref,
  ): React.Node => {
    const selected = selectedValue === pageNameKey;
    const onChangeHandler = () => {
      onChange && onChange(pageNameKey);
    };
    return (
      <div
        className={classify(
          css.linkWrapper,
          {
            [css.selected]: selected,
            [css.disabled]: disabled,
            [css.closed]: !opened,
          },
          classNames?.wrapper,
        )}
        onClick={onChangeHandler}
        ref={ref}
      >
        {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
          <Icon
            type={MENU_NAME_LIST[pageNameKey].iconType}
            name={MENU_NAME_LIST[pageNameKey].iconName}
            size="medium"
            color={TEXT_COLORS.inverseSecondary}
            className={css.menuIcon}
          />
        ) : null}
        {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
          <SubTitleSmall
            color={TEXT_COLORS.inverseSecondary}
            className={css.menuText}
          >
            {MENU_NAME_LIST[pageNameKey].title}
          </SubTitleSmall>
        ) : null}
      </div>
    );
  },
);