@spaced-out/ui-design-system/lib/components/EmptyState/EmptyState.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';

import {
  CalendarEmptyImage,
  ChartEmptyImage,
  DataEmptyImage,
  FileEmptyImage,
  MessageEmptyImage,
  UploadEmptyImage,
} from './EmptyImages';

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


type ClassNames = $ReadOnly<{
  wrapper?: string,
  image?: string,
  title?: string,
  description?: string,
  children?: string,
}>;

export type EmptyStateProps = {
  classNames?: ClassNames,
  children?: React.Node,
  imageVariant?: 'calendar' | 'data' | 'file' | 'message' | 'upload' | 'chart',
  title?: React.Node,
  description?: React.Node,
  customImageUrl?: string,
  ...
};

export const EmptyState: React$AbstractComponent<
  EmptyStateProps,
  HTMLDivElement,
> = React.forwardRef<EmptyStateProps, HTMLDivElement>(
  (
    {
      classNames,
      children,
      imageVariant,
      title,
      description,
      customImageUrl,
      ...props
    }: EmptyStateProps,
    ref,
  ): React.Node => (
    <div
      {...props}
      data-testid="EmptyState"
      className={classify(css.wrapper, classNames?.wrapper)}
      ref={ref}
    >
      {!!imageVariant && !customImageUrl && (
        <div className={classify(css.image, classNames?.image)}>
          {imageVariant === 'calendar' && <CalendarEmptyImage />}
          {imageVariant === 'data' && <DataEmptyImage />}
          {imageVariant === 'file' && <FileEmptyImage />}
          {imageVariant === 'message' && <MessageEmptyImage />}
          {imageVariant === 'upload' && <UploadEmptyImage />}
          {imageVariant === 'chart' && <ChartEmptyImage />}
        </div>
      )}
      {customImageUrl && (
        <img
          className={classify(css.image, classNames?.image)}
          src={customImageUrl}
          alt="Empty State"
        />
      )}
      {!!title && (
        <div className={classify(css.title, classNames?.title)}>{title}</div>
      )}
      {!!description && (
        <div className={classify(css.description, classNames?.description)}>
          {description}
        </div>
      )}
      {!!children && (
        <div className={classify(css.childrenWrapper, classNames?.children)}>
          {children}
        </div>
      )}
    </div>
  ),
);