@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/cjs/image/preview.js

@@ -4,54 +4,64 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _previewContext = require("./previewContext");
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _previewInner = _interopRequireDefault(require("./previewInner"));
-
 var _previewFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewFoundation"));
-
 var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
-
 require("@douyinfe/semi-foundation/lib/cjs/image/image.css");
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 const prefixCls = _constants.cssClasses.PREFIX;
-
 class Preview extends _baseComponent.default {
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
   constructor(props) {
     super(props);
-
+    this.observerImages = () => {
+      if (this.previewObserver) {
+        // cancel the observation of all elements of the previous observer
+        this.previewObserver.disconnect();
+      } else {
+        this.previewObserver = new IntersectionObserver(entries => {
+          entries.forEach(item => {
+            var _a;
+            const src = (_a = item.target.dataset) === null || _a === void 0 ? void 0 : _a.src;
+            if (item.isIntersecting && src) {
+              item.target.src = src;
+              item.target.removeAttribute("data-src");
+            }
+            this.previewObserver.unobserve(item.target);
+          });
+        }, {
+          root: document.querySelector(`#${this.previewGroupId}`),
+          rootMargin: this.props.lazyLoadMargin
+        });
+      }
+      const allImgElement = document.querySelectorAll(`.${prefixCls}-img`);
+      allImgElement.forEach(item => this.previewObserver.observe(item));
+    };
     this.handleVisibleChange = newVisible => {
       this.foundation.handleVisibleChange(newVisible);
     };
-
     this.handleCurrentIndexChange = index => {
       this.foundation.handleCurrentIndexChange(index);
     };
-
     this.loopImageIndex = () => {
       const {
         children
@@ -59,11 +69,9 @@ class Preview extends _baseComponent.default {
       let index = 0;
       const srcListInChildren = [];
       const titles = [];
-
       const loop = children => {
         return _react.default.Children.map(children, child => {
           var _a;
-
           if (child && child.props && child.type) {
             if (child.type.isSemiImage) {
               const {
@@ -71,7 +79,6 @@ class Preview extends _baseComponent.default {
                 preview,
                 alt
               } = child.props;
-
               if (preview) {
                 const previewSrc = (0, _isObject2.default)(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
                 srcListInChildren.push(previewSrc);
@@ -80,28 +87,23 @@ class Preview extends _baseComponent.default {
                   imageID: index++
                 });
               }
-
               return child;
             }
           }
-
           if (child && child.props && child.props.children) {
             return /*#__PURE__*/_react.default.cloneElement(child, {
               children: loop(child.props.children)
             });
           }
-
           return child;
         });
       };
-
       return {
         srcListInChildren,
         newChildren: loop(children),
         titles
       };
     };
-
     this.state = {
       currentIndex: props.currentIndex || props.defaultCurrentIndex || 0,
       visible: props.visible || props.currentDefaultVisible || false
@@ -112,51 +114,43 @@ class Preview extends _baseComponent.default {
       length: 4
     });
     this.previewRef = /*#__PURE__*/_react.default.createRef();
-    this.previewObserver = new IntersectionObserver(entries => {
-      entries.forEach(item => {
-        var _a;
-
-        const src = (_a = item.target.dataset) === null || _a === void 0 ? void 0 : _a.src;
-
-        if (item.isIntersecting && src) {
-          item.target.src = src;
-          item.target.removeAttribute("data-src");
-          this.previewObserver.unobserve(item.target);
-        }
-      });
-    }, {
-      root: document.querySelector(`#${this.previewGroupId}`),
-      rootMargin: props.lazyLoadMargin
-    });
   }
-
-  get adapter() {
-    return Object.assign({}, super.adapter);
+  componentDidMount() {
+    this.props.lazyLoad && this.observerImages();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.lazyLoad) {
+      const prevChildrenKeys = _react.default.Children.toArray(prevProps.children).map(child => /*#__PURE__*/(0, _react.isValidElement)(child) ? child.key : null);
+      const currChildrenKeys = _react.default.Children.toArray(this.props.children).map(child => /*#__PURE__*/(0, _react.isValidElement)(child) ? child.key : null);
+      if (!(0, _isEqual2.default)(prevChildrenKeys, currChildrenKeys)) {
+        this.observerImages();
+      }
+    }
   }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
       willUpdateStates.currentIndex = props.currentIndex;
     }
-
     if ("visible" in props && props.visible !== state.visible) {
       willUpdateStates.visible = props.visible;
     }
-
     return willUpdateStates;
   }
-
+  componentWillUnmount() {
+    if (this.previewObserver) {
+      this.previewObserver.disconnect();
+      this.previewObserver = null;
+    }
+  }
   render() {
     const _a = this.props,
-          {
-      src,
-      style,
-      lazyLoad
-    } = _a,
-          restProps = __rest(_a, ["src", "style", "lazyLoad"]);
-
+      {
+        src,
+        style,
+        lazyLoad
+      } = _a,
+      restProps = __rest(_a, ["src", "style", "lazyLoad"]);
     const {
       currentIndex,
       visible
@@ -192,9 +186,7 @@ class Preview extends _baseComponent.default {
       onVisibleChange: this.handleVisibleChange
     })));
   }
-
 }
-
 exports.default = Preview;
 Preview.propTypes = {
   style: _propTypes.default.object,

package/lib/cjs/image/previewContext.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewContext = void 0;
-
 var _react = require("react");
-
 const PreviewContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.PreviewContext = PreviewContext;

package/lib/cjs/image/previewFooter.js

@@ -4,69 +4,53 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _tooltip = _interopRequireDefault(require("../tooltip"));
-
 var _divider = _interopRequireDefault(require("../divider"));
-
 var _slider = _interopRequireDefault(require("../slider"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _previewFooterFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewFooterFoundation"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const prefixCls = _constants.cssClasses.PREFIX;
 const footerPrefixCls = `${_constants.cssClasses.PREFIX}-preview-footer`;
 let mouseActiveTime = 0;
-
 class Footer extends _baseComponent.default {
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      setStartMouseOffset: time => {
+        mouseActiveTime = time;
+      }
+    });
+  }
   constructor(props) {
     super(props);
-
     this.changeSliderValue = type => {
       this.foundation.changeSliderValue(type);
     };
-
     this.handleMinusClick = () => {
       this.changeSliderValue("minus");
     };
-
     this.handlePlusClick = () => {
       this.changeSliderValue("plus");
     };
-
     this.handleRotateLeft = () => {
       this.foundation.handleRotate("left");
     };
-
     this.handleRotateRight = () => {
       this.foundation.handleRotate("right");
     };
-
     this.handleSlideChange = (0, _throttle2.default)(value => {
       this.foundation.handleValueChange(value);
     }, 50);
-
     this.handleRatioClick = () => {
       this.foundation.handleRatioClick();
     };
-
     this.customRenderViewMenu = () => {
       const {
         min,
@@ -107,10 +91,9 @@ class Footer extends _baseComponent.default {
         onZoomOut: this.handleMinusClick
       };
       return renderPreviewMenu(props);
-    }; // According to showTooltip in props, decide whether to use Tooltip to pack a layer
+    };
+    // According to showTooltip in props, decide whether to use Tooltip to pack a layer
     // 根据 props 中的 showTooltip 决定是否使用 Tooltip 包一层
-
-
     this.getFinalIconElement = (element, content) => {
       const {
         showTooltip
@@ -119,45 +102,37 @@ class Footer extends _baseComponent.default {
         content: content
       }, element) : element;
     };
-
     this.getLocalTextByKey = key => /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Image"
     }, locale => locale[key]);
-
     this.getIconChevronLeft = () => {
       const {
         disabledPrev,
         onPrev,
         prevTip
       } = this.props;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
         size: "large",
         className: disabledPrev ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledPrev ? onPrev : undefined
       });
-
       const content = prevTip !== null && prevTip !== void 0 ? prevTip : this.getLocalTextByKey("prevTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconChevronRight = () => {
       const {
         disabledNext,
         onNext,
         nextTip
       } = this.props;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
         size: "large",
         className: disabledNext ? `${footerPrefixCls}-disabled` : "",
         onClick: !disabledNext ? onNext : undefined
       });
-
       const content = nextTip !== null && nextTip !== void 0 ? nextTip : this.getLocalTextByKey("nextTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconMinus = () => {
       const {
         zoomOutTip,
@@ -165,17 +140,14 @@ class Footer extends _baseComponent.default {
         min
       } = this.props;
       const disabledZoomOut = zoom === min;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconMinus, {
         size: "large",
         onClick: !disabledZoomOut ? this.handleMinusClick : undefined,
         className: disabledZoomOut ? `${footerPrefixCls}-disabled` : ""
       });
-
       const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconPlus = () => {
       const {
         zoomInTip,
@@ -183,17 +155,14 @@ class Footer extends _baseComponent.default {
         max
       } = this.props;
       const disabledZoomIn = zoom === max;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconPlus, {
         size: "large",
         onClick: !disabledZoomIn ? this.handlePlusClick : undefined,
         className: disabledZoomIn ? `${footerPrefixCls}-disabled` : ""
       });
-
       const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconRatio = () => {
       const {
         ratio,
@@ -207,37 +176,30 @@ class Footer extends _baseComponent.default {
       };
       const icon = ratio === "adaptation" ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconWindowAdaptionStroked, Object.assign({}, props));
       let content;
-
       if (ratio === "adaptation") {
         content = originTip !== null && originTip !== void 0 ? originTip : this.getLocalTextByKey("originTip");
       } else {
         content = adaptiveTip !== null && adaptiveTip !== void 0 ? adaptiveTip : this.getLocalTextByKey("adaptiveTip");
       }
-
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconRotate = () => {
       const {
         rotateTip
       } = this.props;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconRotate, {
         size: "large",
         onClick: this.handleRotateLeft
       });
-
       const content = rotateTip !== null && rotateTip !== void 0 ? rotateTip : this.getLocalTextByKey("rotateTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconDownload = () => {
       const {
         downloadTip,
         onDownload,
         disableDownload
       } = this.props;
-
       const icon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconDownload, {
         size: "large",
         onClick: !disableDownload ? onDownload : undefined,
@@ -245,22 +207,11 @@ class Footer extends _baseComponent.default {
           [`${footerPrefixCls}-disabled`]: disableDownload
         })
       });
-
       const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.foundation = new _previewFooterFoundation.default(this.adapter);
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      setStartMouseOffset: time => {
-        mouseActiveTime = time;
-      }
-    });
-  }
-
   render() {
     const {
       min,
@@ -273,13 +224,11 @@ class Footer extends _baseComponent.default {
       className,
       renderPreviewMenu
     } = this.props;
-
     if (renderPreviewMenu) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: `${footerPrefixCls}-wrapper`
       }, this.customRenderViewMenu());
     }
-
     return /*#__PURE__*/_react.default.createElement("section", {
       className: (0, _classnames.default)(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
     }, this.getIconChevronLeft(), /*#__PURE__*/_react.default.createElement("div", {
@@ -298,9 +247,7 @@ class Footer extends _baseComponent.default {
       layout: "vertical"
     }), this.getIconRotate(), this.getIconDownload());
   }
-
 }
-
 exports.default = Footer;
 Footer.propTypes = {
   curPage: _propTypes.default.number,

package/lib/cjs/image/previewHeader.js

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _previewContext = require("./previewContext");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
 const prefixCls = `${_constants.cssClasses.PREFIX}-preview-header`;
-
 const Header = _ref => {
   let {
     onClose,
@@ -36,11 +26,9 @@ const Header = _ref => {
       titles
     } = _ref2;
     let title;
-
     if (titles && typeof currentIndex === "number") {
       title = titles[currentIndex];
     }
-
     return /*#__PURE__*/React.createElement("section", {
       className: (0, _classnames.default)(prefixCls, className)
     }, /*#__PURE__*/React.createElement("section", {
@@ -52,6 +40,5 @@ const Header = _ref => {
     }, /*#__PURE__*/React.createElement(_semiIcons.IconClose, null)));
   });
 };
-
 var _default = Header;
 exports.default = _default;