@douyinfe/semi-ui 2.19.2-alpha.0 → 2.20.0-beta.1

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

@@ -0,0 +1,81 @@
+import React from "react";
+import BaseComponent from "../_base/baseComponent";
+import PropTypes from "prop-types";
+import { PreviewProps, PreviewState } from "./interface";
+import PreviewInner from "./previewInner";
+import PreviewFoundation from '@douyinfe/semi-foundation/lib/es/image/previewFoundation';
+export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
+    static propTypes: {
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        visible: PropTypes.Requireable<boolean>;
+        src: PropTypes.Requireable<string | any[]>;
+        currentIndex: PropTypes.Requireable<number>;
+        defaultIndex: PropTypes.Requireable<number>;
+        defaultVisible: PropTypes.Requireable<boolean>;
+        maskClosable: PropTypes.Requireable<boolean>;
+        closable: PropTypes.Requireable<boolean>;
+        zoomStep: PropTypes.Requireable<number>;
+        infinite: PropTypes.Requireable<boolean>;
+        showTooltip: PropTypes.Requireable<boolean>;
+        closeOnEsc: PropTypes.Requireable<boolean>;
+        prevTip: PropTypes.Requireable<string>;
+        nextTip: PropTypes.Requireable<string>;
+        zoomInTip: PropTypes.Requireable<string>;
+        zoomOutTip: PropTypes.Requireable<string>;
+        downloadTip: PropTypes.Requireable<string>;
+        adaptiveTip: PropTypes.Requireable<string>;
+        originTip: PropTypes.Requireable<string>;
+        lazyLoad: PropTypes.Requireable<boolean>;
+        lazyLoadMargin: PropTypes.Requireable<string>;
+        preLoad: PropTypes.Requireable<boolean>;
+        preLoadGap: PropTypes.Requireable<number>;
+        disableDownload: PropTypes.Requireable<boolean>;
+        zIndex: PropTypes.Requireable<number>;
+        renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPreviewMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onZoomIn: PropTypes.Requireable<(...args: any[]) => any>;
+        onZoomOut: PropTypes.Requireable<(...args: any[]) => any>;
+        onPrev: PropTypes.Requireable<(...args: any[]) => any>;
+        onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+        onRatioChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onRotateChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        src: any[];
+        lazyLoad: boolean;
+        lazyLoadMargin: string;
+    };
+    get adapter(): {
+        getContext(key: string): any;
+        getContexts(): any;
+        getProp(key: string): any;
+        getProps(): PreviewProps;
+        getState(key: string): any;
+        getStates(): PreviewState;
+        setState(s: Pick<PreviewState, keyof PreviewState>, callback?: any): void;
+        getCache(c: string): any;
+        getCaches(): any;
+        setCache(key: any, value: any): void;
+        stopPropagation(e: any): void;
+    };
+    foundation: PreviewFoundation;
+    previewGroupId: string;
+    previewRef: React.RefObject<PreviewInner>;
+    constructor(props: any);
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PreviewProps, state: PreviewState): Partial<PreviewState>;
+    handleVisibleChange: (newVisible: boolean) => void;
+    handleCurrentIndexChange: (index: number) => void;
+    loopImageIndex: () => {
+        srcListInChildren: any[];
+        newChildren: any;
+        titles: React.ReactNode[];
+    };
+    render(): JSX.Element;
+}

package/lib/es/image/preview.js

@@ -0,0 +1,229 @@
+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 { PreviewContext } from "./previewContext";
+import BaseComponent from "../_base/baseComponent";
+import PropTypes from "prop-types";
+import PreviewInner from "./previewInner";
+import PreviewFoundation from '@douyinfe/semi-foundation/lib/es/image/previewFoundation';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
+const prefixCls = cssClasses.PREFIX;
+export default class Preview extends BaseComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleVisibleChange = newVisible => {
+      this.foundation.handleVisibleChange(newVisible);
+    };
+
+    this.handleCurrentIndexChange = index => {
+      this.foundation.handleCurrentIndexChange(index);
+    };
+
+    this.loopImageIndex = () => {
+      const {
+        children
+      } = this.props;
+      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 {
+                src,
+                preview,
+                alt
+              } = child.props;
+
+              if (preview) {
+                const previewSrc = _isObject(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
+                srcListInChildren.push(previewSrc);
+                titles.push(preview === null || preview === void 0 ? void 0 : preview.previewTitle);
+                return /*#__PURE__*/React.cloneElement(child, {
+                  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
+    };
+    this.foundation = new PreviewFoundation(this.adapter);
+    this.previewGroupId = getUuidShort({
+      prefix: "semi-image-preview-group",
+      length: 4
+    });
+    this.previewRef = /*#__PURE__*/React.createRef();
+  }
+
+  get adapter() {
+    return Object.assign({}, super.adapter);
+  }
+
+  componentDidMount() {
+    const {
+      lazyLoadMargin
+    } = this.props;
+    const allElement = document.querySelectorAll(".".concat(prefixCls, "-img")); // use IntersectionObserver to lazy load image
+
+    const observer = 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;
+          observer.unobserve(item.target);
+        }
+      });
+    }, {
+      root: document.querySelector("#".concat(this.previewGroupId)),
+      rootMargin: lazyLoadMargin
+    });
+    allElement.forEach(item => observer.observe(item));
+  }
+
+  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;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      src,
+      style,
+      lazyLoad
+    } = _a,
+          restProps = __rest(_a, ["src", "style", "lazyLoad"]);
+
+    const {
+      currentIndex,
+      visible
+    } = this.state;
+    const {
+      srcListInChildren,
+      newChildren,
+      titles
+    } = this.loopImageIndex();
+    const srcArr = Array.isArray(src) ? src : typeof src === "string" ? [src] : [];
+    const finalSrcList = [...srcArr, ...srcListInChildren];
+    return /*#__PURE__*/React.createElement(PreviewContext.Provider, {
+      value: {
+        isGroup: finalSrcList.length > 1,
+        previewSrc: finalSrcList,
+        titles: titles,
+        currentIndex,
+        visible,
+        lazyLoad,
+        setCurrentIndex: this.handleCurrentIndexChange,
+        handleVisibleChange: this.handleVisibleChange
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      id: this.previewGroupId,
+      style: style,
+      className: "".concat(prefixCls, "-preview-group")
+    }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
+      ref: this.previewRef,
+      src: finalSrcList,
+      currentIndex: currentIndex,
+      visible: visible,
+      onVisibleChange: this.handleVisibleChange
+    })));
+  }
+
+}
+Preview.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  visible: PropTypes.bool,
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  currentIndex: PropTypes.number,
+  defaultIndex: PropTypes.number,
+  defaultVisible: PropTypes.bool,
+  maskClosable: PropTypes.bool,
+  closable: PropTypes.bool,
+  zoomStep: PropTypes.number,
+  infinite: PropTypes.bool,
+  showTooltip: PropTypes.bool,
+  closeOnEsc: PropTypes.bool,
+  prevTip: PropTypes.string,
+  nextTip: PropTypes.string,
+  zoomInTip: PropTypes.string,
+  zoomOutTip: PropTypes.string,
+  downloadTip: PropTypes.string,
+  adaptiveTip: PropTypes.string,
+  originTip: PropTypes.string,
+  lazyLoad: PropTypes.bool,
+  lazyLoadMargin: PropTypes.string,
+  preLoad: PropTypes.bool,
+  preLoadGap: PropTypes.number,
+  disableDownload: PropTypes.bool,
+  zIndex: PropTypes.number,
+  renderHeader: PropTypes.func,
+  renderPreviewMenu: PropTypes.func,
+  getPopupContainer: PropTypes.func,
+  onVisibleChange: PropTypes.func,
+  onChange: PropTypes.func,
+  onClose: PropTypes.func,
+  onZoomIn: PropTypes.func,
+  onZoomOut: PropTypes.func,
+  onPrev: PropTypes.func,
+  onNext: PropTypes.func,
+  onDownload: PropTypes.func,
+  onRatioChange: PropTypes.func,
+  onRotateChange: PropTypes.func
+};
+Preview.defaultProps = {
+  src: [],
+  lazyLoad: true,
+  lazyLoadMargin: "0px 100px 100px 0px"
+};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface PreviewContextProps {
+    isGroup: boolean;
+    lazyLoad: boolean;
+    previewSrc: string[];
+    titles: ReactNode[];
+    currentIndex: number;
+    visible: boolean;
+    setCurrentIndex: (current: number) => void;
+    handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
+}
+export declare const PreviewContext: import("react").Context<PreviewContextProps>;

package/lib/es/image/previewContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const PreviewContext = /*#__PURE__*/createContext({});

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

@@ -0,0 +1,62 @@
+/// <reference types="lodash" />
+import React, { ReactNode } from "react";
+import BaseComponent from "../_base/baseComponent";
+import { FooterProps } from "./interface";
+import PropTypes from "prop-types";
+import PreviewFooterFoundation, { PreviewFooterAdapter } from '@douyinfe/semi-foundation/lib/es/image/previewFooterFoundation';
+export default class Footer extends BaseComponent<FooterProps> {
+    static propTypes: {
+        curPage: PropTypes.Requireable<number>;
+        totalNum: PropTypes.Requireable<number>;
+        disabledPrev: PropTypes.Requireable<boolean>;
+        disabledNext: PropTypes.Requireable<boolean>;
+        disableDownload: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        zoom: PropTypes.Requireable<number>;
+        ratio: PropTypes.Requireable<string>;
+        prevTip: PropTypes.Requireable<string>;
+        nextTip: PropTypes.Requireable<string>;
+        zoomInTip: PropTypes.Requireable<string>;
+        zoomOutTip: PropTypes.Requireable<string>;
+        rotateTip: PropTypes.Requireable<string>;
+        downloadTip: PropTypes.Requireable<string>;
+        adaptiveTip: PropTypes.Requireable<string>;
+        originTip: PropTypes.Requireable<string>;
+        showTooltip: PropTypes.Requireable<boolean>;
+        onZoomIn: PropTypes.Requireable<(...args: any[]) => any>;
+        onZoomOut: PropTypes.Requireable<(...args: any[]) => any>;
+        onPrev: PropTypes.Requireable<(...args: any[]) => any>;
+        onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        onAdjustRatio: PropTypes.Requireable<(...args: any[]) => any>;
+        onRotateLeft: PropTypes.Requireable<(...args: any[]) => any>;
+        onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        min: number;
+        max: number;
+        step: number;
+        showTooltip: boolean;
+        disableDownload: boolean;
+    };
+    get adapter(): PreviewFooterAdapter<FooterProps>;
+    foundation: PreviewFooterFoundation;
+    constructor(props: FooterProps);
+    changeSliderValue: (type: string) => void;
+    handleMinusClick: () => void;
+    handlePlusClick: () => void;
+    handleRotateLeft: () => void;
+    handleRotateRight: () => void;
+    handleSlideChange: import("lodash").DebouncedFunc<(value: any) => void>;
+    handleRatioClick: () => void;
+    customRenderViewMenu: () => ReactNode;
+    getFinalIconElement: (element: ReactNode, content: ReactNode) => 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;
+    getIconMinus: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconPlus: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconRatio: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconRotate: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    getIconDownload: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    render(): JSX.Element;
+}

package/lib/es/image/previewFooter.js

@@ -0,0 +1,301 @@
+import _throttle from "lodash/throttle";
+import React from "react";
+import BaseComponent from "../_base/baseComponent";
+import { IconChevronLeft, IconChevronRight, IconMinus, IconPlus, IconRotate, IconDownload, IconWindowAdaptionStroked, IconRealSizeStroked } from "@douyinfe/semi-icons";
+import PropTypes from "prop-types";
+import Tooltip from "../tooltip";
+import Divider from "../divider";
+import Slider from "../slider";
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
+import cls from "classnames";
+import PreviewFooterFoundation from '@douyinfe/semi-foundation/lib/es/image/previewFooterFoundation';
+import LocaleConsumer from "../locale/localeConsumer";
+const prefixCls = cssClasses.PREFIX;
+const footerPrefixCls = "".concat(cssClasses.PREFIX, "-preview-footer");
+let mouseActiveTime = 0;
+export default class Footer extends BaseComponent {
+  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,
+        max,
+        step,
+        curPage,
+        totalNum,
+        ratio,
+        zoom,
+        disabledPrev,
+        disabledNext,
+        disableDownload,
+        onNext,
+        onPrev,
+        onDownload,
+        renderPreviewMenu
+      } = this.props;
+      const props = {
+        min,
+        max,
+        step,
+        curPage,
+        totalNum,
+        ratio,
+        zoom,
+        disabledPrev,
+        disabledNext,
+        disableDownload,
+        onNext,
+        onPrev,
+        onDownload,
+        onRotateLeft: this.handleRotateLeft,
+        onRotateRight: this.handleRotateRight,
+        disabledZoomIn: zoom === max,
+        disabledZoomOut: zoom === min,
+        onRatioClick: this.handleRatioClick,
+        onZoomIn: this.handlePlusClick,
+        onZoomOut: this.handleMinusClick
+      };
+      return renderPreviewMenu(props);
+    }; // According to showTooltip in props, decide whether to use Tooltip to pack a layer
+    // 根据 props 中的 showTooltip 决定是否使用 Tooltip 包一层
+
+
+    this.getFinalIconElement = (element, content) => {
+      const {
+        showTooltip
+      } = this.props;
+      return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: content
+      }, element) : element;
+    };
+
+    this.getLocalTextByKey = key => /*#__PURE__*/React.createElement(LocaleConsumer, {
+      componentName: "Image"
+    }, locale => locale[key]);
+
+    this.getIconChevronLeft = () => {
+      const {
+        disabledPrev,
+        onPrev,
+        prevTip
+      } = this.props;
+      const icon = /*#__PURE__*/React.createElement(IconChevronLeft, {
+        size: "large",
+        className: disabledPrev ? "".concat(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.createElement(IconChevronRight, {
+        size: "large",
+        className: disabledNext ? "".concat(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,
+        zoom,
+        min
+      } = this.props;
+      const disabledZoomOut = zoom === min;
+      const icon = /*#__PURE__*/React.createElement(IconMinus, {
+        size: "large",
+        onClick: !disabledZoomOut ? this.handleMinusClick : undefined,
+        className: disabledZoomOut ? "".concat(footerPrefixCls, "-disabled") : ""
+      });
+      const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconPlus = () => {
+      const {
+        zoomInTip,
+        zoom,
+        max
+      } = this.props;
+      const disabledZoomIn = zoom === max;
+      const icon = /*#__PURE__*/React.createElement(IconPlus, {
+        size: "large",
+        onClick: !disabledZoomIn ? this.handlePlusClick : undefined,
+        className: disabledZoomIn ? "".concat(footerPrefixCls, "-disabled") : ""
+      });
+      const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
+      return this.getFinalIconElement(icon, content);
+    };
+
+    this.getIconRatio = () => {
+      const {
+        ratio,
+        originTip,
+        adaptiveTip
+      } = this.props;
+      const props = {
+        size: "large",
+        className: cls("".concat(footerPrefixCls, "-gap")),
+        onClick: this.handleRatioClick
+      };
+      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
+      } = this.props;
+      const icon = /*#__PURE__*/React.createElement(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.createElement(IconDownload, {
+        size: "large",
+        onClick: !disableDownload ? onDownload : undefined,
+        className: cls("".concat(footerPrefixCls, "-gap"), {
+          ["".concat(footerPrefixCls, "-disabled")]: disableDownload
+        })
+      });
+      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,
+      max,
+      step,
+      curPage,
+      totalNum,
+      zoom,
+      showTooltip,
+      className,
+      renderPreviewMenu
+    } = this.props;
+
+    if (renderPreviewMenu) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(footerPrefixCls, "-wrapper")
+      }, this.customRenderViewMenu());
+    }
+
+    return /*#__PURE__*/React.createElement("section", {
+      className: cls(footerPrefixCls, "".concat(footerPrefixCls, "-wrapper"), className)
+    }, this.getIconChevronLeft(), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(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 => "".concat(v, "%"),
+      tooltipVisible: showTooltip ? undefined : false,
+      onChange: this.handleSlideChange
+    }), this.getIconPlus(), this.getIconRatio(), /*#__PURE__*/React.createElement(Divider, {
+      layout: "vertical"
+    }), this.getIconRotate(), this.getIconDownload());
+  }
+
+}
+Footer.propTypes = {
+  curPage: PropTypes.number,
+  totalNum: PropTypes.number,
+  disabledPrev: PropTypes.bool,
+  disabledNext: PropTypes.bool,
+  disableDownload: PropTypes.bool,
+  className: PropTypes.string,
+  zoom: PropTypes.number,
+  ratio: PropTypes.string,
+  prevTip: PropTypes.string,
+  nextTip: PropTypes.string,
+  zoomInTip: PropTypes.string,
+  zoomOutTip: PropTypes.string,
+  rotateTip: PropTypes.string,
+  downloadTip: PropTypes.string,
+  adaptiveTip: PropTypes.string,
+  originTip: PropTypes.string,
+  showTooltip: PropTypes.bool,
+  onZoomIn: PropTypes.func,
+  onZoomOut: PropTypes.func,
+  onPrev: PropTypes.func,
+  onNext: PropTypes.func,
+  onAdjustRatio: PropTypes.func,
+  onRotateLeft: PropTypes.func,
+  onDownload: PropTypes.func
+};
+Footer.defaultProps = {
+  min: 10,
+  max: 500,
+  step: 10,
+  showTooltip: false,
+  disableDownload: false
+};

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { HeaderProps } from "./interface";
+declare const Header: React.FC<HeaderProps>;
+export default Header;