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

package/lib/es/image/image.js

@@ -1,22 +1,16 @@
 import _isUndefined from "lodash/isUndefined";
 import _isObject from "lodash/isObject";
 import _isBoolean from "lodash/isBoolean";
-
 var __rest = this && this.__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;
 };
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
 import PropTypes from "prop-types";
@@ -31,25 +25,25 @@ import Skeleton from "../skeleton";
 import '@douyinfe/semi-foundation/lib/es/image/image.css';
 const prefixCls = cssClasses.PREFIX;
 export default class Image extends BaseComponent {
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      getIsInGroup: () => this.isInGroup()
+    });
+  }
   constructor(props) {
     super(props);
-
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
-
     this.handleLoaded = e => {
       this.foundation.handleLoaded(e);
     };
-
     this.handleError = e => {
       this.foundation.handleError(e);
     };
-
     this.handlePreviewVisibleChange = visible => {
       this.foundation.handlePreviewVisibleChange(visible);
     };
-
     this.renderDefaultLoading = () => {
       const {
         width,
@@ -62,7 +56,6 @@ export default class Image extends BaseComponent {
         }
       });
     };
-
     this.renderDefaultError = () => {
       const prefixClsName = `${prefixCls}-status`;
       return /*#__PURE__*/React.createElement("div", {
@@ -71,7 +64,6 @@ export default class Image extends BaseComponent {
         size: "extra-large"
       }));
     };
-
     this.renderLoad = () => {
       const prefixClsName = `${prefixCls}-status`;
       const {
@@ -81,7 +73,6 @@ export default class Image extends BaseComponent {
         className: prefixClsName
       }, placeholder) : this.renderDefaultLoading();
     };
-
     this.renderError = () => {
       const {
         fallback
@@ -99,7 +90,6 @@ export default class Image extends BaseComponent {
         className: prefixClsName
       }, fallbackNode) : this.renderDefaultError();
     };
-
     this.renderExtra = () => {
       const {
         loadStatus
@@ -108,11 +98,9 @@ export default class Image extends BaseComponent {
         className: `${prefixCls}-overlay`
       }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
     };
-
     this.getLocalTextByKey = key => /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Image"
     }, locale => locale[key]);
-
     this.renderMask = () => /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-mask`
     }, /*#__PURE__*/React.createElement("div", {
@@ -122,7 +110,6 @@ export default class Image extends BaseComponent {
     }), /*#__PURE__*/React.createElement("span", {
       className: `${prefixCls}-mask-info-text`
     }, this.getLocalTextByKey("preview"))));
-
     this.state = {
       src: "",
       loadStatus: "loading",
@@ -131,90 +118,53 @@ export default class Image extends BaseComponent {
     this.foundation = new ImageFoundation(this.adapter);
     this.imgRef = /*#__PURE__*/React.createRef();
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      getIsInGroup: () => this.isInGroup()
-    });
-  }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-
     if (props.src !== state.src) {
       willUpdateStates.src = props.src;
       willUpdateStates.loadStatus = "loading";
     }
-
     if (_isObject(props.preview)) {
       const {
         visible
       } = props.preview;
-
       if (_isBoolean(visible)) {
         willUpdateStates.previewVisible = visible;
       }
     }
-
     return willUpdateStates;
   }
-
-  componentDidMount() {
-    this.observeImage();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    prevProps.src !== this.props.src && this.observeImage();
-  }
-
-  observeImage() {
-    if (!this.isLazyLoad()) {
-      return;
-    }
-
-    const {
-      previewObserver
-    } = this.context;
-    previewObserver.observe(this.imgRef.current);
-  }
-
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
   }
-
   isLazyLoad() {
     if (this.context) {
       return this.context.lazyLoad;
     }
-
     return false;
   }
-
   render() {
     var _a;
-
     const {
       src,
       loadStatus,
       previewVisible
     } = this.state;
-
     const _b = this.props,
-          {
-      src: picSrc,
-      width,
-      height,
-      alt,
-      style,
-      className,
-      crossOrigin,
-      preview,
-      fallback,
-      placeholder,
-      imageID
-    } = _b,
-          restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID"]);
-
+      {
+        src: picSrc,
+        width,
+        height,
+        alt,
+        style,
+        className,
+        crossOrigin,
+        preview,
+        fallback,
+        placeholder,
+        imageID
+      } = _b,
+      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID"]);
     const outerStyle = Object.assign({
       width,
       height
@@ -255,7 +205,6 @@ export default class Image extends BaseComponent {
       })))
     );
   }
-
 }
 Image.isSemiImage = true;
 Image.contextType = PreviewContext;

package/lib/es/image/interface.d.ts

@@ -84,7 +84,7 @@ export interface MenuProps {
     onRotateLeft?: () => void;
     onRotateRight?: () => void;
 }
-export declare type RatioType = "adaptation" | "realSize";
+export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerStates {
     imgSrc?: string[];
     imgLoadStatus?: Map<string, boolean>;

package/lib/es/image/preview.d.ts

@@ -71,7 +71,11 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
     previewRef: React.RefObject<PreviewInner>;
     previewObserver: IntersectionObserver;
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    observerImages: () => void;
     static getDerivedStateFromProps(props: PreviewProps, state: PreviewState): Partial<PreviewState>;
+    componentWillUnmount(): void;
     handleVisibleChange: (newVisible: boolean) => void;
     handleCurrentIndexChange: (index: number) => void;
     loopImageIndex: () => {

package/lib/es/image/preview.js

@@ -1,17 +1,14 @@
+import _isEqual from "lodash/isEqual";
 import _isObject from "lodash/isObject";
-
 var __rest = this && this.__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;
 };
-
-import React from "react";
+import React, { isValidElement } from "react";
 import { PreviewContext } from "./previewContext";
 import BaseComponent from "../_base/baseComponent";
 import PropTypes from "prop-types";
@@ -22,17 +19,40 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import '@douyinfe/semi-foundation/lib/es/image/image.css';
 const prefixCls = cssClasses.PREFIX;
 export default class Preview extends BaseComponent {
+  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
@@ -40,11 +60,9 @@ export default class Preview extends BaseComponent {
       let index = 0;
       const srcListInChildren = [];
       const titles = [];
-
       const loop = children => {
         return React.Children.map(children, child => {
           var _a;
-
           if (child && child.props && child.type) {
             if (child.type.isSemiImage) {
               const {
@@ -52,7 +70,6 @@ export default class Preview extends BaseComponent {
                 preview,
                 alt
               } = child.props;
-
               if (preview) {
                 const previewSrc = _isObject(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
                 srcListInChildren.push(previewSrc);
@@ -61,28 +78,23 @@ export default class Preview extends BaseComponent {
                   imageID: index++
                 });
               }
-
               return child;
             }
           }
-
           if (child && child.props && child.props.children) {
             return /*#__PURE__*/React.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
@@ -93,51 +105,43 @@ export default class Preview extends BaseComponent {
       length: 4
     });
     this.previewRef = /*#__PURE__*/React.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.Children.toArray(prevProps.children).map(child => /*#__PURE__*/isValidElement(child) ? child.key : null);
+      const currChildrenKeys = React.Children.toArray(this.props.children).map(child => /*#__PURE__*/isValidElement(child) ? child.key : null);
+      if (!_isEqual(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
@@ -173,7 +177,6 @@ export default class Preview extends BaseComponent {
       onVisibleChange: this.handleVisibleChange
     })));
   }
-
 }
 Preview.propTypes = {
   style: PropTypes.object,

package/lib/es/image/previewFooter.js

@@ -14,37 +14,36 @@ const prefixCls = cssClasses.PREFIX;
 const footerPrefixCls = `${cssClasses.PREFIX}-preview-footer`;
 let mouseActiveTime = 0;
 export default class Footer extends BaseComponent {
+  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 = _throttle(value => {
       this.foundation.handleValueChange(value);
     }, 50);
-
     this.handleRatioClick = () => {
       this.foundation.handleRatioClick();
     };
-
     this.customRenderViewMenu = () => {
       const {
         min,
@@ -85,10 +84,9 @@ export default class Footer extends BaseComponent {
         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
@@ -97,11 +95,9 @@ export default class Footer extends BaseComponent {
         content: content
       }, element) : element;
     };
-
     this.getLocalTextByKey = key => /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Image"
     }, locale => locale[key]);
-
     this.getIconChevronLeft = () => {
       const {
         disabledPrev,
@@ -116,7 +112,6 @@ export default class Footer extends BaseComponent {
       const content = prevTip !== null && prevTip !== void 0 ? prevTip : this.getLocalTextByKey("prevTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconChevronRight = () => {
       const {
         disabledNext,
@@ -131,7 +126,6 @@ export default class Footer extends BaseComponent {
       const content = nextTip !== null && nextTip !== void 0 ? nextTip : this.getLocalTextByKey("nextTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconMinus = () => {
       const {
         zoomOutTip,
@@ -147,7 +141,6 @@ export default class Footer extends BaseComponent {
       const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconPlus = () => {
       const {
         zoomInTip,
@@ -163,7 +156,6 @@ export default class Footer extends BaseComponent {
       const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconRatio = () => {
       const {
         ratio,
@@ -177,16 +169,13 @@ export default class Footer extends BaseComponent {
       };
       const icon = ratio === "adaptation" ? /*#__PURE__*/React.createElement(IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/React.createElement(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
@@ -198,7 +187,6 @@ export default class Footer extends BaseComponent {
       const content = rotateTip !== null && rotateTip !== void 0 ? rotateTip : this.getLocalTextByKey("rotateTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.getIconDownload = () => {
       const {
         downloadTip,
@@ -215,18 +203,8 @@ export default class Footer extends BaseComponent {
       const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
       return this.getFinalIconElement(icon, content);
     };
-
     this.foundation = new PreviewFooterFoundation(this.adapter);
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      setStartMouseOffset: time => {
-        mouseActiveTime = time;
-      }
-    });
-  }
-
   render() {
     const {
       min,
@@ -239,13 +217,11 @@ export default class Footer extends BaseComponent {
       className,
       renderPreviewMenu
     } = this.props;
-
     if (renderPreviewMenu) {
       return /*#__PURE__*/React.createElement("div", {
         className: `${footerPrefixCls}-wrapper`
       }, this.customRenderViewMenu());
     }
-
     return /*#__PURE__*/React.createElement("section", {
       className: cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
     }, this.getIconChevronLeft(), /*#__PURE__*/React.createElement("div", {
@@ -264,7 +240,6 @@ export default class Footer extends BaseComponent {
       layout: "vertical"
     }), this.getIconRotate(), this.getIconDownload());
   }
-
 }
 Footer.propTypes = {
   curPage: PropTypes.number,

package/lib/es/image/previewHeader.js

@@ -4,7 +4,6 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import { PreviewContext } from "./previewContext";
 const prefixCls = `${cssClasses.PREFIX}-preview-header`;
-
 const Header = _ref => {
   let {
     onClose,
@@ -18,11 +17,9 @@ const Header = _ref => {
       titles
     } = _ref2;
     let title;
-
     if (titles && typeof currentIndex === "number") {
       title = titles[currentIndex];
     }
-
     return /*#__PURE__*/React.createElement("section", {
       className: cls(prefixCls, className)
     }, /*#__PURE__*/React.createElement("section", {
@@ -34,5 +31,4 @@ const Header = _ref => {
     }, /*#__PURE__*/React.createElement(IconClose, null)));
   });
 };
-
 export default Header;