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

Sense UI components library

// @flow strict

import * as React from 'react';
// $FlowIssue[nonstrict-import] date-fns
import formatDistance from 'date-fns/formatDistance';
// $FlowIssue[nonstrict-import] date-fns
import parseISO from 'date-fns/parseISO';

import {classify} from '../../utils/classify';
import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
import {Avatar} from '../Avatar';
import {BodyMedium, BodySmall, TEXT_COLORS} from '../Text';

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


type CellsProps = {
  children?: React.Node,
  className?: ?string,
  truncatedText?: React.Node,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
};

export const Cells = ({
  children,
  className,
  ...rest
}: CellsProps): React.Element<'div'> => (
  <div className={classify(css.row, className)} {...rest}>
    {children}
  </div>
);

export const Cell = ({
  children,
  className,
}: CellsProps): React.Element<'div'> => (
  <div className={classify(css.cell, className)}>{children}</div>
);

export const BasicSingleCell: ClassNameComponent<'td'> = makeClassNameComponent(
  css.defaultSingleCell,
  'td',
);
export const BasicDoubleCell: ClassNameComponent<'td'> = makeClassNameComponent(
  css.defaultDoubleCell,
  'td',
);

export const PaddedContentCell: ClassNameComponent<'td'> =
  makeClassNameComponent(css.singleContentCell, 'td');

export const PaddedDoubleContentCell: ClassNameComponent<'td'> =
  makeClassNameComponent(css.doubleContentCell, 'td');

export const SingleCell = ({
  title,
  className,
}: {
  title: string,
  icon?: React.Node,
  className?: string,
}): React.Node => (
  <PaddedContentCell className={className}>
    <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
  </PaddedContentCell>
);

export const DoubleCell = ({
  title,
  subtitle,
  className,
}: {
  title: React.Node,
  subtitle?: React.Node,
  className?: string,
}): React.Node => (
  <PaddedDoubleContentCell className={className}>
    <div className={css.paddedTitleBlock}>
      <BodyMedium className={css.doubleTitle}>{title}</BodyMedium>
      <BodySmall color={TEXT_COLORS.tertiary} className={css.doubleSubtitle}>
        {subtitle ?? ''}
      </BodySmall>
    </div>
  </PaddedDoubleContentCell>
);

export const DateCell = ({
  date,
  className,
}: {
  date: string | Date,
  className?: string,
}): React.Node => {
  const parsedDate: Date = typeof date === 'object' ? date : parseISO(date);
  return (
    <DoubleCell
      title={`${parsedDate.getMonth() + 1} / ${
        parsedDate.getDate() + 1
      } / ${parsedDate.getFullYear()}`}
      subtitle={`${formatDistance(parsedDate, new Date())} ago`}
      className={className}
    />
  );
};

export const Monogram = ({initials}: {initials: string}): React.Node => (
  <Avatar size="small" text={initials} />
);

export const MonogramCell = ({
  initials,
  className,
}: {
  initials: string,
  className?: string,
}): React.Node => (
  <PaddedContentCell className={className}>
    <Monogram initials={initials} />
  </PaddedContentCell>
);