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

package/lib/cjs/image/previewInner.js

@@ -0,0 +1,443 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+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 _portal = _interopRequireDefault(require("../_portal"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _previewHeader = _interopRequireDefault(require("./previewHeader"));
+
+var _previewFooter = _interopRequireDefault(require("./previewFooter"));
+
+var _previewImage = _interopRequireDefault(require("./previewImage"));
+
+var _previewInnerFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewInnerFoundation"));
+
+var _previewContext = require("./previewContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+const prefixCls = _constants.cssClasses.PREFIX;
+let startMouseDown = {
+  x: 0,
+  y: 0
+};
+let mouseActiveTime = null;
+let stopTiming = false;
+let timer = null; // let bodyOverflowValue = document.body.style.overflow;
+
+class PreviewInner extends _baseComponent.default {
+  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);
+    };
+
+    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.handleRatio = type => {
+      this.foundation.handleRatio(type);
+    };
+
+    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.default(this.adapter);
+  }
+
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      getIsInGroup: () => this.isInGroup(),
+      notifyChange: index => {
+        const {
+          onChange
+        } = this.props;
+        (0, _isFunction2.default)(onChange) && onChange(index);
+      },
+      notifyZoom: (zoom, increase) => {
+        const {
+          onZoomIn,
+          onZoomOut
+        } = this.props;
+
+        if (increase) {
+          (0, _isFunction2.default)(onZoomIn) && onZoomIn(zoom);
+        } else {
+          (0, _isFunction2.default)(onZoomOut) && onZoomOut(zoom);
+        }
+      },
+      notifyClose: () => {
+        const {
+          onClose
+        } = this.props;
+        (0, _isFunction2.default)(onClose) && onClose();
+      },
+      notifyVisibleChange: visible => {
+        const {
+          onVisibleChange
+        } = this.props;
+        (0, _isFunction2.default)(onVisibleChange) && onVisibleChange(visible);
+      },
+      notifyRatioChange: type => {
+        const {
+          onRatioChange
+        } = this.props;
+        (0, _isFunction2.default)(onRatioChange) && onRatioChange(type);
+      },
+      notifyRotateChange: angle => {
+        const {
+          onRotateChange
+        } = this.props;
+        (0, _isFunction2.default)(onRotateChange) && onRotateChange(angle);
+      },
+      notifyDownload: (src, index) => {
+        const {
+          onDownload
+        } = this.props;
+        (0, _isFunction2.default)(onDownload) && onDownload(src, index);
+      },
+      registerKeyDownListener: () => {
+        window && window.addEventListener("keydown", this.handleKeyDown);
+      },
+      unregisterKeyDownListener: () => {
+        window && window.removeEventListener("keydown", this.handleKeyDown);
+      },
+      getMouseActiveTime: () => {
+        return mouseActiveTime;
+      },
+      getStopTiming: () => {
+        return stopTiming;
+      },
+      setStopTiming: value => {
+        stopTiming = value;
+      },
+      getStartMouseDown: () => {
+        return startMouseDown;
+      },
+      setStartMouseDown: (x, y) => {
+        startMouseDown = {
+          x,
+          y
+        };
+      },
+      setMouseActiveTime: time => {
+        mouseActiveTime = time;
+      }
+    });
+  }
+
+  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 (!(0, _isEqual2.default)(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;
+    }
+
+    return willUpdateStates;
+  }
+
+  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
+
+
+    if (!prevProps.visible && this.props.visible) {
+      this.foundation.beforeShow();
+    } // 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,
+      zIndex,
+      visible,
+      className,
+      style,
+      infinite,
+      zoomStep,
+      prevTip,
+      nextTip,
+      zoomInTip,
+      zoomOutTip,
+      rotateTip,
+      downloadTip,
+      adaptiveTip,
+      originTip,
+      showTooltip,
+      disableDownload,
+      renderPreviewMenu,
+      renderHeader
+    } = this.props;
+    const {
+      currentIndex,
+      imgSrc,
+      zoom,
+      ratio,
+      rotation,
+      viewerVisible
+    } = this.state;
+    let wrapperStyle = {
+      zIndex
+    };
+
+    if (getPopupContainer) {
+      wrapperStyle = {
+        zIndex,
+        position: "static"
+      };
+    }
+
+    const previewPrefixCls = "".concat(prefixCls, "-preview");
+    const previewWrapperCls = (0, _classnames.default)(previewPrefixCls, {
+      ["".concat(prefixCls, "-hide")]: !visible,
+      ["".concat(previewPrefixCls, "-popup")]: getPopupContainer
+    }, className);
+    const hideViewerCls = !viewerVisible ? "".concat(previewPrefixCls, "-hide") : "";
+    const total = imgSrc.length;
+    const showPrev = total !== 1 && (infinite || currentIndex !== 0);
+    const showNext = total !== 1 && (infinite || currentIndex !== total - 1);
+    return /*#__PURE__*/_react.default.createElement(_portal.default, {
+      getPopupContainer: getPopupContainer,
+      style: wrapperStyle
+    }, visible &&
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      className: previewWrapperCls,
+      style: style,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
+      onMouseMove: this.handleMouseMove,
+      onMouseOver: e => this.handleMouseEvent(e, "over"),
+      onMouseOut: e => this.handleMouseEvent(e, "out")
+    }, /*#__PURE__*/_react.default.createElement(_previewHeader.default, {
+      className: (0, _classnames.default)(hideViewerCls),
+      onClose: this.handlePreviewClose,
+      renderHeader: renderHeader
+    }), /*#__PURE__*/_react.default.createElement(_previewImage.default, {
+      src: imgSrc[currentIndex],
+      onZoom: this.handleZoomImage,
+      disableDownload: disableDownload,
+      setRatio: this.handleRatio,
+      zoom: zoom,
+      ratio: ratio,
+      zoomStep: zoomStep,
+      rotation: rotation,
+      onError: this.onImageError,
+      onLoad: this.onImageLoad
+    }), showPrev &&
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-prev"), hideViewerCls),
+      onClick: () => this.handleSwitchImage("prev")
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconArrowLeft, {
+      size: "large"
+    })), showNext &&
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-next"), hideViewerCls),
+      onClick: () => this.handleSwitchImage("next")
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconArrowRight, {
+      size: "large"
+    })), /*#__PURE__*/_react.default.createElement(_previewFooter.default, {
+      className: hideViewerCls,
+      totalNum: total,
+      curPage: currentIndex + 1,
+      disabledPrev: !showPrev,
+      disabledNext: !showNext,
+      zoom: zoom * 100,
+      step: zoomStep * 100,
+      showTooltip: showTooltip,
+      ratio: ratio,
+      prevTip: prevTip,
+      nextTip: nextTip,
+      zoomInTip: zoomInTip,
+      zoomOutTip: zoomOutTip,
+      rotateTip: rotateTip,
+      downloadTip: downloadTip,
+      disableDownload: disableDownload,
+      adaptiveTip: adaptiveTip,
+      originTip: originTip,
+      onPrev: () => this.handleSwitchImage("prev"),
+      onNext: () => this.handleSwitchImage("next"),
+      onZoomIn: this.handleZoomImage,
+      onZoomOut: this.handleZoomImage,
+      onDownload: this.handleDownload,
+      onRotate: this.handleRotateImage,
+      onAdjustRatio: this.handleAdjustRatio,
+      renderPreviewMenu: renderPreviewMenu
+    })));
+  }
+
+}
+
+exports.default = PreviewInner;
+PreviewInner.contextType = _previewContext.PreviewContext;
+PreviewInner.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  visible: _propTypes.default.bool,
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  currentIndex: _propTypes.default.number,
+  defaultIndex: _propTypes.default.number,
+  defaultVisible: _propTypes.default.bool,
+  maskClosable: _propTypes.default.bool,
+  closable: _propTypes.default.bool,
+  zoomStep: _propTypes.default.number,
+  infinite: _propTypes.default.bool,
+  showTooltip: _propTypes.default.bool,
+  closeOnEsc: _propTypes.default.bool,
+  prevTip: _propTypes.default.string,
+  nextTip: _propTypes.default.string,
+  zoomInTip: _propTypes.default.string,
+  zoomOutTip: _propTypes.default.string,
+  downloadTip: _propTypes.default.string,
+  adaptiveTip: _propTypes.default.string,
+  originTip: _propTypes.default.string,
+  lazyLoad: _propTypes.default.bool,
+  preLoad: _propTypes.default.bool,
+  preLoadGap: _propTypes.default.number,
+  disableDownload: _propTypes.default.bool,
+  viewerVisibleDelay: _propTypes.default.number,
+  zIndex: _propTypes.default.number,
+  renderHeader: _propTypes.default.func,
+  renderPreviewMenu: _propTypes.default.func,
+  getPopupContainer: _propTypes.default.func,
+  onVisibleChange: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+  onZoomIn: _propTypes.default.func,
+  onZoomOut: _propTypes.default.func,
+  onPrev: _propTypes.default.func,
+  onNext: _propTypes.default.func,
+  onDownload: _propTypes.default.func,
+  onRatioChange: _propTypes.default.func,
+  onRotateChange: _propTypes.default.func
+};
+PreviewInner.defaultProps = {
+  showTooltip: false,
+  zoomStep: 0.1,
+  infinite: false,
+  closeOnEsc: true,
+  lazyLoad: false,
+  preLoad: true,
+  preLoadGap: 2,
+  zIndex: 1000,
+  maskClosable: true,
+  viewerVisibleDelay: 10000
+};

package/lib/cjs/index.d.ts

@@ -79,3 +79,5 @@ export { default as Transfer } from './transfer';
 export { default as LocaleProvider } from './locale/localeProvider';
 /** 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/cjs/index.js

@@ -201,6 +201,18 @@ Object.defineProperty(exports, "IconButton", {
     return _iconButton.default;
   }
 });
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "ImagePreview", {
+  enumerable: true,
+  get: function () {
+    return _image.Preview;
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () {
@@ -698,6 +710,8 @@ var _localeProvider = _interopRequireDefault(require("./locale/localeProvider"))
 
 var _form = require("./form");
 
+var _image = _interopRequireWildcard(require("./image"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -151,4 +151,17 @@ export interface Locale {
     Form: {
         optional: string;
     };
+    Image: {
+        preview: string;
+        loading: string;
+        loadError: string;
+        prevTip: string;
+        nextTip: string;
+        zoomInTip: string;
+        zoomOutTip: string;
+        rotateTip: string;
+        downloadTip: string;
+        adaptiveTip: string;
+        originTip: string;
+    };
 }

package/lib/cjs/locale/source/ar.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(اختياري)'
+  },
+  Image: {
+    preview: 'معاينة',
+    loading: 'جار التحميل',
+    loadError: 'فشل في التحميل',
+    prevTip: "السابق",
+    nextTip: "التالي",
+    zoomInTip: "تكبير",
+    zoomOutTip: "تصغير",
+    rotateTip: "استدارة",
+    downloadTip: "تنزيل",
+    adaptiveTip: "التكيف مع الصفحة",
+    originTip: "الحجم الأصلي"
   }
 }; // [i18n-Arabic]
 

package/lib/cjs/locale/source/de.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(Optional)'
+  },
+  Image: {
+    preview: 'Vorschau',
+    loading: 'Wird geladen',
+    loadError: 'Laden fehlgeschlagen',
+    prevTip: 'Zurück',
+    nextTip: 'Weiter',
+    zoomInTip: 'Vergrößern',
+    zoomOutTip: 'herauszoomen',
+    rotateTip: 'Drehen',
+    downloadTip: 'herunterladen',
+    adaptiveTip: 'An die Seite anpassen',
+    originTip: 'Originalgröße'
   }
 }; // [i18n-German]
 

package/lib/cjs/locale/source/en_GB.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(optional)'
+  },
+  Image: {
+    preview: 'Preview',
+    loading: 'Loading',
+    loadError: 'Failed to load',
+    prevTip: 'Previous',
+    nextTip: 'Next',
+    zoomInTip: 'Zoom in',
+    zoomOutTip: 'Zoom out',
+    rotateTip: 'Rotate',
+    downloadTip: 'Download',
+    adaptiveTip: 'Adapt to the page',
+    originTip: 'Original size'
   }
 }; // [i18n-English(GB)]
 

package/lib/cjs/locale/source/en_US.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(optional)'
+  },
+  Image: {
+    preview: 'Preview',
+    loading: 'Loading',
+    loadError: 'Failed to load',
+    prevTip: 'Previous',
+    nextTip: 'Next',
+    zoomInTip: 'Zoom in',
+    zoomOutTip: 'Zoom out',
+    rotateTip: 'Rotate',
+    downloadTip: 'Download',
+    adaptiveTip: 'Adapt to the page',
+    originTip: 'Original size'
   }
 }; // [i18n-English(US)]
 

package/lib/cjs/locale/source/es.js

@@ -162,6 +162,19 @@ const locale = {
   },
   Form: {
     optional: '(opcional)'
+  },
+  Image: {
+    preview: 'Avance',
+    loading: 'Cargando',
+    loadError: 'Falló al cargar',
+    prevTip: 'Anterior',
+    nextTip: 'Siguiente',
+    zoomInTip: 'Acercar',
+    zoomOutTip: 'alejar',
+    rotateTip: 'Rotar',
+    downloadTip: 'descargar',
+    adaptiveTip: 'Adaptarse a la página',
+    originTip: 'Tamaño original'
   }
 };
 var _default = locale;

package/lib/cjs/locale/source/fr.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(optionnel)'
+  },
+  Image: {
+    preview: 'Aperçu',
+    loading: 'Chargement',
+    loadError: 'Échec du chargement',
+    prevTip: 'Précédent',
+    nextTip: 'Suivant',
+    zoomInTip: 'Zoom avant',
+    zoomOutTip: 'Zoom arrière',
+    rotateTip: 'Rotation',
+    downloadTip: 'Télécharger',
+    adaptiveTip: 'Adapter à la page',
+    originTip: 'Taille d\'origine'
   }
 }; // [i18n-French]
 

package/lib/cjs/locale/source/id_ID.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(opsional)'
+  },
+  Image: {
+    preview: 'Pratinjau',
+    loading: 'Memuat',
+    loadError: 'Gagal untuk memuat',
+    prevTip: 'Sebelumnya',
+    nextTip: 'Selanjutnya',
+    zoomInTip: 'Memperbesar',
+    zoomOutTip: 'memperkecil',
+    rotateTip: 'Putar',
+    downloadTip: 'unduh',
+    adaptiveTip: 'Beradaptasi dengan halaman',
+    originTip: 'Ukuran asli'
   }
 }; // [i18n-Indonesia(ID)]
 

package/lib/cjs/locale/source/it.js

@@ -158,6 +158,19 @@ const local = {
   },
   Form: {
     optional: '(opzionale)'
+  },
+  Image: {
+    preview: 'Anteprima',
+    loading: 'Caricamento in corso',
+    loadError: 'Caricamento fallito',
+    prevTip: 'Precedente',
+    nextTip: 'Avanti',
+    zoomInTip: 'Ingrandisci',
+    zoomOutTip: 'rimpicciolisci',
+    rotateTip: 'Ruota',
+    downloadTip: 'scarica',
+    adaptiveTip: 'Adatta alla pagina',
+    originTip: 'Formato originale'
   }
 }; // [i18n-Italian]
 

package/lib/cjs/locale/source/ja_JP.js

@@ -159,6 +159,19 @@ const local = {
   },
   Form: {
     optional: '(オプション)'
+  },
+  Image: {
+    preview: 'プレビュー',
+    loading: '読み込み中',
+    loadError: '読み込みに失敗しました',
+    prevTip: '前へ',
+    nextTip: '次へ',
+    zoomInTip: 'ズームイン',
+    zoomOutTip: 'ズームアウト',
+    rotateTip: '回転',
+    downloadTip: 'ダウンロード',
+    adaptiveTip: 'ページに適応',
+    originTip: '元のサイズ'
   }
 }; // [i18n-Japan]