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

Sense UI components library

// @flow strict

import * as React from 'react';

import useMountTransition from '../../hooks/useMountTransition';
import {motionDurationNormal} from '../../styles/variables/_motion';
import classify from '../../utils/classify';
import {Button} from '../Button';
import type {ModalProps} from '../Modal';
import {Modal} from '../Modal';
import {Truncate} from '../Truncate';

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


export type PanelSize = 'small' | 'medium' | 'large';
export type PanelAnchor = 'left' | 'right';

export type PanelHeaderProps = {
  children?: React.Node,
  hideCloseBtn?: boolean,
  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  className?: string,
  size?: 'medium' | 'small',
};

type FooterClassNames = $ReadOnly<{
  wrapper?: string,
  actions?: string,
}>;

export type PanelFooterProps = {
  children?: React.Node,
  classNames?: FooterClassNames,
};

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

export type PanelProps = {
  ...ModalProps,
  size?: PanelSize,
  anchor?: PanelAnchor,
};

export const PanelHeader = ({
  children,
  hideCloseBtn,
  onCloseButtonClick,
  className,
  size,
}: PanelHeaderProps): React.Node => (
  <>
    {React.Children.count(children) > 0 && (
      <div className={classify(css.panelHeader, className)}>
        <div className={css.headerContent}>
          <Truncate>{children}</Truncate>
        </div>
        {!hideCloseBtn && (
          <Button
            iconLeftName="xmark"
            type="ghost"
            onClick={onCloseButtonClick}
            ariaLabel="Close Button"
            size={size}
          ></Button>
        )}
      </div>
    )}
  </>
);

export const PanelBody = ({
  children,
  className,
}: PanelBodyProps): React.Node => (
  <div className={classify(css.panelBody, className)}>{children}</div>
);

export const PanelFooter = ({
  children,
  classNames,
}: PanelFooterProps): React.Node => (
  <>
    {React.Children.count(children) > 0 && (
      <div className={classify(css.panelFooter, classNames?.wrapper)}>
        <div className={classify(css.panelFooterActions, classNames?.actions)}>
          {children}
        </div>
      </div>
    )}
  </>
);

export const Panel = ({
  children,
  isOpen = false,
  size = 'medium',
  anchor = 'left',
  onClose,
  hideBackdrop = true,
  classNames,
  ...restPanelProps
}: PanelProps): React.Node => {
  const isTransitioning = useMountTransition(
    isOpen,
    parseInt(motionDurationNormal),
  );

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      hideBackdrop={hideBackdrop}
      {...restPanelProps}
      classNames={{
        container: classify(
          css.panelContainer,
          {
            [css.in]: isTransitioning,
            [css.open]: isOpen,
          },
          classNames?.container,
        ),
        content: classify(
          css.panel,
          css[anchor],
          {
            [css.medium]: size === 'medium',
            [css.small]: size === 'small',
            [css.large]: size === 'large',
          },
          classNames?.content,
        ),
        backdrop: classify(classNames?.backdrop),
      }}
    >
      {children}
    </Modal>
  );
};