feat: add image lightbox for the attachment field

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

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<string, any>();
 
 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 (
-    <div className={'attachment-field'}>
-      {values.map(item => <AttachmentFieldItem data={item} schema={schema}/>)}
+    <div onClick={(e) => {
+      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>
   );
 }
@@ -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 (
     <>
       <a onClick={(e) => {
@@ -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}>
         <img style={{marginRight: 5}} height={20} alt={title} title={title} src={`${img}?x-oss-process=style/thumbnail`}/>
       </a>
-      <Modal
+      {/* <Modal
           className={'attachment-modal'}
           onCancel={(e) => {
             e.stopPropagation();
@@ -284,7 +316,7 @@ export function AttachmentFieldItem(props: any) {
           <img onClick={(e) => {
             e.stopPropagation();
           }} style={{height: 'auto', width: '100%'}} alt={title} title={title} src={url}/>
-        </Modal>
+        </Modal> */}
     </>
   );
 }

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

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