feat: add image lightbox for the attachment field
This commit is contained in:
parent
62a7cc2b1f
commit
3e9f311c84
@ -44,6 +44,7 @@
|
|||||||
"react": "16.14.0",
|
"react": "16.14.0",
|
||||||
"react-big-calendar": "^0.30.0",
|
"react-big-calendar": "^0.30.0",
|
||||||
"react-dom": "16.14.0",
|
"react-dom": "16.14.0",
|
||||||
|
"react-image-lightbox": "^5.1.1",
|
||||||
"react-sortable-hoc": "^1.11.0",
|
"react-sortable-hoc": "^1.11.0",
|
||||||
"styled-components": "^5.2.1",
|
"styled-components": "^5.2.1",
|
||||||
"umi": "^3.2.23",
|
"umi": "^3.2.23",
|
||||||
|
@ -5,12 +5,14 @@ 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 findIndex from 'lodash/findIndex';
|
||||||
import { fields2columns } from '../SortableTable';
|
import { fields2columns } from '../SortableTable';
|
||||||
import ViewFactory from '..';
|
import ViewFactory from '..';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { getImageByUrl, testUrl } 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';
|
||||||
|
import Lightbox from 'react-image-lightbox';
|
||||||
|
import 'react-image-lightbox/style.css';
|
||||||
const InterfaceTypes = new Map<string, any>();
|
const InterfaceTypes = new Map<string, any>();
|
||||||
|
|
||||||
function registerFieldComponent(type, Component) {
|
function registerFieldComponent(type, Component) {
|
||||||
@ -236,15 +238,44 @@ export function LinkToFieldLink(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getImgUrls(value) {
|
||||||
|
const values = Array.isArray(value) ? value : [value];
|
||||||
|
return values.filter(item => testUrl(item.url, {
|
||||||
|
exclude: ['.png', '.jpg', '.jpeg', '.gif']
|
||||||
|
})).map(item => item);
|
||||||
|
}
|
||||||
|
|
||||||
export function AttachmentField(props: any) {
|
export function AttachmentField(props: any) {
|
||||||
const { value, schema } = props;
|
const { value, schema } = props;
|
||||||
|
const [imgIndex, setImgIndex] = useState(0);
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const values = Array.isArray(value) ? value : [value];
|
const values = Array.isArray(value) ? value : [value];
|
||||||
|
const images = getImgUrls(values);
|
||||||
|
console.log(images);
|
||||||
return (
|
return (
|
||||||
<div className={'attachment-field'}>
|
<div onClick={(e) => {
|
||||||
{values.map(item => <AttachmentFieldItem data={item} schema={schema}/>)}
|
e.stopPropagation();
|
||||||
|
}} className={'attachment-field'}>
|
||||||
|
{values.map(item => <AttachmentFieldItem onClick={() => {
|
||||||
|
setVisible(true);
|
||||||
|
const index = findIndex(images, img => item.id === img.id);
|
||||||
|
setImgIndex(index);
|
||||||
|
}} data={item} schema={schema}/>)}
|
||||||
|
{visible && <Lightbox
|
||||||
|
mainSrc={get(images, [imgIndex, 'url'])}
|
||||||
|
nextSrc={get(images, [imgIndex + 1, 'url'])}
|
||||||
|
prevSrc={get(images, [imgIndex - 1, 'url'])}
|
||||||
|
onCloseRequest={() => setVisible(false)}
|
||||||
|
onMovePrevRequest={() => {
|
||||||
|
setImgIndex((imgIndex + images.length - 1) % images.length);
|
||||||
|
}}
|
||||||
|
onMoveNextRequest={() => {
|
||||||
|
setImgIndex((imgIndex + 1) % images.length);
|
||||||
|
}}
|
||||||
|
/>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -254,7 +285,7 @@ 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);
|
// const [visible, setVisible] = useState(false);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<a onClick={(e) => {
|
<a onClick={(e) => {
|
||||||
@ -262,13 +293,14 @@ export function AttachmentFieldItem(props: any) {
|
|||||||
if (testUrl(url, {
|
if (testUrl(url, {
|
||||||
exclude: ['.png', '.jpg', '.jpeg', '.gif']
|
exclude: ['.png', '.jpg', '.jpeg', '.gif']
|
||||||
})) {
|
})) {
|
||||||
setVisible(true);
|
props.onClick && props.onClick();
|
||||||
|
// setVisible(true);
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}} className={'attachment-field-item'} target={'_blank'} href={url}>
|
}} className={'attachment-field-item'} target={'_blank'} href={url}>
|
||||||
<img style={{marginRight: 5}} height={20} alt={title} title={title} src={`${img}?x-oss-process=style/thumbnail`}/>
|
<img style={{marginRight: 5}} height={20} alt={title} title={title} src={`${img}?x-oss-process=style/thumbnail`}/>
|
||||||
</a>
|
</a>
|
||||||
<Modal
|
{/* <Modal
|
||||||
className={'attachment-modal'}
|
className={'attachment-modal'}
|
||||||
onCancel={(e) => {
|
onCancel={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -284,7 +316,7 @@ export function AttachmentFieldItem(props: any) {
|
|||||||
<img onClick={(e) => {
|
<img onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}} style={{height: 'auto', width: '100%'}} alt={title} title={title} src={url}/>
|
}} style={{height: 'auto', width: '100%'}} alt={title} title={title} src={url}/>
|
||||||
</Modal>
|
</Modal> */}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -13,10 +13,7 @@ describe('models.collection', () => {
|
|||||||
|
|
||||||
afterEach(() => app.database.close());
|
afterEach(() => app.database.close());
|
||||||
|
|
||||||
// TODO(bug):
|
it('import all tables', async () => {
|
||||||
// TypeError: Cannot read property 'id' of null
|
|
||||||
// (packages/plugin-collections/src/models/collection.ts:218:52)
|
|
||||||
it.skip('import all tables', async () => {
|
|
||||||
const tables = app.database.getTables([]);
|
const tables = app.database.getTables([]);
|
||||||
for (const table of tables) {
|
for (const table of tables) {
|
||||||
const Collection = app.database.getModel('collections');
|
const Collection = app.database.getModel('collections');
|
||||||
|
@ -214,9 +214,12 @@ export class CollectionModel extends BaseModel {
|
|||||||
collection_name: collection.name,
|
collection_name: collection.name,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await model.updateAssociations({
|
// TODO: tabs 表还未创建,暂时先这么处理
|
||||||
associationField: associationField.id,
|
if (associationField) {
|
||||||
});
|
await model.updateAssociations({
|
||||||
|
associationField: associationField.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ids.push(model.id);
|
ids.push(model.id);
|
||||||
|
Loading…
Reference in New Issue
Block a user