feat: add image lightbox for the attachment field

This commit is contained in:
chenos 2021-01-05 17:31:41 +08:00
parent 62a7cc2b1f
commit 3e9f311c84
4 changed files with 47 additions and 14 deletions

View File

@ -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",

View File

@ -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> */}
</> </>
); );
} }

View File

@ -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');

View File

@ -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);