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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 67x 67x 5x 4x 67x 9x 8x 8x 8x 8x 8x 4x | import React, { ReactElement, Suspense, useState } from "react";
import { CellComponentDisplayPage, SaveRecordProps, TableMetaProps, TableMode } from "@props/RecordProps";
import { Drawer } from "antd";
import { CodeOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { stopPropagationAndPreventDefault } from "@utils/ObjectUtils";
import { emptyMethod } from "@utils/Constants";
import { CloseIcon } from "../../components/icons";
import CodeBrief from "./CodeBrief";
const CodeEditor = React.lazy(() => import('../fields/CodeEditor'));
const CodeContent = (props: {
value: string | undefined,
codeLanguage: string,
zIndex: number,
record?: SaveRecordProps | undefined;
}): ReactElement => {
const { value, codeLanguage, zIndex, record } = props;
return (
<div
onClick={(e) => stopPropagationAndPreventDefault(e)}
className="code-cell-parent"
>
<pre className="line-numbers code-cell">
<Suspense fallback={<div />}>
<CodeEditor
value={value ?? ""}
onChange={emptyMethod}
name={"code"}
updatable={false}
width="100%"
mode={codeLanguage}
zIndex={zIndex}
record={record}
/>
</Suspense>
</pre>
</div>
);
};
const CodeCell = (props: {
column: TableMetaProps;
value?: string;
page?: CellComponentDisplayPage;
tableMode?: TableMode;
zIndex: number;
record?: SaveRecordProps | undefined;
}): ReactElement => {
const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
const { value, page, column, tableMode, zIndex, record } = props;
const { extInfo, title } = column;
const { t } = useTranslation();
const content = <CodeContent
value={value}
codeLanguage={extInfo?.codeLanguage ?? "javascript"}
zIndex={zIndex}
record={record}
/>;
return (page === 'DISPLAY' && tableMode != 'detail-drawer') ? content : (
<>
<span
onClick={() => setDrawerVisible(true)}
style={{
cursor: 'pointer',
}}
title={t("Click to show code")}
>
<CodeOutlined className="code-cell-icon" />
{extInfo?.showBrief && (<CodeBrief value={value ?? ""} />)}
</span>
<Drawer
rootClassName="code-cell-drawer"
placement="right"
title={title}
open={drawerVisible}
//headerStyle={{ display: "none" }}
onClose={() => setDrawerVisible(false)}
closeIcon={<CloseIcon onClick={setDrawerVisible} />}
>
{content}
</Drawer>
</>
);
};
export default CodeCell;
|