iglooform 3.3.7 → 3.4.0

package/lib/media/index.js

@@ -49,40 +49,54 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     download = _ref$download === void 0 ? {
       actionType: 'downloadBlob'
     } : _ref$download,
-    getNonCORSUrl = _ref.getNonCORSUrl;
+    getNonCORSUrl = _ref.getNonCORSUrl,
+    loadingProp = _ref.loading;
   var _ref2 = _typeof(srcProp) === 'object' ? [srcProp.origin, srcProp.nonCORS] : [srcProp],
     _ref3 = _slicedToArray(_ref2, 2),
     src = _ref3[0],
     nonCORSSrcProp = _ref3[1];
-  var _useState = (0, _react.useState)(nonCORSSrcProp),
+  var _useState = (0, _react.useState)(true),
     _useState2 = _slicedToArray(_useState, 2),
-    nonCORSSrc = _useState2[0],
-    setNonCORSSrc = _useState2[1];
-  var _useState3 = (0, _react.useState)(1),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(nonCORSSrcProp),
     _useState4 = _slicedToArray(_useState3, 2),
-    scale = _useState4[0],
-    setScale = _useState4[1];
-  var _useState5 = (0, _react.useState)(type),
+    nonCORSSrc = _useState4[0],
+    setNonCORSSrc = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
     _useState6 = _slicedToArray(_useState5, 2),
-    mediaType = _useState6[0],
-    setType = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    scale = _useState6[0],
+    setScale = _useState6[1];
+  var _useState7 = (0, _react.useState)(type),
     _useState8 = _slicedToArray(_useState7, 2),
-    showModal = _useState8[0],
-    setShowModal = _useState8[1];
-  var _useState9 = (0, _react.useState)(index),
+    mediaType = _useState8[0],
+    setType = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    current = _useState10[0],
-    setCurrent = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
+    showModal = _useState10[0],
+    setShowModal = _useState10[1];
+  var _useState11 = (0, _react.useState)(index),
     _useState12 = _slicedToArray(_useState11, 2),
-    direction = _useState12[0],
-    setDirection = _useState12[1];
+    current = _useState12[0],
+    setCurrent = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    direction = _useState14[0],
+    setDirection = _useState14[1];
+  (0, _react.useEffect)(function () {
+    setType(type);
+  }, [type]);
+  (0, _react.useEffect)(function () {
+    if (loadingProp === undefined) return;
+    setLoading(loadingProp);
+  }, [loadingProp]);
   (0, _react.useEffect)(function () {
     setNonCORSSrc(nonCORSSrcProp);
   }, [nonCORSSrcProp]);
   (0, _react.useEffect)(function () {
+    if (!src) return;
     if (mediaType) {
+      setLoading(false);
       return;
     }
     var unmounted = false;
@@ -92,27 +106,29 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              setLoading(true);
               _context.t0 = nonCORSSrc;
               if (_context.t0) {
-                _context.next = 5;
+                _context.next = 6;
                 break;
               }
-              _context.next = 4;
+              _context.next = 5;
               return getNonCORSUrl === null || getNonCORSUrl === void 0 ? void 0 : getNonCORSUrl(src);
-            case 4:
-              _context.t0 = _context.sent;
             case 5:
+              _context.t0 = _context.sent;
+            case 6:
               _nonCORSSrc = _context.t0;
-              _context.next = 8;
+              _context.next = 9;
               return (0, _tools.getResourceContentType)(_nonCORSSrc !== null && _nonCORSSrc !== void 0 ? _nonCORSSrc : src);
-            case 8:
+            case 9:
               contentType = _context.sent;
               typeClass = (0, _tools.classifyType)(contentType);
               if (!unmounted) {
                 !nonCORSSrc && setNonCORSSrc(_nonCORSSrc);
                 setType(typeClass);
               }
-            case 11:
+              setLoading(false);
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -126,7 +142,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     return function () {
       unmounted = true;
     };
-  }, [src, nonCORSSrc]);
+  }, [mediaType, src, nonCORSSrc]);
   (0, _react.useEffect)(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (!showModal || list.length === 1) return;
@@ -366,15 +382,29 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: className,
     style: style,
-    children: [canRenderMedia ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_media.default, {
-      type: mediaType,
-      src: src,
-      onClick: open,
-      name: name
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_fileIcon.default, {
-      type: mediaType,
-      onDownloadClick: onDownloadByFileIcon,
-      disabledDownload: !download
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'relative',
+        width: 80,
+        height: 80,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        border: '1px solid #EEEEEE'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_media.default.Loading, {})
+    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: canRenderMedia ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_media.default, {
+        type: mediaType,
+        src: src,
+        onClick: open,
+        name: name
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_fileIcon.default, {
+        type: mediaType,
+        onDownloadClick: onDownloadByFileIcon,
+        disabledDownload: !download
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Modal, {
       open: showModal,
       onCancel: close,

package/lib/media/media.d.ts

@@ -1,4 +1,5 @@
 import { FC, CSSProperties } from 'react';
+declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 interface MediaProps {
     src: string;
     type: string;
@@ -7,5 +8,7 @@ interface MediaProps {
     style?: CSSProperties;
     name?: string;
 }
-declare const Media: FC<MediaProps>;
+declare const Media: FC<MediaProps> & {
+    Loading: typeof Loading;
+};
 export default Media;

package/lib/media/media.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _entry = require("react-pdf/dist/esm/entry.webpack5");
+var _entry = require("react-pdf/dist/esm/entry.webpack");
 var _antd = require("antd");
 var _locale = require("../locale");
+var _iglooicon = require("iglooicon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,6 +19,26 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Loading = function Loading() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      zIndex: 1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.LoadingOutlined, {
+      spinning: true,
+      style: {
+        fontSize: 24,
+        color: '#999999'
+      }
+    })
+  });
+};
 var MediaItem = function MediaItem(_ref) {
   var type = _ref.type,
     src = _ref.src;
@@ -30,15 +51,25 @@ var MediaItem = function MediaItem(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     errorText = _useState2[0],
     setErrorText = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   switch (type) {
     case 'video':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80
-        },
-        autoPlay: false
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+          src: src,
+          style: {
+            maxWidth: 80,
+            maxHeight: 80,
+            opacity: loading ? 0 : 1
+          },
+          autoPlay: false,
+          onLoadedData: function onLoadedData() {
+            return setLoading(false);
+          }
+        })]
       });
     case 'pdf':
       var needPassword = function needPassword() {
@@ -53,36 +84,50 @@ var MediaItem = function MediaItem(_ref) {
           }));
         }
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
           maxWidth: 80,
           maxHeight: 80,
           position: 'absolute'
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_entry.Document, {
-          ref: documentRef,
-          file: src,
-          onPassword: needPassword,
-          error: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              textAlign: 'center'
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            opacity: loading ? 0 : 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_entry.Document, {
+            ref: documentRef,
+            file: src,
+            onPassword: needPassword,
+            error: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                textAlign: 'center'
+              },
+              children: errorText
+            }),
+            onLoadSuccess: function onLoadSuccess() {
+              return setLoading(false);
             },
-            children: errorText
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_entry.Page, {
-            pageNumber: 1,
-            scale: 0.1
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_entry.Page, {
+              pageNumber: 1,
+              scale: 0.1
+            })
           })
-        })
+        })]
       });
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80,
-          position: 'absolute'
-        }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: src,
+          style: {
+            maxWidth: 80,
+            maxHeight: 80,
+            position: 'absolute',
+            opacity: loading ? 0 : 1
+          },
+          onLoad: function onLoad() {
+            return setLoading(false);
+          }
+        })]
       });
   }
 };
@@ -121,5 +166,6 @@ var Media = function Media(_ref2) {
     })
   });
 };
+Media.Loading = Loading;
 var _default = Media;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iglooform",
-  "version": "3.3.7",
+  "version": "3.4.0",
   "scripts": {
     "start": "dumi dev",
     "build-dev": "dumi build",

package/.idea/iglooform.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/misc.xml

@@ -1,5 +0,0 @@
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/iglooform.iml" filepath="$PROJECT_DIR$/.idea/iglooform.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/es/admin-upload/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/alert-message/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/babel-plugin-import-option.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    libraryName: string;
-    libraryDirectory: string;
-    style: boolean;
-    customName: (name: string) => string;
-};
-export default _default;

package/es/back-top/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import './style';
-import { BackTopProps } from 'antd';
-declare const BackToTop: FC<BackTopProps>;
-export default BackToTop;

package/es/back-top/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/button/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/card-detail/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/checkbox/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/claim-list/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/config-provider.d.ts

@@ -1,9 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { ConfigProviderProps } from 'antd/es/config-provider';
-export declare let staticAntdConfig: ConfigProviderProps;
-declare const ConfigProvider: FC<{
-    currentLang: string;
-    config?: ConfigProviderProps;
-    children?: ReactNode;
-}>;
-export default ConfigProvider;

package/es/confirmation/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/currency-context/index.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface CurrencyMethod {
-    exchange: (value: any) => any;
-    exchangeBack: (value: any) => any;
-    currentCurrency: string;
-}
-declare const _default: import("react").Context<CurrencyMethod>;
-export default _default;

package/es/date-picker/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/declaration/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/detail-panel/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/documents/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/filter/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/addable-section/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/divider/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/element/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/hstep/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/hsteps/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/login/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/messages.d.ts

@@ -1,48 +0,0 @@
-declare const messages: {
-    default: string;
-    required: string;
-    enum: string;
-    whitespace: string;
-    date: {
-        format: string;
-        parse: string;
-        invalid: string;
-    };
-    types: {
-        string: string;
-        method: string;
-        array: string;
-        object: string;
-        number: string;
-        date: string;
-        boolean: string;
-        integer: string;
-        float: string;
-        regexp: string;
-        email: string;
-        url: string;
-        hex: string;
-    };
-    string: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    number: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    array: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    pattern: {
-        mismatch: string;
-    };
-};
-export default messages;

package/es/form/page/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/pages/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/render/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/section/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/step/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/steps/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/form/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/addable-section/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/element/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/messages.d.ts

@@ -1,48 +0,0 @@
-declare const messages: {
-    default: string;
-    required: string;
-    enum: string;
-    whitespace: string;
-    date: {
-        format: string;
-        parse: string;
-        invalid: string;
-    };
-    types: {
-        string: string;
-        method: string;
-        array: string;
-        object: string;
-        number: string;
-        date: string;
-        boolean: string;
-        integer: string;
-        float: string;
-        regexp: string;
-        email: string;
-        url: string;
-        hex: string;
-    };
-    string: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    number: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    array: {
-        len: string;
-        min: string;
-        max: string;
-        range: string;
-    };
-    pattern: {
-        mismatch: string;
-    };
-};
-export default messages;

package/es/free-form/page/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/pages/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/section/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/step/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/steps/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/free-form/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/home-menu/style/index.d.ts

@@ -1 +0,0 @@
-import './index.less';

package/es/input/style/amount/index.d.ts

@@ -1,2 +0,0 @@
-import '../index';
-import './index.less';

package/es/input/style/index.d.ts

@@ -1,2 +0,0 @@
-import './default-input.less';
-import './common.less';

package/es/input/style/input-date/index.d.ts

@@ -1,2 +0,0 @@
-import '../index';
-import './index.less';

package/es/input/style/otp/index.d.ts

@@ -1,2 +0,0 @@
-import '../index';
-import './index.less';

package/es/input/style/phone-number/index.d.ts

@@ -1,2 +0,0 @@
-import '../index';
-import './index.less';