assui 3.2.50 → 3.2.51

package/es/single-img-upload/assets/pdf.svg

@@ -0,0 +1,16 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_23648_109766)">
+<path d="M35.2197 36.2002C35.2197 36.7002 35.0195 37.1802 34.6597 37.54C34.2993 37.8999 33.8198 38.1001 33.3193 38.1001H6.65967C6.15967 38.1001 5.65967 37.8999 5.31982 37.54C4.95996 37.1797 4.75977 36.7002 4.75977 36.2002V1.8999C4.75977 1.3999 4.95947 0.899902 5.31982 0.560059C5.65967 0.200195 6.16016 0 6.65967 0H23.02C23.52 0 24.02 0.200195 24.3799 0.560059L34.6797 10.8604C35.0396 11.2202 35.2397 11.7002 35.2397 12.2202V36.2002H35.2197Z" fill="#EBECF0"/>
+<path d="M35.2197 36.2002V38.1001C35.2197 38.6001 35.0195 39.1001 34.6597 39.4399C34.2993 39.8003 33.8198 40 33.3193 40H6.65967C5.59961 40 4.75977 39.1401 4.75977 38.1001V36.2002C4.75977 36.7002 4.95947 37.1802 5.31982 37.54C5.67969 37.8999 6.15967 38.1001 6.65967 38.1001H33.3198C34.3799 38.1001 35.2197 37.2402 35.2197 36.2002Z" fill="#C1C7D0"/>
+<path d="M4.75928 20.96V17.1396L0.939453 20.96H4.75928ZM35.2192 20.96L35.2593 17.1396L39.0591 20.96H35.2192Z" fill="#D30000"/>
+<path d="M35.2197 12.2202V12.48H24.9194C23.8594 12.48 23.0195 11.6201 23.0195 10.5801V0C23.5195 0 24.0195 0.200195 24.3794 0.560059L34.6997 10.8604C35.0395 11.2202 35.2397 11.7002 35.2197 12.2202Z" fill="#C1C7D0"/>
+<path d="M19.645 23.8716H18.0781V29.457H19.6172C21.3652 29.457 22.3101 28.4722 22.3101 26.5723C22.3101 24.9189 21.4458 23.8936 19.645 23.8716ZM10.7397 23.8745H8.49805V26.248H10.7397C11.6582 26.248 12.2388 25.9331 12.2388 25.0454C12.2388 24.3218 11.7939 23.8745 10.7397 23.8745Z" fill="#FF1D1D"/>
+<path d="M0.960938 20.96V30.46C0.960938 30.98 1.16064 31.46 1.521 31.8198C1.86084 32.1802 2.36084 32.3799 2.86084 32.3799H37.1411C38.1812 32.3799 39.041 31.54 39.041 30.48V20.96H0.960938ZM10.9092 27.9316H8.49951V31.1377H6.31982V22.2021H10.9434C13.021 22.2021 14.4023 23.2524 14.4023 25.0107C14.4023 26.769 13.1011 27.9316 10.9092 27.9316ZM19.9043 31.1377H15.9111V22.2021H19.9502C22.9609 22.2021 24.6084 24.1562 24.6084 26.5137C24.6084 29.374 22.5049 31.1377 19.9043 31.1377ZM33.7456 23.9272H28.5605V25.9595H33.397V27.6973H28.5605V31.1372H26.3921V22.2017H33.7456V23.9268V23.9272Z" fill="#FF1D1D"/>
+<path d="M10.9414 22.2021H6.31836V31.1377H8.49805V27.9316H10.9077C13.0996 27.9316 14.4009 26.8379 14.4009 25.0107C14.4009 23.1836 13.0195 22.2021 10.9419 22.2021H10.9414ZM10.7393 26.248H8.49756V23.8745H10.7393C11.7935 23.8745 12.2383 24.3218 12.2383 25.0454C12.2383 25.9326 11.6572 26.248 10.7393 26.248ZM19.9487 22.2021H15.9097V31.1377H19.9028C22.5034 31.1377 24.6069 29.374 24.6069 26.5137C24.6069 24.1562 22.96 22.2021 19.9487 22.2021ZM19.6167 29.457H18.0776V23.8716H19.6445C21.4448 23.894 22.3096 24.9194 22.3096 26.5723C22.3096 28.4722 21.3647 29.457 19.6167 29.457ZM26.3906 31.1377H28.5591V27.6978H33.3955V25.96H28.5591V23.9277H33.7441V22.2021H26.3906V31.1377Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_23648_109766">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/es/single-img-upload/index.js

@@ -176,11 +176,14 @@ import classNames from 'classnames';
 import CloseOutlined from "a-icons/es/CloseOutlined";
 import isObject from 'lodash/isObject';
 import isFunction from 'lodash/isFunction';
+import { ReactComponent as PDFSVG } from './assets/pdf.svg';
 var getLocalImgURL = function getLocalImgURL(file) {
   var URL = window.URL || window.webkitURL;
   var imgURL = URL.createObjectURL(file);
   return imgURL;
 };
+var IMAGE_TYPE = 'image';
+var PDF_TYPE = 'pdf';
 var initBeforeUpload = function initBeforeUpload() {
   return true;
 };
@@ -213,24 +216,39 @@ var SingleImgUpload = function SingleImgUpload(props) {
   var _e = __read(React.useState(false), 2),
     imageLoading = _e[0],
     setImageLoading = _e[1];
+  var _f = __read(React.useState(IMAGE_TYPE), 2),
+    fileType = _f[0],
+    setFileType = _f[1];
   React.useEffect(function () {
+    if (!value) {
+      setUploadStatus('init');
+      setFileUrl('');
+      return;
+    }
+    setUploadStatus('done');
     setFileUrl(value);
-    if (value) {
+    var isPdf = /\.pdf($|\?)/i.test(value);
+    var isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg|heic)($|\?)/i.test(value);
+    if (isImage) {
+      setFileType(IMAGE_TYPE);
       setImageLoading(true);
-      setUploadStatus('done');
       // eslint-disable-next-line global-require
       var heic2Jpeg = require('aa-utils/lib/heic2Jpeg')["default"];
       if (isFunction(heic2Jpeg)) {
         heic2Jpeg(value).then(function (resultUrl) {
           setFileUrl(resultUrl);
           setImageLoading(false);
+        })["catch"](function () {
+          return setImageLoading(false);
         });
       } else {
-        setFileUrl(value);
         setImageLoading(false);
       }
-    } else {
-      setUploadStatus('init');
+      return;
+    }
+    if (isPdf) {
+      setFileType(PDF_TYPE);
+      setImageLoading(false);
     }
   }, [value]);
   var onBeforeUpload = function onBeforeUpload() {
@@ -261,6 +279,8 @@ var SingleImgUpload = function SingleImgUpload(props) {
   var handleStart = function handleStart(file) {
     fileRef.current = file;
     setUploadPercent(0);
+    var isImage = file.type.startsWith('image/');
+    setFileType(isImage ? IMAGE_TYPE : PDF_TYPE);
     if (!fileUrl) {
       setFileUrl(getLocalImgURL(file));
     }
@@ -296,15 +316,26 @@ var SingleImgUpload = function SingleImgUpload(props) {
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
   var cls = classNames('as-img-upload', wrapperClassName);
+  var getShowNode = function getShowNode() {
+    if (fileType === IMAGE_TYPE) {
+      return /*#__PURE__*/React.createElement(Image, {
+        wrapperClassName: "as-img-upload-preview",
+        src: fileUrl,
+        preview: true
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "as-img-upload-pdf-preview",
+      onClick: function onClick() {
+        return window.open(fileUrl || value, '_blank');
+      }
+    }, /*#__PURE__*/React.createElement(PDFSVG, null));
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: cls
   }, uploadStatus === 'uploading' && /*#__PURE__*/React.createElement("div", {
     className: "as-img-upload-content"
-  }, /*#__PURE__*/React.createElement(Image, {
-    wrapperClassName: "as-img-upload-preview",
-    src: fileUrl,
-    preview: true
-  }), /*#__PURE__*/React.createElement("div", {
+  }, getShowNode(), /*#__PURE__*/React.createElement("div", {
     className: "dark"
   }), /*#__PURE__*/React.createElement(Progress, {
     className: "as-img-upload-upload-progress",
@@ -318,11 +349,7 @@ var SingleImgUpload = function SingleImgUpload(props) {
     spinning: imageLoading
   }, /*#__PURE__*/React.createElement("div", {
     className: "as-img-upload-content"
-  }, /*#__PURE__*/React.createElement(Image, {
-    wrapperClassName: "as-img-upload-preview",
-    src: fileUrl,
-    preview: true
-  }), !disabled && /*#__PURE__*/React.createElement("div", {
+  }, getShowNode(), !disabled && /*#__PURE__*/React.createElement("div", {
     className: "as-img-upload-close-button",
     onClick: handleDeleteUpload
   }, /*#__PURE__*/React.createElement(CloseOutlined, null)))), /*#__PURE__*/React.createElement(Upload, __assign({

package/es/single-img-upload/style/index.css

@@ -1267,6 +1267,14 @@ html {
   overflow: hidden;
   background-color: #fff;
 }
+.as-img-upload .as-img-upload-pdf-preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 .as-img-upload-close-button {
   position: absolute;
   top: 0;

package/es/single-img-upload/style/index.less

@@ -41,6 +41,15 @@
     background-color: @white;
   }
 
+  .as-img-upload-pdf-preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
   &-close-button {
     position: absolute;
     top: 0;
@@ -99,3 +108,5 @@
   background-color: @color_f5f5f5;
   cursor: not-allowed;
 }
+
+

package/lib/single-img-upload/assets/pdf.svg

@@ -0,0 +1,16 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_23648_109766)">
+<path d="M35.2197 36.2002C35.2197 36.7002 35.0195 37.1802 34.6597 37.54C34.2993 37.8999 33.8198 38.1001 33.3193 38.1001H6.65967C6.15967 38.1001 5.65967 37.8999 5.31982 37.54C4.95996 37.1797 4.75977 36.7002 4.75977 36.2002V1.8999C4.75977 1.3999 4.95947 0.899902 5.31982 0.560059C5.65967 0.200195 6.16016 0 6.65967 0H23.02C23.52 0 24.02 0.200195 24.3799 0.560059L34.6797 10.8604C35.0396 11.2202 35.2397 11.7002 35.2397 12.2202V36.2002H35.2197Z" fill="#EBECF0"/>
+<path d="M35.2197 36.2002V38.1001C35.2197 38.6001 35.0195 39.1001 34.6597 39.4399C34.2993 39.8003 33.8198 40 33.3193 40H6.65967C5.59961 40 4.75977 39.1401 4.75977 38.1001V36.2002C4.75977 36.7002 4.95947 37.1802 5.31982 37.54C5.67969 37.8999 6.15967 38.1001 6.65967 38.1001H33.3198C34.3799 38.1001 35.2197 37.2402 35.2197 36.2002Z" fill="#C1C7D0"/>
+<path d="M4.75928 20.96V17.1396L0.939453 20.96H4.75928ZM35.2192 20.96L35.2593 17.1396L39.0591 20.96H35.2192Z" fill="#D30000"/>
+<path d="M35.2197 12.2202V12.48H24.9194C23.8594 12.48 23.0195 11.6201 23.0195 10.5801V0C23.5195 0 24.0195 0.200195 24.3794 0.560059L34.6997 10.8604C35.0395 11.2202 35.2397 11.7002 35.2197 12.2202Z" fill="#C1C7D0"/>
+<path d="M19.645 23.8716H18.0781V29.457H19.6172C21.3652 29.457 22.3101 28.4722 22.3101 26.5723C22.3101 24.9189 21.4458 23.8936 19.645 23.8716ZM10.7397 23.8745H8.49805V26.248H10.7397C11.6582 26.248 12.2388 25.9331 12.2388 25.0454C12.2388 24.3218 11.7939 23.8745 10.7397 23.8745Z" fill="#FF1D1D"/>
+<path d="M0.960938 20.96V30.46C0.960938 30.98 1.16064 31.46 1.521 31.8198C1.86084 32.1802 2.36084 32.3799 2.86084 32.3799H37.1411C38.1812 32.3799 39.041 31.54 39.041 30.48V20.96H0.960938ZM10.9092 27.9316H8.49951V31.1377H6.31982V22.2021H10.9434C13.021 22.2021 14.4023 23.2524 14.4023 25.0107C14.4023 26.769 13.1011 27.9316 10.9092 27.9316ZM19.9043 31.1377H15.9111V22.2021H19.9502C22.9609 22.2021 24.6084 24.1562 24.6084 26.5137C24.6084 29.374 22.5049 31.1377 19.9043 31.1377ZM33.7456 23.9272H28.5605V25.9595H33.397V27.6973H28.5605V31.1372H26.3921V22.2017H33.7456V23.9268V23.9272Z" fill="#FF1D1D"/>
+<path d="M10.9414 22.2021H6.31836V31.1377H8.49805V27.9316H10.9077C13.0996 27.9316 14.4009 26.8379 14.4009 25.0107C14.4009 23.1836 13.0195 22.2021 10.9419 22.2021H10.9414ZM10.7393 26.248H8.49756V23.8745H10.7393C11.7935 23.8745 12.2383 24.3218 12.2383 25.0454C12.2383 25.9326 11.6572 26.248 10.7393 26.248ZM19.9487 22.2021H15.9097V31.1377H19.9028C22.5034 31.1377 24.6069 29.374 24.6069 26.5137C24.6069 24.1562 22.96 22.2021 19.9487 22.2021ZM19.6167 29.457H18.0776V23.8716H19.6445C21.4448 23.894 22.3096 24.9194 22.3096 26.5723C22.3096 28.4722 21.3647 29.457 19.6167 29.457ZM26.3906 31.1377H28.5591V27.6978H33.3955V25.96H28.5591V23.9277H33.7441V22.2021H26.3906V31.1377Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_23648_109766">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/single-img-upload/index.js

@@ -219,11 +219,14 @@ var classnames_1 = __importDefault(require("classnames"));
 var CloseOutlined_1 = __importDefault(require("a-icons/lib/CloseOutlined"));
 var isObject_1 = __importDefault(require("lodash/isObject"));
 var isFunction_1 = __importDefault(require("lodash/isFunction"));
+var pdf_svg_1 = require("./assets/pdf.svg");
 var getLocalImgURL = function getLocalImgURL(file) {
   var URL = window.URL || window.webkitURL;
   var imgURL = URL.createObjectURL(file);
   return imgURL;
 };
+var IMAGE_TYPE = 'image';
+var PDF_TYPE = 'pdf';
 var initBeforeUpload = function initBeforeUpload() {
   return true;
 };
@@ -256,24 +259,39 @@ var SingleImgUpload = function SingleImgUpload(props) {
   var _e = __read(React.useState(false), 2),
     imageLoading = _e[0],
     setImageLoading = _e[1];
+  var _f = __read(React.useState(IMAGE_TYPE), 2),
+    fileType = _f[0],
+    setFileType = _f[1];
   React.useEffect(function () {
+    if (!value) {
+      setUploadStatus('init');
+      setFileUrl('');
+      return;
+    }
+    setUploadStatus('done');
     setFileUrl(value);
-    if (value) {
+    var isPdf = /\.pdf($|\?)/i.test(value);
+    var isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg|heic)($|\?)/i.test(value);
+    if (isImage) {
+      setFileType(IMAGE_TYPE);
       setImageLoading(true);
-      setUploadStatus('done');
       // eslint-disable-next-line global-require
       var heic2Jpeg = require('aa-utils/lib/heic2Jpeg')["default"];
       if ((0, isFunction_1["default"])(heic2Jpeg)) {
         heic2Jpeg(value).then(function (resultUrl) {
           setFileUrl(resultUrl);
           setImageLoading(false);
+        })["catch"](function () {
+          return setImageLoading(false);
         });
       } else {
-        setFileUrl(value);
         setImageLoading(false);
       }
-    } else {
-      setUploadStatus('init');
+      return;
+    }
+    if (isPdf) {
+      setFileType(PDF_TYPE);
+      setImageLoading(false);
     }
   }, [value]);
   var onBeforeUpload = function onBeforeUpload() {
@@ -304,6 +322,8 @@ var SingleImgUpload = function SingleImgUpload(props) {
   var handleStart = function handleStart(file) {
     fileRef.current = file;
     setUploadPercent(0);
+    var isImage = file.type.startsWith('image/');
+    setFileType(isImage ? IMAGE_TYPE : PDF_TYPE);
     if (!fileUrl) {
       setFileUrl(getLocalImgURL(file));
     }
@@ -339,15 +359,26 @@ var SingleImgUpload = function SingleImgUpload(props) {
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
   var cls = (0, classnames_1["default"])('as-img-upload', wrapperClassName);
+  var getShowNode = function getShowNode() {
+    if (fileType === IMAGE_TYPE) {
+      return React.createElement(image_1["default"], {
+        wrapperClassName: "as-img-upload-preview",
+        src: fileUrl,
+        preview: true
+      });
+    }
+    return React.createElement("div", {
+      className: "as-img-upload-pdf-preview",
+      onClick: function onClick() {
+        return window.open(fileUrl || value, '_blank');
+      }
+    }, React.createElement(pdf_svg_1.ReactComponent, null));
+  };
   return React.createElement("div", {
     className: cls
   }, uploadStatus === 'uploading' && React.createElement("div", {
     className: "as-img-upload-content"
-  }, React.createElement(image_1["default"], {
-    wrapperClassName: "as-img-upload-preview",
-    src: fileUrl,
-    preview: true
-  }), React.createElement("div", {
+  }, getShowNode(), React.createElement("div", {
     className: "dark"
   }), React.createElement(progress_1["default"], {
     className: "as-img-upload-upload-progress",
@@ -361,11 +392,7 @@ var SingleImgUpload = function SingleImgUpload(props) {
     spinning: imageLoading
   }, React.createElement("div", {
     className: "as-img-upload-content"
-  }, React.createElement(image_1["default"], {
-    wrapperClassName: "as-img-upload-preview",
-    src: fileUrl,
-    preview: true
-  }), !disabled && React.createElement("div", {
+  }, getShowNode(), !disabled && React.createElement("div", {
     className: "as-img-upload-close-button",
     onClick: handleDeleteUpload
   }, React.createElement(CloseOutlined_1["default"], null)))), React.createElement(rc_upload_1["default"], __assign({

package/lib/single-img-upload/style/index.css

@@ -1267,6 +1267,14 @@ html {
   overflow: hidden;
   background-color: #fff;
 }
+.as-img-upload .as-img-upload-pdf-preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 .as-img-upload-close-button {
   position: absolute;
   top: 0;

package/lib/single-img-upload/style/index.less

@@ -41,6 +41,15 @@
     background-color: @white;
   }
 
+  .as-img-upload-pdf-preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
   &-close-button {
     position: absolute;
     top: 0;
@@ -99,3 +108,5 @@
   background-color: @color_f5f5f5;
   cursor: not-allowed;
 }
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assui",
-  "version": "3.2.50",
+  "version": "3.2.51",
   "description": "react ui library",
   "author": "jason <usochen@gmail.com>",
   "main": "./lib/index.js",
@@ -85,5 +85,5 @@
     "node": ">=10.0.0"
   },
   "license": "MIT",
-  "gitHead": "609d8820345d899b9aa00083237474206caa8131"
+  "gitHead": "c5356ff3f41afb677759c42814d1f7a202c61174"
 }