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 | 66x | import React, { ReactElement, useState } from 'react';
import { FileOperatorProps } from '@props/RecordProps';
import { Drawer } from 'antd';
import { PaperClipOutlined } from '@ant-design/icons';
import FileOperator from './FileOperator';
import { CloseIcon } from "../";
import './App.less';
import { stopPropagationAndPreventDefault } from '@utils/ObjectUtils';
import { useDomainPermit } from '@utils/DomainPermitUtils';
const FileDisplay = (props: FileOperatorProps): ReactElement => {
const {
updatable, page, record, domainName, type, zIndex, column,
multiple
} = props;
const { title, key, serverSideType } = column;
const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
const isMultipleMode = (type === 'array') || (serverSideType === 'FILE_LIST') || (multiple === true);
const domainPermit = useDomainPermit(domainName, record?.id);
const content = (
<FileOperator
fieldValue={record?.[key]}
domainName={domainName}
fieldTitle={title}
// 因为是显示页面，不是编辑页面，因此 form 为空
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
form={undefined}
key={key}
multiple={isMultipleMode}
zIndex={zIndex + 2}
type={type}
column={column}
record={record}
updatable={(domainPermit.canUpdate != null && domainPermit.canUpdate) && updatable}
columnKey={key}
/>
);
if (page === 'LIST') {
return (<>
<PaperClipOutlined
onClick={() => setDrawerVisible(true)}
/>
<div onClick={stopPropagationAndPreventDefault}>
<Drawer
rootClassName="file-display-container"
width="400px"
rootStyle={{ margin: "auto" }}
destroyOnClose={true}
zIndex={zIndex + 3}
title={title}
open={drawerVisible}
onClose={() => setDrawerVisible(false)}
closeIcon={<CloseIcon onClick={setDrawerVisible} />}
>
<span>
{content}
</span>
</Drawer>
</div>
</>);
} else if (page === 'DISPLAY' || page === 'INLINE_DISPLAY') {
return content;
}
return (<></>);
};
export default FileDisplay;
|