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

package/lib/cjs/button/Button.d.ts

@@ -48,7 +48,7 @@ export default class Button extends PureComponent<ButtonProps> {
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
-        type: PropTypes.Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/button/index.d.ts

@@ -23,7 +23,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
         size: import("prop-types").Requireable<"default" | "small" | "large">;
-        type: import("prop-types").Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/cjs/carousel/CarouselIndicator.d.ts

@@ -8,7 +8,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
         position: PropTypes.Requireable<"left" | "right" | "center">;
         size: PropTypes.Requireable<"small" | "medium">;
         style: PropTypes.Requireable<object>;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         total: PropTypes.Requireable<number>;
         onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<"line" | "dot" | "columnar">;

package/lib/cjs/carousel/index.d.ts

@@ -22,7 +22,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
         indicatorSize: PropTypes.Requireable<"small" | "medium">;
         indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         arrowType: PropTypes.Requireable<"hover" | "always">;
         showArrow: PropTypes.Requireable<boolean>;

package/lib/cjs/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/cjs/datePicker/datePicker.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/cjs/image/image.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import BaseComponent from "../_base/baseComponent";
+import { ImageProps, ImageStates } from "./interface";
+import PropTypes from "prop-types";
+import '@douyinfe/semi-foundation/lib/cjs/image/image.css';
+import { PreviewContextProps } from "./previewContext";
+import ImageFoundation, { ImageAdapter } from '@douyinfe/semi-foundation/lib/cjs/image/imageFoundation';
+export default class Image extends BaseComponent<ImageProps, ImageStates> {
+    static isSemiImage: boolean;
+    static contextType: React.Context<PreviewContextProps>;
+    static propTypes: {
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        src: PropTypes.Requireable<string>;
+        width: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<string | number>;
+        alt: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        fallback: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        preview: PropTypes.Requireable<boolean | object>;
+        onLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        crossOrigin: PropTypes.Requireable<string>;
+        imageID: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        preview: boolean;
+    };
+    get adapter(): ImageAdapter<ImageProps, ImageStates>;
+    context: PreviewContextProps;
+    foundation: ImageFoundation;
+    constructor(props: ImageProps);
+    static getDerivedStateFromProps(props: ImageProps, state: ImageStates): Partial<ImageStates>;
+    isInGroup(): boolean;
+    isLazyLoad(): boolean;
+    handleClick: (e: any) => void;
+    handleLoaded: (e: any) => void;
+    handleError: (e: any) => void;
+    handlePreviewVisibleChange: (visible: boolean) => void;
+    renderDefaultLoading: () => JSX.Element;
+    renderDefaultError: () => JSX.Element;
+    renderLoad: () => JSX.Element;
+    renderError: () => JSX.Element;
+    renderExtra: () => JSX.Element;
+    getLocalTextByKey: (key: string) => JSX.Element;
+    renderMask: () => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/cjs/image/image.js

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _previewInner = _interopRequireDefault(require("./previewInner"));
+
+require("@douyinfe/semi-foundation/lib/cjs/image/image.css");
+
+var _previewContext = require("./previewContext");
+
+var _imageFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/imageFoundation"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _skeleton = _interopRequireDefault(require("../skeleton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class Image extends _baseComponent.default {
+  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,
+        height
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement(_skeleton.default.Image, {
+        style: {
+          width,
+          height
+        }
+      });
+    };
+
+    this.renderDefaultError = () => {
+      const prefixClsName = "".concat(prefixCls, "-status");
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixClsName
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconUploadError, {
+        size: "extra-large"
+      }));
+    };
+
+    this.renderLoad = () => {
+      const prefixClsName = "".concat(prefixCls, "-status");
+      const {
+        placeholder
+      } = this.props;
+      return placeholder ? /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixClsName
+      }, placeholder) : this.renderDefaultLoading();
+    };
+
+    this.renderError = () => {
+      const {
+        fallback
+      } = this.props;
+      const prefixClsName = "".concat(prefixCls, "-status");
+      const fallbackNode = typeof fallback === "string" ? /*#__PURE__*/_react.default.createElement("img", {
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        src: fallback,
+        alt: "fallback"
+      }) : fallback;
+      return fallback ? /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixClsName
+      }, fallbackNode) : this.renderDefaultError();
+    };
+
+    this.renderExtra = () => {
+      const {
+        loadStatus
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-overlay")
+      }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
+    };
+
+    this.getLocalTextByKey = key => /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Image"
+    }, locale => locale[key]);
+
+    this.renderMask = () => /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-mask")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-mask-info")
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, {
+      size: "extra-large"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-mask-info-text")
+    }, this.getLocalTextByKey("preview"))));
+
+    this.state = {
+      src: "",
+      loadStatus: "loading",
+      previewVisible: false
+    };
+    this.foundation = new _imageFoundation.default(this.adapter);
+  }
+
+  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";
+    }
+
+    return willUpdateStates;
+  }
+
+  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 {
+      width,
+      height,
+      alt,
+      style,
+      className,
+      crossOrigin,
+      preview
+    } = this.props;
+    const outerStyle = Object.assign({
+      width,
+      height
+    }, style);
+    const outerCls = (0, _classnames.default)(prefixCls, className);
+    const canPreview = loadStatus === "success" && preview && !this.isInGroup();
+    const showPreviewCursor = preview && loadStatus === "success";
+    const previewSrc = (0, _isObject2.default)(preview) ? (_a = preview.src) !== null && _a !== void 0 ? _a : src : src;
+    const previewProps = (0, _isObject2.default)(preview) ? preview : {};
+    return (
+      /*#__PURE__*/
+      // eslint-disable jsx-a11y/no-static-element-interactions
+      // eslint-disable jsx-a11y/click-events-have-key-events
+      _react.default.createElement("div", {
+        style: outerStyle,
+        className: outerCls,
+        onClick: this.handleClick
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
+        "data-src": src,
+        alt: alt,
+        className: (0, _classnames.default)("".concat(prefixCls, "-img"), {
+          ["".concat(prefixCls, "-img-preview")]: showPreviewCursor,
+          ["".concat(prefixCls, "-img-error")]: loadStatus === "error"
+        }),
+        width: width,
+        height: height,
+        crossOrigin: crossOrigin,
+        onError: this.handleError,
+        onLoad: this.handleLoaded
+      }), loadStatus !== "success" && this.renderExtra(), canPreview && /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, previewProps, {
+        src: previewSrc,
+        visible: previewVisible,
+        onVisibleChange: this.handlePreviewVisibleChange
+      })))
+    );
+  }
+
+}
+
+exports.default = Image;
+Image.isSemiImage = true;
+Image.contextType = _previewContext.PreviewContext;
+Image.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  src: _propTypes.default.string,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  alt: _propTypes.default.string,
+  placeholder: _propTypes.default.node,
+  fallback: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  preview: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  onLoad: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  crossOrigin: _propTypes.default.string,
+  imageID: _propTypes.default.number
+};
+Image.defaultProps = {
+  preview: true
+};

package/lib/cjs/image/index.d.ts

@@ -0,0 +1,6 @@
+import Image from "./image";
+import PreviewInner from "./previewInner";
+import Preview from "./preview";
+export default Image;
+export { PreviewInner, Preview, };
+export { ImageProps, PreviewImageProps, PreviewProps, } from "./interface";

package/lib/cjs/image/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Preview", {
+  enumerable: true,
+  get: function () {
+    return _preview.default;
+  }
+});
+Object.defineProperty(exports, "PreviewInner", {
+  enumerable: true,
+  get: function () {
+    return _previewInner.default;
+  }
+});
+exports.default = void 0;
+
+var _image = _interopRequireDefault(require("./image"));
+
+var _previewInner = _interopRequireDefault(require("./previewInner"));
+
+var _preview = _interopRequireDefault(require("./preview"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _image.default;
+exports.default = _default;

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

@@ -0,0 +1,178 @@
+import { ReactNode } from "react";
+import { BaseProps } from "_base/baseComponent";
+import React from "react";
+export interface ImageStates {
+    src: string;
+    loadStatus: "loading" | "success" | "error";
+    previewVisible: boolean;
+}
+export interface ImageProps extends BaseProps {
+    src?: string;
+    width?: string | number;
+    height?: string | number;
+    alt?: string;
+    placeholder?: ReactNode;
+    fallback?: string | ReactNode;
+    preview?: boolean | PreviewProps;
+    onError?: (event: Event) => void;
+    onLoad?: (event: Event) => void;
+    crossOrigin?: "anonymous" | "use-credentials";
+    children?: ReactNode;
+    imageID?: number;
+}
+export interface PreviewProps extends BaseProps {
+    visible?: boolean;
+    src?: string | string[];
+    previewTitle?: ReactNode;
+    currentIndex?: number;
+    defaultIndex?: number;
+    defaultVisible?: boolean;
+    maskClosable?: boolean;
+    closable?: boolean;
+    zoomStep?: number;
+    infinite?: boolean;
+    showTooltip?: boolean;
+    closeOnEsc?: boolean;
+    prevTip?: string;
+    nextTip?: string;
+    zoomInTip?: string;
+    zoomOutTip?: string;
+    rotateTip?: string;
+    downloadTip?: string;
+    adaptiveTip?: string;
+    originTip?: string;
+    lazyLoad?: boolean;
+    lazyLoadMargin?: string;
+    preLoad?: boolean;
+    preLoadGap?: number;
+    viewerVisibleDelay?: number;
+    disableDownload?: boolean;
+    zIndex?: number;
+    children?: ReactNode;
+    renderHeader?: (info: any) => ReactNode;
+    renderPreviewMenu?: (props: MenuProps) => ReactNode;
+    getPopupContainer?: () => HTMLElement;
+    onVisibleChange?: (visible: boolean) => void;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+    onZoomIn?: (zoom: number) => void;
+    onZoomOut?: (zoom: number) => void;
+    onPrev?: (index: number) => void;
+    onNext?: (index: number) => void;
+    onRatioChange?: (type: RatioType) => void;
+    onRotateChange?: (angle: number) => void;
+    onDownload?: (src: string, index: number) => void;
+}
+export interface MenuProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    curPage?: number;
+    totalNum?: number;
+    zoom?: number;
+    ratio?: RatioType;
+    disabledPrev?: boolean;
+    disabledNext?: boolean;
+    disableDownload?: boolean;
+    onDownload?: () => void;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onRatioClick?: () => void;
+    onRotateLeft?: () => void;
+    onRotateRight?: () => void;
+}
+export declare type RatioType = "adaptation" | "realSize";
+export interface PreviewInnerStates {
+    imgSrc?: string[];
+    imgLoadStatus?: Map<string, boolean>;
+    zoom?: number;
+    rotation?: number;
+    ratio?: RatioType;
+    currentIndex?: number;
+    viewerVisible?: boolean;
+    visible?: boolean;
+    preloadAfterVisibleChange?: boolean;
+    direction?: string;
+}
+export interface SliderProps {
+    max?: number;
+    min?: number;
+    step?: number;
+}
+export interface HeaderProps {
+    renderHeader?: (info: any) => ReactNode;
+    title?: string;
+    titleStyle?: React.CSSProperties;
+    className?: string;
+    onClose?: () => void;
+}
+export interface FooterProps extends SliderProps {
+    curPage?: number;
+    totalNum?: number;
+    disabledPrev?: boolean;
+    disabledNext?: boolean;
+    disableDownload?: boolean;
+    className?: string;
+    zoom?: number;
+    ratio?: RatioType;
+    prevTip?: string;
+    nextTip?: string;
+    zoomInTip?: string;
+    zoomOutTip?: string;
+    rotateTip?: string;
+    downloadTip?: string;
+    adaptiveTip?: string;
+    originTip?: string;
+    showTooltip?: boolean;
+    onZoomIn?: (zoom: number) => void;
+    onZoomOut?: (zoom: number) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    onAdjustRatio?: (type: RatioType) => void;
+    onRotate?: (direction: string) => void;
+    onDownload?: () => void;
+    renderPreviewMenu?: (props: MenuProps) => ReactNode;
+}
+export interface PreviewImageProps {
+    src?: string;
+    rotation?: number;
+    style?: React.CSSProperties;
+    maxZoom?: number;
+    minZoom?: number;
+    zoomStep?: number;
+    zoom?: number;
+    ratio?: RatioType;
+    disableDownload?: boolean;
+    clickZoom?: number;
+    setRatio?: (type: RatioType) => void;
+    onZoom?: (zoom: number) => void;
+    onLoad?: (src: string) => void;
+    onError?: (src: string) => void;
+}
+export interface ImageOffset {
+    x: number;
+    y: number;
+}
+export interface PreviewImageStates {
+    loading: boolean;
+    width: number;
+    height: number;
+    offset: ImageOffset;
+    currZoom: number;
+    top: number;
+    left: number;
+}
+export interface DragDirection {
+    canDragVertical: boolean;
+    canDragHorizontal: boolean;
+}
+export interface ExtremeBounds {
+    left: number;
+    top: number;
+}
+export interface PreviewState {
+    currentIndex: number;
+    visible: boolean;
+}

package/lib/cjs/image/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/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/cjs/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;
+}