All files / src/form/cells MarkdownCell.tsx

12.5% Statements 1/8
0% Branches 0/4
0% Functions 0/4
12.5% Lines 1/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50                        66x                                                                          
import { Drawer } from 'antd';
import React, { ReactElement, useState } from 'react';
import {
  FileMarkdownOutlined
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
 
import { CellComponentDisplayPage, TableMode } from "@props/RecordProps";
import { CloseIcon } from '../../components';
import { stopPropagationAndPreventDefault } from '@utils/ObjectUtils';
import ReactMarkdownWrap from "../../components/wrap/ReactMarkdownWrap";
 
const MarkdownCell = (props: {
  page: CellComponentDisplayPage,
  text: string;
  zIndex: number;
  tableMode?: TableMode;
}): ReactElement => {
  const { page, zIndex, text, tableMode } = props;
  const { t } = useTranslation();
 
  const [visible, setVisible] = useState<boolean>(false);
  return (page === 'DISPLAY' && tableMode != 'detail-drawer') ?
    (<ReactMarkdownWrap
      linkTarget="_blank"
      className="markdown-display"
    >{text}</ReactMarkdownWrap>) :
    (<>
      {<FileMarkdownOutlined onClick={() => setVisible(!visible)} />}
      <Drawer
        width="600px"
        title={t("Message content")}
        placement="right"
        closable={true}
        zIndex={zIndex + 2}
        open={visible}
        onClose={() => setVisible(false)}
        closeIcon={<CloseIcon onClick={setVisible} />}
      >
        <span
          onClick={(e) => stopPropagationAndPreventDefault(e)}
        >
          <ReactMarkdownWrap linkTarget="_blank">{text}</ReactMarkdownWrap>
        </span>
      </Drawer>
    </>);
};
 
export default MarkdownCell;