From 3e9f311c84923d88a4840d22ca0f5a9b1624d216 Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 5 Jan 2021 17:31:41 +0800 Subject: [PATCH] feat: add image lightbox for the attachment field --- packages/app/package.json | 1 + .../app/src/components/views/Field/index.tsx | 46 ++++++++++++++++--- .../src/__tests__/models/collection.test.ts | 5 +- .../src/models/collection.ts | 9 ++-- 4 files changed, 47 insertions(+), 14 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 54c107241..a68f6ea37 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -44,6 +44,7 @@ "react": "16.14.0", "react-big-calendar": "^0.30.0", "react-dom": "16.14.0", + "react-image-lightbox": "^5.1.1", "react-sortable-hoc": "^1.11.0", "styled-components": "^5.2.1", "umi": "^3.2.23", diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx index c9a814ccf..fe581532e 100644 --- a/packages/app/src/components/views/Field/index.tsx +++ b/packages/app/src/components/views/Field/index.tsx @@ -5,12 +5,14 @@ import { Tag, Popover, Table, Drawer, Modal } from 'antd'; import Icon from '@/components/icons'; import get from 'lodash/get'; import isEmpty from 'lodash/isEmpty'; +import findIndex from 'lodash/findIndex'; import { fields2columns } from '../SortableTable'; import ViewFactory from '..'; import './style.less'; import { getImageByUrl, testUrl } from '@/components/form.fields'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; - +import Lightbox from 'react-image-lightbox'; +import 'react-image-lightbox/style.css'; const InterfaceTypes = new Map(); 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) { const { value, schema } = props; + const [imgIndex, setImgIndex] = useState(0); + const [visible, setVisible] = useState(false); if (!value) { return null; } const values = Array.isArray(value) ? value : [value]; + const images = getImgUrls(values); + console.log(images); return ( -
- {values.map(item => )} +
{ + e.stopPropagation(); + }} className={'attachment-field'}> + {values.map(item => { + setVisible(true); + const index = findIndex(images, img => item.id === img.id); + setImgIndex(index); + }} data={item} schema={schema}/>)} + {visible && setVisible(false)} + onMovePrevRequest={() => { + setImgIndex((imgIndex + images.length - 1) % images.length); + }} + onMoveNextRequest={() => { + setImgIndex((imgIndex + 1) % images.length); + }} + />}
); } @@ -254,7 +285,7 @@ export function AttachmentFieldItem(props: any) { const img = getImageByUrl(url, { exclude: ['.png', '.jpg', '.jpeg', '.gif'] }) - const [visible, setVisible] = useState(false); + // const [visible, setVisible] = useState(false); return ( <> { @@ -262,13 +293,14 @@ export function AttachmentFieldItem(props: any) { if (testUrl(url, { exclude: ['.png', '.jpg', '.jpeg', '.gif'] })) { - setVisible(true); + props.onClick && props.onClick(); + // setVisible(true); e.preventDefault(); } }} className={'attachment-field-item'} target={'_blank'} href={url}> {title} - { e.stopPropagation(); @@ -284,7 +316,7 @@ export function AttachmentFieldItem(props: any) { { e.stopPropagation(); }} style={{height: 'auto', width: '100%'}} alt={title} title={title} src={url}/> - + */} ); } diff --git a/packages/plugin-collections/src/__tests__/models/collection.test.ts b/packages/plugin-collections/src/__tests__/models/collection.test.ts index 903d80667..92296a18b 100644 --- a/packages/plugin-collections/src/__tests__/models/collection.test.ts +++ b/packages/plugin-collections/src/__tests__/models/collection.test.ts @@ -13,10 +13,7 @@ describe('models.collection', () => { afterEach(() => app.database.close()); - // TODO(bug): - // TypeError: Cannot read property 'id' of null - // (packages/plugin-collections/src/models/collection.ts:218:52) - it.skip('import all tables', async () => { + it('import all tables', async () => { const tables = app.database.getTables([]); for (const table of tables) { const Collection = app.database.getModel('collections'); diff --git a/packages/plugin-collections/src/models/collection.ts b/packages/plugin-collections/src/models/collection.ts index 771364eec..046ff5b1e 100644 --- a/packages/plugin-collections/src/models/collection.ts +++ b/packages/plugin-collections/src/models/collection.ts @@ -214,9 +214,12 @@ export class CollectionModel extends BaseModel { collection_name: collection.name, }, }); - await model.updateAssociations({ - associationField: associationField.id, - }); + // TODO: tabs 表还未创建,暂时先这么处理 + if (associationField) { + await model.updateAssociations({ + associationField: associationField.id, + }); + } } } ids.push(model.id);