iglooform 3.3.7 → 3.4.0

package/es/button/style/index.less

@@ -68,16 +68,18 @@
     }
   }
 
-  &:hover {
-    color: @btn-default-hover-color;
-    border-color: @btn-default-hover-border-color;
-    background-color: @btn-default-hover-backgroud-color;
-  }
-  &:active,
-  &:focus {
-    color: @btn-default-focus-color;
-    border-color: @btn-default-focus-border-color;
-    background-color: @btn-default-focus-backgroud-color;
+  &:not(:disabled):not(.ant-btn-disabled) {
+    &:hover {
+      color: @btn-default-hover-color;
+      border-color: @btn-default-hover-border-color;
+      background-color: @btn-default-hover-backgroud-color;
+    }
+    &:active,
+    &:focus {
+      color: @btn-default-focus-color;
+      border-color: @btn-default-focus-border-color;
+      background-color: @btn-default-focus-backgroud-color;
+    }
   }
 }
 
@@ -105,16 +107,18 @@
     }
   }
 
-  &:hover {
-    color: @btn-primary-hover-color;
-    border-color: @btn-primary-hover-border-color;
-    background-color: @btn-primary-hover-backgroud-color;
-  }
-  &:active,
-  &:focus {
-    color: @btn-primary-focus-color;
-    border-color: @btn-primary-focus-border-color;
-    background-color: @btn-primary-focus-backgroud-color;
+  &:not(:disabled):not(.ant-btn-disabled) {
+    &:hover {
+      color: @btn-primary-hover-color;
+      border-color: @btn-primary-hover-border-color;
+      background-color: @btn-primary-hover-backgroud-color;
+    }
+    &:active,
+    &:focus {
+      color: @btn-primary-focus-color;
+      border-color: @btn-primary-focus-border-color;
+      background-color: @btn-primary-focus-backgroud-color;
+    }
   }
 }
 

package/es/documents/index.js

@@ -31,7 +31,14 @@ var Documents = function Documents(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     current = _useState2[0],
     setCurrent = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState(function () {
+      return docList.map(function (d) {
+        return {
+          loading: true,
+          src: typeof d === 'string' ? d : d.src
+        };
+      });
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
     setList = _useState4[1];
@@ -91,8 +98,25 @@ var Documents = function Documents(_ref) {
   return /*#__PURE__*/_jsx(Space, {
     size: [8, 8],
     wrap: true,
-    children: list.map(function (_ref3, index) {
-      var _src = _ref3.src,
+    children: list.map(function (item, index) {
+      if (item.loading) {
+        var loading = item.loading,
+          _src2 = item.src;
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            left: "".concat((index - current) * 100, "%")
+          },
+          children: /*#__PURE__*/_jsx(MediaWithPreview, {
+            loading: loading,
+            index: index,
+            src: _src2,
+            className: className,
+            style: style
+          })
+        }, index);
+      }
+      var _ref3 = item,
+        _src = _ref3.src,
         type = _ref3.type,
         nonCORSSrc = _ref3.nonCORSSrc;
       var src = !!nonCORSSrc ? {

package/es/media/index.d.ts

@@ -24,6 +24,7 @@ interface Props {
     destroyOnClose?: boolean;
     download?: Download;
     getNonCORSUrl?: GetNonCORSUrl;
+    loading?: boolean;
 }
 declare const MediaWithPreview: FC<Props>;
 export default MediaWithPreview;

package/es/media/index.js

@@ -19,6 +19,7 @@ import FileIcon from "./file-icon";
 import { MinusOutlined, PlusOutlined, ArrowRightOutlined, ArrowLeftOutlined, CrossOutlined, DownloadOutlined } from 'iglooicon';
 import "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MediaWithPreview = function MediaWithPreview(_ref) {
   var srcProp = _ref.src,
@@ -41,40 +42,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 = useState(nonCORSSrcProp),
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    nonCORSSrc = _useState2[0],
-    setNonCORSSrc = _useState2[1];
-  var _useState3 = useState(1),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(nonCORSSrcProp),
     _useState4 = _slicedToArray(_useState3, 2),
-    scale = _useState4[0],
-    setScale = _useState4[1];
-  var _useState5 = useState(type),
+    nonCORSSrc = _useState4[0],
+    setNonCORSSrc = _useState4[1];
+  var _useState5 = useState(1),
     _useState6 = _slicedToArray(_useState5, 2),
-    mediaType = _useState6[0],
-    setType = _useState6[1];
-  var _useState7 = useState(false),
+    scale = _useState6[0],
+    setScale = _useState6[1];
+  var _useState7 = useState(type),
     _useState8 = _slicedToArray(_useState7, 2),
-    showModal = _useState8[0],
-    setShowModal = _useState8[1];
-  var _useState9 = useState(index),
+    mediaType = _useState8[0],
+    setType = _useState8[1];
+  var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    current = _useState10[0],
-    setCurrent = _useState10[1];
-  var _useState11 = useState(''),
+    showModal = _useState10[0],
+    setShowModal = _useState10[1];
+  var _useState11 = useState(index),
     _useState12 = _slicedToArray(_useState11, 2),
-    direction = _useState12[0],
-    setDirection = _useState12[1];
+    current = _useState12[0],
+    setCurrent = _useState12[1];
+  var _useState13 = useState(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    direction = _useState14[0],
+    setDirection = _useState14[1];
+  useEffect(function () {
+    setType(type);
+  }, [type]);
+  useEffect(function () {
+    if (loadingProp === undefined) return;
+    setLoading(loadingProp);
+  }, [loadingProp]);
   useEffect(function () {
     setNonCORSSrc(nonCORSSrcProp);
   }, [nonCORSSrcProp]);
   useEffect(function () {
+    if (!src) return;
     if (mediaType) {
+      setLoading(false);
       return;
     }
     var unmounted = false;
@@ -84,27 +99,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 getResourceContentType(_nonCORSSrc !== null && _nonCORSSrc !== void 0 ? _nonCORSSrc : src);
-            case 8:
+            case 9:
               contentType = _context.sent;
               typeClass = classifyType(contentType);
               if (!unmounted) {
                 !nonCORSSrc && setNonCORSSrc(_nonCORSSrc);
                 setType(typeClass);
               }
-            case 11:
+              setLoading(false);
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -118,7 +135,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     return function () {
       unmounted = true;
     };
-  }, [src, nonCORSSrc]);
+  }, [mediaType, src, nonCORSSrc]);
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (!showModal || list.length === 1) return;
@@ -358,15 +375,29 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
   return /*#__PURE__*/_jsxs("div", {
     className: className,
     style: style,
-    children: [canRenderMedia ? /*#__PURE__*/_jsx(Media, {
-      type: mediaType,
-      src: src,
-      onClick: open,
-      name: name
-    }) : /*#__PURE__*/_jsx(FileIcon, {
-      type: mediaType,
-      onDownloadClick: onDownloadByFileIcon,
-      disabledDownload: !download
+    children: [loading && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'relative',
+        width: 80,
+        height: 80,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        border: '1px solid #EEEEEE'
+      },
+      children: /*#__PURE__*/_jsx(Media.Loading, {})
+    }), !loading && /*#__PURE__*/_jsx(_Fragment, {
+      children: canRenderMedia ? /*#__PURE__*/_jsx(Media, {
+        type: mediaType,
+        src: src,
+        onClick: open,
+        name: name
+      }) : /*#__PURE__*/_jsx(FileIcon, {
+        type: mediaType,
+        onDownloadClick: onDownloadByFileIcon,
+        disabledDownload: !download
+      })
     }), /*#__PURE__*/_jsxs(Modal, {
       open: showModal,
       onCancel: close,

package/es/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/es/media/media.js

@@ -5,11 +5,33 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 import React, { useRef, useState, useContext } from 'react';
-import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import { Tooltip } from 'antd';
 import { LocaleContext } from "../locale";
+import { LoadingOutlined } from 'iglooicon';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Loading = function Loading() {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      zIndex: 1
+    },
+    children: /*#__PURE__*/_jsx(LoadingOutlined, {
+      spinning: true,
+      style: {
+        fontSize: 24,
+        color: '#999999'
+      }
+    })
+  });
+};
 var MediaItem = function MediaItem(_ref) {
   var type = _ref.type,
     src = _ref.src;
@@ -22,15 +44,25 @@ var MediaItem = function MediaItem(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     errorText = _useState2[0],
     setErrorText = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   switch (type) {
     case 'video':
-      return /*#__PURE__*/_jsx("video", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80
-        },
-        autoPlay: false
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_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() {
@@ -45,36 +77,50 @@ var MediaItem = function MediaItem(_ref) {
           }));
         }
       };
-      return /*#__PURE__*/_jsx("div", {
+      return /*#__PURE__*/_jsxs("div", {
         style: {
           maxWidth: 80,
           maxHeight: 80,
           position: 'absolute'
         },
-        children: /*#__PURE__*/_jsx(Document, {
-          ref: documentRef,
-          file: src,
-          onPassword: needPassword,
-          error: /*#__PURE__*/_jsx("div", {
-            style: {
-              textAlign: 'center'
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx("div", {
+          style: {
+            opacity: loading ? 0 : 1
+          },
+          children: /*#__PURE__*/_jsx(Document, {
+            ref: documentRef,
+            file: src,
+            onPassword: needPassword,
+            error: /*#__PURE__*/_jsx("div", {
+              style: {
+                textAlign: 'center'
+              },
+              children: errorText
+            }),
+            onLoadSuccess: function onLoadSuccess() {
+              return setLoading(false);
             },
-            children: errorText
-          }),
-          children: /*#__PURE__*/_jsx(Page, {
-            pageNumber: 1,
-            scale: 0.1
+            children: /*#__PURE__*/_jsx(Page, {
+              pageNumber: 1,
+              scale: 0.1
+            })
           })
-        })
+        })]
       });
     default:
-      return /*#__PURE__*/_jsx("img", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80,
-          position: 'absolute'
-        }
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx("img", {
+          src: src,
+          style: {
+            maxWidth: 80,
+            maxHeight: 80,
+            position: 'absolute',
+            opacity: loading ? 0 : 1
+          },
+          onLoad: function onLoad() {
+            return setLoading(false);
+          }
+        })]
       });
   }
 };
@@ -113,4 +159,5 @@ var Media = function Media(_ref2) {
     })
   });
 };
+Media.Loading = Loading;
 export default Media;

package/lib/button/style/index.less

@@ -68,16 +68,18 @@
     }
   }
 
-  &:hover {
-    color: @btn-default-hover-color;
-    border-color: @btn-default-hover-border-color;
-    background-color: @btn-default-hover-backgroud-color;
-  }
-  &:active,
-  &:focus {
-    color: @btn-default-focus-color;
-    border-color: @btn-default-focus-border-color;
-    background-color: @btn-default-focus-backgroud-color;
+  &:not(:disabled):not(.ant-btn-disabled) {
+    &:hover {
+      color: @btn-default-hover-color;
+      border-color: @btn-default-hover-border-color;
+      background-color: @btn-default-hover-backgroud-color;
+    }
+    &:active,
+    &:focus {
+      color: @btn-default-focus-color;
+      border-color: @btn-default-focus-border-color;
+      background-color: @btn-default-focus-backgroud-color;
+    }
   }
 }
 
@@ -105,16 +107,18 @@
     }
   }
 
-  &:hover {
-    color: @btn-primary-hover-color;
-    border-color: @btn-primary-hover-border-color;
-    background-color: @btn-primary-hover-backgroud-color;
-  }
-  &:active,
-  &:focus {
-    color: @btn-primary-focus-color;
-    border-color: @btn-primary-focus-border-color;
-    background-color: @btn-primary-focus-backgroud-color;
+  &:not(:disabled):not(.ant-btn-disabled) {
+    &:hover {
+      color: @btn-primary-hover-color;
+      border-color: @btn-primary-hover-border-color;
+      background-color: @btn-primary-hover-backgroud-color;
+    }
+    &:active,
+    &:focus {
+      color: @btn-primary-focus-color;
+      border-color: @btn-primary-focus-border-color;
+      background-color: @btn-primary-focus-backgroud-color;
+    }
   }
 }
 

package/lib/documents/index.js

@@ -40,7 +40,14 @@ var Documents = function Documents(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     current = _useState2[0],
     setCurrent = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(function () {
+      return docList.map(function (d) {
+        return {
+          loading: true,
+          src: typeof d === 'string' ? d : d.src
+        };
+      });
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
     setList = _useState4[1];
@@ -100,8 +107,25 @@ var Documents = function Documents(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
     size: [8, 8],
     wrap: true,
-    children: list.map(function (_ref3, index) {
-      var _src = _ref3.src,
+    children: list.map(function (item, index) {
+      if (item.loading) {
+        var loading = item.loading,
+          _src2 = item.src;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            left: "".concat((index - current) * 100, "%")
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_media.default, {
+            loading: loading,
+            index: index,
+            src: _src2,
+            className: className,
+            style: style
+          })
+        }, index);
+      }
+      var _ref3 = item,
+        _src = _ref3.src,
         type = _ref3.type,
         nonCORSSrc = _ref3.nonCORSSrc;
       var src = !!nonCORSSrc ? {

package/lib/media/index.d.ts

@@ -24,6 +24,7 @@ interface Props {
     destroyOnClose?: boolean;
     download?: Download;
     getNonCORSUrl?: GetNonCORSUrl;
+    loading?: boolean;
 }
 declare const MediaWithPreview: FC<Props>;
 export default MediaWithPreview;