@douyinfe/semi-ui 2.39.3 → 2.40.0-beta.0

package/lib/es/image/preview.js

@@ -141,9 +141,10 @@ export default class Preview extends BaseComponent {
         src,
         className,
         style,
-        lazyLoad
+        lazyLoad,
+        setDownloadName
       } = _a,
-      restProps = __rest(_a, ["src", "className", "style", "lazyLoad"]);
+      restProps = __rest(_a, ["src", "className", "style", "lazyLoad", "setDownloadName"]);
     const {
       currentIndex,
       visible
@@ -165,7 +166,8 @@ export default class Preview extends BaseComponent {
         lazyLoad,
         previewObserver: this.previewObserver,
         setCurrentIndex: this.handleCurrentIndexChange,
-        handleVisibleChange: this.handleVisibleChange
+        handleVisibleChange: this.handleVisibleChange,
+        setDownloadName: setDownloadName
       }
     }, /*#__PURE__*/React.createElement("div", {
       id: this.previewGroupId,

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

@@ -9,5 +9,6 @@ export interface PreviewContextProps {
     previewObserver: IntersectionObserver;
     setCurrentIndex: (current: number) => void;
     handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
+    setDownloadName: (src: string) => string;
 }
 export declare const PreviewContext: import("react").Context<PreviewContextProps>;

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

@@ -49,7 +49,7 @@ export default class Footer extends BaseComponent<FooterProps> {
     handleSlideChange: import("lodash").DebouncedFunc<(value: any) => void>;
     handleRatioClick: () => void;
     customRenderViewMenu: () => ReactNode;
-    getFinalIconElement: (element: ReactNode, content: ReactNode) => string | number | boolean | React.ReactFragment | JSX.Element;
+    getFinalIconElement: (element: ReactNode, content: ReactNode, key: string) => string | number | boolean | React.ReactFragment | JSX.Element;
     getLocalTextByKey: (key: string) => JSX.Element;
     getIconChevronLeft: () => string | number | boolean | React.ReactFragment | JSX.Element;
     getIconChevronRight: () => string | number | boolean | React.ReactFragment | JSX.Element;
@@ -58,5 +58,9 @@ export default class Footer extends BaseComponent<FooterProps> {
     getIconRatio: () => string | number | boolean | React.ReactFragment | JSX.Element;
     getIconRotate: () => string | number | boolean | React.ReactFragment | JSX.Element;
     getIconDownload: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getNumberInfo: () => JSX.Element;
+    getSlider: () => JSX.Element;
+    getMenu: () => (string | number | boolean | React.ReactFragment | JSX.Element)[];
+    getFooterMenu: () => (string | number | boolean | React.ReactFragment | JSX.Element)[];
     render(): JSX.Element;
 }

package/lib/es/image/previewFooter.js

@@ -81,18 +81,20 @@ export default class Footer extends BaseComponent {
         disabledZoomOut: zoom === min,
         onRatioClick: this.handleRatioClick,
         onZoomIn: this.handlePlusClick,
-        onZoomOut: this.handleMinusClick
+        onZoomOut: this.handleMinusClick,
+        menuItems: this.getMenu()
       };
       return renderPreviewMenu(props);
     };
     // According to showTooltip in props, decide whether to use Tooltip to pack a layer
     // 根据 props 中的 showTooltip 决定是否使用 Tooltip 包一层
-    this.getFinalIconElement = (element, content) => {
+    this.getFinalIconElement = (element, content, key) => {
       const {
         showTooltip
       } = this.props;
       return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-        content: content
+        content: content,
+        key: `tooltip-${key}`
       }, element) : element;
     };
     this.getLocalTextByKey = key => /*#__PURE__*/React.createElement(LocaleConsumer, {
@@ -105,12 +107,13 @@ export default class Footer extends BaseComponent {
         prevTip
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronLeft, {
+        key: "chevron-left",
         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);
+      return this.getFinalIconElement(icon, content, 'chevron-left');
     };
     this.getIconChevronRight = () => {
       const {
@@ -119,12 +122,13 @@ export default class Footer extends BaseComponent {
         nextTip
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronRight, {
+        key: "chevron-right",
         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);
+      return this.getFinalIconElement(icon, content, 'chevron-right');
     };
     this.getIconMinus = () => {
       const {
@@ -134,12 +138,13 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const disabledZoomOut = zoom === min;
       const icon = /*#__PURE__*/React.createElement(IconMinus, {
+        key: "minus",
         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);
+      return this.getFinalIconElement(icon, content, 'minus');
     };
     this.getIconPlus = () => {
       const {
@@ -149,12 +154,13 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const disabledZoomIn = zoom === max;
       const icon = /*#__PURE__*/React.createElement(IconPlus, {
+        key: "plus",
         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);
+      return this.getFinalIconElement(icon, content, 'plus');
     };
     this.getIconRatio = () => {
       const {
@@ -163,6 +169,7 @@ export default class Footer extends BaseComponent {
         adaptiveTip
       } = this.props;
       const props = {
+        key: "ratio",
         size: "large",
         className: cls(`${footerPrefixCls}-gap`),
         onClick: this.handleRatioClick
@@ -174,18 +181,19 @@ export default class Footer extends BaseComponent {
       } else {
         content = adaptiveTip !== null && adaptiveTip !== void 0 ? adaptiveTip : this.getLocalTextByKey("adaptiveTip");
       }
-      return this.getFinalIconElement(icon, content);
+      return this.getFinalIconElement(icon, content, 'ratio');
     };
     this.getIconRotate = () => {
       const {
         rotateTip
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconRotate, {
+        key: "rotate",
         size: "large",
         onClick: this.handleRotateLeft
       });
       const content = rotateTip !== null && rotateTip !== void 0 ? rotateTip : this.getLocalTextByKey("rotateTip");
-      return this.getFinalIconElement(icon, content);
+      return this.getFinalIconElement(icon, content, 'rotate');
     };
     this.getIconDownload = () => {
       const {
@@ -194,6 +202,7 @@ export default class Footer extends BaseComponent {
         disableDownload
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconDownload, {
+        key: 'download',
         size: "large",
         onClick: !disableDownload ? onDownload : undefined,
         className: cls(`${footerPrefixCls}-gap`, {
@@ -201,44 +210,63 @@ export default class Footer extends BaseComponent {
         })
       });
       const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
-      return this.getFinalIconElement(icon, content);
+      return this.getFinalIconElement(icon, content, 'download');
+    };
+    this.getNumberInfo = () => {
+      const {
+        curPage,
+        totalNum
+      } = this.props;
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${footerPrefixCls}-page`,
+        key: 'info'
+      }, curPage, "/", totalNum);
+    };
+    this.getSlider = () => {
+      const {
+        zoom,
+        min,
+        max,
+        step,
+        showTooltip
+      } = this.props;
+      return /*#__PURE__*/React.createElement(Slider, {
+        key: 'slider',
+        value: zoom,
+        min: min,
+        max: max,
+        step: step,
+        tipFormatter: v => `${v}%`,
+        tooltipVisible: showTooltip ? undefined : false,
+        onChange: this.handleSlideChange
+      });
+    };
+    this.getMenu = () => [this.getIconChevronLeft(), this.getNumberInfo(), this.getIconChevronRight(), this.getIconMinus(), this.getSlider(), this.getIconPlus(), this.getIconRatio(), this.getIconRotate(), this.getIconDownload()];
+    this.getFooterMenu = () => {
+      const menuItems = this.getMenu();
+      menuItems.splice(3, 0, /*#__PURE__*/React.createElement(Divider, {
+        layout: "vertical",
+        key: "divider-first"
+      }));
+      menuItems.splice(8, 0, /*#__PURE__*/React.createElement(Divider, {
+        layout: "vertical",
+        key: "divider-second"
+      }));
+      return menuItems;
     };
     this.foundation = new PreviewFooterFoundation(this.adapter);
   }
   render() {
     const {
-      min,
-      max,
-      step,
-      curPage,
-      totalNum,
-      zoom,
-      showTooltip,
       className,
       renderPreviewMenu
     } = this.props;
-    if (renderPreviewMenu) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${footerPrefixCls}-wrapper`
-      }, this.customRenderViewMenu());
-    }
+    const menuCls = cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className, {
+      [`${footerPrefixCls}-content`]: !Boolean(renderPreviewMenu)
+    });
     return /*#__PURE__*/React.createElement("section", {
-      className: cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
-    }, this.getIconChevronLeft(), /*#__PURE__*/React.createElement("div", {
-      className: `${footerPrefixCls}-page`
-    }, /*#__PURE__*/React.createElement("span", null, curPage), /*#__PURE__*/React.createElement("span", null, "/"), /*#__PURE__*/React.createElement("span", null, totalNum)), this.getIconChevronRight(), /*#__PURE__*/React.createElement(Divider, {
-      layout: "vertical"
-    }), this.getIconMinus(), /*#__PURE__*/React.createElement(Slider, {
-      value: zoom,
-      min: min,
-      max: max,
-      step: step,
-      tipFormatter: v => `${v}%`,
-      tooltipVisible: showTooltip ? undefined : false,
-      onChange: this.handleSlideChange
-    }), this.getIconPlus(), this.getIconRatio(), /*#__PURE__*/React.createElement(Divider, {
-      layout: "vertical"
-    }), this.getIconRotate(), this.getIconDownload());
+      className: menuCls
+    }, renderPreviewMenu ? this.customRenderViewMenu() : this.getFooterMenu());
   }
 }
 Footer.propTypes = {

package/lib/es/image/previewInner.js

@@ -124,6 +124,10 @@ export default class PreviewInner extends BaseComponent {
       },
       setMouseActiveTime: time => {
         mouseActiveTime = time;
+      },
+      getSetDownloadFunc: () => {
+        var _a, _b;
+        return (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.setDownloadName) !== null && _b !== void 0 ? _b : this.props.setDownloadName;
       }
     });
   }

package/lib/es/upload/index.js

@@ -81,10 +81,7 @@ class Upload extends BaseComponent {
      * manual upload by user
      */
     this.upload = () => {
-      const {
-        fileList
-      } = this.state;
-      this.foundation.startUpload(fileList);
+      this.foundation.manualUpload();
     };
     /**
      * ref method

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.39.3",
+    "version": "2.40.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.39.3",
-        "@douyinfe/semi-animation-react": "2.39.3",
-        "@douyinfe/semi-foundation": "2.39.3",
-        "@douyinfe/semi-icons": "2.39.3",
-        "@douyinfe/semi-illustrations": "2.39.3",
-        "@douyinfe/semi-theme-default": "2.39.3",
+        "@douyinfe/semi-animation": "2.40.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.40.0-beta.0",
+        "@douyinfe/semi-foundation": "2.40.0-beta.0",
+        "@douyinfe/semi-icons": "2.40.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.40.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.40.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3f036a160c7c671248a66274c749eeaaf3e92343",
+    "gitHead": "f42587885c81ecb266aa0d32d2feaa7633e01e67",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",