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 | 66x 66x | import React from "react";
import { ReactElement } from "react";
import { CustomIcon, PrimaryColor } from '@config/base';
import { Popover } from "antd";
import { CellComponentDisplayPage } from "@props/RecordProps";
import { Suspense } from "react";
const ReactJson = React.lazy(() => import('react-json-view'));
const JsonCell = (props: {
page: CellComponentDisplayPage,
text: string;
}): ReactElement => {
const { page, text } = props;
if (['', '{}', '{ }'].includes(text) || text == null) {
return <></>;
}
return (page === 'DISPLAY') ? (
<div style={{ maxWidth: '750px', maxHeight: '463px', overflow: 'auto' }}>
<Suspense fallback={<div />}>
<ReactJson
name={false}
src={JSON.parse(text)}
theme="rjv-default"
collapsed={false}
displayDataTypes={true}
iconStyle={"circle"}
indentWidth={4}
/>
</Suspense>
</div>
) : (
<Popover
trigger="click"
content={
<div style={{ maxWidth: '750px', maxHeight: '463px', overflow: 'auto' }}>
<Suspense fallback={<div />}>
<ReactJson
//Don't display first level element as a separate level
name={false}
src={JSON.parse(text)}
theme="rjv-default"
collapsed={false}
displayObjectSize={false}
displayDataTypes={false}
iconStyle={"circle"}
indentWidth={4}
/>
</Suspense>
</div>
}
title={undefined}
>
<CustomIcon
type="icon-json1"
style={{ fontSize: "200%", color: PrimaryColor }}
/>
</Popover>
);
};
export default JsonCell;
|