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

Sense UI components library

// @flow strict

import * as React from 'react';

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

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


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

export type PageTitleProps = {
  classNames?: ClassNames,
  children?: React.Node,
  pageNameKey?: string,
};

export const PAGE_NAME_LIST = Object.freeze({
  dashboard: {
    title: 'Dashboard',
    iconName: 'house',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  engage: {
    title: 'Engage',
    iconName: 'bullseye-pointer',
    iconType: 'duotone',
    iconSwapOpacity: true,
  },
  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,
  },
});

export type TabSlotProps = {
  children?: React.Node,
  className: string,
  ...
};

export const TabSlot = ({
  children,
  className,
  ...props
}: TabSlotProps): React.Node => (
  <div {...props} className={classify(css.tabSlot, className)}>
    {children}
  </div>
);

TabSlot.displayName = 'TabSlot';

export type RightSlotProps = {
  children?: React.Node,
  ...
};

export const RightSlot = ({children, ...props}: RightSlotProps): React.Node => (
  <div {...props}>{children}</div>
);

RightSlot.displayName = 'RightSlot';

export type PageNameProps = {
  children?: React.Node,
  ...
};

export const PageName = ({children, ...props}: PageNameProps): React.Node => (
  <div {...props} className={css.pageTitle}>
    {children}
  </div>
);
PageName.displayName = 'PageName';

export const PageTitle: React$AbstractComponent<
  PageTitleProps,
  HTMLDivElement,
> = React.forwardRef<PageTitleProps, HTMLDivElement>(
  ({classNames, children, pageNameKey}: PageTitleProps, ref): React.Node => {
    const getNamedComp = (comp: string) => {
      const childrenArray = React.Children.toArray(children);
      if (childrenArray.length) {
        const nodes: React.Node[] = [];
        for (const child of childrenArray) {
          if (child?.type?.displayName === comp) {
            nodes.push(child);
          }
        }
        return nodes.length > 1 ? nodes : nodes[0];
      }
      return null;
    };

    return (
      <div
        data-testid="PageTitle"
        className={classify(css.pageTitleWrapper, classNames?.wrapper)}
        ref={ref}
      >
        <div className={classify(css.leftSlot, classNames?.leftSlot)}>
          {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
            <PageName>
              <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
              <Icon
                type={PAGE_NAME_LIST[pageNameKey].iconType}
                name={PAGE_NAME_LIST[pageNameKey].iconName}
                size="medium"
                color={TEXT_COLORS.primary}
                swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
              />
            </PageName>
          ) : (
            getNamedComp('PageName')
          )}
          {getNamedComp('TabSlot')}
        </div>
        <div className={classify(css.rightSlot, classNames?.rightSlot)}>
          {getNamedComp('RightSlot')}
        </div>
      </div>
    );
  },
);