test/nocobase2
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2024-12-01 03:38:32 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(app): image open in the modal

Browse Source
This commit is contained in:
chenos 2020-12-30 23:20:37 +08:00
parent 693e1171c1
commit 52a1ce012c
3 changed files with 49 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/form.fields/upload/index.tsx
View File

@ -85,6 +85,16 @@ const testOpts = (ext, options) => {
return true return true
} }
export const testUrl = (url, options) => {
for (let i = 0; i < exts.length; i++) {
if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
return false;
}
}
return true;
}
export const getImageByUrl = (url, options) => { export const getImageByUrl = (url, options) => {
for (let i = 0; i < exts.length; i++) { for (let i = 0; i < exts.length; i++) {
if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) { if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {

38
packages/app/src/components/views/Field/index.tsx
View File

@ -1,14 +1,14 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import { Tag, Popover, Table, Drawer } from 'antd'; import { Tag, Popover, Table, Drawer, Modal } from 'antd';
import Icon from '@/components/icons'; import Icon from '@/components/icons';
import get from 'lodash/get'; import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { fields2columns } from '../SortableTable'; import { fields2columns } from '../SortableTable';
import ViewFactory from '..'; import ViewFactory from '..';
import './style.less'; import './style.less';
import { getImageByUrl } from '@/components/form.fields'; import { getImageByUrl, testUrl } from '@/components/form.fields';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
const InterfaceTypes = new Map<string, any>(); const InterfaceTypes = new Map<string, any>();
@ -246,10 +246,38 @@ export function AttachmentFieldItem(props: any) {
const img = getImageByUrl(url, { const img = getImageByUrl(url, {
exclude: ['.png', '.jpg', '.jpeg', '.gif'] exclude: ['.png', '.jpg', '.jpeg', '.gif']
}) })
const [visible, setVisible] = useState(false);
return ( return (
<a onClick={(e) => e.stopPropagation()} className={'attachment-field-item'} target={'_blank'} href={url}> <>
<img style={{marginRight: 5}} height={20} alt={title} title={title} src={img}/> <a onClick={(e) => {
</a> e.stopPropagation();
if (testUrl(url, {
exclude: ['.png', '.jpg', '.jpeg', '.gif']
})) {
setVisible(true);
e.preventDefault();
}
}} className={'attachment-field-item'} target={'_blank'} href={url}>
<img style={{marginRight: 5}} height={20} alt={title} title={title} src={img}/>
</a>
<Modal
className={'attachment-modal'}
onCancel={(e) => {
e.stopPropagation();
setVisible(false);
}}
// @ts-ignore
onClick={(e) => {
e.stopPropagation();
}}
bodyStyle={{padding: 0}}
footer={null}
visible={visible}>
<img onClick={(e) => {
e.stopPropagation();
}} style={{height: 'auto', width: '100%'}} alt={title} title={title} src={url}/>
</Modal>
</>
); );
} }

6
packages/app/src/components/views/Field/style.less
View File

@ -20,4 +20,10 @@
width: 1px; width: 1px;
overflow: visible; overflow: visible;
} }
}
.attachment-modal {
.ant-modal-close {
background: rgba(255,255,255,.4);
}
} }