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

package/lib/es/image/previewImage.js

@@ -8,78 +8,98 @@ const prefixCls = cssClasses.PREFIX;
 const preViewImgPrefixCls = `${prefixCls}-preview-image`;
 let originImageWidth = null;
 let originImageHeight = null;
-let startMouseMove = false; // startMouseOffset：The offset of the mouse relative to the left and top of the picture
-
+let startMouseMove = false;
+// startMouseOffset：The offset of the mouse relative to the left and top of the picture
 let startMouseOffset = {
   x: 0,
   y: 0
 };
 export default class PreviewImage extends BaseComponent {
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      getOriginImageSize: () => ({
+        originImageWidth,
+        originImageHeight
+      }),
+      setOriginImageSize: size => {
+        originImageWidth = size.originImageWidth;
+        originImageHeight = size.originImageHeight;
+      },
+      getContainer: () => {
+        return this.containerRef.current;
+      },
+      getImage: () => {
+        return this.imageRef;
+      },
+      getMouseMove: () => startMouseMove,
+      setStartMouseMove: move => {
+        startMouseMove = move;
+      },
+      getMouseOffset: () => startMouseOffset,
+      setStartMouseOffset: offset => {
+        startMouseOffset = offset;
+      },
+      setLoading: loading => {
+        this.setState({
+          loading
+        });
+      },
+      setImageCursor: canDrag => {
+        this.imageRef.style.cursor = canDrag ? "grab" : "default";
+      }
+    });
+  }
   constructor(props) {
     super(props);
-
     this.onWindowResize = () => {
       this.foundation.handleWindowResize();
     };
-
     this.handleZoomChange = (newZoom, e) => {
       this.foundation.handleZoomChange(newZoom, e);
-    }; // Determine the response method of right click according to the disableDownload parameter in props
-
-
+    };
+    // Determine the response method of right click according to the disableDownload parameter in props
     this.handleRightClickImage = e => {
       this.foundation.handleRightClickImage(e);
     };
-
     this.handleWheel = e => {
       this.foundation.handleWheel(e);
     };
-
     this.handleLoad = e => {
       this.foundation.handleLoad(e);
     };
-
     this.handleError = e => {
       this.foundation.handleError(e);
     };
-
     this.resizeImage = () => {
       this.foundation.handleResizeImage();
     };
-
     this.handleMoveImage = e => {
       this.foundation.handleMoveImage(e);
-    }; // 为什么通过ref注册wheel而不是使用onWheel事件？
+    };
+    // 为什么通过ref注册wheel而不是使用onWheel事件？
     // 因为对于wheel事件，浏览器将 addEventListener 的 passive 默认值更改为 true。如此，事件监听器便不能取消事件，也不会在用户滚动页面时阻止页面呈现。
     // 这里我们需要保持页面不动，仅放大图片，因此此处需要将 passive 更改设置为 false。
     // Why register wheel via ref instead of using onWheel event?
     // Because for wheel events, the browser changes the passive default of addEventListener to true. This way, the event listener cannot cancel the event, nor prevent the page from rendering when the user scrolls.
     // Here we need to keep the page still and only zoom in on the image, so here we need to set the passive change to false.
     // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
-
-
     this.registryImageRef = ref => {
       if (this.imageRef) {
         this.imageRef.removeEventListener("wheel", this.handleWheel);
       }
-
       if (ref) {
         ref.addEventListener("wheel", this.handleWheel, {
           passive: false
         });
       }
-
       this.imageRef = ref;
     };
-
     this.onImageMouseDown = e => {
       this.foundation.handleImageMouseDown(e);
     };
-
     this.onImageMouseUp = () => {
       this.foundation.handleImageMouseUp();
     };
-
     this.state = {
       width: 0,
       height: 0,
@@ -96,63 +116,23 @@ export default class PreviewImage extends BaseComponent {
     this.imageRef = null;
     this.foundation = new PreviewImageFoundation(this.adapter);
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      getOriginImageSize: () => ({
-        originImageWidth,
-        originImageHeight
-      }),
-      setOriginImageSize: size => {
-        originImageWidth = size.originImageWidth;
-        originImageHeight = size.originImageHeight;
-      },
-      getContainer: () => {
-        return this.containerRef.current;
-      },
-      getImage: () => {
-        return this.imageRef;
-      },
-      getMouseMove: () => startMouseMove,
-      setStartMouseMove: move => {
-        startMouseMove = move;
-      },
-      getMouseOffset: () => startMouseOffset,
-      setStartMouseOffset: offset => {
-        startMouseOffset = offset;
-      },
-      setLoading: loading => {
-        this.setState({
-          loading
-        });
-      },
-      setImageCursor: canDrag => {
-        this.imageRef.style.cursor = canDrag ? "grab" : "default";
-      }
-    });
-  }
-
   componentDidMount() {
     window.addEventListener("resize", this.onWindowResize);
   }
-
   componentWillUnmount() {
     window.removeEventListener("resize", this.onWindowResize);
   }
-
   componentDidUpdate(prevProps, prevStates) {
     // If src changes, start a new loading
     if (this.props.src && this.props.src !== prevProps.src) {
       this.foundation.setLoading(true);
-    } // If the incoming zoom changes, other content changes are determined based on the new zoom value
-
-
+    }
+    // If the incoming zoom changes, other content changes are determined based on the new zoom value
     if ("zoom" in this.props && this.props.zoom !== prevStates.currZoom) {
       this.handleZoomChange(this.props.zoom, null);
-    } // When the incoming ratio is changed, if it"s adaptation, then resizeImage is triggered to make the image adapt to the page
+    }
+    // When the incoming ratio is changed, if it"s adaptation, then resizeImage is triggered to make the image adapt to the page
     // else if it"s adaptation is realSize, then onZoom(1) is called to make the image size the original size;
-
-
     if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
       if (originImageWidth && originImageHeight) {
         if (this.props.ratio === "adaptation") {
@@ -161,14 +141,12 @@ export default class PreviewImage extends BaseComponent {
           this.props.onZoom(1);
         }
       }
-    } // When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
-
-
+    }
+    // When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
     if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
       this.onWindowResize();
     }
   }
-
   render() {
     const {
       src,
@@ -214,7 +192,6 @@ export default class PreviewImage extends BaseComponent {
       wrapperClassName: `${preViewImgPrefixCls}-spin`
     }));
   }
-
 }
 PreviewImage.propTypes = {
   src: PropTypes.string,

package/lib/es/image/previewInner.js

@@ -1,6 +1,5 @@
 import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
@@ -21,86 +20,9 @@ let startMouseDown = {
 };
 let mouseActiveTime = null;
 let stopTiming = false;
-let timer = null; // let bodyOverflowValue = document.body.style.overflow;
-
+let timer = null;
+// let bodyOverflowValue = document.body.style.overflow;
 export default class PreviewInner extends BaseComponent {
-  constructor(props) {
-    super(props);
-
-    this.viewVisibleChange = () => {
-      this.foundation.handleViewVisibleChange();
-    };
-
-    this.handleSwitchImage = direction => {
-      this.foundation.handleSwitchImage(direction);
-    };
-
-    this.handleDownload = () => {
-      this.foundation.handleDownload();
-    };
-
-    this.handlePreviewClose = () => {
-      this.foundation.handlePreviewClose();
-    };
-
-    this.handleAdjustRatio = type => {
-      this.foundation.handleAdjustRatio(type);
-    };
-
-    this.handleRotateImage = direction => {
-      this.foundation.handleRotateImage(direction);
-    };
-
-    this.handleZoomImage = newZoom => {
-      this.foundation.handleZoomImage(newZoom);
-    };
-
-    this.handleMouseUp = e => {
-      this.foundation.handleMouseUp(e.nativeEvent);
-    };
-
-    this.handleMouseMove = e => {
-      this.foundation.handleMouseMove(e);
-    };
-
-    this.handleMouseEvent = (e, event) => {
-      this.foundation.handleMouseMoveEvent(e, event);
-    };
-
-    this.handleKeyDown = e => {
-      this.foundation.handleKeyDown(e);
-    };
-
-    this.onImageError = () => {
-      this.foundation.preloadSingleImage();
-    };
-
-    this.onImageLoad = src => {
-      this.foundation.onImageLoad(src);
-    };
-
-    this.handleMouseDown = e => {
-      this.foundation.handleMouseDown(e);
-    };
-
-    this.state = {
-      imgSrc: [],
-      imgLoadStatus: new Map(),
-      zoom: 0.1,
-      currentIndex: 0,
-      ratio: "adaptation",
-      rotation: 0,
-      viewerVisible: true,
-      visible: false,
-      preloadAfterVisibleChange: true,
-      direction: ""
-    };
-    this.foundation = new PreviewInnerFoundation(this.adapter);
-    this.bodyOverflow = '';
-    this.originBodyWidth = '100%';
-    this.scrollBarWidth = 0;
-  }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getIsInGroup: () => this.isInGroup(),
@@ -109,7 +31,6 @@ export default class PreviewInner extends BaseComponent {
           getPopupContainer
         } = this.props;
         this.bodyOverflow = document.body.style.overflow || '';
-
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
           document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
@@ -119,7 +40,6 @@ export default class PreviewInner extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
           document.body.style.width = this.originBodyWidth;
@@ -132,7 +52,6 @@ export default class PreviewInner extends BaseComponent {
           onNext
         } = this.props;
         _isFunction(onChange) && onChange(index);
-
         if (direction === "prev") {
           onPrev && onPrev(index);
         } else {
@@ -144,7 +63,6 @@ export default class PreviewInner extends BaseComponent {
           onZoomIn,
           onZoomOut
         } = this.props;
-
         if (increase) {
           _isFunction(onZoomIn) && onZoomIn(zoom);
         } else {
@@ -210,81 +128,125 @@ export default class PreviewInner extends BaseComponent {
       }
     });
   }
-
+  constructor(props) {
+    super(props);
+    this.viewVisibleChange = () => {
+      this.foundation.handleViewVisibleChange();
+    };
+    this.handleSwitchImage = direction => {
+      this.foundation.handleSwitchImage(direction);
+    };
+    this.handleDownload = () => {
+      this.foundation.handleDownload();
+    };
+    this.handlePreviewClose = () => {
+      this.foundation.handlePreviewClose();
+    };
+    this.handleAdjustRatio = type => {
+      this.foundation.handleAdjustRatio(type);
+    };
+    this.handleRotateImage = direction => {
+      this.foundation.handleRotateImage(direction);
+    };
+    this.handleZoomImage = newZoom => {
+      this.foundation.handleZoomImage(newZoom);
+    };
+    this.handleMouseUp = e => {
+      this.foundation.handleMouseUp(e.nativeEvent);
+    };
+    this.handleMouseMove = e => {
+      this.foundation.handleMouseMove(e);
+    };
+    this.handleMouseEvent = (e, event) => {
+      this.foundation.handleMouseMoveEvent(e, event);
+    };
+    this.handleKeyDown = e => {
+      this.foundation.handleKeyDown(e);
+    };
+    this.onImageError = () => {
+      this.foundation.preloadSingleImage();
+    };
+    this.onImageLoad = src => {
+      this.foundation.onImageLoad(src);
+    };
+    this.handleMouseDown = e => {
+      this.foundation.handleMouseDown(e);
+    };
+    this.state = {
+      imgSrc: [],
+      imgLoadStatus: new Map(),
+      zoom: 0.1,
+      currentIndex: 0,
+      ratio: "adaptation",
+      rotation: 0,
+      viewerVisible: true,
+      visible: false,
+      preloadAfterVisibleChange: true,
+      direction: ""
+    };
+    this.foundation = new PreviewInnerFoundation(this.adapter);
+    this.bodyOverflow = '';
+    this.originBodyWidth = '100%';
+    this.scrollBarWidth = 0;
+  }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
     let src = [];
-
     if (props.visible) {
       // if src in props
       src = Array.isArray(props.src) ? props.src : [props.src];
     }
-
     if (!_isEqual(src, state.imgSrc)) {
       willUpdateStates.imgSrc = src;
     }
-
     if (props.visible !== state.visible) {
       willUpdateStates.visible = props.visible;
-
       if (props.visible) {
         willUpdateStates.preloadAfterVisibleChange = true;
       }
     }
-
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
-      willUpdateStates.currentIndex = props.currentIndex; // ratio will set to adaptation when change picture, 
+      willUpdateStates.currentIndex = props.currentIndex;
+      // ratio will set to adaptation when change picture, 
       // attention: If the ratio is controlled, the ratio should not change as the index changes
-
       willUpdateStates.ratio = 'adaptation';
     }
-
     return willUpdateStates;
   }
-
   static getScrollbarWidth() {
     if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
       return window.innerWidth - document.documentElement.clientWidth;
     }
-
     return 0;
   }
-
   componentDidMount() {
     this.scrollBarWidth = PreviewInner.getScrollbarWidth();
     this.originBodyWidth = document.body.style.width;
-
     if (this.props.visible) {
       this.foundation.beforeShow();
     }
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (prevState.visible !== this.props.visible && this.props.visible) {
       mouseActiveTime = new Date().getTime();
       timer && clearInterval(timer);
       timer = setInterval(this.viewVisibleChange, 1000);
-    } // hide => show
-
-
+    }
+    // hide => show
     if (!prevProps.visible && this.props.visible) {
       this.foundation.beforeShow();
-    } // show => hide
-
-
+    }
+    // show => hide
     if (prevProps.visible && !this.props.visible) {
       this.foundation.afterHide();
     }
   }
-
   componentWillUnmount() {
     timer && clearInterval(timer);
   }
-
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
   }
-
   render() {
     const {
       getPopupContainer,
@@ -319,14 +281,12 @@ export default class PreviewInner extends BaseComponent {
     let wrapperStyle = {
       zIndex
     };
-
     if (getPopupContainer) {
       wrapperStyle = {
         zIndex,
         position: "static"
       };
     }
-
     const previewPrefixCls = `${prefixCls}-preview`;
     const previewWrapperCls = cls(previewPrefixCls, {
       [`${prefixCls}-hide`]: !visible,
@@ -411,7 +371,6 @@ export default class PreviewInner extends BaseComponent {
       renderPreviewMenu: renderPreviewMenu
     })));
   }
-
 }
 PreviewInner.contextType = PreviewContext;
 PreviewInner.propTypes = {

package/lib/es/index.js

@@ -80,7 +80,6 @@ export { default as Highlight } from './highlight';
 export { default as LocaleProvider } from './locale/localeProvider';
 export { default as LocaleConsumer } from './locale/localeConsumer';
 /** Form */
-
 export { Form, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi, withField, ArrayField } from './form';
 export { default as Image } from './image';
 export { Preview as ImagePreview } from './image';

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

@@ -5,9 +5,9 @@ import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/input/input.css';
 export type { InputGroupProps } from './inputGroup';
 export type { TextAreaProps } from './textarea';
-export declare type InputSize = 'small' | 'large' | 'default';
-export declare type InputMode = 'password';
-export declare type ValidateStatus = "default" | "error" | "warning" | "success";
+export type InputSize = 'small' | 'large' | 'default';
+export type InputMode = 'password';
+export type ValidateStatus = "default" | "error" | "warning" | "success";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];