signal-desktop/ts/components/conversation/EmbeddedContact.tsx

// Copyright 2018-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React from 'react';
import classNames from 'classnames';

import type { EmbeddedContactType } from '../../types/EmbeddedContact';

import type { LocalizerType } from '../../types/Util';
import {
  renderAvatar,
  renderContactShorthand,
  renderName,
} from './contactUtil';

export type Props = {
  contact: EmbeddedContactType;
  i18n: LocalizerType;
  isIncoming: boolean;
  withContentAbove: boolean;
  withContentBelow: boolean;
  tabIndex: number;
  onClick?: () => void;
};

export function EmbeddedContact(props: Props): JSX.Element {
  const {
    contact,
    i18n,
    isIncoming,
    onClick,
    tabIndex,
    withContentAbove,
    withContentBelow,
  } = props;
  const module = 'embedded-contact';
  const direction = isIncoming ? 'incoming' : 'outgoing';

  return (
    <button
      type="button"
      className={classNames(
        'module-embedded-contact',
        `module-embedded-contact--${direction}`,
        withContentAbove ? 'module-embedded-contact--with-content-above' : null,
        withContentBelow ? 'module-embedded-contact--with-content-below' : null
      )}
      onKeyDown={(event: React.KeyboardEvent) => {
        if (event.key !== 'Enter' && event.key !== 'Space') {
          return;
        }

        if (onClick) {
          event.stopPropagation();
          event.preventDefault();

          onClick();
        }
      }}
      onClick={(event: React.MouseEvent) => {
        if (onClick) {
          event.stopPropagation();
          event.preventDefault();

          onClick();
        }
      }}
      tabIndex={tabIndex}
    >
      {renderAvatar({ contact, i18n, size: 52, direction })}
      <div className="module-embedded-contact__text-container">
        {renderName({ contact, isIncoming, module })}
        {renderContactShorthand({ contact, isIncoming, module })}
      </div>
    </button>
  );
}