glitch-soc/app/javascript/flavours/glitch/components/spoiler_button.tsx

import { FormattedMessage } from 'react-intl';

import classNames from 'classnames';

interface Props {
  hidden?: boolean;
  sensitive: boolean;
  uncached?: boolean;
  matchedFilters?: string[];
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

export const SpoilerButton: React.FC<Props> = ({
  hidden = false,
  sensitive,
  uncached = false,
  matchedFilters,
  onClick,
}) => {
  let warning;
  let action;

  if (uncached) {
    warning = (
      <FormattedMessage
        id='status.uncached_media_warning'
        defaultMessage='Preview not available'
      />
    );
    action = (
      <FormattedMessage id='status.media.open' defaultMessage='Click to open' />
    );
  } else if (matchedFilters) {
    warning = (
      <FormattedMessage
        id='filter_warning.matches_filter'
        defaultMessage='Matches filter “<span>{title}</span>”'
        values={{
          title: matchedFilters.join(', '),
          span: (chunks) => <span className='filter-name'>{chunks}</span>,
        }}
      />
    );
    action = (
      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
    );
  } else if (sensitive) {
    warning = (
      <FormattedMessage
        id='status.sensitive_warning'
        defaultMessage='Sensitive content'
      />
    );
    action = (
      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
    );
  } else {
    warning = (
      <FormattedMessage
        id='status.media_hidden'
        defaultMessage='Media hidden'
      />
    );
    action = (
      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
    );
  }

  return (
    <div
      className={classNames('spoiler-button', {
        'spoiler-button--hidden': hidden,
        'spoiler-button--click-thru': uncached,
      })}
    >
      <button
        type='button'
        className='spoiler-button__overlay'
        onClick={onClick}
        disabled={uncached}
      >
        <span className='spoiler-button__overlay__label'>
          {warning}
          <span className='spoiler-button__overlay__action'>{action}</span>
        </span>
      </button>
    </div>
  );
};