feat: improve the upload component

packages/client/package.json

@@ -40,6 +40,7 @@
     "react-dnd-touch-backend": "^14.0.0",
     "react-helmet": "^6.1.0",
     "react-hooks-global-state": "^1.0.1",
+    "react-image-lightbox": "^5.1.4",
     "react-modal-hook": "^3.0.0",
     "umi-request": "^1.3.5"
   }

packages/client/src/schemas/upload/demos/demo1.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SchemaRenderer } from '../../';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'object',
+      title: `编辑模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Upload.File',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'object',
+      title: `阅读模式`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Upload.File',
+    },
+  },
+};
+
+export default () => {
+  return <SchemaRenderer debug schema={schema} />;
+};

packages/client/src/schemas/upload/demos/demo2.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SchemaRenderer } from '../../';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'object',
+      title: `编辑模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Upload.File',
+      'x-component-props': {
+        multiple: true,
+      },
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'object',
+      title: `阅读模式`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Upload.File',
+      'x-component-props': {
+        multiple: true,
+      },
+    },
+  },
+};
+
+export default () => {
+  return <SchemaRenderer debug schema={schema} />;
+};

packages/client/src/schemas/upload/index.md

@@ -23,59 +23,10 @@ group:
 
 ## Examples
 
-### 上传
+### 单文件上传
 
-```tsx
+<code src="./demos/demo1.tsx" />
-import React from 'react';
-import { Button } from 'antd'
-import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
-import { SchemaRenderer } from '../';
-import Upload from './';
 
-const NormalUpload = (props) => {
+### 多文件上传
-  return (
-    <Upload
-      {...props}
-      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-      headers={{
-        authorization: 'authorization-text',
-      }}
-    >
-      <Button icon={<UploadOutlined />}>上传文件</Button>
-    </Upload>
-  )
-}
 
-const schema = {
+<code src="./demos/demo2.tsx" />
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: `编辑模式`,
-      'x-decorator': 'FormItem',
-      'x-component': 'NormalUpload',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'string',
-      title: `阅读模式`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'NormalUpload',
-    },
-  }
-};
-
-export default () => {
-  return (
-    <SchemaRenderer components={{ NormalUpload }} schema={schema} />
-  );
-};
-```

packages/client/src/schemas/upload/index.tsx

@@ -1,6 +1,12 @@
 import React, { useEffect } from 'react';
-import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
+import {
-import { Upload as AntdUpload } from 'antd';
+  connect,
+  mapProps,
+  mapReadPretty,
+  observer,
+  useField,
+} from '@formily/react';
+import { Button, Progress, Upload as AntdUpload } from 'antd';
 import {
   UploadChangeParam,
   UploadProps as AntdUploadProps,
@@ -11,6 +17,12 @@ import { UploadFile } from 'antd/lib/upload/interface';
 import { isArr, toArr } from '@formily/shared';
 import { UPLOAD_PLACEHOLDER } from './placeholder';
 import { usePrefixCls } from '@formily/antd/esm/__builtins__';
+import { useState } from 'react';
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { useMap } from 'ahooks';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import UploadOutlined from '@ant-design/icons/UploadOutlined';
 
 type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
   onChange?: (fileList: UploadFile[]) => void;
@@ -24,6 +36,7 @@ type DraggerProps = Omit<AntdDraggerProps, 'onChange'> & {
 
 type ComposedUpload = React.FC<UploadProps> & {
   Dragger?: React.FC<DraggerProps>;
+  File?: React.FC<UploadProps>;
 };
 
 type IUploadProps = {
@@ -168,7 +181,15 @@ export const Upload: ComposedUpload = connect(
     const field = useField<Formily.Core.Models.Field>();
     console.log('field.value', field.value);
     return (field.value || []).map((item) => (
-      <div>{item.url ? <a target={'_blank'} href={item.url}>{item.name}</a> : <span>{item.name}</span>}</div>
+      <div>
+        {item.url ? (
+          <a target={'_blank'} href={item.url}>
+            {item.name}
+          </a>
+        ) : (
+          <span>{item.name}</span>
+        )}
+      </div>
     ));
   }),
 );
@@ -186,6 +207,229 @@ const Dragger = connect(
   }),
 );
 
+function toItem(file) {
+  if (file?.response?.data) {
+    file = file.response.data;
+  }
+  return {
+    ...file,
+    id: file.id || file.uid,
+    title: file.title || file.name,
+    imageUrl: getImageByUrl(file.url, {
+      exclude: ['.png', '.jpg', '.jpeg', '.gif'],
+    }),
+  };
+}
+
+function toMap(fileList: any) {
+  if (!fileList) {
+    return [];
+  }
+  if (typeof fileList !== 'object') {
+    return [];
+  }
+  if (Object.keys(fileList).length === 0) {
+    return [];
+  }
+  let list = fileList;
+  if (!Array.isArray(fileList) && typeof fileList === 'object') {
+    list = [fileList];
+  }
+  return list.map((item) => {
+    return [item.id || item.uid, toItem(item)];
+  });
+}
+
+const toImages = (fileList) => {
+  if (!fileList) {
+    return [];
+  }
+  if (typeof fileList !== 'object') {
+    return [];
+  }
+  if (Object.keys(fileList).length === 0) {
+    return [];
+  }
+  let list = fileList;
+  if (!Array.isArray(fileList) && typeof fileList === 'object') {
+    list = [fileList];
+  }
+  return list.map((item) => {
+    return {
+      ...item,
+      title: item.title || item.name,
+      imageUrl: getImageByUrl(item.url, {
+        exclude: ['.png', '.jpg', '.jpeg', '.gif'],
+      }),
+    };
+  });
+};
+
+Upload.File = connect(
+  (props: UploadProps & { value?: any }) => {
+    const {
+      multiple,
+      listType = 'picture-card',
+      value,
+      onChange,
+      ...others
+    } = props;
+    const [map, { set, setAll, remove }] = useMap<string, any>(toMap(value));
+    const images = toImages(value);
+    const [photoIndex, setPhotoIndex] = useState(0);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+      setAll(toMap(value));
+    }, [value]);
+    console.log('value', value);
+    return (
+      <div>
+        <AntdUpload
+          action={`${process.env.API_URL}attachments:upload`}
+          {...useUploadProps({ ...others, multiple })}
+          onChange={({ file }) => {
+            console.log({ multiple, file });
+            if (multiple) {
+              set(file.uid, toItem(file));
+            } else {
+              setAll([[file.uid, toItem(file)]]);
+            }
+            if (file.status === 'done') {
+              if (multiple) {
+                onChange([...toArr(value), file?.response?.data]);
+              } else {
+                onChange(file?.response?.data);
+              }
+            }
+          }}
+          showUploadList={false}
+        >
+          <Button icon={<UploadOutlined />}>上传文件</Button>
+        </AntdUpload>
+        {[...map.entries()].map(
+          ([key, item]) =>
+            item.id && (
+              <div>
+                {item.url ? (
+                  <a
+                    target={'_blank'}
+                    href={item.url}
+                    title={item.title}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      const index = images.findIndex(
+                        (image) => image.id === item.id,
+                      );
+                      setVisible(true);
+                      setPhotoIndex(index);
+                    }}
+                  >
+                    <img style={{ height: 16 }} src={item.imageUrl} />{' '}
+                    {listType !== 'picture-card' && item.title}{' '}
+                    <DeleteOutlined
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        remove(key);
+                        if (multiple) {
+                          const values = toArr(value).filter(
+                            (v) => v.id === item.id,
+                          );
+                          onChange(values);
+                        } else {
+                          onChange(null);
+                        }
+                      }}
+                    />
+                  </a>
+                ) : (
+                  <span>
+                    {item.title}
+                    <Progress percent={item.percent} showInfo={false} />
+                  </span>
+                )}
+              </div>
+            ),
+        )}
+        {visible && (
+          <Lightbox
+            // discourageDownloads={true}
+            mainSrc={images[photoIndex]?.imageUrl}
+            nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
+            prevSrc={
+              images[(photoIndex + images.length - 1) % images.length]?.imageUrl
+            }
+            onCloseRequest={() => setVisible(false)}
+            onMovePrevRequest={() =>
+              setPhotoIndex((photoIndex + images.length - 1) % images.length)
+            }
+            onMoveNextRequest={() =>
+              setPhotoIndex((photoIndex + 1) % images.length)
+            }
+            imageTitle={images[photoIndex]?.title}
+            // toolbarButtons={[
+            //   <div>下载</div>,
+            // ]}
+            // imageCaption={'xxx'}
+          />
+        )}
+      </div>
+    );
+  },
+  mapReadPretty(
+    observer((props) => {
+      const field = useField<Formily.Core.Models.Field>();
+      const images = toImages(field.value);
+      const [photoIndex, setPhotoIndex] = useState(0);
+      const [visible, setVisible] = useState(false);
+      console.log('field.value', field.value, images);
+      return (
+        <div>
+          {images.map((item) => (
+            <div>
+              <a
+                target={'_blank'}
+                href={item.url}
+                onClick={(e) => {
+                  e.preventDefault();
+                  const index = images.indexOf(item);
+                  setVisible(true);
+                  setPhotoIndex(index);
+                }}
+              >
+                <img style={{ height: 16 }} src={item.imageUrl} /> {item.title}
+              </a>
+            </div>
+          ))}
+          {visible && (
+            <Lightbox
+              // discourageDownloads={true}
+              mainSrc={images[photoIndex]?.imageUrl}
+              nextSrc={images[(photoIndex + 1) % images.length]?.imageUrl}
+              prevSrc={
+                images[(photoIndex + images.length - 1) % images.length]
+                  ?.imageUrl
+              }
+              onCloseRequest={() => setVisible(false)}
+              onMovePrevRequest={() =>
+                setPhotoIndex((photoIndex + images.length - 1) % images.length)
+              }
+              onMoveNextRequest={() =>
+                setPhotoIndex((photoIndex + 1) % images.length)
+              }
+              imageTitle={images[photoIndex]?.title}
+              // toolbarButtons={[
+              //   <div>下载</div>,
+              // ]}
+              // imageCaption={'xxx'}
+            />
+          )}
+        </div>
+      );
+    }),
+  ),
+);
+
 Upload.Dragger = Dragger;
 
 export default Upload;

yarn.lock

@@ -16108,6 +16108,14 @@ react-hooks-global-state@^1.0.1:
   resolved "https://registry.npmjs.org/react-hooks-global-state/-/react-hooks-global-state-1.0.1.tgz#3e4e1009f3e8a6fd001cd507808b4f1b289e9b27"
   integrity sha512-GFe/7KOdf8toByd8eF5LBhogMn65XSyghIzInsnA1e8vqIxGdT2Ohs2Ohdclp8CX0QU9xNj72ZIt+WD/SQEh9Q==
 
+react-image-lightbox@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz#5b847dcb79e9efdf9d7cd5621a92e0f156d2cf30"
+  integrity sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==
+  dependencies:
+    prop-types "^15.7.2"
+    react-modal "^3.11.1"
+
 react-intl@3.12.1:
   version "3.12.1"
   resolved "https://registry.npmjs.org/react-intl/-/react-intl-3.12.1.tgz#e9a783ea20302e9da25e4eda59e5593a43d2ec80"
@@ -16136,7 +16144,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -16146,6 +16154,16 @@ react-modal-hook@^3.0.0:
   resolved "https://registry.npmjs.org/react-modal-hook/-/react-modal-hook-3.0.0.tgz#24b2ff2acf288ef25c11e4fb11b329458a823ea3"
   integrity sha512-mNkJwgEtOoIabuILlWnGAto993WVkimZASBWk/rAGZ6tNIqjx4faQtNdr/X31vw+QGfKhspXc4vPi1jbfkk2Yg==
 
+react-modal@^3.11.1:
+  version "3.14.3"
+  resolved "https://registry.npmjs.org/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
+  integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-native-swipeout@^2.2.2:
   version "2.3.6"
   resolved "https://registry.npmjs.org/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"